JavaScript 게임 최적화_javascript 기술

1. DocumentFragment를 활용해보세요
전에 자위 게임이 있었습니다. 다음 방법을 사용하여 글머리 기호를 추가합니다

코드 복사 코드는 다음과 같습니다.

for( var i= 0;i<5;i ){
var bullet = new Bullet();
document.body.appendChild(bullet)
}

여기 있습니다. 문제는 내 목표는 5개의 글머리 기호 개체를 동시에 표시하는 것이므로 루프의 본문에 5개의 글머리 기호 개체를 추가하여 결과적으로 브라우저가 5번 리플로우된다는 것입니다.
하지만 실제로는 이 5가지 총알 유형을 먼저 담을 캐리어를 찾은 다음 몸체에 한 번에 추가하면 흐름이 한 번만 나타납니다. 많은 비용을 절약하십시오.

코드 복사 코드는 다음과 같습니다.

var df = document.createDocumentFragment();
for(var i=0;i<5;i ){
var bullet = new Bullet()
df.appendChild(bullet)
}
document.body.appendChild; (df) ;

DocumentFragment: 문서 조각으로, 태그가 생성되지 않고 전달자만 생성됩니다.

2. 기준값을 비워두고, Dom 맞춤형 기준값도 비워둡니다.
내가 작성한 코드에서 변수가 종료될 때 많은 참조 유형 값이 지워지지 않는 것을 발견했습니다.
예:

코드 복사 코드는 다음과 같습니다.

var Bullet = function(){
2 this.dom = null;
3 this.init();
4 }
5 Bullet.prototype = {
6 this.init : function(){
7 this.dom = document.createElement('div');
8 document.body.appendChild(this.dom)
9 }
this.end : function(){
document.body .removeChild(this.dom);
}
}

마지막에는 dom 개체만 제거합니다. 실제로 이것도 추가해야 합니다. dom.innerHTML = '' 및 this.dom = null.
IE 시리즈에만 해당됩니다. 왜냐하면 RemoveChild 메소드는 DOM 체인에서 dom 요소의 연결을 끊기만 하고 객체를 해제하지 않기 때문입니다.

3. 돔의 왼쪽, 위쪽, 너비, 높이 및 기타 매개변수를 얻으려면 getBoundingClientRect 메소드를 사용하십시오.
left, top, width, height 등 두 개 이상의 매개변수를 가져와야 하는 경우 대신 getBoundingClientRect 메서드를 사용하면 위의 네 가지 매개변수의 개체를 한 번에 가져오고 속성에 대한 액세스를 줄일 수 있습니다.
돔 요소 .

코드 복사 코드는 다음과 같습니다.

var ret = document.getElementById('test ').getBoundingClientRect();
//Rect.width,Rect.left,Rect.top,Rect.height

4. dom 요소를 복제하려면 cloneNode를 사용하세요.
document.createElement 메소드를 사용하여 자주 생성해야 하는 새 DOM 요소의 경우 먼저 cloneNode 메소드를 사용하여 DOM 요소를 복제하고 저장할 수 있습니다.
다음에 다시 사용해야 하는 경우 직접 사용할 수 있습니다. 복제된 DOM 요소를 사용합니다. 복사본을 복제하려면 createElement 메서드를 사용하는 것보다 cloneNode 메서드를 사용하는 것이 더 빠릅니다. 예:

코드 복사 코드는 다음과 같습니다.

var temp
for; (var i =0;i < 100;i ){

var dom = temp?temp.cloneNode():document.createElement('div')
if(!temp)temp = dom.cloneNode ();
//뭔가
}

5. Dom 속성 판단을 줄이기 위해 루프 판단에 라벨을 추가합니다.
예를 들어 게임 논리에 따르면 남자라면 백 레벨 아래로 내려갑니다.
악당이 블록 위에 서 있을 때, 이때 다른 블록은 더 이상 악당이 자신의 블록에 떨어질지 여부를 판단할 필요가 없으며 일어나기만 하면 됩니다. 이러한 방식으로 DOM 요소에 대한 수백 개의
속성 액세스를 초당 줄여 오버헤드를 줄일 수 있습니다. 악당이 상자를 떠나면 판결이 다시 적용됩니다. 합리적인 사용.
제가 쓴 글을 첨부합니다. 남자라면 포탈 100층으로 내려가보세요>>

지금까지 너무 많이 찾았습니다. 앞으로도 또 글 부탁드립니다. . .
작성자: cnblogs Floyd