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

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

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

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

網站優化的步驟

設定性能預算。

測試當前的性能。

找出導致性能問題的地方。

最后，duang，使用優化特技。

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

速度指標

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

速度指標越低越好。

速度指標可以通過Webpagetest?來測試（由Google維護）

長話短說

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

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

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

渲染阻塞

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

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

瀏覽器渲染的步驟

首先瀏覽器解析HTML標記去構造DOM樹（DOM = Document Object Model 文檔對象模型）

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

在將DOM和CSSOM樹結合成渲染樹之前，JS文件被解析和執行。

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

1. 阻塞渲染的CSS

有人認為CSS阻塞了渲染。在構造CSSOM時，所有的CSS都會被下載，無論它們是否在當前頁面中被使用。

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

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

移除沒用到的CSS。

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

使用Pagespeed Insight?去得到像未使用的CSS，阻塞渲染的CSS和JS文件等等的統計數據。例如：Flipkart的Pagespeed Insight統計結果。

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

##專業小貼士

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

Pagespeed Insight?Chrome 插件.

Tag Counter?Chrome 插件.

2. 渲染阻塞的JavaScript

如果在解析HTML標記時，瀏覽器遇到了JavaScript，解析會停止。只有在該腳本執行完畢后，HTML渲染才會繼續進行。所以這阻塞了頁面的渲染。

為了解決它

在<script></script>標簽中使用 async或defer特性。

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

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

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

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

內存泄漏

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

在JavaScript中尋找內存泄漏

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

下面是Chrome Task Manager的截圖。

Chrome DevTools分析

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

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

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

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

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

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

點擊了解更多?Heap profiler。

DOM泄漏

對DOM元素的引用會導致DOM泄漏并且阻礙自動垃圾回收（GC）的進行。

來看一個例子

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回收，因此導致了DOM泄漏。

將它的引用設置為null即可修復DOM泄漏。

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

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

轉載于:https://www.cnblogs.com/ranran/p/4462876.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。