給網(wǎng)頁設(shè)計(jì)師和前端開發(fā)者看的前端性能優(yōu)化

如果不是不可能，你也很難拒絕承認(rèn)性能目前已是任何正規(guī)網(wǎng)站項(xiàng)目的最關(guān)鍵方面之一，無論它是一個(gè)小型的網(wǎng)站組合，一個(gè)移動(dòng)優(yōu)先的web應(yīng)用，一直到一個(gè)大規(guī)模的商業(yè)項(xiàng)目。研究，論文和個(gè)人體驗(yàn)都告訴我們快速是最好的。

性能不僅僅是非常重要，它也相當(dāng)?shù)挠腥ぃ疫@也是我越來越投入的事，不僅在工作方面（我一直在煩我們的首席性能工程師），也在項(xiàng)目與CSS魔法網(wǎng)站方面（我一直在煩Andy Davies）。

在 這篇長文章中，我將分享收獲，關(guān)于快速，簡單且非常有趣的性能知識(shí)的點(diǎn)點(diǎn)滴滴，以便使你的行為可以像一個(gè)初級(jí)的網(wǎng)頁設(shè)計(jì)師和前端開發(fā)者；希望對(duì)任何想開始 學(xué)習(xí)性能的人，這篇文章可以成為一個(gè)正規(guī)的介紹，并使它們的前端變得超快。這些技巧是你能非常容易實(shí)現(xiàn)的。它只需要一點(diǎn)小技巧，以及一些瀏覽器怎樣工作的 基礎(chǔ)知識(shí)，你就能開始玩轉(zhuǎn)系統(tǒng)了！

這篇長帖子不會(huì)講到模糊圖像的加載和數(shù)據(jù)處理，取而代之的是有關(guān)理論與第一手的性能方面的技術(shù)資料，這些技術(shù)是我通過閱讀，觀察，搜集和整理獲得的（我花費(fèi)了許多時(shí)間沉浸于CSS魔法的瀑布圖）。我也會(huì)鏈接到其它相似話題的文章，以便幫助強(qiáng)化一些關(guān)鍵要點(diǎn)。享受吧！

注意 本文需要預(yù)先知曉一些基礎(chǔ)的性能知識(shí)，如果有任何你不熟悉的就Google搜索一下好了！

基礎(chǔ)知識(shí)

關(guān) 于性能，有一些知識(shí)在所有的設(shè)計(jì)師和前端開發(fā)者中廣為傳播。例如，盡可能少的請(qǐng)求，優(yōu)化圖片，把樣式表(stylesheets)放 在, 把JS放在之前, 最小化(minifying) JS 和 CSS 等等。這些基礎(chǔ)知識(shí)已經(jīng) 被用來加快用戶響應(yīng)了，但還有更多更多需要學(xué)習(xí)。

雖然在我們每天的工作生活中，瀏覽器給我們制造麻煩，使我們頭疼，但請(qǐng)記住，他們也是很聰 明的; 它們?yōu)槲覀冏隽撕芏嘈阅軆?yōu)化工作, 所以大量的性能調(diào)優(yōu)知識(shí)不但要知道瀏覽器在哪里給我們做了優(yōu)化，還要知道怎么更好的挖掘它們。大量性能調(diào)優(yōu)訣 竅只是理解，利用和操縱瀏覽器已經(jīng)替我們做好的優(yōu)化工作。

頂部的Styles, 底部的scripts

這真的是一條基本規(guī)則，每個(gè)人都能非常容易的在大多數(shù)時(shí)間遵守，但為什么它重要？簡短的說：

CSS 塊渲染, 因此你需要立即處理它（即在文檔的頂部，在你的之中）。

JS 塊下載, 因此你需要最后處理它們，以確保它們沒有耽誤頁面中任何其它東西。

CSS 塊渲染是因?yàn)闉g覽器總是試圖漸進(jìn)式的渲染頁面；它們想在元素到達(dá)的時(shí)候順序的渲染它。如果style在距離很遠(yuǎn)的頁面下部，瀏覽器在獲得它之前沒有辦法渲 染那個(gè)CSS。因?yàn)檫@個(gè)原因，如果瀏覽器在渲染文檔過程中，改變了之前渲染的東西，它們可以避免style的重繪。瀏覽器在它獲得所有需要的style信 息之前不會(huì)渲染頁面，如果你將style放在文檔底部，你就是在使瀏覽器等待，阻塞了渲染。

所以，只要你將CSS放在頁面的頂部，那么瀏覽器就可以立刻開始渲染。

