解決方法：（1）、建議將script標籤放在body底部，確保指令碼執行前頁面已完成渲染
（2）、可以將某些指令碼直接寫在script標籤插入html中，進行首屏優化
（3）、使用webpack等工具打包或壓縮**，減少請求與檔案體積
資料有四種方式，字面量、本地變數、陣列、物件
多層引用，例如window.location.href、原型鏈搜尋等，如果使用多次，建議進行本地儲存
比如：h = window.location.href
dom操作很慢，原因有2：dom節點很複雜、修改dom會導致重繪（repaint）和重排（reflow）
（1）、插入節點推薦使用innerhtml，大量字串建議使用陣列拼接
（2）、htmlcollection集合是動態檢測，如果物件更新，對應的集合也更新，無論是獲取還是修改都會觸發一次
（3）、比較通用的優化方法，快取（類）陣列長度，再進行迴圈遍歷操作
（4）、重排、重繪都是代價昂貴的操作，儘量減少發生。
（5）、事件委託
tips：重繪、重排
dom樹 => 表示頁面結構
渲染樹 => 表示dom節點如何顯示
dom樹中的每乙個需要顯示的節點在渲染樹中至少存在乙個對應的節點（隱藏的dom元素在dom樹中沒有對應節點）。
當dom變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計算元素的幾何屬性。瀏覽器會使渲染樹中受到影響的部分失效，重新構造渲染樹，這個過程叫『重排（reflow）』；完成重排後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程稱為『重繪（repaint）』。
當改變顏色時，只會引起重繪。
重排發生條件：
1、新增、刪除可見元素
2、元素位置改變
3、元素尺寸改變
4、內容改變
5、頁面渲染初始化
6、瀏覽器視窗尺寸改變
瀏覽器會通過佇列化修改（類似於task）來優化重排過程。然而，當獲取類似於offsettop、getcomputedstyle等屬性時，會強制瀏覽器渲染已獲取最近屬性。
當需要對dom做多次操作時，有三種方式優化：
1、將dom隱藏，操作完後顯示
2、構建文件碎片，插入dom（推薦）
3、建立乙個dom備份，操作完後替換原dom
（1）、倒序+快取長度優化迴圈：
//某陣列var arr =;
//迴圈處理元素
for (var i = 0; i < arr.length; i++)
//優化迴圈體
for (var i = arr.length; i--;)
（2）、貼乙個duff's device，通過分割迴圈次數提公升效率：
//duff's device
var iterations = math.floor(items.length / 8), //
表示多少輪迴圈
startat = items.length % 8, //
8的餘數
i = 0; //
從0開始迭代
do startat = 0;
} while (--iterations);
優化後的演算法，取消了switch語句，將餘數與整數分別處理：
//餘數var i = item.length % 8;
while
(i)
//整數
i = math.floor(item.length / 8);
while
(i)
（3）、if-else與switch
條件增加時，優化使用switch，效能與**可讀性方面都更好。（在js中switch使用全等，沒有隱式型別轉換帶來的損耗）
優化if-else：將最可能出現的情況放在第一項
（4）、查詢表
使用陣列或普通物件來構建查詢表。
請求：
（1）、正常ajax請求
使用xhr時，post與get的對比。
對於不會改變伺服器狀態，只會獲取資料（冪等行為）的請求，應該使用get，get請求的資料會被快取起來，多次請求有助於提高效能。
當url加上引數長度過長使用post。
（2）、動態指令碼注入
這種技術克服了xhr最大限制：不能跨域。
該方法通過建立乙個script標籤， 將src設定為不同域的url。
動態指令碼注入的控制有限，無法設定請求頭，只能通過get傳參。
快取：
（1）、在服務端，設定http頭資訊以確保你的響應會被瀏覽器快取
通過get方式傳送請求，並在響應中傳送正確的http頭資訊，expires頭資訊會告訴瀏覽器快取響應多久。
（2）、在客戶端，把獲取到的資訊儲存到本地，從而避免再次請求
6、finally
（1）、檔案合併（webpack）
（2）、檔案壓縮
（3）、快取
（4）、cdn
完結撒花！
merge語句導致的效能問題緊急優化
晚上正在休息的時候，突然收到一封報警郵件。報警內容 cpu utilization is too high 報警級別 problem 監控專案 cpu idle time 59.11 這個報警資訊已經非常明確，cpu使用率很緊張了。這台伺服器上執行著oracle和mysql例項，所以第一感覺是不是m...
前端效能優化筆記
1.減少http請求 2.如果需要在頁面中為背景，按鈕，導航欄提供大量背，css sprites可以縮短響應時間 3.合併指令碼和樣式表 4.對於地理上分散的使用者群來說,cdn 內容發布網路 能輕易的得到響應速度的提高 注 cdn用於發布靜態內容，如，指令碼，flash.動態html會對儲存有特殊...
CSS 效能優化筆記
在實習做乙個移動專案的時候，實現乙個動畫效果，在 iphone 和 chrome 上除錯沒有問題，在千元左右的 android 機上測試問題就很大了，卡頓非常明顯，百思不得其解，卒。這個悲傷的故事就是本文的引子，真真切切的體會到了 css 對使用者體驗的影響非常明顯，稍有不慎就是乙個大坑。下面，我們...