《前端之路》之網頁生成的過程及對性能的影響

時間 2019-12-11

原文原文鏈接

11: 網頁生成的過程及對性能的影響

網頁生成的過程

網頁生成過程，大體能夠分紅五步javascript

1. HTML代碼轉化爲DOM

2. CSS代碼轉化成CSSOM（CSS Object Model）

3. 結合DOM和CSSOM，生成一棵渲染樹（包含每一個節點的視覺信息）

4. 生成佈局（layout），即將全部渲染樹的全部節點進行平面合成

5. 將佈局繪製（paint）在屏幕上

在這五步裏面，第一步到第三部都很是快，第四步和第五步很耗時。vue

重排和重繪

網頁生成的時候，至少會渲染一次。而咱們須要關注的是用戶訪問過程當中，那些會致使網頁從新渲染的行爲：java

· 修改DOM

· 修改樣式表

· 用戶事件（例如鼠標懸停，頁面滾動，輸入框輸入文字等）

從新渲染，就涉及重排和重繪git

重排（reflow）github

即從新生成佈局，重排必然致使重繪，如元素位置的改變，就會觸發重排和重繪。web

重繪（repaint）瀏覽器

即從新繪製，須要注意的是，重繪不必定須要重排，好比改變某個元素的顏色，就只會觸發重繪，而不會觸發重排。框架

對於性能的影響

重排和重繪會不斷觸發，這是不可避免的，可是它們很是消耗資源，是致使網頁性能低下的根本緣由。dom

提升網頁性能，就是要下降重排和重繪的頻率和成本，儘可能少觸發從新渲染。工具

大部分瀏覽器經過隊列化修改和批量顯示優化重排版過程。然而有些操做會強迫刷新並要求全部計劃改變的部分馬上應用。

本資料做爲dom操做最佳實踐的補充

刷新率

網頁動畫的每一幀（frame）都是一次從新渲染，每秒低於24幀的動畫，人眼就能感覺到停頓。通常的網頁動畫，須要達到每秒30幀到60幀的頻率，才能比較流暢。

而大多數顯示器的刷新頻率是60Hz，爲了與系統一致，以及節省電力，瀏覽器會自動按照這個頻率，刷新動畫。因此，若是網頁可以作到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。這意味着，一秒以內進行60次從新渲染，每次從新渲染的時間不能超過16.66ms。

刷新率

FPS(frame per second)，即一秒之間可以完成多少次從新渲染

開發者工具的Timeline面板

經過JS代碼實現 FPS 的檢測

這個時候咱們拿我去年寫的 Vuejs 中文社區的網站。來試一試

VueJs 中文社區

打開控制檯執行下面的代碼：

// 返回是否 有 requestAnimationFrame 方法  1000ms 會執行 60 次
var rAF = function () {
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();


var frame = 0;
var allFrameCount = 0;
var lastTime = Date.now();
var lastFameTime = Date.now();
  
var loop = function () {
    var now = Date.now();
    var fs = (now - lastFameTime);
    var fps = Math.round(1000 / fs);
  
    lastFameTime = now;
    // 不置 0，在動畫的開頭及結尾記錄此值的差值算出 FPS
    allFrameCount++;
    frame++;
  
    if (now > 1000 + lastTime) {
        var fps = Math.round((frame * 1000) / (now - lastTime));
        console.log(`${new Date()} 1S內 FPS：`, fps);
        frame = 0;
        lastTime = now;
    };
  
    rAF(loop);
}

loop();

而後咱們看到了以下的顯示：

Mon Aug 13 2018 20:14:44 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:45 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:46 GMT+0800 (中國標準時間) 1S內 FPS： 55
Mon Aug 13 2018 20:14:47 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:48 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:49 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:50 GMT+0800 (中國標準時間) 1S內 FPS： 58
Mon Aug 13 2018 20:14:51 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:52 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:53 GMT+0800 (中國標準時間) 1S內 FPS： 60
Mon Aug 13 2018 20:14:54 GMT+0800 (中國標準時間) 1S內 FPS： 56
Mon Aug 13 2018 20:14:55 GMT+0800 (中國標準時間) 1S內 FPS： 59

剛恰好屏幕的刷新率就在 60 fps 左右，很流暢。