網頁性能管理詳解

来源:http://www.cnblogs.com/ljk001/archive/2017/12/07/7999858.html
-Advertisement-
Play Games

你遇到過性能很差的網頁嗎? 這種網頁響應非常緩慢,占用大量的CPU和記憶體,瀏覽起來常常有卡頓,頁面的動畫效果也不流暢。 你會有什麼反應?我猜想,大多數用戶會關閉這個頁面,改為訪問其他網站。作為一個開發者,肯定不願意看到這種情況,那麼怎樣才能提高性能呢? 本文將詳細介紹性能問題的出現原因,以及解決方法 ...


你遇到過性能很差的網頁嗎?

這種網頁響應非常緩慢,占用大量的CPU和記憶體,瀏覽起來常常有卡頓,頁面的動畫效果也不流暢。

你會有什麼反應?我猜想,大多數用戶會關閉這個頁面,改為訪問其他網站。作為一個開發者,肯定不願意看到這種情況,那麼怎樣才能提高性能呢?

本文將詳細介紹性能問題的出現原因,以及解決方法。

一、網頁生成的過程

要理解網頁性能為什麼不好,就要瞭解網頁是怎麼生成的。

網頁的生成過程,大致可以分成五步。

  1. HTML代碼轉化成DOM
  2. CSS代碼轉化成CSSOM(CSS Object Model)
  3. 結合DOM和CSSOM,生成一棵渲染樹(包含每個節點的視覺信息)
  4. 生成佈局(layout),即將所有渲染樹的所有節點進行平面合成
  5. 將佈局繪製(paint)在屏幕上

這五步裡面,第一步到第三步都非常快,耗時的是第四步和第五步。

“生成佈局”(flow)和”繪製”(paint)這兩步,合稱為”渲染”(render)。

二、重排和重繪

網頁生成的時候,至少會渲染一次。用戶訪問的過程中,還會不斷重新渲染。

以下三種情況,會導致網頁重新渲染。

  • 修改DOM
  • 修改樣式表
  • 用戶事件(比如滑鼠懸停、頁面滾動、輸入框鍵入文字、改變視窗大小等等)

重新渲染,就需要重新生成佈局和重新繪製。前者叫做”重排”(reflow),後者叫做”重繪”(repaint)。

需要註意的是,“重繪”不一定需要”重排”,比如改變某個網頁元素的顏色,就只會觸發”重繪”,不會觸發”重排”,因為佈局沒有改變。但是,“重排”必然導致”重繪”,比如改變一個網頁元素的位置,就會同時觸發”重排”和”重繪”,因為佈局改變了。

三、對於性能的影響

重排和重繪會不斷觸發,這是不可避免的。但是,它們非常耗費資源,是導致網頁性能低下的根本原因。

提高網頁性能,就是要降低”重排”和”重繪”的頻率和成本,儘量少觸發重新渲染。

前面提到,DOM變動和樣式變動,都會觸發重新渲染。但是,瀏覽器已經很智能了,會儘量把所有的變動集中在一起,排成一個隊列,然後一次性執行,儘量避免多次重新渲染。


div.style.color = 'blue';
div.style.marginTop = '30px';

上面代碼中,div元素有兩個樣式變動,但是瀏覽器只會觸發一次重排和重繪。

如果寫得不好,就會觸發兩次重排和重繪。


div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';

上面代碼對div元素設置背景色以後,第二行要求瀏覽器給出該元素的位置,所以瀏覽器不得不立即重排。

一般來說,樣式的寫操作之後,如果有下麵這些屬性的讀操作,都會引發瀏覽器立即重新渲染。

  • offsetTop/offsetLeft/offsetWidth/offsetHeight
  • scrollTop/scrollLeft/scrollWidth/scrollHeight
  • clientTop/clientLeft/clientWidth/clientHeight
  • getComputedStyle()

所以,從性能角度考慮,儘量不要把讀操作和寫操作,放在一個語句裡面。


// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";

// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

一般的規則是:

  • 樣式表越簡單,重排和重繪就越快。
  • 重排和重繪的DOM元素層級越高,成本就越高。
  • table元素的重排和重繪成本,要高於div元素

四、提高性能的九個技巧

有一些技巧,可以降低瀏覽器重新渲染的頻率和成本。

第一條是上一節說到的,DOM 的多個讀操作(或多個寫操作),應該放在一起。不要兩個讀操作之間,加入一個寫操作。

第二條,如果某個樣式是通過重排得到的,那麼最好緩存結果。避免下一次用到的時候,瀏覽器又要重排。

第三條,不要一條條地改變樣式,而要通過改變class,或者csstext屬性,一次性地改變樣式。


// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// good 
el.className += " theclassname";

// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

第四條,儘量使用離線DOM,而不是真實的網面DOM,來改變元素樣式。比如,操作Document Fragment對象,完成後再把這個對象加入DOM。再比如,使用 cloneNode() 方法,在克隆的節點上進行操作,然後再用克隆的節點替換原始節點。

