전단 개발 에서 어떤 요소 가 페이지 를 멈 추 게 할 수 있 습 니까?
15137 단어 성능 최적화
전단 페이지 가 끊 기 는 원인 은 여러 가지 가 있 습 니 다. 렌 더 링 체제 와 운영 에 있어 두 가지 로 나 눌 수 있 습 니 다. 각각:
렌 더 링 이 제때에 이 루어 지지 않 아 페이지 가 프레임 이 떨 어 졌 다.
js 스 레 드 페이지 의 환류 와 재 그리 기 를 장시간 사용 하 는 자원 로드 블록
메모리 가 너무 커서 페이지 가 끊 겼 습 니 다.
메모리 누 출 로 메모리 가 너무 크다.
과장 하 다
1. js 스 레 드 를 장시간 점용 합 니 다.
브 라 우 저 는 js 스 레 드 와 GUI 스 레 드 를 포함 하고 이들 은 서로 배척 합 니 다. js 스 레 드 를 장시간 사용 할 때 렌 더 링 이 제때에 이 루어 지지 않 아 페이지 가 끊 길 수 있 습 니 다.
실례 1:
document.body.html(' ');
//
$.ajax({
url: '',
async: false
})
// ajax ， 동기 화 방식 으로 데 이 터 를 가 져 오 면 gui 스 레 드 가 걸 리 고 데이터 가 돌아 온 후에 렌 더 링 을 실행 합 니 다.
실례 2:
function a (){
// arr
arr.forEach(item => {
...
})
}
let inputDom = document.getElementById('input')
let arr = document.getElementsByClassName('.tag')
input.onchange = a계산 시간 이 너무 길 어서 페이지 렌 더 링 이 제때에 이 루어 지지 않 습 니 다.
렌 더 링 이 제때에 이 루어 지지 않 은 이유:
브 라 우 저의 렌 더 링 빈 도 는 보통 60HZ 입 니 다. 즉, 1 프레임 을 요구 하 는 시간 은 1s / 60 = 16.67ms 입 니 다. 브 라 우 저가 페이지 를 표시 할 때 js 논 리 를 처리 하고 렌 더 링 을 해 야 합 니 다. 모든 실행 세 션 은 16.67ms 를 초과 해 서 는 안 됩 니 다.실제로 브 라 우 저 커 널 자체 지지 시스템 이 작 동 하 는 데 도 시간 이 걸 리 기 때문에 우리 에 게 남 겨 진 시간 차 는 10ms 에 불과 하 다.
일반적인 최적화 방식:
function Task(){
this.tasks = [];
}
//
Task.prototype.addTask = function(task){
this.tasks.push(task);
};
// task
Task.prototype.draw = function(){
var that = this;
window.requestAnimationFrame(function(){
var tasks = that.tasks; if(tasks.length){
var task = tasks.shift();
task();
}
window.requestAnimationFrame(function(){that.draw.call(that)});
});
};2. 페이지 리 셋 과 리 셋 이 많 음
실례:
최적화 하기 전에
for(var i = 0; i < childs.length; i++){
childs.style.width = node.offsetWidth + "px";
}최적화 후
var width = node.offsetWidth;for(var i = 0; i < childs.length; i++){
childs.style.width = width + "px";
}3, 자원 로드 블록
1. 메모리 누 출 로 인 한 메모리 과 다
브 라 우 저 는 자체 적 인 쓰레기 회수 체 제 를 가지 고 있 습 니 다. 주류 쓰레기 회수 체 제 는 태그 제거 입 니 다. 그러나 ie 에서 원생 dom 을 방문 하면 인용 계수 방식 체 제 를 사용 합 니 다. 만약 에 유 휴 메모리 가 제때에 회수 되 지 못 하면 메모리 가 누 출 될 수 있 습 니 다.
다음 두 가지 쓰레기 수 거 메커니즘 (GC Garbage Collection) 을 간단하게 소개 합 니 다.
태그 지우 기:
정의 와 사용법:
변수 가 환경 에 들 어 갈 때 변 수 를 '환경 에 들 어 갑 니 다' 라 고 표시 하고 변수 가 환경 을 떠 날 때 '환경 을 떠 납 니 다' 라 고 표시 합 니 다.어느 순간 쓰레기 수 거 기 는 환경의 변수 와 환경 변수 에 의 해 인 용 된 변 수 를 걸 러 내 고 나머지 는 수 거 를 준비 하 는 변수 로 여 겨 진다.
지금까지 IE, Firefox, Opera, Chrome, Safari 의 js 는 모두 표 시 된 쓰레기 회수 정책 이나 유사 한 정책 을 사 용 했 지만 쓰레기 수집 의 시간 간격 은 서로 다르다.
흐름:
인용 계수
정의 와 용법: 인용 계 수 는 모든 값 이 인 용 된 횟수 를 추적 하 는 것 입 니 다.
기본 원리: 변수의 인용 횟수 입 니 다. 한 번 인용 되면 1 을 추가 합 니 다. 이 인용 계수 가 0 일 때 회수 준비 로 여 겨 집 니 다.
의 대상.
흐름
흔히 볼 수 있 는 메모리 누 출 원인:
실례
var text = []; function createNode() { text.push(new Array(1000000).join('x')); var textNode = document.createTextNode(" "), div = document.createElement('div'); div.appendChild(textNode); document.getElementById("wrapper").appendChild(div); } function removeNode() { var wrapper = document.getElementById("wrapper"), len = wrapper.childNodes.length; if (len > 0) { wrapper.removeChild(wrapper.childNodes[len - 1]); } }
text变量在createNode中引用，导致text不能被回收
-
闭包引起的内存泄漏
实例：
var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var unused = function () {
if (originalThing) {
console.log("hi");
};
}
theThing = {
longStr: new Array(1000000).join('*'),
someMethod: function someMethod() {
console.log('someMessage');
}
};
};
</code></pre>
<p> ：unused someMethod， 。</p>
<p> theThing ，someMethod ， （unused somMethod ） ， originalThing ， originalThing ， replaceThing ，originalThing theThing， theThing.someMethod originalThing ， ， longStr ， ， 。</p>
<p> ： replaceThing originalThing = null</p>
<ul>
<li> <h3> </h3> </li>
</ul>
<p> </p>
<pre><code class="language-javascript">var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
// node someResource
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);</code></pre>
<p> （ ）</p>
<ul>
<li> <h3> </h3> </li>
</ul>
<p> A B ，B A 。</p>
<p> IE BOM、DOM COM， COM 。 </p>
<p> ： js DOM 。 null。</p>
<p> ：</p>
<pre><code class="language-javascript">function handle () {
var element = document.getElementById(“testId”);
element.onclick = function (){
alert(element.id)
}
}</code></pre>
<p>element element </p>
<p>onclick ， ， 。 element ， element ， </p>
<p> ：</p>
<pre><code class="language-javascript">function handle () {
var element = document.getElementById(“testId”);
element.onclick = function (){
alert(element.id)
}
element = null
}</code></pre>
<ul>
<li> <h3>DOM </h3> </li>
</ul>
<p> button， button </p>
<ul>
<li> <h3> DOM </h3> </li>
</ul>
<h2>2，dom </h2>
<p> dom </p>
<p> ：</p>
<pre><code class="language-javascript">function addDom(){
let d = document.createDocumentFragment();
for(var i = 0;i<30;i++){
let li = document.createElement('li')
li.addEventListener('click', function(e) {
let _this = e.target;
let dom = e.target.tagName.toLowerCase();
_this.style.color = 'red';
})
li.innerHTML = `</div>
<h4>
</h4>
<img style = "height:20px;width:100px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591105123139&di=90a63b4962d0b4405ce65c2096a676c2&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3769023270%2C3433174748%26fm%3D214%26gp%3D0.jpg"/>
</div>`
d.appendChild(li)
}
document.getElementById('app').appendChild(d)
}
</code></pre>
<p> ， dom， </p>
<p> ： </p>
<p><strong> ：</strong> ， （sIEve， IE） ， chrome timeline profiles， performance， 。</p>
<p> ：https://www.cnblogs.com/yanglongbo/articles/9762359.html</p>
<p>https://blog.csdn.net/c11073138/article/details/84728132</p>
</div>
</div>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1282958723777576960"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">
spjich
java httpclient
Axiba
.net
comsci
배경
남자
server
oloz
파충
돼지
향수 가 진 하 다
mysql
agevs
짜임새
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 기타
첫 페이지 -
우리 -
역 내 검색 -
Sitemap -
권리 침해 신고
모든 IT 지식 창고 저작권© 2000 - 2050 IT 지식 창고 IT610. com, 판권 소유.
경 ICP 비 09083238 호
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
SQLite 성능 최적화 사례 공유이전에 비교적 많은 데이터의 읽기와 쓰기를 접하지 못했기 때문에 성능 최적화에 대한 관심이 많지 않다. 이번에는 특정한 장면의 대부분이 대량의 읽기와 쓰기에 대해 성능 최적화를 하여 성능을 10배 향상시켰다. 매번 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
