javascript优化--13模式1(DOM和浏览器模式)

注意分离：

• 通过将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和浏览器模式)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。