第五條,先將元素設為display: none(需要1次重排和重繪),然後對這個節點進行100次操作,最後再恢復顯示(需要1次重排和重繪)。這樣一來,你就用兩次重新渲染,取代了可能高達100次的重新渲染。

第六條,position屬性為absolutefixed的元素,重排的開銷會比較小,因為不用考慮它對其他元素的影響。

第七條,只在必要的時候,才將元素的display屬性為可見,因為不可見的元素不影響重排和重繪。另外,visibility : hidden的元素只對重繪有影響,不影響重排。

第八條,使用虛擬DOM的腳本庫,比如React等。

第九條,使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個方法調節重新渲染(詳見後文)。

五、刷新率

很多時候,密集的重新渲染是無法避免的,比如scroll事件的回調函數和網頁動畫。

網頁動畫的每一幀(frame)都是一次重新渲染。每秒低於24幀的動畫,人眼就能感受到停頓。一般的網頁動畫,需要達到每秒30幀到60幀的頻率,才能比較流暢。如果能達到每秒70幀甚至80幀,就會極其流暢。

大多數顯示器的刷新頻率是60Hz,為了與系統一致,以及節省電力,瀏覽器會自動按照這個頻率,刷新動畫(如果可以做到的話)。

所以,如果網頁動畫能夠做到每秒60幀,就會跟顯示器同步刷新,達到最佳的視覺效果。這意味著,一秒之內進行60次重新渲染,每次重新渲染的時間不能超過16.66毫秒。

一秒之間能夠完成多少次重新渲染,這個指標就被稱為”刷新率”,英文為FPS(frame per second)。60次重新渲染,就是60FPS。

如果想達到60幀的刷新率,就意味著JavaScript線程每個任務的耗時,必須少於16毫秒。一個解決辦法是使用Web Worker,主線程只用於UI渲染,然後跟UI渲染不相干的任務,都放在Worker線程。

六、開發者工具的Timeline面板

Chrome瀏覽器開發者工具的Timeline面板,是查看”刷新率”的最佳工具。這一節介紹如何使用這個工具。

首先,按下 F12 打開”開發者工具”,切換到Timeline面板。

左上角有一個灰色的圓點,這是錄製按鈕,按下它會變成紅色。然後,在網頁上進行一些操作,再按一次按鈕完成錄製。

Timeline面板提供兩種查看方式:橫條的是”事件模式”(Event Mode),顯示重新渲染的各種事件所耗費的時間;豎條的是”幀模式”(Frame Mode),顯示每一幀的時間耗費在哪裡。

先看”事件模式”,你可以從中判斷,性能問題發生在哪個環節,是JavaScript的執行,還是渲染?

不同的顏色表示不同的事件。

  • 藍色:網路通信和HTML解析
  • 黃色:JavaScript執行
  • 紫色:樣式計算和佈局,即重排
  • 綠色:重繪

哪種色塊比較多,就說明性能耗費在那裡。色塊越長,問題越大。

幀模式(Frames mode)用來查看單個幀的耗時情況。每幀的色柱高度越低越好,表示耗時少。

你可以看到,幀模式有兩條水平的參考線。

下麵的一條是60FPS,低於這條線,可以達到每秒60幀;上面的一條是30FPS,低於這條線,可以達到每秒30次渲染。如果色柱都超過30FPS,這個網頁就有性能問題了。

此外,還可以查看某個區間的耗時情況。

或者點擊每一幀,查看該幀的時間構成。

七、window.requestAnimationFrame()

有一些JavaScript方法可以調節重新渲染,大幅提高網頁性能。

其中最重要的,就是 window.requestAnimationFrame() 方法。它可以將某些代碼放到下一次重新渲染時執行。


function doubleHeight(element) {
var currentHeight = element.clientHeight;
element.style.height = (currentHeight * 2) + 'px';
}
elements.forEach(doubleHeight);

上面的代碼使用迴圈操作,將每個元素的高度都增加一倍。可是,每次迴圈都是,讀操作後面跟著一個寫操作。這會在短時間內觸發大量的重新渲染,顯然對於網頁性能很不利。

我們可以使用window.requestAnimationFrame(),讓讀操作和寫操作分離,把所有的寫操作放到下一次重新渲染。


function doubleHeight(element) {
var currentHeight = element.clientHeight;
window.requestAnimationFrame(function () {
element.style.height = (currentHeight * 2) + 'px';
});
}
elements.forEach(doubleHeight);

頁面滾動事件(scroll)的監聽函數,就很適合用 window.requestAnimationFrame() ,推遲到下一次重新渲染。


$(window).on('scroll', function() {
window.requestAnimationFrame(scrollHandler);
});

當然,最適用的場合還是網頁動畫。下麵是一個旋轉動畫的例子,元素每一幀旋轉1度。


var rAF = window.requestAnimationFrame;
var degrees = 0;
function update() {
div.style.transform = "rotate(" + degrees + "deg)";
console.log('updated to degrees ' + degrees);
degrees = degrees + 1;
rAF(update);
}
rAF(update);

八、window.requestIdleCallback()

