網頁性能優化 頁面優化 頁面優化可以提升頁面的訪問速度從而提高用戶體驗,優化的頁面可以更好的提升 SEO 的效果同時也可以提高代碼的可讀性和維護性。 網頁的生成過程,大致可以分成五步。 1. HTML代碼轉化成DOM 2. CSS代碼轉化成CSSOM(CSS Object Model) 3. 結合D ...
網頁性能優化
頁面優化
頁面優化可以提升頁面的訪問速度從而提高用戶體驗,優化的頁面可以更好的提升 SEO 的效果同時也可以提高代碼的可讀性和維護性。
網頁的生成過程,大致可以分成五步。
- HTML代碼轉化成DOM
- CSS代碼轉化成CSSOM(CSS Object Model)
- 結合DOM和CSSOM,生成一棵渲染樹(包含每個節點的視覺信息)
- 生成佈局(layout),即將所有渲染樹的所有節點進行平面合成
- 將佈局繪製(paint)在屏幕上
這五步裡面,第一步到第三步都非常快,耗時的是第四步和第五步。
"生成佈局"(flow)和"繪製"(paint)這兩步,合稱為"渲染"(render)。
重排和重繪
網頁生成的時候,至少會渲染一次。用戶訪問的過程中,還會不斷重新渲染。
以下三種情況,會導致網頁重新渲染。
- 修改DOM
- 修改樣式表
- 用戶事件(比如滑鼠懸停、頁面滾動、輸入框鍵入文字、改變視窗大小等等)
重新渲染,就需要重新生成佈局和重新繪製。前者叫做"重排"(reflow),後者叫做"重繪"(repaint)。
需要註意的是,"重繪"不一定需要"重排",比如改變某個網頁元素的顏色,就只會觸發"重繪",不會觸發"重排",因為佈局沒有改變。但是,"重排"必然導致"重繪",比如改變一個網頁元素的位置,就會同時觸發"重排"和"重繪",因為佈局改變了。
對於性能的影響
重排和重繪會不斷觸發,這是不可避免的。但是,它們非常耗費資源,是導致網頁性能低下的根本原因。
提高網頁性能,就是要降低"重排"和"重繪"的頻率和成本,儘量少觸發重新渲染。
前面提到,DOM變動和樣式變動,都會觸發重新渲染。但是,瀏覽器已經很智能了,會儘量把所有的變動集中在一起,排成一個隊列,然後一次性執行,儘量避免多次重新渲染。
一般的規則是:
- 樣式表越簡單,重排和重繪就越快。
- 重排和重繪的DOM元素層級越高,成本就越高。
- table元素的重排和重繪成本,要高於div元素
提高性能的九個技巧
有一些技巧,可以降低瀏覽器重新渲染的頻率和成本。
第一條 DOM 的多個讀操作(或多個寫操作),應該放在一起。不要兩個讀操作之間,加入一個寫操作。
第二條 如果某個樣式是通過重排得到的,那麼最好緩存結果。避免下一次用到的時候,瀏覽器又要重排。
第三條 不要一條條地改變樣式,而要通過改變class,或者csstext屬性,一次性地改變樣式。
第四條 儘量使用離線DOM,而不是真實的網面DOM,來改變元素樣式。比如,操作Document Fragment對象,完成後再把這個對象加入DOM。再比如,使用 cloneNode() 方法,在克隆的節點上進行操作,然後再用克隆的節點替換原始節點。
第五條 先將元素設為display: none(需要1次重排和重繪),然後對這個節點進行100次操作,最後再恢復顯示(需要1次重排和重繪)。這樣一來,你就用兩次重新渲染,取代了可能高達100次的重新渲染。
第六條 position屬性為absolute或fixed的元素,重排的開銷會比較小,因為不用考慮它對其他元素的影響。
第七條 只在必要的時候,才將元素的display屬性為可見,因為不可見的元素不影響重排和重繪。另外,visibility : hidden的元素只對重繪有影響,不影響重排。
第八條 使用虛擬DOM的腳本庫,比如React等。
第九條 使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個方法調節重新渲染
一些問題
一、 如何對網站的的資源和文件進行優化
- 文件的合併(減少http的請求)
- 文件的壓縮(減少文件的體積)
- 使用cdn托管資源
- 使用緩存
- gizp壓縮js和css文件
- mete標簽的優化。Heading標簽的優化和alt優化
- 反向鏈接,網站外鏈優化
二 、說出三種減少頁面載入的方法(載入時間感知的時間或實際載入時間)
- CSS Sprites
- Js css源碼的壓縮。圖片大小控制合適
- 網頁gizp
- cdn托管
- Data緩存
- 圖片伺服器
三 、網頁載入速度的優化
- 減少請求
- 整合資源
- 使用瀏覽器緩存和本地緩存
- 首次使用的時候在HTML中嵌入資源
- 使用HTML5服務端發送事件
- 消除重定向
- 減少資源負載
- 壓縮文本和圖像
- 代碼簡化
- 使用html5和css3來簡化頁面
- 延遲讀取和執行的腳本
- 使用ajax來增強進程
- 根據網路狀況進行適配處理
- 對於多線程來說儘量使用html5的web worker特性
- 將click事件替換成touch事件
- 支持spdy協議
四、為什麼利用多個功能變數名稱來提供網站資源會更有效?
- 突破瀏覽器的併發限制
- 節約cookie帶寬
- cdn緩存更方便
- 防止不必要的安全問題(尤其是cookie隔離尤為重要)
- 節約主機功能變數名稱鏈接數,優化頁面響應速度
五、前端性能如何調優
- 減少http的請求數
- 使用內容分散式網路(cdn)
- 給頭部添加一個失效期或者cache-control
- Gzip壓縮組件
- 把樣式表放在前面
- 把腳本放在最後
- 不使用css表達式
- 使用外部的Javascript和css
- 減少dns的查詢
- 減小javaScript和css
六、怎樣解決請求過多問題
- 合併js和css文件
- 合併圖片css sprite
- 使用image maps
- Data嵌入圖片
- 使用cdn減少HTTP請求頭
七、百度移動端首頁秒開是怎樣做到的?
- 靜態文件的放置
- 緩存
- 外鏈
- 緩存dom
- 使用iconfont
- 卡片的非同步載入與緩存
- 不在首屏的就要 非同步化
- 少量靜態文件的功能變數名稱