注意分離：

• 通過將CSS關(guān)閉來測(cè)試頁面是否仍然可用，內(nèi)容是否依然可讀；
• 將JavaScript關(guān)閉來測(cè)試頁面仍然可以執(zhí)行正常功能；所有連接是否正常工作；所有的表單是否可以正常工作；
• 不使用內(nèi)聯(lián)處理器（onclick之類）和內(nèi)聯(lián)樣式屬性，因?yàn)檫@些不屬于內(nèi)容層；
• 使用語義上有意義的HTML元素；

DOM腳本：

• DOM訪問： //DOM訪問的代價(jià)是昂貴的 ;
  • 避免在循環(huán)中使用DOM訪問；
  • 在可能的情況下使用selector API; ?/盡可能使用id,getElementById是最便捷的查找方法；
  • 在HTML容器中重復(fù)使用時(shí)，緩存重復(fù)的次數(shù)；
  • 將DOM引用分配給局部變量，并使用這些局部變量；
  • 例子： for (var i = 0; i < 100; i += 1) {document.getElementById('result').innerHTML += i + ' ,'; }//優(yōu)化 var i, content = ' '; for(i = 0; i < 100; i +=1) {content += i + ' ,'; } document.getElementById('result1').innerHTML += content;-------------------------------- var padding = document.getElementById('result').style.padding,margin = document.getElementById('result').style.margin; //優(yōu)化 var style = document.getElementById('result').style,padding = style.padding,margin = style.margin; ---------------------------- //更好的獲取節(jié)點(diǎn) ,IE8以上 document.querySelector(); document.querySelectorAll();
• 操縱DOM：更新DOM會(huì)導(dǎo)致瀏覽器重新繪制屏幕；所以盡量減少更新DOM；當(dāng)需要?jiǎng)?chuàng)建相對(duì)比較大的子樹時(shí)，采用文檔碎片；
  • 創(chuàng)建文檔時(shí)例子： //反模式，在創(chuàng)建時(shí)立即添加節(jié)點(diǎn) var p,t; p = document.createElement('p'); t = document.createTextNode('first paragraph'); p.appendChild(t); document.body.appendChild(p);p = document.createElement('p'); t = document.createTextNode('second paragraph'); p.appendChild(t); document.body.appendChild(p); //優(yōu)化, var p ,t , frag; frag = document.createDocumentFragment();p = document.createElement('p'); t = document.createTextNode('first paragraph'); p.appendChild(t); frag.appendChild(p);p = document.createElement('p'); t = document.createTextNode('second paragraph'); p.appendChild(t); frag.appendChild(p);document.body.appendChild(frag);　　
  • 更新文檔時(shí)例子： //cloneNode var oldnode = document.getElementById('result');clone = oldnode.cloneNode(true); //處理克隆對(duì)象 var t = document.createTextNode('new text'); clone.appendChild(t); //replaceChild oldnode.parentNode.replaceChild(clone, oldnode);

事件：

• 事件處理：
  • 最簡(jiǎn)單地使用事件函數(shù)；//不要使用內(nèi)聯(lián)
  • 最好使用監(jiān)聽器；
• 事件授權(quán)：利用事件冒泡，可以減少事件監(jiān)聽器的數(shù)量 <div id='click-wrap'><button>Click me:0</button><button>Click me too:0</button><button>Click me three:0</button> </div>var target = document.getElementById('click-wrap'); target.addEventListener('click',function(e){var src = e.target;if(src.nodeName.toLowerCase() !== 'button') return;alert(0); },false);

  //注意以上實(shí)際情況中使用要考慮瀏覽器的兼容性；　　

長期運(yùn)行腳本

//js沒有線程，用其他方法模擬

• 使用setTimeout；
• 使用web workers ?(html5)

var ww = new Worker("test.js"); ww.onmessage = function(event) {document.body.innerHTML += "<p>message :" + event.data + "</p>"; }//test.jsvar end = 1e8, tmp = 1;postMessage("hello"); //Web Workers做了1e8次簡(jiǎn)單的計(jì)算 while(end) {end -= 1;tmp += end;if(end === 5e7) {postMessage('halfway there, `tmp` is now ' + tmp);} } postMessage("all done");

　　

轉(zhuǎn)載于:https://www.cnblogs.com/jinkspeng/p/4161532.html

總結(jié)

以上是生活随笔為你收集整理的javascript优化--13模式1(DOM和浏览器模式)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。