一、概述                                                                                                        

用戶都希望他們訪問的web應(yīng)用是可交互且運(yùn)行流暢的。因此，作為web開發(fā)者，也要在這方面多花點(diǎn)功夫。我們所做的頁面，不但要能被快速加載，還要能流暢運(yùn)行：頁面的滾動要快速響應(yīng)手指的動作，動畫和交互效果更要如絲般順滑。

這樣一來，想要編寫高性能的web站點(diǎn)就需要充分了解瀏覽器如何處理html/js/css，從而可以確保代碼是高效的。

二、FPS和性能優(yōu)化的必要

FPS是每秒刷新頻率，目前大多數(shù)設(shè)備的屏幕刷新率都是 60次/秒 ，如果在頁面中有一個動畫或漸變效果，或者用戶正在滑動頁面，那么瀏覽器渲染動畫或頁面的每一幀的速率都要保持16毫秒（1秒 / 60 = 16.66毫秒）之內(nèi)完成。

1、頁面渲染過程

但實(shí)際上，在渲染某一幀畫面的同時，瀏覽器還有一些額外的工作要做（比如渲染隊(duì)列的管理，渲染線程與其他線程之間的切換等等）。因此單純的渲染工作，一般需要控制在10毫秒之內(nèi)完成，才能達(dá)到流暢的視覺效果。如果超過了這個時間限度，頁面的渲染就會出現(xiàn)卡頓效果，也就是常說的jank，它是很糟糕的用戶體驗(yàn)。

頁面轉(zhuǎn)化為屏幕上的像素大致要經(jīng)歷以下五個階段：

從左到右依次是JS，樣式，布局，繪制，渲染層合并。

       a.繪制：本質(zhì)上就是填充像素的過程。第一步是創(chuàng)建一系列draw調(diào)用；第二步填充像素，也稱為（rasterization）光柵化

       b渲染層合并：指瀏覽器會將所有層按照合理的順序合并成一個圖層，然后顯示在屏幕上。

三、性能優(yōu)化提升的方法

1、優(yōu)化javascript的執(zhí)行效率

1.1對于動畫效果的實(shí)現(xiàn)，避免使用setTimeout或setInterval，請使用requestAnimationFrame