還有一個函數window.requestIdleCallback(),也可以用來調節重新渲染。

它指定只有當一幀的末尾有空閑時間,才會執行回調函數。


requestIdleCallback(fn);

上面代碼中,只有當前幀的運行時間小於16.66ms時,函數fn才會執行。否則,就推遲到下一幀,如果下一幀也沒有空閑時間,就推遲到下下一幀,以此類推。

它還可以接受第二個參數,表示指定的毫秒數。如果在指定 的這段時間之內,每一幀都沒有空閑時間,那麼函數fn將會強制執行。


requestIdleCallback(fn, 5000);

上面的代碼表示,函數fn最遲會在5000毫秒之後執行。

函數 fn 可以接受一個 deadline 對象作為參數。


requestIdleCallback(function someHeavyComputation(deadline) {
while(deadline.timeRemaining() > 0) {
doWorkIfNeeded();
}
if(thereIsMoreWorkToDo) {
requestIdleCallback(someHeavyComputation);
}
});

上面代碼中,回調函數 someHeavyComputation 的參數是一個 deadline 對象。

deadline對象有一個方法和一個屬性:timeRemaining() 和 didTimeout。

(1)timeRemaining() 方法

timeRemaining() 方法返回當前幀還剩餘的毫秒。這個方法只能讀,不能寫,而且會動態更新。因此可以不斷檢查這個屬性,如果還有剩餘時間的話,就不斷執行某些任務。一旦這個屬性等於0,就把任務分配到下一輪requestIdleCallback

前面的示例代碼之中,只要當前幀還有空閑時間,就不斷調用doWorkIfNeeded方法。一旦沒有空閑時間,但是任務還沒有全執行,就分配到下一輪requestIdleCallback

(2)didTimeout屬性

deadline對象的 didTimeout 屬性會返回一個布爾值,表示指定的時間是否過期。這意味著,如果回調函數由於指定時間過期而觸發,那麼你會得到兩個結果。

  • timeRemaining方法返回0
  • didTimeout 屬性等於 true

因此,如果回調函數執行了,無非是兩種原因:當前幀有空閑時間,或者指定時間到了。


function myNonEssentialWork (deadline) {
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0)
doWorkIfNeeded();
if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork);
}
requestIdleCallback(myNonEssentialWork, 5000);

上面代碼確保了,doWorkIfNeeded 函數一定會在將來某個比較空閑的時間(或者在指定時間過期後)得到反覆執行。

requestIdleCallback 是一個很新的函數,剛剛引入標準,目前只有Chrome支持,不過其他瀏覽器可以用墊片庫

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一般元素在頁面所占的空間包括:magin border padding content。以前一直以為子元素設置百分比寬高都是以父元素的content值為基準計算的。但是當子元素的position不同時,卻是不同的結果。 demo 用如下小demo測試: 效果如下: 子元素以父元素的content寬度 ...
  • $("#ZB").attr("ondrawsummarycell", "ondrawsummarycell"); // ZBMX需要替換為子表對應控制項的控制項編號 彙總數據 $("#ZB").attr("ondrawcell", "ondrawcell"); // ZBMX需要替換為子表對應控制項的控制項... ...
  • git是什麼 簡單來說,Git,它是一個快速的 分散式版本控制系統 。 同傳統的 集中式版本控制系統 不同,Git的分散式特性使得開發者間的協作變得更加靈活多樣。 這時候我們會想到: 1. 什麼又是版本控制呢? 2. 什麼是分散式什麼是集中式? 我們帶著問題往下走。 版本控制 版本控制是一種記錄一個 ...
  • 變數、嵌套、混合(mixin)、繼承拓展、@import、comment 變數的意義 在sass里我們可以定義多個變數來存放顏色、邊框等等的樣式,這樣就可以在下麵想要使用樣式的時候使用變數了 這樣的優點就是便於維護,更改方便 變數的使用 可以通過$來定義變數,在變數名字中可以使用 和_來作為連接,並 ...
  • 1.安裝sass 1.安裝ruby 因為sass是用ruby語言寫的,所以需要安裝ruby環境 打開安裝包去安裝ruby,記住要勾選 下麵選項來配置環境路徑 [x] Add Ruby executables to your PATH 安裝完成之後繼續下一步操作 2.安裝sass 在cmd里通過gem ...
  • Webpack 是一款目前非常流行的前端模塊打包工具,可以將項目中所載入的模塊進行打包,以及將 一些瀏覽器不支持的語言進行轉換。 ...
  • 一、Better Scroll 滾動原理 1.下圖能直觀的表示better-scroll的滾動原理 2.html設置 <div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 這裡可以放一些 ...
  • 推薦方法一: <meta name="referrer" content="never"> 就這麼一句話,把它放到<head>頭裡就可以了。記得要把其他影響圖片的東西給刪了,不然會衝突。 我自己本人的,因為我希望點擊一個鏈接時跳轉到微信圖文,然後在該頁面點擊返回圖標從微信圖文返回之前的APP頁面,我 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...