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

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

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

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

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

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

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

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

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

下面有幾種方法可以提升你的頁面性能，讓我們來看看

速度指標(biāo)

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

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

速度指標(biāo)可以通過Webpagetest?來測試（由Google維護(hù)）

長話短說

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

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

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

渲染阻塞

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

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

瀏覽器渲染的步驟

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

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

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

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

1. 阻塞渲染的CSS

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

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

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

移除沒用到的CSS。

那么我是如何找出沒用到的CSS的呢。

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

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

##專業(yè)小貼士

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

Pagespeed Insight?Chrome 插件.

Tag Counter?Chrome 插件.

2. 渲染阻塞的JavaScript

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

為了解決它

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

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

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

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

點擊查看async?和defer的瀏覽器支持。

內(nèi)存泄漏

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

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

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

下面是Chrome Task Manager的截圖。

Chrome DevTools分析

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

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

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

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

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

Dominators 視圖- 展示了?dominators?樹的堆圖。

點擊了解更多?Heap profiler。

DOM泄漏

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

來看一個例子

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不會被GC回收，因此導(dǎo)致了DOM泄漏。

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

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

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

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

總結(jié)

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

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