免費(fèi)AI編程助手
Web性能優(yōu)化分析
如果你的網(wǎng)站在1000ms內(nèi)加載完成，那么會(huì)有平均一個(gè)用戶停留下來。2014年，平均網(wǎng)頁的大小是1.9MB?？聪聢D了解更多統(tǒng)計(jì)信息。
網(wǎng)站的核心內(nèi)容需要在1000ms內(nèi)呈現(xiàn)出來。如果失敗了，用戶將永遠(yuǎn)不會(huì)再訪問你的網(wǎng)站。通過降低頁面加載的時(shí)間，很多著名公司的收入和下載量有顯著的提升。比如
- Walmart 每降低100ms的加載時(shí)間, 他們的收入就提高1%.
- Yahoo 每降低400ms的加載時(shí)間，他們的訪問量就提升9%。
- Mozilla 將他們的頁面速度提升了2.2秒，每年多獲得了1.6億firefox的下載量。
網(wǎng)站優(yōu)化的步驟
- 設(shè)定性能預(yù)算。
- 測(cè)試當(dāng)前的性能。
- 找出導(dǎo)致性能問題的地方。
- 最后，duang，使用優(yōu)化特技。
下面有幾種方法可以提升你的頁面性能，讓我們來看看
速度指標(biāo)
速度指標(biāo)是指頁面的可視部分被呈現(xiàn)在瀏覽器中的平均速度。表示為毫秒的形式，并且取決于viewport的大小。請(qǐng)看下圖（用視頻幀的形式展現(xiàn)頁面加載時(shí)間，以秒為單位）。
速度指標(biāo)越低越好。
速度指標(biāo)可以通過Webpagetest 來測(cè)試（由Google維護(hù)）
長話短說
Webpage test 有很多特性，比如在不同的地方用不同的瀏覽器跑多個(gè)測(cè)試。 還可以測(cè)算其他的數(shù)據(jù)比如加載時(shí)間，dom元素的數(shù)量，首字節(jié)時(shí)間等等…
例如：查看amazon在webpagetest上的測(cè)試結(jié)果 。
可以看看這個(gè)視頻，了解由 Patrick Meenan 講解的關(guān)于webpagetest的更多信息（需要翻墻）。
渲染阻塞
如果你知道瀏覽器如何運(yùn)行，那么你應(yīng)該知道HTML, CSS, JS是怎么被瀏覽器解析的以及其中哪個(gè)阻塞了頁面的渲染。如果你不知道，請(qǐng)看下圖。
點(diǎn)擊how a browser works了解更多瀏覽器工作原理（作者為Tali Garsiel 和Paul Irish）.
瀏覽器渲染的步驟
- 首先瀏覽器解析HTML標(biāo)記去構(gòu)造DOM樹（DOM = Document Object Model 文檔對(duì)象模型）
- 然后解析CSS去構(gòu)造CSSOM樹( CSSOM = CSS Object Model CSS對(duì)象模型)
- 在將DOM和CSSOM樹結(jié)合成渲染樹之前，JS文件被解析和執(zhí)行。
現(xiàn)在你知道瀏覽器如何進(jìn)行解析了，讓我們看看是哪一部分阻塞了渲染樹的生成。
1. 阻塞渲染的CSS
有人認(rèn)為CSS阻塞了渲染。在構(gòu)造CSSOM時(shí)，所有的CSS都會(huì)被下載，無論它們是否在當(dāng)前頁面中被使用。
為了解決這個(gè)渲染阻塞，跟著下面的兩個(gè)步驟做
- 將關(guān)鍵CSS內(nèi)嵌入頁面中，即將最重要的（首次加載時(shí)可見的部分頁面所使用到的）style寫入head中的
<style></style>里。 - 移除沒用到的CSS。
那么我是如何找出沒用到的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è)小貼士
2. 渲染阻塞的JavaScript
如果在解析HTML標(biāo)記時(shí)，瀏覽器遇到了JavaScript，解析會(huì)停止。只有在該腳本執(zhí)行完畢后，HTML渲染才會(huì)繼續(xù)進(jìn)行。所以這阻塞了頁面的渲染。
為了解決它
在<script></script>標(biāo)簽中使用 async或defer特性。
- <script async>將會(huì)在HTML解析時(shí)下載該文件并在下載完成后馬上執(zhí)行。
- <script defer> 將會(huì)在HTML解析式下載該文件并在HTML解析完成后執(zhí)行。
例如: async and defer都在Google Analytics中使用
內(nèi)存泄漏
內(nèi)存泄漏和頁面臃腫 是前端開發(fā)者所要面對(duì)的問題之一。讓我們來看看如何發(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)存泄漏。打開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)存大小+無法執(zhí)行到的對(duì)象的內(nèi)存大?。?。
- Comparison 視圖- 用于比較一個(gè)操作的前后的兩個(gè)或多個(gè)快照，可以檢測(cè)內(nèi)存泄漏。
- Containment 視圖- 展示了你的app對(duì)象架構(gòu)的整體視圖 + DOMWindow 對(duì)象(全局對(duì)象下的), GC 根部, 本地對(duì)象 (來自瀏覽器)。
- Dominators 視圖- 展示了 dominators 樹的堆圖。
點(diǎn)擊了解更多 Heap profiler。
DOM泄漏
對(duì)DOM元素的引用會(huì)導(dǎo)致DOM泄漏并且阻礙自動(dòng)垃圾回收（GC）的進(jìn)行。
來看一個(gè)例子
將它的引用設(shè)置為null即可修復(fù)DOM泄漏。
更多建議：