網頁效能優化，快取優化載入時優化動畫優化

訪問頁面，請求各種資源，瀏覽器檢查本地是否有快取。

如果有，檢查資源是否過期。沒過期，直接使用快取。過期了，便向伺服器發出請求。

發出的請求中會帶上etag和last-modified首部字段。

伺服器會通過etag和last-modified來判斷瀏覽器快取的資源是否已經不可用。

如果資源仍然有效，便返回304告知瀏覽器使用快取。否則返回更新後的資源。

按照這一套邏輯，便可規劃好**的快取。

通常無法做到這一點，因為瀏覽器發現資源沒過期，根本不會發出請求。但是可以通過修改資源的**來實現。所以需要給資源檔名加上版本號或者隨機標記。例如 style.1234.css。也就是說，不要讓瀏覽器快取html檔案，否則，過期之前，瀏覽器都不會請求伺服器。

評估所有依賴是否必要，權衡利弊。

產品設計時候就需要拋棄浪費頻寬的設計。

去掉不必要的

多使用css3來代替

用藝術字字型，不要用

仔細權衡和文字的關係。要表達乙個意思，可能一圖勝千言。多了一張，反而節省了大量文字。

解析度要盡可能小，避免解析度大於顯示解析度。

為使用更新瀏覽器的使用者提供更現代的格式。

多種解析度的位圖供不同頁面大小使用。

要給標籤指明寬高，否則會導致reflow。

使用http/2。比如，精靈圖是由很多小組成的一張大，可以減少http請求。但是卻難以快取，修改乙個小，導致所有小快取失效。http/2，乙個鏈結內可以發起多個請求，便無需使用精靈圖。

確保字型都被壓縮過。

用@font-face的display屬性和fontface物件管理好字型載入時的邏輯。

瀏覽器渲染一張網頁通過以下步驟。

處理 html 標記並構建 dom 樹。

處理 css 標記並構建 cssom 樹。

將 dom 與 cssom 合併成乙個渲染樹。

根據渲染樹來布局，以計算每個節點的幾何資訊。

將各個節點繪製到螢幕上。

優化關鍵渲染路徑，便是指優化這個渲染過程，讓網頁盡快呈現出來。

cssjs

重繪過程

chrome, opera, safari, internet explorer中叫layout. 火狐稱之為reflow。

reflow總是牽涉整個文件流。

瀏覽器渲染網頁時，會將網頁分層(layer)，最後將不同層合併，然後完成渲染。同一層中，哪怕只有乙個小小的元素發生變化，整個層都會被repaint。這一點可以在開發者工具的paint profiler介面中觀察到，layer介面中可以觀察網頁有多少個layer。

will-change屬性可以為元素建立新layer(works in chrome, opera and firefox).或 transform: translatez(0);(works in all browsers).

用transform, opacity來製作動畫，可實現無layout和repaint. (devtool performance的main中無動畫相關事件。)

debounce:不要高頻率呼叫函式，事件連續觸發時，只呼叫一次函式。

互動事件的監聽函式的執行時間不能太長，否則會阻塞頁面滾動。

不要再互動事件的監聽函式中修改樣式，會導致強制同步reflow，阻塞js執行。

debounce，活用requestanimationframe方法。

監聽函式可能會呼叫perventdefault, 導致compositor執行緒必須等待監聽函式執行完成。不過新擴充套件的addeventlistener方法第三個引數可以解決此問題。

網頁效能優化，快取優化 載入時優化 動畫優化