前端性能優化總結

完成一個頁面請求的流程：

輸入地址--> 域名解析--> 發送請求--> 後端代碼運行--> 響應請求,瀏覽器拿到 html 代碼--> 瀏覽器開始渲染頁面,並請求頁面中的資源（css、JS、img等）--> 渲染完成

每一個階段的性能優化：

傳輸階段優化：代碼壓縮、圖片壓縮、創建長鏈接等

後臺代碼優化：後臺邏輯優化、先後臺合理分配功能等

sql查詢優化：優化數據庫、優化查詢語句等

響應優化：緩存、CDN加速等

渲染階段的優化：分三個模塊考慮 HTML、CSS、JavaScript（前端優化重點）

　　HTML代碼優化：

　　　　避免使用frame、iframe（頁面加載阻塞、onload事件阻塞等）

　　　　避免空標籤、空鏈接 src 、href 等（即便是空地址，瀏覽器也會添加默認地址發送請求）

　　　　減小節點深層次嵌套（佔用內存多、節點查詢費勁）

　　　　減小HTML文檔大小（一、減小注釋空格    二、避免table佈局（節點太多）  三、使用html佈局，節點少）

　　　　顯示指定文檔字符集（若不寫，瀏覽器會先緩存代碼，再去查詢合適的解析字符集。爲避免機器查詢消耗，需手動明確指定好）

　　　　設置圖片寬高（避免回溯重構）

　　　　避免js腳本阻塞（放底部、異步加載、延遲加載、使用模塊管理插件 require.js、sea.js）

 

　　CSS代碼優化：

　　　　避免使用@import

　　　　優化選擇器，知道選擇器的執行順序

　　　　避免使用CSS表達式（計算頻繁，消耗大）縮放、滾動、乃至鼠標移動都有可能執行一次計算

　　　　瞭解選擇器的規則，從右往左查詢

　　　　避免單規則的屬性選擇器(.selected [href=」#index」] {color: red;}) 

　　　　避免正則選擇器

　　　　移除無匹配的樣式（一、縮小文件體積  二、減小索引項、提升查詢速度）

　　　　

　　JS代碼優化：

　　　　使用事件委託、減小事件句柄

　　　　減小DOM操做、碎片，插入一次完成

　　　　減小用JS修改頁面佈局

　　　　緩存查詢節點（var cached = jQuery('#top');  cached.find('p.classA');  cached.find('p.classB');）

　　　　減小頻繁的IO操做，合理利用cookie、localStorage、sessionStorage 等

　　　　使用微類庫、或者原生JS解決問題

 

其餘優化方法（與上面有重複）：

一、圖片優化、壓縮圖片、改變圖片格式類型、響應式圖片（網站中最耗資源的部分）

二、用戶感知性能，（預加載、減小內容、延遲加載、改變圖片格式（對網站有針對性） 心理學優化）

　  即便網站真的很慢，只要不讓用戶覺的慢就能夠。好的技術是爲了更好的服務用戶，因此要注重用戶體驗反饋。

三、恰當的文件格式，漸進式渲染功能

四、使用http/2.0(異步和鏈接複用、頭壓縮、請求反饋管線化、優雅降級HTTP1.0)
　　將優化考慮至網絡層（一、減小了對程序員的干擾、二、效果顯著）
　　google chrome、Mozilla Firefox 、Microsoft Edge 、Opera 都已支持HTTP/2.0
　　Internet Explorer 從IE11開始支持，但僅限於windows 10 beta

五、使用web性能工具檢測， Google PageSpeed 、 雲智慧監控寶 （檢測完針對性修改）

六、重視CSS對性能的影響，刪除無用的規則、內聯關鍵CSS、避免@imports和Base64,
　  使用高性價比屬性：好比opcity 代替 rgba()、避免重複性工做、甚至避免更換開發人員

七、總體優化意識，而不是單獨的某個模塊優化，有可能抓了芝麻丟了西瓜

八、網站若使用大量API,登陸、支付、定位等等，必定要監控API,不但能夠及時發現錯誤，並且能夠關聯考慮優化

九、爲了性能，減小沒必要要的炫酷

十、構建自動化優化任務

常見錯誤的優化方向

一、無限使用render-blocking（不懂...）

二、盲目添加框架以獲取很小的功能，而大大增長了web頁面的大小，作完後再去搞優化，得不償失

三、未優化圖片、未打開Gzip

四、過度關注技術指標（頁面大小、請求數量等）而忽略了用戶體驗指標

五、爲追求差別，使用不經常使用的字體

六、框架的濫用，綜合考慮是否是真的須要框架？框架是爲了更好的服務用戶，而不是而不是更好的服務開發人員

 

 

內容收集整理與網絡，歡迎補充、指正...

參考連接：

一、【高性能前端1】高性能HTML

二、【高性能前端2】高性能CSS

三、【高性能前端3】高性能JavaScript