注意分離：

• 通過將CSS關閉來測試頁面是否仍然可用，內容是否依然可讀；
• 將JavaScript關閉來測試頁面仍然可以執行正常功能；所有連接是否正常工作；所有的表單是否可以正常工作；
• 不使用內聯處理器（onclick之類）和內聯樣式屬性，因為這些不屬于內容層；
• 使用語義上有意義的HTML元素；

DOM腳本：

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

事件：

• 事件處理：
  • 最簡單地使用事件函數；//不要使用內聯
  • 最好使用監聽器；
• 事件授權：利用事件冒泡，可以減少事件監聽器的數量 <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);

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

長期運行腳本

//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次簡單的計算 while(end) {end -= 1;tmp += end;if(end === 5e7) {postMessage('halfway there, `tmp` is now ' + tmp);} } postMessage("all done");

　　

轉載于:https://www.cnblogs.com/jinkspeng/p/4161532.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。