Web性能優(yōu)化分析

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

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

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

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

1. 設(shè)定性能預(yù)算。
2. 測試當(dāng)前的性能。
3. 找出導(dǎo)致性能問題的地方。
4. 最后，duang，使用優(yōu)化特技。

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

速度指標(biāo)

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

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

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

長話短說

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

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

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

渲染阻塞

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

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

瀏覽器渲染的步驟

1. 首先瀏覽器解析HTML標(biāo)記去構(gòu)造DOM樹（DOM = Document Object Model 文檔對象模型）
2. 然后解析CSS去構(gòu)造CSSOM樹( CSSOM = CSS Object Model CSS對象模型)
3. 在將DOM和CSSOM樹結(jié)合成渲染樹之前，JS文件被解析和執(zhí)行。

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

1. 阻塞渲染的CSS

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

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

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

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

1. 使用Pagespeed Insight 去得到像未使用的CSS，阻塞渲染的CSS和JS文件等等的統(tǒng)計(jì)數(shù)據(jù)。例如：Flipkart的Pagespeed Insight統(tǒng)計(jì)結(jié)果。
2. 使用Gulp任務(wù)，如gulp-uncss或是使用Grunt 任務(wù)，如grunt-uncss。如果你不知道他們是什么，請閱讀我之前的文章。

##專業(yè)小貼士

1. 使用CSS Stats保證頁面中完全沒有未被用到的元素，唯一的樣式和字體等等。
2. Pagespeed Insight Chrome 插件.
3. Tag Counter Chrome 插件.

2. 渲染阻塞的JavaScript

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

為了解決它

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

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

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

點(diǎn)擊查看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)存+實(shí)時(shí)內(nèi)存）。如果你的內(nèi)存一直隨著你的每次操作而提高，那么你可以懷疑有內(nèi)存泄漏了。

下面是Chrome Task Manager的截圖。

Chrome DevTools分析

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

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

1. Summary 視圖 – 展示對象的總體數(shù)量以及它們的實(shí)例總數(shù)，淺部（Shallow）大?。▽ο蟊旧淼膬?nèi)存大?。┮约氨Ａ簦≧etained）大小（自動GC發(fā)生后所釋放的內(nèi)存大小+無法執(zhí)行到的對象的內(nèi)存大?。?/li>
2. Comparison 視圖- 用于比較一個(gè)操作的前后的兩個(gè)或多個(gè)快照，可以檢測內(nèi)存泄漏。
3. Containment 視圖- 展示了你的app對象架構(gòu)的整體視圖 + DOMWindow 對象(全局對象下的), GC 根部, 本地對象 (來自瀏覽器)。
4. Dominators 視圖- 展示了 dominators 樹的堆圖。

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

DOM泄漏

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

來看一個(gè)例子

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