加速，加速，再加速：來自Google的網(wǎng)站加速技巧大全
譯文【51CTO譯文精選】困擾許多網(wǎng)站所有者很久的一個(gè)問題是網(wǎng)站訪問速度總是那么慢。想購買獨(dú)立帶寬，預(yù)算不允許，想購買CDN加速，價(jià)格又太貴。那有沒有經(jīng)濟(jì)實(shí)惠的解決辦法呢？從目前的大環(huán)境來分析，我們也只有通過技術(shù)手段來解決這個(gè)問題了。
對(duì)Web開發(fā)有著深刻理解的著名搜索引擎廠商Google前段時(shí)間發(fā)布了一款Firefox /Firebug插件Page Speed（為什么是Firefox 而不是Chrome？），并已開源，網(wǎng)絡(luò)管理員和Web開發(fā)人員使用這個(gè)插件對(duì)Web頁面的性能進(jìn)行評(píng)估，并提供改善性能的有益建議。并于今日呼吁大家共同努力，一起為互聯(lián)網(wǎng)加速，可不是提什么空口號(hào)，Google已經(jīng)將其研究結(jié)果和數(shù)據(jù)共享了出來，并提供了大量的網(wǎng)站加速教程，本文就對(duì)這些教程加以整理，與諸位共勉。（近來，Google對(duì)網(wǎng)站加速的重視程度越來越高，詳情見51CTO之前的頭條谷歌啟動(dòng)Web加速計(jì)劃 擬改進(jìn)TCP/IP和HTTP協(xié)議，以及Google研究小組有關(guān)搜索速度的最新報(bào)告）
css：每個(gè)聲明只使用一次
要想讓你的網(wǎng)站速度更快，其中重要的一條就是發(fā)送到瀏覽器的客戶端代碼要盡可能小，在優(yōu)化css文件時(shí)，一個(gè)重要的原則就是每個(gè)聲明只使用一次。這樣就可以嚴(yán)格使用選擇器組合。
例如，你可以將這兩個(gè)規(guī)則
- h1 { color: black; }
- p { color: black;
合并成一個(gè)規(guī)則
- h1, p { color: black; }
這個(gè)例子是最簡單的了，實(shí)際開發(fā)中的情況要復(fù)雜得多，根據(jù)我個(gè)人的開發(fā)經(jīng)驗(yàn)，每個(gè)聲明只使用一次后可以將css文件的大小降低20%-24%。下面再看一個(gè)復(fù)雜一點(diǎn)的例子：
- h1, h2, h3 { font-weight: normal; }
- a strong { font-weight: normal !important; }
- strong { font-style: italic; font-weight: normal; }
- #nav { font-style: italic; }
- .note { font-style: italic; }
根據(jù)每個(gè)聲明只使用一次的原則，將其縮減為
- h1, h2, h3, strong { font-weight: normal; }
- a strong { font-weight: normal !important; }
- strong, #nav, .note { font-style: italic; }
注意!important聲明可以與眾不同。
在應(yīng)用這個(gè)方法時(shí)有幾點(diǎn)需要牢記于心：
◆首先，太長的選擇器可能致使這個(gè)方法無效，重復(fù)選擇器如html body table tbody tr td p span.example不能減少文件尺寸大小，實(shí)際上，每個(gè)聲明只使用一次可能意味著選擇器的數(shù)量會(huì)上升，甚至可能導(dǎo)致css文件更大，使用緊湊的選擇器是更有幫助的，并且可以提升樣式表的可讀性。
◆第二，小心css規(guī)則，當(dāng)一個(gè)用戶代理不能解析選擇器時(shí)，必須忽略聲明，當(dāng)你遇到這種情況時(shí)，只需要修改一下規(guī)則，讓其可以使用多次即可。
◆第三，也是最重要的一點(diǎn)，如果你對(duì)樣式表進(jìn)行了排序，這個(gè)原則會(huì)改變你的排序，但這個(gè)順序可以由瀏覽器來決定，如果你使用這種方法運(yùn)行出了問題，最好的解決辦法就是產(chǎn)生一個(gè)異常，并在出現(xiàn)問題的地方讓聲明使用多次就可以了。
在使用一個(gè)聲明只使用一次的方法維護(hù)樣式表時(shí)要格外小心，可以通過優(yōu)秀的編輯器來跟蹤變化（如顯示變化行），然后在需要的地方插入聲明，這種做法需要合并到工作流中。其實(shí)一個(gè)有效的方法是使用縮進(jìn)排版，這樣就很容易發(fā)現(xiàn)重復(fù)的聲明的了。
使用gzip壓縮頁面
Gzip壓縮需要Web服務(wù)器的支持，在沒有g(shù)zip壓縮的情況下，Web服務(wù)器直接把html頁面發(fā)送給瀏覽器，而支持gzip的Web服務(wù)器將把html壓縮后再發(fā)給瀏覽器，支持gzip的瀏覽器再在本地進(jìn)行解壓和解碼，并顯示出來。Gizp會(huì)將css文件，js文件，html文件中那些重復(fù)的字符串、標(biāo)簽、空格和樣式定義進(jìn)行壓縮。我們還是舉一個(gè)例子加以說明。
下面的代碼未壓縮前69字節(jié)，壓縮后85字節(jié)。
- < h1>One< /h1>
- < h2>Two< /h2>
- < h3>Three< /h3>
- < h4>Four< /h4>
- < h5>Five< /h5>
我們將標(biāo)題標(biāo)簽替換成div標(biāo)簽，源代碼大小增加了10字節(jié)，變成了79字節(jié)，但經(jīng)過壓縮后只有66字節(jié)。
- < div>One< /div>
- < div>Two< /div>
- < div>Three< /div>
- < div>Four< /div>
- < div>Five< /div>
HTTP緩存
如果你正確設(shè)置了HTTP緩存報(bào)頭，不但Web頁面載入速度更快了，而且Web服務(wù)器的負(fù)荷也減少了，是一個(gè)雙贏的舉措。
緩存也就是資源的本地副本，因?yàn)楹芏噘Y源都不會(huì)頻繁更新，這時(shí)瀏覽器就可以直接從本地獲取資源，不用到服務(wù)器去取，節(jié)省了連接時(shí)間和資源下載時(shí)間，使用HTTP緩存真正起關(guān)鍵作用的是HTTP緩存報(bào)頭，這個(gè)報(bào)頭指定了資源的有效時(shí)間和最后修改時(shí)間。
http協(xié)議有兩種方法定義資源的有效時(shí)間：Expires和Cache-Control: max-age報(bào)頭。Expires報(bào)頭指定資源的過期日期，而max-age指定的是當(dāng)資源下載到本地后多長時(shí)間有效。實(shí)際上它們要表達(dá)的最終含義是一致的。建議將資源的有效日期指定為1個(gè)月，長一點(diǎn)的話可以指定為1年。這兩個(gè)報(bào)頭一般只需要設(shè)置一個(gè)即可，如果同時(shí)進(jìn)行了設(shè)置，那么max-age的優(yōu)先級(jí)比Expires要高一些。如果你的資源比這個(gè)設(shè)定期限更新得要頻繁一些，那么你可以采取對(duì)資源重新命名的方法，通常的做法是在URL中給資源加上版本號(hào)，當(dāng)然這是引用資源的html頁面也得做對(duì)應(yīng)的修改。
當(dāng)本地資源是有效狀態(tài)時(shí)，瀏覽器有兩個(gè)選擇，其一是全部重新下載所有資源，其二是僅下載有變化的資源，為了讓瀏覽器只下載有變化的資源，我們需要在GET請(qǐng)求中加上條件，http協(xié)議給了我們兩個(gè)選項(xiàng)：Last-Modified和ETag報(bào)頭。
Last-Modified報(bào)頭指資源的最后修改時(shí)間，ETag報(bào)頭是每個(gè)資源不同版本的唯一身份識(shí)別號(hào)，我們推薦你使用Last-Modified報(bào)頭，因?yàn)槿掌谌绻銐蛟?，瀏覽器可以跳過請(qǐng)求全部資源的。下面是兩個(gè)測試頁。
在第二次載入頁面時(shí)，可以再次點(diǎn)擊鏈接，或者在地址欄中再按一次回車，如果點(diǎn)擊刷新按鈕，如果資源還在緩存中的話，會(huì)強(qiáng)制瀏覽器重新使用附條件的GET請(qǐng)求去獲取資源。
為了更清晰地看到這個(gè)完整過程，可以使用HttpWatch工具，它可以查看http報(bào)頭。如果使用Apache的話，可以參考mod_expires模塊的資料。
#p#
使用Page Speed提升網(wǎng)站性能
Page Speed是由Google發(fā)布了一款開源Firefox 插件，它可以評(píng)估Web頁面的性能問題，并能夠給出合理的優(yōu)化建議，同時(shí)它也可以將資源變得更小。
◆圖片壓縮
圖片文件中通常都包含了一些額外的信息，如JPEG圖片包括創(chuàng)建圖片所用工具的信息，PNG圖片通過創(chuàng)新編碼可以縮小文件大小，這些轉(zhuǎn)換都是無損的，壓縮后的圖片和未壓縮的圖片看起都是一樣的，但占用的字節(jié)數(shù)卻少了，
Page Speed使用優(yōu)化圖像功能嘗試為頁面中的所有圖片進(jìn)行無損壓縮，如果成功的話，就顯示壓縮后的版本，為了使用圖片的最低版本，在Page Speed面板中點(diǎn)擊鏈接到壓縮版本，保存，使用它代替原始圖片。
◆削減JavaScript
移除大型JavaScript文件中的注釋和空格可以大幅度減少文件的尺寸，但功能卻無絲毫損傷。Page Speed提供了削減JavaScript的功能，削減成功后Page Speed會(huì)顯示一個(gè)到該文件的鏈接，如果要使用削減后的文件，點(diǎn)擊那個(gè)鏈接，保存文件，然后到html頁面中重新引用這個(gè)更小的JavaScript文件。
但這樣做有一個(gè)問題，削減后的JavaScript文件的移動(dòng)性就降低了，如果你經(jīng)常更新的話，建議你使用另一個(gè)削減命令行工具JSMIN。
◆移除不用的css
移除css文件沒有使用到的規(guī)則將有助于減少css文件的大小，因?yàn)闉g覽器在瀏覽Web頁面時(shí)往往會(huì)將css文件下載到本地，這樣就可以減少發(fā)送到瀏覽器的信息量，從而加速頁面反應(yīng)速度，但值得注意的是，有些外部css文件是由多個(gè)Web頁面引用的，在移除時(shí)要特別小心。
Page Speed提供了移除不同的css功能，它可以告訴你那些css規(guī)則是沒有被使用的。
除了上面提到的這三個(gè)功能外，Page Speed還有更多的功能等待你去發(fā)掘。
減少瀏覽器reflow
Reflow是瀏覽器為重新渲染文檔或文檔中的一部分，重新計(jì)算文檔元素的位置和幾何大小的統(tǒng)稱，因?yàn)閞eflow在瀏覽器中是一個(gè)用戶攔截操作，這對(duì)于開發(fā)人員理解如何提升reflow時(shí)間和不同文檔屬性（DOM深度、css規(guī)則效率、不同類型的樣式變化）對(duì)reflow時(shí)間的影響。有時(shí)reflow一個(gè)元素可能需要reflow文檔中的所有元素，以及跟著它的所有元素。
有很多中用戶行為和DHTML變化可以觸發(fā)reflow，如改變窗口大小、使用包含計(jì)算樣式的JavaScript函數(shù)、從DOM中添加或移除元素以及改變某個(gè)元素的類別都可以觸發(fā)reflow，值得注意的是有些行為可能導(dǎo)致reflow的時(shí)間比你想象中的要多。來看一張圖。
圖- 1 主流瀏覽器reflow時(shí)間對(duì)比
從上圖可以看出不是JavaScript中任何樣式的變化都會(huì)觸發(fā)reflow，還可以看出瀏覽器版本越高reflow時(shí)間更好了。
在Google，我們對(duì)我們的頁面進(jìn)行了大量的測試，最終我們認(rèn)為要往頁面中添加UI元素時(shí)最值得考慮的因素就是reflow時(shí)間了。下面是我們整理的可以幫助減少reflow時(shí)間的方法：
◆減少不必要的DOM深度，在DOM樹上任意一層發(fā)生的變化都會(huì)影響到DOM樹的所有層，當(dāng)然這在reflow時(shí)花的時(shí)間肯定比較多了。
◆縮小css規(guī)則，移除不用的css規(guī)則。
◆如果你使用更復(fù)雜的演示變化，如動(dòng)畫，那么你最好使用絕對(duì)位置或?qū)⑽恢霉潭ㄏ聛怼?/P>
◆避免不必要的復(fù)雜的css選擇器，特別是衍生選擇器，它需要更多的CPU時(shí)間處理選擇器匹配。
#p#
優(yōu)化JavaScript代碼
客戶端代碼可以讓你的應(yīng)用程序動(dòng)起來變得更有活力，但這些代碼可能使瀏覽器變得更低效，不同的客戶端性能也不一樣，這里我們討論幾個(gè)優(yōu)化JavaScript的技巧。
◆字符串的使用
在IE6和IE7中因字符串級(jí)聯(lián)導(dǎo)致的主要問題是垃圾回收性能，雖然這些問題在IE8中已經(jīng)得到解決，但如果你的用戶大部分仍然在使用IE或IE7，你就得格外注意這個(gè)問題了。看一個(gè)例子先：
- var veryLongMessage =
- 'This is a long string that due to our strict line length limit of' +
- maxCharsPerLine +
- ' characters per line must be wrapped. ' +
- percentWhoDislike +
- '% of engineers dislike this rule. The line length limit is for ' +
- ' style purposes, but we don't want it to have a performance impact.' +
- ' So the question is how should we do the wrapping?';
◆使用連接代替級(jí)聯(lián)：
- var veryLongMessage =
- ['This is a long string that due to our strict line length limit of',
- maxCharsPerLine,
- ' characters per line must be wrapped. ',
- percentWhoDislike,
- '% of engineers dislike this rule. The line length limit is for ',
- ' style purposes, but we don't want it to have a performance impact.',
- ' So the question is how should we do the wrapping?'
- ].join();
與此類似，在條件語句中使用級(jí)別也是很低效的，錯(cuò)誤的做法：
- var fibonacciStr = 'First 20 Fibonacci Numbers
- ';
- for (var i = 0; i < 20; i++) {
- fibonacciStr += i + ' = ' + fibonacci(i) + '
- ';
- }
正確的方法：
- var strBuilder = ['First 20 fibonacci numbers:'];
- for (var i = 0; i < 20; i++) {
- strBuilder.push(i, ' = ', fibonacci(i));
- }
- var fibonacciStr = strBuilder.join('');
◆定義類函數(shù)
下面的函數(shù)是低效的，因?yàn)槊看螛?gòu)造baz.Bar的實(shí)例時(shí)，會(huì)創(chuàng)建一個(gè)新的函數(shù)和閉包：
- baz.Bar = function() {
- // constructor body
- this.foo = function() {
- // method body
- };
- }
正確的方法是：
- baz.Bar = function() {
- // constructor body
- };
- baz.Bar.prototype.foo = function() {
- // method body
- };
使用這個(gè)方法時(shí)，無論baz.Bar構(gòu)造了多少個(gè)實(shí)例，都只會(huì)為foo創(chuàng)建一個(gè)函數(shù)，而且不會(huì)創(chuàng)建閉包。
◆初始化實(shí)例變量
使用實(shí)例變量值類型初始值初始化實(shí)例變量聲明，如數(shù)值、布爾值、空值、未定義或字符串，這樣可以避免每次調(diào)用構(gòu)造器時(shí)運(yùn)行不必要的初始化代碼。還是來看一個(gè)例子：
- foo.Bar = function() {
- this.prop1_ = 4;
- this.prop2_ = true;
- this.prop3_ = [];
- this.prop4_ = 'blah';
- };
可以使用：
- foo.Bar = function() {
- this.prop3_ = [];
- };
- foo.Bar.prototype.prop1_ = 4;
- foo.Bar.prototype.prop2_ = true;
- foo.Bar.prototype.prop4_ = 'blah';
進(jìn)行代替。
◆避免使用with
避免在代碼中使用with，它會(huì)影響到性能，因?yàn)樗薷牧朔秶?，因此需要花費(fèi)更多時(shí)間到其它范圍去查找。
◆避免瀏覽器內(nèi)存泄漏
對(duì)于Web應(yīng)用程序而言，內(nèi)存泄漏是很常見的事情，可能因此導(dǎo)致巨大的性能問題。因?yàn)闉g覽器的內(nèi)存使用在增長，你的Web應(yīng)用程序和其它程序就會(huì)變慢，最常見的內(nèi)存泄漏是在JavaScript引擎和瀏覽器C++對(duì)象實(shí)現(xiàn)的DOM之間形成了循環(huán)引用，如在JavaScript引擎和IE瀏覽器的COM基礎(chǔ)結(jié)構(gòu)之間，以及JavaScript引擎和Firefox XPCOM基礎(chǔ)結(jié)構(gòu)之間。
#p#
優(yōu)化網(wǎng)頁圖片
當(dāng)你在優(yōu)化網(wǎng)頁代碼時(shí)，別忘了那些靜態(tài)內(nèi)容，包括圖片，經(jīng)過簡單的優(yōu)化就可以大大減少下載大小，并且也不會(huì)降低網(wǎng)站的質(zhì)量。
我們總結(jié)了一些技巧，可以幫助你加快網(wǎng)頁圖片的載入速度：
◆剪裁掉多余的空白
圖- 2 剪裁掉多余的空白
如果確實(shí)需要空白內(nèi)邊距，可以使用css代碼來實(shí)現(xiàn)。
◆使用最佳的文件格式
可以通過一些專業(yè)的圖片處理工具，如photoshop就可以直接保存為網(wǎng)頁圖片，如果將圖片顏色從256色調(diào)整到32色，那文件大小會(huì)明顯變小，下面來看看一張圖片不同文件格式時(shí)的大小對(duì)比。
上面這張圖片不同文件格式時(shí)的大小對(duì)比結(jié)果如下：
◇JPG, 60 quality - 32K
◇PNG-8, 256 colors - 37K
◇GIF, 256 colors - 42K
◇PNG-24 - 146K
由于8位png和gif格式相對(duì)而言圖像質(zhì)量不錯(cuò)，文件大小更小，因此在網(wǎng)頁中建議多使用這兩種格式。
PHP性能技巧
51CTO編輯注：對(duì)于以下這部分內(nèi)容，PHP小組已發(fā)布公開信反駁，其中的有些建議究竟是否正確還有待進(jìn)一步研究。
由于PHP的使用量非常大，所以有必要放在這里說一說。首先有一點(diǎn)需要闡明的是，網(wǎng)站的性能與PHP版本，Web服務(wù)器環(huán)境和代碼的復(fù)雜度都是有關(guān)的。
◆升級(jí)PHP版本
首先要做的是升級(jí)PHP版本，如果你還在使用PHP3或PHP4，那趕快升級(jí)吧！
◆使用緩存
使用緩存模式，如memcached，可以將數(shù)據(jù)庫查詢結(jié)果或網(wǎng)頁緩存起來，加快Web服務(wù)器的響應(yīng)速度。
◆使用緩沖輸出
PHP使用內(nèi)存緩沖存儲(chǔ)你的腳步嘗試打印的所有數(shù)據(jù)，這個(gè)緩沖看起來好像讓你的網(wǎng)頁變慢，因?yàn)橛脩舯仨毜却彌_被填滿，幸運(yùn)的是，你可以做一些修改強(qiáng)制讓PHP快速清空輸出緩沖。
◆沒有原因盡量不要復(fù)制變量
有些PHP新手試圖通過拷貝預(yù)先定義的變量使代碼變得清晰，但事實(shí)是這樣會(huì)導(dǎo)致雙倍的內(nèi)存消耗。我們來看一個(gè)例子，假設(shè)有個(gè)不懷好意的用戶向文本區(qū)域插入了512KB的內(nèi)容，那么會(huì)使用1MB內(nèi)存：
- $description = strip_tags($_POST['description']);
- echo $description;
上面這個(gè)例子就是沒有原因的拷貝變量，其實(shí)可以簡化它，避免額外的內(nèi)存消耗：
- echo strip_tags($_POST['description']);
◆避免在循環(huán)中執(zhí)行SQL查詢
一個(gè)常犯的錯(cuò)誤是在循環(huán)中使用SQL查詢，這樣會(huì)引起多次數(shù)據(jù)庫往返，降低腳本速度，在下面的例子中，你可以修改循環(huán)構(gòu)建一個(gè)SQL查詢，一次性插入所有的用戶：
- foreach ($userList as $user) {
- $query = 'INSERT INTO users (first_name,last_name) VALUES("' . $user['first_name'] . '", "' . $user['last_name'] . '")';
- mysql_query($query);
- }
改為：
- INSERT INTO users (first_name,last_name) VALUES("John", "Doe")
不用循環(huán)，你可以合并成一次數(shù)據(jù)庫查詢：
- $userData = [];
- foreach ($userList as $user) {
- $userData[] = '("' . $user['first_name'] . '", "' . $user['last_name'] . '")';
- }
- $query = 'INSERT INTO users (first_name,last_name) VALUES' . implode(',', $iserData);
- mysql_query($query);Produces:
- INSERT INTO users (first_name,last_name) VALUES("John", "Doe"),("Jane", "Doe")...
◆為長字符串使用單引號(hào)
PHP允許對(duì)字符串變量封裝同時(shí)使用單引號(hào)和雙引號(hào)，但是是有區(qū)別的，使用雙引號(hào)時(shí)，告訴PHP引擎讀取字符串內(nèi)容并查找變量，然后使用它們的值替換它們，對(duì)于一個(gè)很長的但沒有包含變量的字符串，將導(dǎo)致性能下降。
◆使用switch/case替代if/else
使用switch/case比使用if/else性能更好，易讀性和易維護(hù)性也更佳。
#p#
預(yù)取資源
預(yù)取資源就是當(dāng)用戶還沒有請(qǐng)求該資源就預(yù)先下載到本地，那當(dāng)用戶真正請(qǐng)求時(shí)，可以大大減小網(wǎng)絡(luò)延遲時(shí)間，甚至消除網(wǎng)絡(luò)延遲時(shí)間。
對(duì)于交互式網(wǎng)站，優(yōu)化速度不僅僅是減小初始下載大小，當(dāng)用戶交互時(shí)可以下載額外的資源，這些行為的速度依賴于下載這些資源的時(shí)間，將下載資源變小可以加快網(wǎng)站速度。在設(shè)計(jì)預(yù)取資源時(shí)要考慮以下幾個(gè)問題：
◆研究用戶行為
如果你的用戶在某個(gè)特定的頁面或行為上花費(fèi)了大量的時(shí)間，那這就是你該優(yōu)化的，你可以通過查找服務(wù)器日志來找出這些頁面和行為。對(duì)于picasa網(wǎng)絡(luò)相冊(cè)，我們知道最多的操作是一張張瀏覽圖片，那么這就是非常合適的預(yù)取對(duì)象。
◆衡量網(wǎng)頁準(zhǔn)好的時(shí)間
在當(dāng)前頁面沒有顯示完時(shí)不應(yīng)該提取新頁面的數(shù)據(jù)，對(duì)于動(dòng)態(tài)頁面，你需要為頁面上每個(gè)外部文件添加JavaScript載入處理程序，當(dāng)這些資源全部下載下來后，為用戶下一個(gè)行為預(yù)取數(shù)據(jù)就非常合理了。
◆使用工具測試
在正式修改代碼前，先用Page Speed這類工具進(jìn)行測量，要避免一次提取太多數(shù)據(jù)造成網(wǎng)站變慢。
適當(dāng)?shù)陌瑯邮胶湍_本
網(wǎng)頁載入時(shí)間一般80-90%的時(shí)間都花在等待網(wǎng)絡(luò)上了，最有力的方法是消除序列化下載資源。
聯(lián)合外部JavaScript文件
下載外部腳本文件時(shí)一般瀏覽器會(huì)等它下載完了再繼續(xù)后面的下載，這與并行下載圖片的行為是完全相反的。
例1：兩個(gè)外部腳本文件
例2：兩個(gè)外部圖片
在例2中，兩個(gè)需要1秒的圖片合在一起時(shí)，總共也只需要1秒就完成下載了，在例1中，兩個(gè)需要1秒的腳步合在一起時(shí)，卻需要2秒才能完成下載，這是兩個(gè)不同的并行和串行下載。因此，如果你有多個(gè)外部腳本文件，最好將它們合并到一個(gè)文件中。
在外部JavaScript文件前包含額外的css文件
由于腳本文件會(huì)阻止后面的下載，那些已經(jīng)在下載中的將會(huì)繼續(xù)下載。
例3：在css之前的腳本
例4：在腳本前的css
在例3中，腳本在css文件前會(huì)導(dǎo)致瀏覽器堵塞，要花2秒時(shí)間，但只需要將css移到腳本前面就可以讓下載過程并行執(zhí)行，如例4。因此，如果你既有外部css文件，又有外部腳本文件，那么記住一定要將css文件放到腳本文件的前面。
在外部css和其它資源之間不包含內(nèi)聯(lián)JavaScript
使用內(nèi)聯(lián)腳本標(biāo)簽時(shí)，即使它沒有下載任何東西，也會(huì)阻礙后面的下載。
例5中內(nèi)聯(lián)腳本塊位于樣式和腳本之間，下載時(shí)是串行的，在例6中，移到樣式前面后，再一次恢復(fù)到并行下載模式。因此，如果你有一個(gè)外部css文件，不要在你的css文件和下一個(gè)下載的資源之間插入內(nèi)聯(lián)腳本標(biāo)簽。
#p#
減小HTML文檔的文件大小
想要減少網(wǎng)站的載入時(shí)間最佳的辦法就是減小HTML文件的大小，有很多種辦法可以實(shí)施，首先我們看看html哪些標(biāo)簽是可以瘦身的。
◆HTML 4
根據(jù)HTML 4 DTD標(biāo)準(zhǔn)，可以有很多標(biāo)記都省略掉，下面以斜體表示的標(biāo)記都可省略掉：
< /area>
< /base>
< body>
< /body>
< /br>
< /col>
< /colgroup>
< /dd>
< /dt>
< head>
< /head>
< /hr>
< html>
< /html>
< /img>
< /input>
< /li>
< /link>
< /meta>
< /option>
< /p>
< /param>
< tbody>
< /tbody>
< /td>
< /tfoot>
< /th>
< /thead>
< /tr>
例如，如果你有標(biāo)記為< li>List item< /li>的列表項(xiàng)目，那么你可以將其省略為< li>List item，在表示段落結(jié)束時(shí)一般使用< /p>標(biāo)記，但這下也可以使用< p>My paragraph了，這種省略語法對(duì)html、body、head都有效，在html中它們不是必須的。這樣一通省略后，往往可以使整個(gè)html文件大小減小5-20%。
◆HTML 5
雖然HTML 5仍然在開發(fā)階段，它向你提供了更多減小文件大小的選項(xiàng)。例如。HTML 5允許你象下面這樣設(shè)置文檔類型：
- < !DOCTYPE html>
相對(duì)
- < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你會(huì)注意到HTML 5 DTD更短了。當(dāng)你指定文檔的編碼時(shí)，HTML 5更易于使用，并且更輕巧了，< meta charset="utf-8">和< meta http-equiv="content-type" content="text/html; charset=utf-8">表示的含義是一樣的，瀏覽器一看也是知道要處理HTML。
在HTML 5中另一個(gè)值得一提的是可以省略掉與MIME類型關(guān)聯(lián)的類型屬性了，這些屬性如type="text/css"或type="text/javascript"描述了內(nèi)容的類型，現(xiàn)在可以使用< script>代替< script type="text/javascript">，使用< style>代替< style type="text/css">。
如果你將上面這些方法集合起來使用，將會(huì)節(jié)約10-20%的文件大小。請(qǐng)瀏覽Google的隱私頁面，它就全部采用了這些方法。
UI消息和感覺等待時(shí)間
對(duì)于很多用戶而言，速度并不等于性能，用戶對(duì)一個(gè)網(wǎng)站的速度感覺會(huì)受到他們的總體體驗(yàn)影響，包括他們是否能夠有效地獲取到想要的內(nèi)容，以及系統(tǒng)是如何人響應(yīng)的。
在設(shè)計(jì)你的網(wǎng)站時(shí)，要考慮用戶訪問該站點(diǎn)的目的是什么，越快（越容易）完成訪問網(wǎng)站越好，如果用戶在獲得內(nèi)容時(shí)遇到了很多困難，他們?cè)谕瓿扇蝿?wù)后肯定會(huì)馬上離開你的站點(diǎn)，并可能再也不愿意回來。
其實(shí)要讓用戶覺得網(wǎng)站使用起來感覺很舒服，你有很多事情要做，這里只討論3個(gè)主題。
1. 網(wǎng)站設(shè)計(jì)是否足夠簡單，即使是第一次使用該網(wǎng)站的用戶也能夠順利地找到他們想要的內(nèi)容。要達(dá)到開箱即用的效果。你可以花10天時(shí)間來考慮界面流程如何優(yōu)化，這樣對(duì)于10萬用戶而言，節(jié)省的時(shí)間和價(jià)值都大多了。
2. 某個(gè)消息會(huì)打斷或增加用戶工作步驟嗎？
3. 用戶在等待期間該做點(diǎn)什么？例如顯示進(jìn)度條，注意不要把進(jìn)度條本身設(shè)計(jì)得過于龐大，一般建議使用“正在上傳......”，“載入中.......”等等這樣的純文本就可以了。
小結(jié)
本文列舉了12類加速網(wǎng)站的辦法，在實(shí)際工作，可以視具體情況靈活運(yùn)用，當(dāng)你完全掌握了這些方法后，也許會(huì)觸類旁通，引起你深入地追尋更深層次的加速辦法。
本文內(nèi)容由Google提供，黃永兵整理編譯。
【編輯推薦】