/**

function updateScreen(time) {

  // Make visual updates here.

}

requestAnimationFrame(updateScreen);

1.2把耗時長的JavaScript代碼放到Web Workers中去做

1.3把DOM元素的更新劃分為多個小任務(wù)，分別在多個frame中去完成

1.4使用Chrome DevTools的Timeline和JavaScript Profiler來分析JavaScript的性能

2、降低樣式計(jì)算的范圍和復(fù)雜度

在最壞的情況下，樣式計(jì)算量 = 元素個數(shù) x 樣式選擇器個數(shù)。因?yàn)閷γ總€元素最少需要檢查一次所有的樣式，以確認(rèn)是否匹配。

2.1 降低樣式選擇器的復(fù)雜度；使用基于class的方式，比如BEM

2.2減少需要執(zhí)行樣式計(jì)算的元素的個數(shù)

2.3使用DevTools，選擇Timeline標(biāo)簽，點(diǎn)擊左上角紅色record按鈕

3、避免大規(guī)模復(fù)雜的布局

布局是瀏覽器計(jì)算DOM元素的幾何信息的過程：元素大小和在頁面中的位置。布局的時間消耗主要在于：需要布局的DOM元素的數(shù)量；布局過程的復(fù)雜程度。

3.1應(yīng)該盡可能避免觸發(fā)布局：DOM元素的幾何屬性的修改都需要重新布局

4、簡化繪制的復(fù)雜度、減少繪制區(qū)域

5、優(yōu)先使用渲染層合并屬性、控制層的數(shù)量

6、對用戶輸入時間的處理去

四、chrome控制臺工具

控制臺，也稱開發(fā)者工具，是瀏覽器自帶的一種調(diào)試工具。目前主流的控制臺有：火狐的firebug，chrome開發(fā)工具，用于safiri的調(diào)試工具。

用chrome瀏覽器打開任意網(wǎng)頁點(diǎn)擊F12或者點(diǎn)擊鼠標(biāo)右鍵選擇“審查元素”都可以打開控制臺。本文以500主站作為范例，點(diǎn)擊F12出現(xiàn)控制臺，如下圖所示：

總體有八個工具可供查看：元素，資源，網(wǎng)絡(luò)，源，時間表，簡介，審核，控制臺?？梢允褂?Ctrl + [ 和 Ctrl + ] 快捷鍵在面板之間移動。

Chrome每個模塊及其主要功能為：

      Element ： 用于查看和編輯當(dāng)前頁面中的 HTML 和 CSS 元素。

      Network ：用于查看 HTTP 請求的詳細(xì)信息，如請求頭、響應(yīng)頭及返回內(nèi)容等。

      Source ：用于查看和調(diào)試當(dāng)前頁面所加載的腳本的源文件。

      TimeLine ： 用于查看腳本的執(zhí)行時間、頁面元素渲染時間等信息。

      Profiles ：用于查看 CPU 執(zhí)行時間與內(nèi)存占用等信息。

      Resource ：用于查看當(dāng)前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。

      Audits ：用于優(yōu)化前端頁面，加速網(wǎng)頁加載速度等。

      Console ：用于顯示腳本中所輸出的調(diào)試信息，或運(yùn)行測試腳本等。

本文主要講時間表timeline

時間表TimeLine

每一個寫進(jìn)頁面的資源都會有自己的渲染繪畫結(jié)果，因而呈現(xiàn)了我們眼中很美的網(wǎng)頁。但是也會消耗我們的資源，例如寬帶，CPU，或者時間。資源被生成的時候就注定了周期，請求聲明周期的主要階段如下圖所示:

時間表可以記錄和運(yùn)行分析應(yīng)用程序所有的活動，為了使的記錄頁面的交互，打開時間軸面板，然后按開始錄制錄制按鈕（），或者通過鍵入鍵盤快捷鍵Cmd的 +E（Mac）或按Ctrl +E（Windows / Linux版）。這個記錄按鈕會從灰色變成紅色，而Timeline將開始從你的頁面獲取時間線（timeline）。在你的應(yīng)用中完成一些操作，記錄到一些數(shù)據(jù)之后，再一次點(diǎn)擊按鈕來停止記錄。

請注意：會清除你現(xiàn)有的記錄會話，以便開始一個新的會話。將會強(qiáng)迫V8完成一輪的垃圾回收，在調(diào)試中它很有用。將會對顯示的詳細(xì)信息進(jìn)行過濾，只顯示那些完成耗時超過15ms的記錄

首先看一下timeline的主要目錄：

紅色的點(diǎn)旁邊是清除記錄。后面的選項(xiàng)可以選擇需要capture捕獲的項(xiàng)。分別是網(wǎng)絡(luò)，JS簡介，截圖，存儲，描繪。

展示方式有兩種：左邊是幀模式，右邊是事件event模式. 幀模式可以深入到每一幀生成的內(nèi)部細(xì)節(jié)。事件模式可以查看影響性能的成本要素優(yōu)先級排序。

下圖是一個任選的一個網(wǎng)頁打開的時間表：

        第一個框里是概述，這里可以大致看到頁面的性能。

       第二個框里是event，即是事件監(jiān)控。這是CPU的堆棧跟蹤的可視化，綠色表示媒體時間，紅色表示負(fù)載事件，藍(lán)色表示DOM事件。

       第三個框里表示存儲

       第四個框里是詳細(xì)信息，這里會顯示事件的詳細(xì)信息。

在這個模式中，Summary視圖(在Timeline的頂部)顯示了一些水平的柵欄，分別代表頁面中的網(wǎng)絡(luò)和HTML解析(藍(lán)色)，JavaScript(黃色)，樣式重計(jì)算和布局(紫色)以及繪畫和合成(綠色)事件。重繪是瀏覽器事件，是為響應(yīng)諸如窗口大小改變或者滾動之類的視覺變化而調(diào)用的。

在Summary視圖下面是Details視圖，包含了某個會話被記錄后，相關(guān)類別的記錄的詳細(xì)內(nèi)容。

每一個記錄在左側(cè)有用于說明的標(biāo)題，右側(cè)是時間軸區(qū)域。鼠標(biāo)移到一個記錄之上，會顯示更多的提示信息，其中包括從開始錄制到結(jié)束的時間

CPU資源。此區(qū)域圖指明了事件的類型消耗的CPU資源。

當(dāng)選擇了一個事件火焰表中，詳細(xì)信息窗格顯示有關(guān)該事件的更多信息，如下圖所示：

上圖可見加載時間0.02s，腳本15.68s，渲染時間11.28s，繪制時間46.06s，其他時間49.06s，空閑1.27s時間。

上圖是總表。下圖是詳細(xì)匯總表。

五、其他的功能

1、連接安卓手機(jī)調(diào)試代碼

       需要手機(jī)和電腦有chrome瀏覽器，安卓手機(jī)連接USB至PC

1.1在手機(jī)開發(fā)者工具中選擇允許USB調(diào)試

1.2打開chrome://inspect/#devices，選擇允許USB調(diào)試

會檢測到可用的安卓手機(jī)和安卓手機(jī)打開的頁面，也可以自己輸入url，如下圖所示：

1.3點(diǎn)擊 圖片中的inspect,即可進(jìn)入手機(jī)頁面的調(diào)試狀態(tài)。

這樣就可以在電腦上操作和調(diào)試手機(jī)頁面了。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論