自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

加速,加速,再加速:來自Google的網(wǎng)站加速技巧大全

譯文
開發(fā) 前端
網(wǎng)站加速看似事小,實則對用戶體驗及訪問量影響極大。對Web開發(fā)有著深刻理解的將其研究結(jié)果和數(shù)據(jù)共享了出來,并提供了大量的網(wǎng)站加速教程,本文就對這些教程加以整理,與諸位共勉。

【51CTO譯文精選】困擾許多網(wǎng)站所有者很久的一個問題是網(wǎng)站訪問速度總是那么慢。想購買獨立帶寬,預算不允許,想購買CDN加速,價格又太貴。那有沒有經(jīng)濟實惠的解決辦法呢?從目前的大環(huán)境來分析,我們也只有通過技術手段來解決這個問題了。

對Web開發(fā)有著深刻理解的著名搜索引擎廠商Google前段時間發(fā)布了一款Firefox /Firebug插件Page Speed(為什么是Firefox 而不是Chrome?),并已開源,網(wǎng)絡管理員和Web開發(fā)人員使用這個插件對Web頁面的性能進行評估,并提供改善性能的有益建議。并于今日呼吁大家共同努力,一起為互聯(lián)網(wǎng)加速,可不是提什么空口號,Google已經(jīng)將其研究結(jié)果和數(shù)據(jù)共享了出來,并提供了大量的網(wǎng)站加速教程,本文就對這些教程加以整理,與諸位共勉。(近來,Google對網(wǎng)站加速的重視程度越來越高,詳情見51CTO之前的頭條谷歌啟動Web加速計劃 擬改進TCP/IP和HTTP協(xié)議,以及Google研究小組有關搜索速度的最新報告

css:每個聲明只使用一次

要想讓你的網(wǎng)站速度更快,其中重要的一條就是發(fā)送到瀏覽器的客戶端代碼要盡可能小,在優(yōu)化css文件時,一個重要的原則就是每個聲明只使用一次。這樣就可以嚴格使用選擇器組合。

例如,你可以將這兩個規(guī)則

  1. h1 { color: black; }  
  2. p { color: black;   

合并成一個規(guī)則

  1. h1, p { colorblack; } 

這個例子是最簡單的了,實際開發(fā)中的情況要復雜得多,根據(jù)我個人的開發(fā)經(jīng)驗,每個聲明只使用一次后可以將css文件的大小降低20%-24%。下面再看一個復雜一點的例子:

  1. h1, h2, h3 { font-weightnormal; }  
  2. a strong { font-weightnormal !important; }  
  3. strong { font-styleitalicfont-weightnormal; }  
  4. #nav { font-styleitalic; }  
  5. .note { font-styleitalic; } 

根據(jù)每個聲明只使用一次的原則,將其縮減為

  1. h1, h2, h3, strong { font-weightnormal; }  
  2. a strong { font-weightnormal !important; }  
  3. strong, #nav, .note { font-styleitalic; }  

注意!important聲明可以與眾不同。

在應用這個方法時有幾點需要牢記于心:

◆首先,太長的選擇器可能致使這個方法無效,重復選擇器如html body table tbody tr td p span.example不能減少文件尺寸大小,實際上,每個聲明只使用一次可能意味著選擇器的數(shù)量會上升,甚至可能導致css文件更大,使用緊湊的選擇器是更有幫助的,并且可以提升樣式表的可讀性。

◆第二,小心css規(guī)則,當一個用戶代理不能解析選擇器時,必須忽略聲明,當你遇到這種情況時,只需要修改一下規(guī)則,讓其可以使用多次即可。

◆第三,也是最重要的一點,如果你對樣式表進行了排序,這個原則會改變你的排序,但這個順序可以由瀏覽器來決定,如果你使用這種方法運行出了問題,最好的解決辦法就是產(chǎn)生一個異常,并在出現(xiàn)問題的地方讓聲明使用多次就可以了。

在使用一個聲明只使用一次的方法維護樣式表時要格外小心,可以通過優(yōu)秀的編輯器來跟蹤變化(如顯示變化行),然后在需要的地方插入聲明,這種做法需要合并到工作流中。其實一個有效的方法是使用縮進排版,這樣就很容易發(fā)現(xiàn)重復的聲明的了。

使用gzip壓縮頁面

Gzip壓縮需要Web服務器的支持,在沒有gzip壓縮的情況下,Web服務器直接把html頁面發(fā)送給瀏覽器,而支持gzip的Web服務器將把html壓縮后再發(fā)給瀏覽器,支持gzip的瀏覽器再在本地進行解壓和解碼,并顯示出來。Gizp會將css文件,js文件,html文件中那些重復的字符串、標簽、空格和樣式定義進行壓縮。我們還是舉一個例子加以說明。

下面的代碼未壓縮前69字節(jié),壓縮后85字節(jié)。

  1. < h1>One< /h1> 
  2. < h2>Two< /h2> 
  3. < h3>Three< /h3> 
  4. < h4>Four< /h4> 
  5. < h5>Five< /h5> 

我們將標題標簽替換成div標簽,源代碼大小增加了10字節(jié),變成了79字節(jié),但經(jīng)過壓縮后只有66字節(jié)。

  1. < div>One< /div> 
  2. < div>Two< /div> 
  3. < div>Three< /div> 
  4. < div>Four< /div> 
  5. < div>Five< /div> 

HTTP緩存

如果你正確設置了HTTP緩存報頭,不但Web頁面載入速度更快了,而且Web服務器的負荷也減少了,是一個雙贏的舉措。

緩存也就是資源的本地副本,因為很多資源都不會頻繁更新,這時瀏覽器就可以直接從本地獲取資源,不用到服務器去取,節(jié)省了連接時間和資源下載時間,使用HTTP緩存真正起關鍵作用的是HTTP緩存報頭,這個報頭指定了資源的有效時間和最后修改時間。

http協(xié)議有兩種方法定義資源的有效時間:Expires和Cache-Control: max-age報頭。Expires報頭指定資源的過期日期,而max-age指定的是當資源下載到本地后多長時間有效。實際上它們要表達的最終含義是一致的。建議將資源的有效日期指定為1個月,長一點的話可以指定為1年。這兩個報頭一般只需要設置一個即可,如果同時進行了設置,那么max-age的優(yōu)先級比Expires要高一些。如果你的資源比這個設定期限更新得要頻繁一些,那么你可以采取對資源重新命名的方法,通常的做法是在URL中給資源加上版本號,當然這是引用資源的html頁面也得做對應的修改。

當本地資源是有效狀態(tài)時,瀏覽器有兩個選擇,其一是全部重新下載所有資源,其二是僅下載有變化的資源,為了讓瀏覽器只下載有變化的資源,我們需要在GET請求中加上條件,http協(xié)議給了我們兩個選項:Last-Modified和ETag報頭。

Last-Modified報頭指資源的最后修改時間,ETag報頭是每個資源不同版本的唯一身份識別號,我們推薦你使用Last-Modified報頭,因為日期如果足夠早,瀏覽器可以跳過請求全部資源的。下面是兩個測試頁。

關閉Expires

開啟Expires

在第二次載入頁面時,可以再次點擊鏈接,或者在地址欄中再按一次回車,如果點擊刷新按鈕,如果資源還在緩存中的話,會強制瀏覽器重新使用附條件的GET請求去獲取資源。

為了更清晰地看到這個完整過程,可以使用HttpWatch工具,它可以查看http報頭。如果使用Apache的話,可以參考mod_expires模塊的資料。

#p#

使用Page Speed提升網(wǎng)站性能

Page Speed是由Google發(fā)布了一款開源Firefox 插件,它可以評估Web頁面的性能問題,并能夠給出合理的優(yōu)化建議,同時它也可以將資源變得更小。

◆圖片壓縮

圖片文件中通常都包含了一些額外的信息,如JPEG圖片包括創(chuàng)建圖片所用工具的信息,PNG圖片通過創(chuàng)新編碼可以縮小文件大小,這些轉(zhuǎn)換都是無損的,壓縮后的圖片和未壓縮的圖片看起都是一樣的,但占用的字節(jié)數(shù)卻少了,

Page Speed使用優(yōu)化圖像功能嘗試為頁面中的所有圖片進行無損壓縮,如果成功的話,就顯示壓縮后的版本,為了使用圖片的最低版本,在Page Speed面板中點擊鏈接到壓縮版本,保存,使用它代替原始圖片。

◆削減JavaScript

移除大型JavaScript文件中的注釋和空格可以大幅度減少文件的尺寸,但功能卻無絲毫損傷。Page Speed提供了削減JavaScript的功能,削減成功后Page Speed會顯示一個到該文件的鏈接,如果要使用削減后的文件,點擊那個鏈接,保存文件,然后到html頁面中重新引用這個更小的JavaScript文件。

但這樣做有一個問題,削減后的JavaScript文件的移動性就降低了,如果你經(jīng)常更新的話,建議你使用另一個削減命令行工具JSMIN。

◆移除不用的css

移除css文件沒有使用到的規(guī)則將有助于減少css文件的大小,因為瀏覽器在瀏覽Web頁面時往往會將css文件下載到本地,這樣就可以減少發(fā)送到瀏覽器的信息量,從而加速頁面反應速度,但值得注意的是,有些外部css文件是由多個Web頁面引用的,在移除時要特別小心。

Page Speed提供了移除不同的css功能,它可以告訴你那些css規(guī)則是沒有被使用的。

除了上面提到的這三個功能外,Page Speed還有更多的功能等待你去發(fā)掘。

減少瀏覽器reflow

Reflow是瀏覽器為重新渲染文檔或文檔中的一部分,重新計算文檔元素的位置和幾何大小的統(tǒng)稱,因為reflow在瀏覽器中是一個用戶攔截操作,這對于開發(fā)人員理解如何提升reflow時間和不同文檔屬性(DOM深度、css規(guī)則效率、不同類型的樣式變化)對reflow時間的影響。有時reflow一個元素可能需要reflow文檔中的所有元素,以及跟著它的所有元素。

有很多中用戶行為和DHTML變化可以觸發(fā)reflow,如改變窗口大小、使用包含計算樣式的JavaScript函數(shù)、從DOM中添加或移除元素以及改變某個元素的類別都可以觸發(fā)reflow,值得注意的是有些行為可能導致reflow的時間比你想象中的要多。來看一張圖。

主流瀏覽器reflow時間對比 
圖- 1 主流瀏覽器reflow時間對比

從上圖可以看出不是JavaScript中任何樣式的變化都會觸發(fā)reflow,還可以看出瀏覽器版本越高reflow時間更好了。

在Google,我們對我們的頁面進行了大量的測試,最終我們認為要往頁面中添加UI元素時最值得考慮的因素就是reflow時間了。下面是我們整理的可以幫助減少reflow時間的方法:

◆減少不必要的DOM深度,在DOM樹上任意一層發(fā)生的變化都會影響到DOM樹的所有層,當然這在reflow時花的時間肯定比較多了。

◆縮小css規(guī)則,移除不用的css規(guī)則。

◆如果你使用更復雜的演示變化,如動畫,那么你最好使用絕對位置或?qū)⑽恢霉潭ㄏ聛怼?/P>

◆避免不必要的復雜的css選擇器,特別是衍生選擇器,它需要更多的CPU時間處理選擇器匹配。

#p#

優(yōu)化JavaScript代碼

客戶端代碼可以讓你的應用程序動起來變得更有活力,但這些代碼可能使瀏覽器變得更低效,不同的客戶端性能也不一樣,這里我們討論幾個優(yōu)化JavaScript的技巧。

◆字符串的使用

在IE6和IE7中因字符串級聯(lián)導致的主要問題是垃圾回收性能,雖然這些問題在IE8中已經(jīng)得到解決,但如果你的用戶大部分仍然在使用IE或IE7,你就得格外注意這個問題了??匆粋€例子先:

  1. var veryLongMessage =  
  2. 'This is a long string that due to our strict line length limit of' +  
  3. maxCharsPerLine +  
  4. ' characters per line must be wrapped. ' +  
  5. percentWhoDislike +  
  6. '% of engineers dislike this rule. The line length limit is for ' +  
  7. ' style purposes, but we don't want it to have a performance impact.' +  
  8. ' So the question is how should we do the wrapping?'

◆使用連接代替級聯(lián):

  1. var veryLongMessage =  
  2. ['This is a long string that due to our strict line length limit of',  
  3. maxCharsPerLine,  
  4. ' characters per line must be wrapped. ',  
  5. percentWhoDislike,  
  6. '% of engineers dislike this rule. The line length limit is for ',  
  7. ' style purposes, but we don't want it to have a performance impact.',  
  8. ' So the question is how should we do the wrapping?' 
  9. ].join(); 

與此類似,在條件語句中使用級別也是很低效的,錯誤的做法:

  1. var fibonacciStr = 'First 20 Fibonacci Numbers  
  2. ';  
  3. for (var i = 0; i <  20; i++) {  
  4. fibonacciStr += i + ' = ' + fibonacci(i) + '  
  5. ';  

正確的方法:

  1. var strBuilder = ['First 20 fibonacci numbers:'];  
  2. for (var i = 0; i <  20; i++) {  
  3.   strBuilder.push(i, ' = ', fibonacci(i));  
  4. }  
  5. var fibonacciStr = strBuilder.join(''); 

◆定義類函數(shù)

下面的函數(shù)是低效的,因為每次構造baz.Bar的實例時,會創(chuàng)建一個新的函數(shù)和閉包:

  1. baz.Bar = function() {  
  2.   // constructor body  
  3.   this.foo = function() {  
  4.   // method body  
  5.   };  
  6. }  

正確的方法是:

  1. baz.Bar = function() {  
  2.   // constructor body  
  3. };  
  4.  
  5. baz.Bar.prototype.foo = function() {  
  6.   // method body  
  7. };  

使用這個方法時,無論baz.Bar構造了多少個實例,都只會為foo創(chuàng)建一個函數(shù),而且不會創(chuàng)建閉包。

◆初始化實例變量

使用實例變量值類型初始值初始化實例變量聲明,如數(shù)值、布爾值、空值、未定義或字符串,這樣可以避免每次調(diào)用構造器時運行不必要的初始化代碼。還是來看一個例子:

  1. foo.Bar = function() {  
  2.   this.prop1_ = 4;  
  3.   this.prop2_ = true;  
  4.   this.prop3_ = [];  
  5.   this.prop4_ = 'blah';  
  6. };  

可以使用:

  1. foo.Bar = function() {  
  2.   this.prop3_ = [];  
  3. };  
  4.  
  5. foo.Bar.prototype.prop1_ = 4;  
  6.  
  7. foo.Bar.prototype.prop2_ = true;  
  8.  
  9. foo.Bar.prototype.prop4_ = 'blah';  
  10.  

進行代替。

◆避免使用with

避免在代碼中使用with,它會影響到性能,因為它修改了范圍鏈,因此需要花費更多時間到其它范圍去查找。

◆避免瀏覽器內(nèi)存泄漏

對于Web應用程序而言,內(nèi)存泄漏是很常見的事情,可能因此導致巨大的性能問題。因為瀏覽器的內(nèi)存使用在增長,你的Web應用程序和其它程序就會變慢,最常見的內(nèi)存泄漏是在JavaScript引擎和瀏覽器C++對象實現(xiàn)的DOM之間形成了循環(huán)引用,如在JavaScript引擎和IE瀏覽器的COM基礎結(jié)構之間,以及JavaScript引擎和Firefox  XPCOM基礎結(jié)構之間。

#p#

優(yōu)化網(wǎng)頁圖片

當你在優(yōu)化網(wǎng)頁代碼時,別忘了那些靜態(tài)內(nèi)容,包括圖片,經(jīng)過簡單的優(yōu)化就可以大大減少下載大小,并且也不會降低網(wǎng)站的質(zhì)量。

我們總結(jié)了一些技巧,可以幫助你加快網(wǎng)頁圖片的載入速度:

◆剪裁掉多余的空白

剪裁掉多余的空白 
圖- 2 剪裁掉多余的空白

如果確實需要空白內(nèi)邊距,可以使用css代碼來實現(xiàn)。

◆使用最佳的文件格式

可以通過一些專業(yè)的圖片處理工具,如photoshop就可以直接保存為網(wǎng)頁圖片,如果將圖片顏色從256色調(diào)整到32色,那文件大小會明顯變小,下面來看看一張圖片不同文件格式時的大小對比。

[[3971]] 
圖- 3 示例圖片

上面這張圖片不同文件格式時的大小對比結(jié)果如下:

◇JPG, 60 quality - 32K

◇PNG-8, 256 colors - 37K

◇GIF, 256 colors - 42K

◇PNG-24 - 146K

由于8位png和gif格式相對而言圖像質(zhì)量不錯,文件大小更小,因此在網(wǎng)頁中建議多使用這兩種格式。

PHP性能技巧

51CTO編輯注:對于以下這部分內(nèi)容,PHP小組已發(fā)布公開信反駁,其中的有些建議究竟是否正確還有待進一步研究。

由于PHP的使用量非常大,所以有必要放在這里說一說。首先有一點需要闡明的是,網(wǎng)站的性能與PHP版本,Web服務器環(huán)境和代碼的復雜度都是有關的。

◆升級PHP版本

首先要做的是升級PHP版本,如果你還在使用PHP3或PHP4,那趕快升級吧!

◆使用緩存

使用緩存模式,如memcached,可以將數(shù)據(jù)庫查詢結(jié)果或網(wǎng)頁緩存起來,加快Web服務器的響應速度。

◆使用緩沖輸出

PHP使用內(nèi)存緩沖存儲你的腳步嘗試打印的所有數(shù)據(jù),這個緩沖看起來好像讓你的網(wǎng)頁變慢,因為用戶必須等待緩沖被填滿,幸運的是,你可以做一些修改強制讓PHP快速清空輸出緩沖。

◆沒有原因盡量不要復制變量

有些PHP新手試圖通過拷貝預先定義的變量使代碼變得清晰,但事實是這樣會導致雙倍的內(nèi)存消耗。我們來看一個例子,假設有個不懷好意的用戶向文本區(qū)域插入了512KB的內(nèi)容,那么會使用1MB內(nèi)存:

  1. $description = strip_tags($_POST['description']);  
  2. echo $description;  

上面這個例子就是沒有原因的拷貝變量,其實可以簡化它,避免額外的內(nèi)存消耗:

  1. echo strip_tags($_POST['description']);  

◆避免在循環(huán)中執(zhí)行SQL查詢

一個常犯的錯誤是在循環(huán)中使用SQL查詢,這樣會引起多次數(shù)據(jù)庫往返,降低腳本速度,在下面的例子中,你可以修改循環(huán)構建一個SQL查詢,一次性插入所有的用戶:

  1. foreach ($userList as $user) {  
  2.   $query = 'INSERT INTO users (first_name,last_name) VALUES("' . $user['first_name'] . '", "' . $user['last_name'] . '")';  
  3.   mysql_query($query);  

改為:

  1. INSERT INTO users (first_name,last_name) VALUES("John""Doe")  

不用循環(huán),你可以合并成一次數(shù)據(jù)庫查詢:

  1. $userData = [];  
  2. foreach ($userList as $user) {  
  3.   $userData[] = '("' . $user['first_name'] . '", "' . $user['last_name'] . '")';  
  4. }  
  5. $query = 'INSERT INTO users (first_name,last_name) VALUES' . implode(','$iserData);  
  6. mysql_query($query);Produces:  
  7. INSERT INTO users (first_name,last_name) VALUES("John""Doe"),("Jane""Doe")... 

◆為長字符串使用單引號

PHP允許對字符串變量封裝同時使用單引號和雙引號,但是是有區(qū)別的,使用雙引號時,告訴PHP引擎讀取字符串內(nèi)容并查找變量,然后使用它們的值替換它們,對于一個很長的但沒有包含變量的字符串,將導致性能下降。

◆使用switch/case替代if/else

使用switch/case比使用if/else性能更好,易讀性和易維護性也更佳。

#p#

預取資源

預取資源就是當用戶還沒有請求該資源就預先下載到本地,那當用戶真正請求時,可以大大減小網(wǎng)絡延遲時間,甚至消除網(wǎng)絡延遲時間。

對于交互式網(wǎng)站,優(yōu)化速度不僅僅是減小初始下載大小,當用戶交互時可以下載額外的資源,這些行為的速度依賴于下載這些資源的時間,將下載資源變小可以加快網(wǎng)站速度。在設計預取資源時要考慮以下幾個問題:

◆研究用戶行為

如果你的用戶在某個特定的頁面或行為上花費了大量的時間,那這就是你該優(yōu)化的,你可以通過查找服務器日志來找出這些頁面和行為。對于picasa網(wǎng)絡相冊,我們知道最多的操作是一張張瀏覽圖片,那么這就是非常合適的預取對象。

◆衡量網(wǎng)頁準好的時間

在當前頁面沒有顯示完時不應該提取新頁面的數(shù)據(jù),對于動態(tài)頁面,你需要為頁面上每個外部文件添加JavaScript載入處理程序,當這些資源全部下載下來后,為用戶下一個行為預取數(shù)據(jù)就非常合理了。

◆使用工具測試

在正式修改代碼前,先用Page Speed這類工具進行測量,要避免一次提取太多數(shù)據(jù)造成網(wǎng)站變慢。

適當?shù)陌瑯邮胶湍_本

網(wǎng)頁載入時間一般80-90%的時間都花在等待網(wǎng)絡上了,最有力的方法是消除序列化下載資源。

聯(lián)合外部JavaScript文件

下載外部腳本文件時一般瀏覽器會等它下載完了再繼續(xù)后面的下載,這與并行下載圖片的行為是完全相反的。

例1:兩個外部腳本文件

例2:兩個外部圖片 

在例2中,兩個需要1秒的圖片合在一起時,總共也只需要1秒就完成下載了,在例1中,兩個需要1秒的腳步合在一起時,卻需要2秒才能完成下載,這是兩個不同的并行和串行下載。因此,如果你有多個外部腳本文件,最好將它們合并到一個文件中。

在外部JavaScript文件前包含額外的css文件

由于腳本文件會阻止后面的下載,那些已經(jīng)在下載中的將會繼續(xù)下載。

例3:在css之前的腳本

例4:在腳本前的css

在例3中,腳本在css文件前會導致瀏覽器堵塞,要花2秒時間,但只需要將css移到腳本前面就可以讓下載過程并行執(zhí)行,如例4。因此,如果你既有外部css文件,又有外部腳本文件,那么記住一定要將css文件放到腳本文件的前面。

在外部css和其它資源之間不包含內(nèi)聯(lián)JavaScript

使用內(nèi)聯(lián)腳本標簽時,即使它沒有下載任何東西,也會阻礙后面的下載。

例5:css后的內(nèi)聯(lián)腳本

例6:css前的內(nèi)聯(lián)腳本

例5中內(nèi)聯(lián)腳本塊位于樣式和腳本之間,下載時是串行的,在例6中,移到樣式前面后,再一次恢復到并行下載模式。因此,如果你有一個外部css文件,不要在你的css文件和下一個下載的資源之間插入內(nèi)聯(lián)腳本標簽。

#p#

減小HTML文檔的文件大小

想要減少網(wǎng)站的載入時間最佳的辦法就是減小HTML文件的大小,有很多種辦法可以實施,首先我們看看html哪些標簽是可以瘦身的。

◆HTML 4

根據(jù)HTML 4 DTD標準,可以有很多標記都省略掉,下面以斜體表示的標記都可省略掉:

< /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>

例如,如果你有標記為< li>List item< /li>的列表項目,那么你可以將其省略為< li>List item,在表示段落結(jié)束時一般使用< /p>標記,但這下也可以使用< p>My paragraph了,這種省略語法對html、body、head都有效,在html中它們不是必須的。這樣一通省略后,往往可以使整個html文件大小減小5-20%。

◆HTML 5

雖然HTML 5仍然在開發(fā)階段,它向你提供了更多減小文件大小的選項。例如。HTML 5允許你象下面這樣設置文檔類型:

  1. < !DOCTYPE html> 

相對

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

你會注意到HTML 5 DTD更短了。當你指定文檔的編碼時,HTML 5更易于使用,并且更輕巧了,< meta charset="utf-8">和< meta http-equiv="content-type" content="text/html; charset=utf-8">表示的含義是一樣的,瀏覽器一看也是知道要處理HTML。

在HTML 5中另一個值得一提的是可以省略掉與MIME類型關聯(lián)的類型屬性了,這些屬性如type="text/css"或type="text/javascript"描述了內(nèi)容的類型,現(xiàn)在可以使用< script>代替< script type="text/javascript">,使用< style>代替< style type="text/css">。

如果你將上面這些方法集合起來使用,將會節(jié)約10-20%的文件大小。請瀏覽Google的隱私頁面,它就全部采用了這些方法。

UI消息和感覺等待時間

對于很多用戶而言,速度并不等于性能,用戶對一個網(wǎng)站的速度感覺會受到他們的總體體驗影響,包括他們是否能夠有效地獲取到想要的內(nèi)容,以及系統(tǒng)是如何人響應的。

在設計你的網(wǎng)站時,要考慮用戶訪問該站點的目的是什么,越快(越容易)完成訪問網(wǎng)站越好,如果用戶在獲得內(nèi)容時遇到了很多困難,他們在完成任務后肯定會馬上離開你的站點,并可能再也不愿意回來。

其實要讓用戶覺得網(wǎng)站使用起來感覺很舒服,你有很多事情要做,這里只討論3個主題。

1. 網(wǎng)站設計是否足夠簡單,即使是第一次使用該網(wǎng)站的用戶也能夠順利地找到他們想要的內(nèi)容。要達到開箱即用的效果。你可以花10天時間來考慮界面流程如何優(yōu)化,這樣對于10萬用戶而言,節(jié)省的時間和價值都大多了。

2. 某個消息會打斷或增加用戶工作步驟嗎?

3. 用戶在等待期間該做點什么?例如顯示進度條,注意不要把進度條本身設計得過于龐大,一般建議使用“正在上傳......”,“載入中.......”等等這樣的純文本就可以了。

小結(jié)

本文列舉了12類加速網(wǎng)站的辦法,在實際工作,可以視具體情況靈活運用,當你完全掌握了這些方法后,也許會觸類旁通,引起你深入地追尋更深層次的加速辦法。

本文內(nèi)容由Google提供,黃永兵整理編譯。

【編輯推薦】

  1. 谷歌啟動Web加速計劃 擬改進TCP/IP和HTTP協(xié)議
  2. Google研究小組最新報告:互聯(lián)網(wǎng)上,速度最重要!
  3. Google將推出開發(fā)者社區(qū) 改善Web性能
  4. Google面向開發(fā)者推出網(wǎng)頁加速工具Page Speed
  5. Web性能測試種類與全面測試模型
責任編輯:yangsai 來源: 51CTO.com
相關推薦

2009-06-29 13:28:18

PHP小組PHP技巧網(wǎng)站加速

2010-02-01 09:21:49

GroovyGoogle App Gaelyk

2010-01-19 21:49:46

2010-01-20 14:55:27

2011-01-13 14:38:00

JavascriptCSSWeb

2009-04-02 13:46:19

多核Windows7服務器

2009-02-05 14:59:35

萬轉(zhuǎn)硬盤西數(shù)猛禽硬盤性能

2013-07-03 09:52:13

熱部署熱替換

2013-07-04 13:19:24

Java開發(fā)速度

2010-01-18 10:03:37

FreeBSD porFreeBSD

2010-08-10 15:13:11

GoGoogle

2010-11-04 13:08:48

Apache加速模塊

2013-06-05 10:17:40

應用交付深信服AD

2009-02-18 11:24:24

優(yōu)化加速PHP

2022-05-14 23:49:32

Python數(shù)據(jù)計算技巧

2017-02-27 17:56:59

Ubuntu系統(tǒng)技巧

2021-07-30 20:24:24

CDN網(wǎng)絡架構

2020-05-21 15:33:39

華為
點贊
收藏

51CTO技術棧公眾號