本文由?伯樂(lè)在線?-?鴨梨山大?翻譯，sunbiaobiao?校稿。未經(jīng)許可，禁止轉(zhuǎn)載！
英文出處：gokulkrishh.github.io。歡迎加入翻譯小組。

如果你的網(wǎng)站在1000ms內(nèi)加載完成，那么會(huì)有平均一個(gè)用戶停留下來(lái)。2014年，平均網(wǎng)頁(yè)的大小是1.9MB。看下圖了解更多統(tǒng)計(jì)信息。

網(wǎng)站的核心內(nèi)容需要在1000ms內(nèi)呈現(xiàn)出來(lái)。如果失敗了，用戶將永遠(yuǎn)不會(huì)再訪問(wèn)你的網(wǎng)站。通過(guò)降低頁(yè)面加載的時(shí)間，很多著名公司的收入和下載量有顯著的提升。比如

• Walmart?每降低100ms的加載時(shí)間, 他們的收入就提高1%.
• Yahoo?每降低400ms的加載時(shí)間，他們的訪問(wèn)量就提升9%。
• Mozilla?將他們的頁(yè)面速度提升了2.2秒，每年多獲得了1.6億firefox的下載量。

網(wǎng)站優(yōu)化的步驟

設(shè)定性能預(yù)算。

測(cè)試當(dāng)前的性能。

找出導(dǎo)致性能問(wèn)題的地方。

最后，duang，使用優(yōu)化特技。

下面有幾種方法可以提升你的頁(yè)面性能，讓我們來(lái)看看

速度指標(biāo)

速度指標(biāo)是指頁(yè)面的可視部分被呈現(xiàn)在瀏覽器中的平均速度。表示為毫秒的形式，并且取決于viewport的大小。請(qǐng)看下圖（用視頻幀的形式展現(xiàn)頁(yè)面加載時(shí)間，以秒為單位）。

速度指標(biāo)越低越好。

速度指標(biāo)可以通過(guò)Webpagetest?來(lái)測(cè)試（由Google維護(hù)）

長(zhǎng)話短說(shuō)

Webpage test 有很多特性，比如在不同的地方用不同的瀏覽器跑多個(gè)測(cè)試。 還可以測(cè)算其他的數(shù)據(jù)比如加載時(shí)間，dom元素的數(shù)量，首字節(jié)時(shí)間等等…

例如：查看amazon在webpagetest上的測(cè)試結(jié)果?。

可以看看這個(gè)視頻，了解由?Patrick Meenan?講解的關(guān)于webpagetest的更多信息（需要FQ）。

渲染阻塞

如果你知道瀏覽器如何運(yùn)行，那么你應(yīng)該知道HTML, CSS, JS是怎么被瀏覽器解析的以及其中哪個(gè)阻塞了頁(yè)面的渲染。如果你不知道，請(qǐng)看下圖。

點(diǎn)擊how a browser works了解更多瀏覽器工作原理（作者為Tali Garsiel?和Paul Irish）.

瀏覽器渲染的步驟

首先瀏覽器解析HTML標(biāo)記去構(gòu)造DOM樹(shù)（DOM = Document Object Model 文檔對(duì)象模型）

然后解析CSS去構(gòu)造CSSOM樹(shù)( CSSOM = CSS Object Model CSS對(duì)象模型)

在將DOM和CSSOM樹(shù)結(jié)合成渲染樹(shù)之前，JS文件被解析和執(zhí)行。

現(xiàn)在你知道瀏覽器如何進(jìn)行解析了，讓我們看看是哪一部分阻塞了渲染樹(shù)的生成。

1. 阻塞渲染的CSS

有人認(rèn)為CSS阻塞了渲染。在構(gòu)造CSSOM時(shí)，所有的CSS都會(huì)被下載，無(wú)論它們是否在當(dāng)前頁(yè)面中被使用。

為了解決這個(gè)渲染阻塞，跟著下面的兩個(gè)步驟做

將關(guān)鍵CSS內(nèi)嵌入頁(yè)面中，即將最重要的（首次加載時(shí)可見(jiàn)的部分頁(yè)面所使用到的）style寫入head中的?<style></style>里。

移除沒(méi)用到的CSS。

那么我是如何找出沒(méi)用到的CSS的呢。

使用Pagespeed Insight?去得到像未使用的CSS，阻塞渲染的CSS和JS文件等等的統(tǒng)計(jì)數(shù)據(jù)。例如：Flipkart的Pagespeed Insight統(tǒng)計(jì)結(jié)果。