JavaScript塊下載是由于好幾個(gè)原因（這又是瀏覽器聰明之處），但首先我們需要知道瀏覽器里的資源下載是如何實(shí)際發(fā)生的；簡單的說，瀏覽器會(huì)從一個(gè)單一的域名并行的盡可能多的下載資源。它從越多的域名下載，就能在一瞬間并行的獲得更多的資源。

JavaScript中斷了這個(gè)過程，阻塞了從任何一個(gè)域名的并行的下載，因?yàn)椋?/p>

被調(diào)用的腳本可能改變頁面，即瀏覽器在繼續(xù)別的事情以前，將不得不處理它。因此為了處理那個(gè)不測事件，瀏覽器停止了任何其它東西的下載，以便集中精力關(guān)注于它。

腳本正常工作經(jīng)常需要依照一定的順序加載，例如，要在加載一個(gè)插件之前加載jQuery。瀏覽器阻止了JavaScript的并行下載，因此它不會(huì)同時(shí)下載jQuery和你的插件；很顯然如果你同時(shí)并行下載二者，你的插件會(huì)在jQuery之前到達(dá)。

所 以，由于瀏覽器在獲取JavaScript的時(shí)候停止了所有其他下載，將你的JavaScript腳本放在文檔中盡可能晚加載的地方是一個(gè)好主意。我相信 你們都看到過頁面中的空白片段，在那里第三方的JS腳本被花時(shí)間加載，并且它還阻止了頁面其他資源的獲取和渲染；這就是JavaScript的阻塞在作用 了。

但是顯然，現(xiàn)代瀏覽器還是變得聰明了。我將給你一個(gè)Andy Davies寄給我的電子郵件的摘錄，因?yàn)樗忉尩谋任仪宄?/p>

漂亮的內(nèi)容！

所以，要使頁面被盡可能快的渲染，將styles放在頂部。為了阻止JS的阻塞影響到渲染，將scripts放在底部。

更少的請(qǐng)求

另 一個(gè)明顯而基本的性能優(yōu)化方法是少下載。頁面需要的每一個(gè)資源就是一次額外的HTTP請(qǐng)求；瀏覽器不得不停下來去獲取每一個(gè)用于渲染頁面所需的資源。每一 次HTTP請(qǐng)求都可能引發(fā)DNS查詢，重定向，404，等等。每一次HTTP請(qǐng)求，無論為了樣式表，圖片，web字體，JS文件還是其它你能想到的，都可 能是一次非常昂貴的操作。盡量減少這些請(qǐng)求是你可以做的最快的優(yōu)化方法中的一種.

再談到瀏覽器和并行；大多數(shù)瀏覽器一次只從每個(gè)引用的域下載一些資源，而JS會(huì)阻塞這些下載。所以，你做的每一個(gè)HTTP請(qǐng)求都應(yīng)該仔細(xì)考慮，而不是隨便隨便做的。

盡可能并行

為了讓瀏覽器能并行的下載更多資源，你可以由不同的域名提供服務(wù)。如果說，瀏覽器只能一次從一個(gè)域名獲取兩個(gè)資源，那么由兩個(gè)域名提供服務(wù)意味著它可以一次性獲取四個(gè)資源；三個(gè)域名意味著六個(gè)并行下載。

許多網(wǎng)站有靜態(tài)/資源 域名；你可以發(fā)現(xiàn)， Twitter, 用 si0.twimg.com 來做靜態(tài)資源：

1. <linkrel="stylesheet"href="https://si0.twimg.com/a/1358386289/t1/css/t1_core.bundle.css"type="text/css"media="screen">

Facebook 用fbstatic-a.akamaihd.net：

1. <linkrel="stylesheet"href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/76f893pcD3j.css">

通 過這些靜態(tài)的資源域名， Twitter與Facebook能提供更多的并行資源服務(wù)；來自twitter.com和si0.twimg.com的資源可 以協(xié)作方式下載。這真的是使你的頁面上獲得更多并發(fā)下載的簡單方法，如果再加上實(shí)際的CDN技術(shù)就會(huì)更好，CDN技術(shù)通過從一個(gè)更加合適的物理位置提供資 源服務(wù)的方法來減少延遲。

這全部都很好，但后面我們將討論在特定環(huán)境下，怎樣從子域名提供服務(wù)卻會(huì)實(shí)際上對(duì)性能有害。

因此，現(xiàn)在有了我們關(guān)于性能的基礎(chǔ)知識(shí)：

·將樣式表放在文檔的頂部

·將JavaScript放在底部（可能的地方）

·盡可能減少HTTP請(qǐng)求

·從多個(gè)域名提供資源服務(wù)能增加瀏覽器并行下載的資源數(shù)量。

