注意：
優(yōu)化最難的地方就是如何在開發(fā)生命周期中最適當?shù)臅r候去做優(yōu)化。Donald Knuth 有一句名言：「過早優(yōu)化乃萬惡之源」肌毅。這句話背后的原因非常簡單：因為一不小心就會浪費時間去優(yōu)化某個 1% 的地方，但是結(jié)果卻并不會對性能造成什么重大影響悔常。與此同時赃磨，一些優(yōu)化還妨礙了可讀性或者是可維護性，甚至還會引入新的 Bug儡陨。換句話說褪子，優(yōu)化不應當被認為是「意味著得到應用程序的最佳性能」，而是「探索優(yōu)化應用的正確的方式骗村，并得到最大的效益」嫌褪。再換句話說，盲目的優(yōu)化可能會導致效率的丟失胚股，而收益卻很小笼痛。在你應用以下技巧的時候請將此銘記在心。你最好的朋友就是分析工具：找到你可以進行通過優(yōu)化獲得最大程度改善的性能點琅拌，而不用損害應用開發(fā)的進程或者可維護性缨伊。
程序員們浪費了大量時間來思考，或者說是擔憂进宝，他們的程序中非關(guān)鍵部分的運行速度刻坊。并且他們對于性能的這些嘗試，實際上卻對代碼的調(diào)試和維護有著非常消極的影響党晋。我們應當忘記那些不重要的性能影響谭胚，在 97% 的時間里都可以這么說：過早優(yōu)化乃萬惡之源。當然我們也不應當在那關(guān)鍵的 3% 上放棄我們的機會未玻≡侄—— Donald Knuth
容易實現(xiàn)并且效果比較大
１ 減少請求
２ 合并壓縮文件
規(guī)則05：將CSS樣式表放在頂部如果將css樣式定義放在頁面中或者頁面底部，會出現(xiàn)短暫白屏或者某一區(qū)域短暫白板的情況扳剿，這和瀏覽器的運營機制有關(guān)的旁趟，不管頁面如何加載，頁面都是逐步呈現(xiàn)的庇绽。所以在每做一個頁面的時候锡搜，用Link標簽把每一個樣式表定義放在head中。規(guī)則06：將javascript腳本放在底部瀏覽器在加載css文件時敛劝，頁面逐步呈現(xiàn)會被阻止余爆，直到所有css文件加載完畢，所以要把css文件的引用放到head中去夸盟，這樣在加載css文件時不會組織頁面的呈現(xiàn)蛾方。但是對于js文件，在使用的時候上陕，它下面所有也頁面內(nèi)容的呈現(xiàn)都會被阻塞桩砰，將腳本放在頁面越靠下的地方，就意味著越多的內(nèi)容能夠逐步呈現(xiàn)释簿。
規(guī)則08：使用外部javascript和CSS內(nèi)聯(lián)js和css其實比外部文件有更快的響應速度亚隅，那為什么還要用外部呢？因為使用外部的js和css可以讓瀏覽器緩存他們庶溶，這樣不僅HTML文檔大小減少煮纵，而且不會增加HTTP請求數(shù)量懂鸵。另外，使用外部js和css可以提高組件的可復用性行疏。
減少 回流與重繪 的tips
使用最佳的布局實踐
盡量不要使用行內(nèi)樣式或者table去布局匆光。
減少使用flex布局。減少
css的選擇器的層級
有幾個工具可以減少ｃｓｓ選擇器的層級酿联。
Tools like Unused CSS, uCSS, grunt-uncss, and gulp-uncss can significantly reduce your style definitions and file sizes.
- 減少
dom實現(xiàn)的層級
如果不需要適配老舊的瀏覽器终息，可以試著去減少不必要的嵌套標簽（元素）。
更新樣式時選擇在dom樹層級較低的標簽（元素）來更新
dom樹層級越低的標簽（元素）贞让，更改樣式的時候回流時影響的元素越少讓復雜的動畫脫離文檔流
為了確保一個動畫只作用于一個標簽（元素）周崭，可以通過設置position:absolute;或者position:fixed;使當前元素脫離文檔流。編輯隱藏的標簽（元素）
一個不顯示display:none;的標簽（元素）在改變的時候不會觸發(fā)回流和重繪喳张。在開發(fā)時续镇，注意在
標簽（元素）顯示之前操作它們。
- 成組的更新標簽（元素）
一個操作更新多個元素可以提高性能销部。
不推薦
var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';
推薦
var myelement = document.getElementById('myelement');
myelement.classList.add('newstyles');
.newstyles {
width: 100px;
height: 200px;
margin: 10px;
}
使用文檔碎片來操作dom
var
i, li,
frag = document.createDocumentFragment(),
ul = frag.appendChild(document.createElement('ul'));
for (i = 1; i <= 3; i++) {
li = ul.appendChild(document.createElement('li'));
li.textContent = 'item ' + i;
}
document.body.appendChild(frag);
- 限定被影響的元素（這段自己沒有真正明白）
考慮使用選項卡去切換現(xiàn)實內(nèi)容磨取。 這幾個顯示的選項卡要設置固定的高度或者讓每一個卡片脫離文檔流柴墩。
９. 動畫的平滑性和性能之間的選擇
每次動畫移動一個像素可能看起來平滑，但對設備的性能要求較高凫岖。如果每次移動四個像素江咳，會減少四分之一的回流，平滑性會降低一點哥放。
- 使用瀏覽器工具去分析
主流瀏覽器都提供工具去高亮顯示回流是如何影響性能的歼指。
打開時間面板記錄活動。
在∩瘛ｉｅ 瀏覽器中使用 UI Responsiveness 可以查看
UI Responsiveness in the Internet Explorer
所有的瀏覽器回流和重繪的時間顯示為綠色踩身。
chrome 開發(fā)者工具中文文檔（太棒了）
http://www.css88.com/doc/chrome-devtools/network-performance/resource-loading/
參考：
https://zhuanlan.zhihu.com/p/21417465
https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