使用Gulp任務(wù)，如gulp-uncss或是使用Grunt 任務(wù)，如grunt-uncss。如果你不知道他們是什么，請(qǐng)閱讀我之前的文章。

##專業(yè)小貼士

使用CSS Stats保證頁(yè)面中完全沒(méi)有未被用到的元素，唯一的樣式和字體等等。

Pagespeed Insight?Chrome 插件.

Tag Counter?Chrome 插件.

2. 渲染阻塞的JavaScript

如果在解析HTML標(biāo)記時(shí)，瀏覽器遇到了JavaScript，解析會(huì)停止。只有在該腳本執(zhí)行完畢后，HTML渲染才會(huì)繼續(xù)進(jìn)行。所以這阻塞了頁(yè)面的渲染。

為了解決它

在<script></script>標(biāo)簽中使用 async或defer特性。

<script async>將會(huì)在HTML解析時(shí)下載該文件并在下載完成后馬上執(zhí)行。

<script defer> 將會(huì)在HTML解析式下載該文件并在HTML解析完成后執(zhí)行。

例如: async and defer都在Google Analytics中使用

點(diǎn)擊查看async?和defer的瀏覽器支持。

內(nèi)存泄漏

內(nèi)存泄漏和頁(yè)面臃腫?是前端開(kāi)發(fā)者所要面對(duì)的問(wèn)題之一。讓我們來(lái)看看如何發(fā)現(xiàn)并解決內(nèi)存泄漏。

在JavaScript中尋找內(nèi)存泄漏

使用Chrome Task Manager（任務(wù)管理器）去檢測(cè)app所使用的內(nèi)存以及js內(nèi)存（總體內(nèi)存+實(shí)時(shí)內(nèi)存）。如果你的內(nèi)存一直隨著你的每次操作而提高，那么你可以懷疑有內(nèi)存泄漏了。

下面是Chrome Task Manager的截圖。

Chrome DevTools分析

使用 Heap Profiler 去查看內(nèi)存泄漏。打開(kāi)Chrome devTools 然后點(diǎn)擊profiles 標(biāo)簽，接著選中 take heap snapshot。如果你不了解Chrome DevTools，請(qǐng)閱讀之前的文章.

Heap Profiler有四個(gè)快照視圖(snapshot view)

Summary 視圖 – 展示對(duì)象的總體數(shù)量以及它們的實(shí)例總數(shù)，淺部（Shallow）大小（對(duì)象本身的內(nèi)存大小）以及保留（Retained）大小（自動(dòng)GC發(fā)生后所釋放的內(nèi)存大小+無(wú)法執(zhí)行到的對(duì)象的內(nèi)存大小）。

Comparison 視圖- 用于比較一個(gè)操作的前后的兩個(gè)或多個(gè)快照，可以檢測(cè)內(nèi)存泄漏。

Containment 視圖- 展示了你的app對(duì)象架構(gòu)的整體視圖 + DOMWindow 對(duì)象(全局對(duì)象下的), GC 根部, 本地對(duì)象 (來(lái)自瀏覽器)。

Dominators 視圖- 展示了?dominators?樹(shù)的堆圖。

點(diǎn)擊了解更多?Heap profiler。

DOM泄漏

對(duì)DOM元素的引用會(huì)導(dǎo)致DOM泄漏并且阻礙自動(dòng)垃圾回收（GC）的進(jìn)行。

來(lái)看一個(gè)例子

1 2 3 4 5

<div> ????<div id="container"> ????????<h1 id="heading">I am just a heading nothing much</h1> ????</div> </div>

1 2 3 4 5 6 7 8

var parentEle = document.getElementById('container'); //get parent ele reference 得到父元素的引用 var headingEle = document.getElementById('heading'); //get child ele reference 得到子元素的引用 parentEle.remove(); //removes parent element from DOM 從DOM中移除父元素 //but its child ref still exist, So parentEle won't collect GC'd and causes DOM Leak //但是它的子元素引用仍然存在，所以parentEle不會(huì)被GC回收，因此導(dǎo)致了DOM泄漏。

將它的引用設(shè)置為null即可修復(fù)DOM泄漏。

1	headingEle = null; //Now parentEle will be GC'd

上面就是前端開(kāi)發(fā)者常遇到的問(wèn)題。今天就講到這。如果你喜歡我的文章，請(qǐng)分享或者在下面評(píng)論。謝謝！！

轉(zhuǎn)載于:https://www.cnblogs.com/ranran/p/4462876.html

總結(jié)

以上是生活随笔為你收集整理的Web性能优化系列（1）：Web性能优化分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。