HTTP 請(qǐng)求與 DNS 查詢

每 當(dāng)你從任何域名請(qǐng)求一個(gè)資源，會(huì)發(fā)出一個(gè)帶有相關(guān)頭部，被訪問資源的 HTTP請(qǐng)求，并且會(huì)返回一個(gè)響應(yīng)。這是對(duì)該過程的一個(gè)極端簡化，但它基本就是事實(shí) 上你需要知道的。這是一個(gè)HTTP請(qǐng)求，而且所有涉及的資源都從屬于這個(gè)往返的旅行。當(dāng)提到前端性能，這些請(qǐng)求正是主要的瓶頸所在，因?yàn)槿缥覀冋劦降?，瀏 覽器受限于有多少請(qǐng)求可以并行發(fā)生。這也是為什么我們經(jīng)常要使用子域名；以便允許這些請(qǐng)求在數(shù)個(gè)域名上發(fā)生，允許同時(shí)發(fā)生多得多數(shù)量的請(qǐng)求。

然 而關(guān)于這還有個(gè)問題，DNS查詢。每次（從一個(gè)空緩存）一個(gè)新的域名被引用，HTTP請(qǐng)求會(huì)受制于一個(gè)耗時(shí)的DNS查詢（某個(gè)介于20到120毫秒之間的 值），在DNS查詢中，發(fā)出的請(qǐng)求會(huì)查詢資源實(shí)際存在的地點(diǎn)；互聯(lián)網(wǎng)通過IP地址被綁定在一起，這些地址由DNS管理的主機(jī)名引用。

如果每個(gè)引用的新域名具有DNS查詢的前端代價(jià)，你必須確保這個(gè)代價(jià)確實(shí)是值得的。如果是一個(gè)小網(wǎng)站（例如像CSS魔法），那么由子域名提供資源可能并不值得；相比執(zhí)行多個(gè)域名的DNS查詢并將其并行化來說，從一個(gè)域名非并行的獲取若干資源，瀏覽器可能更快。

如 果你或許有一打資源，你可能會(huì)考慮從一個(gè)子域名提供它們的資源服務(wù)；為了更好的并行化那許多資源，額外的DNS查詢可能是值得的。如果說你有40個(gè)資源， 可能將那些資源切分到兩個(gè)子域名是值得的；為了由總數(shù)為三個(gè)的域名提供你的網(wǎng)站服務(wù)，兩個(gè)額外的DNS查詢會(huì)是值得的。

DNS查詢代價(jià)很高，因此你需要決定什么才是對(duì)你的網(wǎng)站更合適的；承擔(dān)查詢的消耗或者只是由一個(gè)域名提供所有服務(wù)。

很重要的需要記得的是，比方說一旦HTML被請(qǐng)求于foo.com，對(duì)那個(gè)主機(jī)的DNS查詢就立即發(fā)生了，所以后續(xù)的任何對(duì)foo.com的請(qǐng)求不再受制于DNS查詢。

DNS 預(yù)取

如 果你像我一樣想在網(wǎng)站上有一個(gè)Twitter小程序，還有網(wǎng)站分析，再也許一些網(wǎng)頁字體，那么你必須要鏈接到一些其它域名，這意味著你將不得不引發(fā)DNS 查詢。我的建議通常是，不要還沒有先適當(dāng)?shù)目紤]性能影響就使用某個(gè)或任何一個(gè)小程序，但對(duì)于你認(rèn)為確實(shí)需要的，下面的將很有用……

因?yàn)檫@些東西都存在于其它域名，比方說這就意味著你的網(wǎng)站字體CSS將會(huì)同你自己的CSS并行下載，從某種意義上說是一種好處，但是腳本將仍會(huì)阻塞（除非它們是異步的）

事實(shí)上，這里的問題是DNS查詢牽涉到了第三方域名。幸運(yùn)的是，有一個(gè)相當(dāng)快又簡單的辦法來加速這個(gè)過程：DNS預(yù)取.

DNS預(yù)取所做的恰恰就是憑證領(lǐng)餐(on the tin)，它不能被簡單實(shí)現(xiàn)。比方說，如果你需要請(qǐng)求來自widget.foo.com的資源，那么你可以通過簡單的在頁面的里先增加下面這個(gè)來預(yù)取那個(gè)主機(jī)的DNS：

1. <head>

2.     ...  

3. <linkrel="dns-prefetch"href="//widget.foo.com">

4.     ...  

5. head>

那行簡單的內(nèi)容將會(huì)告訴支持的瀏覽器去開始預(yù)取那個(gè)域名的DNS，這要稍稍早于它實(shí)際需要的時(shí)刻。