資訊專欄INFORMATION COLUMN
摘要：緩存優化性能優化第一步，便是管理好頁面的緩存，避免重復下載資源。加載時優化消滅不必要的下載最好的優化，便是根本不下載資源。所以，在網頁中隨意擺放和極有可能造成各種阻塞，必須精心安排。不要高頻率調用函數，事件連續觸發時，只調用一次函數。
本文提供一個優化網頁性能的大概思路，具體操作網上資料很多。
緩存優化性能優化第一步，便是管理好頁面的緩存，避免重復下載資源。否則，即增加服務器壓力，又折磨用戶的錢包。
瀏覽器緩存機制訪問頁面，請求各種資源，瀏覽器檢查本地是否有緩存。
如果有，檢查資源是否過期。沒過期，直接使用緩存。過期了，便向服務器發出請求。
發出的請求中會帶上etag和last-modified首部字段。
服務器會通過Etag和last-modified來判斷瀏覽器緩存的資源是否已經不可用。
如果資源仍然有效，便返回304告知瀏覽器使用緩存。否則返回更新后的資源。
按照這一套邏輯，便可規劃好網站的緩存。
如果資源提前過期，如何通知瀏覽器更新資源？通常無法做到這一點，因為瀏覽器發現資源沒過期，根本不會發出請求。
但是可以通過修改資源的網址來實現。所以需要給資源文件名加上版本號或者隨機標記。例如 style.1234.css。
也就是說，不要讓瀏覽器緩存html文件，否則，過期之前，瀏覽器都不會請求服務器。
最好的優化，便是根本不下載資源。所以要盡量減少比不要的資源。
評估所有依賴是否必要，權衡利弊。
依賴的下載路徑是否可靠，不可用時候是否會阻礙整個頁面。
產品設計時候就需要拋棄浪費帶寬的設計。
壓縮所有可以壓縮的資源 代碼自不用說，都是文本，全部壓縮。 優化圖片去掉不必要的圖片
多使用css3來代替圖片
使用壓縮率更高的圖片。特別是gif動圖，一些視頻格式（H.264或WebM）的體積比gif小很多。
用藝術字字體，不要用圖片
仔細權衡圖片和文字的關系。要表達一個意思，可能一圖勝千言。多了一張圖片，反而節省了大量文字。
使用progressive jpeg。相比隨著數據下載從上到下顯示的baseline jpeg，progressive jpeg是由模糊到清晰，用戶體驗好，也不會導致reflow。
圖片分辨率要盡可能小，避免圖片分辨率大于顯示分辨率。
為使用更新瀏覽器的用戶提供更現代的圖片格式。
多種分辨率的位圖供不同頁面大小使用。
要給標簽指明寬高，否則會導致reflow。
使用HTTP/2。比如，精靈圖是由很多小圖片組成的一張大圖片，可以減少http請求。但是卻難以緩存，修改一個小圖片，導致所有小圖片緩存失效。HTTP/2，一個鏈接內可以發起多個請求，便無需使用精靈圖。
優化字體@font-face 中unicode-range可以制定字符范圍，用來避免下載不需要的語言的字符。
確保字體都被壓縮過。
用@font-face的display屬性和FontFace對象管理好字體加載時的邏輯。
關鍵渲染路徑瀏覽器渲染一張網頁通過以下步驟。
處理 HTML 標記并構建 DOM 樹。
處理 CSS 標記并構建 CSSOM 樹。
將 DOM 與 CSSOM 合并成一個渲染樹。
根據渲染樹來布局，以計算每個節點的幾何信息。
將各個節點繪制到屏幕上。
說人話：瀏覽器先解析HTML，發現就去請求CSS文件，發現
js修改元素樣式
瀏覽器重新計算CSSOM樹
如果布局發生變化，則計算出新的布局
按不同的layer來計算出繪制元素所需的每個像素。
按順序合并不同的layer
優化動畫便是優化以上步驟使動畫達到60幀。
CSS選擇器要簡單，避免瀏覽器遍歷DOM樹來尋找元素。
js修改的元素要避免牽連過多導致布局發生變化。
要減少需要重繪的元素。重繪時，同一個layer的元素都會被重繪。重繪也是非常耗費性能的一步。
選擇器越復雜，瀏覽器計算得越久。最糟情況下，瀏覽器需要遍歷整個DOM-tree，計算量等于元素總個數乘以選擇器個數。
盡量不要使選擇器太復雜，事先給需要被操作的元素加上類名。
reflow, layout即布局發生變化。Chrome, Opera, Safari, Internet Explorer中叫layout. 火狐稱之為Reflow。
reflow, repaint次數越少越好，牽連的元素越少越好。
reflow總是牽涉整個文檔流。
千萬不能修改元素css后立刻讀取css計算值。因為瀏覽器必須重新計算布局，才能知道所需值。而js中相關API都是同步的，所以這將導致瀏覽器同步reflow，阻塞js線程。
Paint(重繪)因為動畫一直在運動，所以要避免使用會導致布局發生變化，和導致必須重新計算元素像素（重繪）的CSS屬性制作動畫。而transform和opacity兩個CSS屬性正是我們所需的。
因為瀏覽器渲染網頁時，會將網頁分層(layer)，最后將不同層合并，然后完成渲染。
同一層中，哪怕只有一個小小的元素發生變化，整個層都會被repaint。
開發者工具的Paint Profiler界面中觀察到每一層的繪制過程創建新layer
所以，可以考慮將動畫放在多帶帶的layer中。
CSS的will-change和 transform: translateZ(0)可以用來創建新layer；
再搭配transform和opacity，用CSS3制作動畫。根據我的實驗，可以完全避免reflow和重繪。
但是過多layer也消耗內存和性能，用開發者工具中的Performance判斷新layer是否帶來優化，否則不要創建新layer。優化交互
開發者工具的layer界面中可以觀察網頁有多少個layer，每個layer包含哪些元素。
網頁時給人用的，所以最惱人的是鼠標或手指操作頁面時，頁面卡卡的。
而響應用戶操作的JS都是異步的。如果JS線程太繁忙，遲遲不能進入下一個事件循環，就會導致響應用戶操作不及時。
盡量增加線程空閑時間，讓事件循環可以及時取出回調函數。提高響應的優先級，用戶交互時，停下其他耗時的JS。
但響應不必過于及時，在100ms內得到反饋，人類都不會察覺到卡頓，可以把一些耗時的工作分解成很多步，利用這個時間差去執行它們。
活用requestAnimationFrame方法。
requestAnimationFrame在下一幀開始前調用函數。優于setInterval的地方是每一幀只會調用一次，而setInterval則不一定。監聽函數
交互事件的監聽函數的執行時間不能太長，否則會阻塞頁面滾動。
監聽函數可能會調用preventDefault, 導致瀏覽器必須等待監聽函數執行完成。
不過新擴展的addEventListener方法第三個參數可以是一個對象，對象的passive屬性用來事先承諾不會調用preventDefault方法，瀏覽器則不會等待監聽函數。
不要再交互事件的監聽函數中修改樣式，會導致強制同步reflow，阻塞js執行。
因為監聽函數會在requestAnimationFrame之前執行，如果監聽函數中修改了樣式，又用到requestAnimationFrame來制作動畫，便會導致強制同步reflow。
某些交互事件觸發極頻繁，注意要debounce。
debounce:不要高頻率調用函數，事件連續觸發時，只調用一次函數。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107468.html
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發者，性能是我們關注的指標。前端發展以來，優化方式，琳瑯滿目，有雅虎軍規等。所以，接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者，性能是我們關注的指標。它直接影響著我們...
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發者，性能是我們關注的指標。前端發展以來，優化方式，琳瑯滿目，有雅虎軍規等。所以，接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者，性能是我們關注的指標。它直接影響著我們...
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發者，性能是我們關注的指標。前端發展以來，優化方式，琳瑯滿目，有雅虎軍規等。所以，接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者，性能是我們關注的指標。它直接影響著我們...
閱讀 3233·2021-11-24 09:39
閱讀 2955·2021-11-23 09:51
閱讀 904·2021-11-18 10:07
閱讀 3555·2021-10-11 10:57
閱讀 2766·2021-10-08 10:04
閱讀 3017·2021-09-26 10:11
閱讀 1063·2021-09-23 11:21
閱讀 2808·2019-08-29 17:28
