優化你的DOM
來自： https://segmentfault.com/a/1190000004451493
優化DOM的本質其實就是減少DOM樹的重流與重繪。對于重流和重繪的理解，詳見《前端知識普及之HTML》
優化DOM的結構，無非就是引用保存，動畫優化，節點保存，更新節點等基本操作。
曾記得，以前在網上翻閱HTML的時候，很多人都會不約而同(兒童)的說道，獲取到DOM節點后一定要記得保存。否則，下場很難看的。
為什么~為什么~為什么~
我們都知道所謂的js其實是DOM，BOM，ECMA結合的產物。 本來我js挺快的，你非要去的DOM說說話。 那怎么辦，只有敲敲門，等DOM來回應你呀~ 但是，這個等待時間灰常長。
看個demo吧.
</div>
var times=10000;
var time1 = function(){
var time = times;
while(time--){ //DOM的兩個操作放在循環內
var dom = document.querySelector("#Div1");
dom.innerHTML+="a";
}
};
var time2=function(){
var time = times,
dom = document.querySelector("#Div1");
while(time--){ //DOM的一個操作放在循環內
dom.innerHTML+="a";
}
};
var time3=function(){
var time = times,
dom = document.querySelector("#Div1"),
str = "";
while(time--){ //循環內不放置DOM的操作
str +="a";
}
dom.innerHTML=str;
}
console.time(1); //設置時間起點
time1();
console.timeEnd(1);
console.time(2); //設置時間起點
time2();
console.timeEnd(2);
console.time(3); //設置時間起點
time3();
console.timeEnd(3);
//測試結果為:
1: 101.868ms
2: 101.560ms
3: 13.615ms</pre>
當然，這只是個比較夸張的例子了，當你過多的頻繁操作DOM的時候，一定要記得保存。 而且，保存一定是要保存所有涉及DOM相關的操作。
比如. style,innerHTML等屬性。
而這樣做的原理就是減少重流和重繪的次數。
</div>
重流重繪發生的情況
那重流和重繪通常什么情況下會發生呢？重流發生情況:
-
添加或者刪除可見的DOM元素
-
元素位置改變
-
元素尺寸改變
-
元素內容改變（例如：一個文本被另一個不同尺寸的圖片替代）
-
頁面渲染初始化（這個無法避免）
-
瀏覽器窗口尺寸改變
總的來說，就是改變頁面的布局，大小，都會發生重流的情況。那重繪什么時候會發生呢？ 發生重流就一定會發生重繪，但是，重繪的范圍比重流稍微大了一點。比如，當你僅僅改變字體顏色，頁面背景顏色等 比較"膚淺"的操作時，是不會打擾到重排的。
合并DOM的操作
當我們這樣操作時:
div.style.color="red";
div.style.border="1px solid red";
瀏覽器會很聰明的將兩次重排合并到一次發生，節省資源。 其實函數節流的思想和這個有異曲同工的妙處
var throttle = (function(){
var time;
return function(fn,context){
clearTimeout(time); //進行函數的節流
time = setTimeout(fn.bind(context),200);
}
})()
這個技巧通常用在你調整瀏覽器大小的時候。但是，如果中間，你訪問了offsetTop,clientTop等 立即執行屬性的話。那結果你就么么噠了。
div.style.color="red"; //積累一次重排記錄
var height = div.clientHeight; //觸發重排
div.style.border="1px solid red"; //再次積累一次重排
這時候，瀏覽器已經被你玩傻了。 所以，給的一點建議就是，如果要更改DOM結構最好一次性整完，或者，要整一起整~我們上面的css修改，還可以這樣
div.style.cssText="color:red;border:1px solid red"; //覆蓋原來的css
div.classList.add("change"); //利用class來整體改動
DOM操作的優化
DOM的操作無非就CRUD。這里簡單說一下基本的API
創建節點
var div = document.createELement("div");
查找節點
var divs = document.querySelectorAll('div'); //很多個，放在數組內
var onlydiv = document.querySelector('div'); //只有一個
//以及document.getElement系列
查看節點
var html = div.innerHTML;
var outer = div.outerHTML; //這兩個是非常常用的
var classNames = div.classList;
var className = div.className;
var tagName = div.tagName;
var id = div.id;
var style = div.getAttribute("style");
//....
移動節點
ele.replaceChild(replace,replaced); //replace代替replaced
//添加子節點
ele.appendChild(child);
//刪除子節點
ele.removeChild(child);
//插入子節點
ele.insertBefore(newEle,referenceEle);
Ok~ 其實，上面所說的這些API只要涉及到DOM操作的都會發生重排。所以，這里是地方可以優化的.
使用fragment
當我們需要批量加入子節點的時候，就需要使用fragment這個虛擬片斷，來作為一個容器.比如，我們需要在div里面添加100個p標簽
var times = 100;
var addP = function(){
var time = times,
tag1 = document.querySelector('#tag1');
while (time--) {
var p = document.createElement('p');
tag1.appendChild(p);
}
}
var useFrag = function(){
var time = times,
tag1 = document.querySelector('#tag1'),
frag = document.createDocumentFragment();
while (time--) {
var p = document.createElement('p');
frag.appendChild(p);
}
tag1.appendChild(frag);
}
console.time(1);
addP();
console.timeEnd(1);
console.time(2);
useFrag();
console.timeEnd(2);
//基本事件差為:
1: 1.352ms
2: 0.685ms
除了使用fragment片斷，還可以使用innerHTML,outerHTML進行相關的優化操作。這里就不贅述了
UI操作的優化
這里想說的其實不多，就是學會使用absolute排版。 因為當你進行相關UI操作的時候，毫無疑問有可能不經意間，導致全屏的渲染。比如 校園二手街 的布局，當你下滑的時候，他的headerbar便會發生擴大，布局較差的情況是整版重排。(傻逼傻逼傻逼)
他這里不一樣，他直接使用absolute進行布局，脫離了文檔流，防止頁面過度的重排，贊~
最后：
優化之路漫漫，大家好自為之~