//修改前 var el = document.getElementById("div"); el.style.borderLeft = "1px"; //1次重排版 el.style.borderRight = "2px"; //又1次重排版 el.style.padding = "5px"; //还有1次重排版 //修改后 var el = document.getElementById("div"); el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版
针对多重操作，以下三种方法也可以减少重排版和重绘的次数：
1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)
2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排
3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排
六、循环的优化
这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~
//修改前 var i = 0; for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length console.log(arr[i]); } //修改后 var i = 0; var len = arr.length; //获取一次数组arr的length for(;i<len;i++){ console.log(arr[i]); } //or var i = arr.length;; for(;i;i--){ console.log(arr[i]); }
七、合理利用二进制
如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。
代码如下：
.odd{color:red} .even{color:yellow} <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
var i = 0;
var lis = document.getElementsByTagName("li");
var len = lis.length;
for(;i<len;i++){
if(i&1){
lis[i].className = "even";
} else{
lis[i].className = "odd";
}
};
虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了
JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。
您可能感兴趣的文章: