一、概述                                                                                                        

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

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

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

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

1、頁(yè)面渲染過(guò)程

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

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

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

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

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

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

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

1.1對(duì)于動(dòng)畫效果的實(shí)現(xiàn)，避免使用setTimeout或setInterval，請(qǐng)使用requestAnimationFrame

/**

function updateScreen(time) {

  // Make visual updates here.

}

requestAnimationFrame(updateScreen);

1.2把耗時(shí)長(zhǎng)的JavaScript代碼放到Web Workers中去做

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

1.4使用Chrome DevTools的Timeline和JavaScript Profiler來(lái)分析JavaScript的性能

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

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

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

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

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

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

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

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

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

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

6、對(duì)用戶輸入時(shí)間的處理去

四、chrome控制臺(tái)工具

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

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

總體有八個(gè)工具可供查看：元素，資源，網(wǎng)絡(luò)，源，時(shí)間表，簡(jiǎn)介，審核，控制臺(tái)。可以使用 Ctrl + [ 和 Ctrl + ] 快捷鍵在面板之間移動(dòng)。

Chrome每個(gè)模塊及其主要功能為：

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

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

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

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

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

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

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

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

本文主要講時(shí)間表timeline

時(shí)間表TimeLine

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

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

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

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

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

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

下圖是一個(gè)任選的一個(gè)網(wǎng)頁(yè)打開(kāi)的時(shí)間表：

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

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

       第三個(gè)框里表示存儲(chǔ)

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

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

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

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

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

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

上圖可見(jiàn)加載時(shí)間0.02s，腳本15.68s，渲染時(shí)間11.28s，繪制時(shí)間46.06s，其他時(shí)間49.06s，空閑1.27s時(shí)間。

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

五、其他的功能

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

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

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

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

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

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

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

總結(jié)

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

最新評(píng)論