性能優(yōu)化

雅虎給出了優(yōu)化網(wǎng)站加載速度的34條法則(包括Yslow規(guī)則22條) 詳細(xì)說明紫岩,下載轉(zhuǎn)發(fā) ponytail 的譯文(來自帕蘭映像)阳欲。

1.Minimize HTTP Requests 減少HTTP請求

圖片蚤假、css、script撵孤、flash等等這些都會增加http請求數(shù)肆氓,減少這些元素的數(shù)量就能減少響應(yīng)時間闲询。把多個JS、CSS在可能的情況下寫進(jìn)一個文件浅辙,頁面里直接寫入圖片也是不好的做法扭弧,應(yīng)該寫進(jìn)CSS里,利用 CSS sprites 將小圖拼合后利用background來定位记舆。

2.Use a Content Delivery Network 利用CDN技術(shù)

CDN 確實(shí)是好東西鸽捻,8過服務(wù)器提供商的這項(xiàng)服務(wù)一般是要收費(fèi)的,我以前買的國內(nèi)空間是有這個的但是我當(dāng)時根本不知道啥用泽腮,現(xiàn)在沒了御蒲。。诊赊。

3.Add an Expires or a Cache-Control Header 設(shè)置頭文件過期或者靜態(tài)緩存

瀏覽器會用緩存來減少http請求數(shù)來加快頁面加載的時間厚满,如果頁面頭部加一個很長的過期時間,瀏覽器就會一直緩存頁面里的元素碧磅。不過這樣如果 頁面里的東西變動的話就要改名字了碘箍,否則用戶端不會主動刷新,看自己衡量了~ 這項(xiàng)可以通過修改.htaccess文件來實(shí)現(xiàn)续崖。

4.Gzip Components Gzip壓縮

Gzip格式是一種很普遍的壓縮技術(shù)敲街,幾乎所有的瀏覽器都有解壓Gzip格式的能力,而且它可以壓縮的比例非常大严望,一般壓縮率為85%多艇。壓縮沒壓縮,可以到 這里 做下測試像吻。

5.Put Stylesheets at the Top 把CSS放頂部

讓瀏覽者能盡早的看到網(wǎng)站的完整樣式峻黍。

6.Put Scripts at the Bottom 把JS放底部

網(wǎng)站呈現(xiàn)完畢后再進(jìn)行功能設(shè)置,當(dāng)然這些JS要在你的加載過程中不影響內(nèi)容表現(xiàn)拨匆。

7.Avoid CSS Expressions 避免CSS Expressions

CSS表達(dá)式很可怕姆涩,這個只被IE支持的東西執(zhí)行時候的運(yùn)算量非常大,你移動一下鼠標(biāo)它都要進(jìn)行重計算的惭每,但有時候?yàn)榱俗鰹g覽器的兼容必須要用到這個||| IE6去死去死骨饿!~

8.Make JavaScript and CSS External 將JS和CSS外鏈

前面講到了緩存這個事情,一些較為公用的JS和CSS台腥,我們可以使用外鏈的形式宏赘,譬如我就是從Google外鏈來的jQuery文件,如果我的瀏覽者在瀏覽別的使用了這個外鏈文件的網(wǎng)站時已經(jīng)下載并緩存了這個文件黎侈,那么他在瀏覽我的網(wǎng)站的時候就不需要再進(jìn)行下載了察署!~

9.Reduce DNS Lookups 減少DNS查找

貌似是要減少網(wǎng)站從外部調(diào)用資源,我的Google分析和picasa的外鏈圖片都算在里面了峻汉。

10.Minify JavaScript and CSS 減小JS和CSS的體積

寫JS和CSS都是有技巧的贴汪,用最少的代碼實(shí)現(xiàn)同樣的功能脐往,減少空白,增強(qiáng)邏輯性扳埂,用縮寫方式等等业簿,當(dāng)然也有不少工具也能夠幫你實(shí)現(xiàn)這一點(diǎn)。

11. Avoid Redirects 避免重定向

再寫入鏈接時聂喇,雖然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 僅有一個最后的”/”只差辖源,但是結(jié)果是不同的,服務(wù)器需要花時間把前者重定向?yàn)楹笳呷缓筮M(jìn)行跳轉(zhuǎn)希太,這個要自己注意克饶,也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解決。

12. Remove Duplicate Scripts 刪除重復(fù)腳本

重復(fù)調(diào)用的代碼瀏覽器并不會識別忽略誊辉,而是會再次運(yùn)算一遍矾湃,這當(dāng)然是大大的浪費(fèi)。

13. Configure ETags 配置ETags

搞不清楚咋回事堕澄,總之我是在. htaccess里把它刪除了邀跃。

14. Make Ajax Cacheable 緩存Ajax

Ajax是實(shí)時響應(yīng)的,在瀏覽器接收到新的數(shù)據(jù)前蛙紫,舊的數(shù)據(jù)被緩存拍屑,這樣能夠更好的提高效率。

15. Flush the Buffer Early 盡早的釋放緩沖

當(dāng)用戶進(jìn)行頁面請求時坑傅,服務(wù)器端需要花費(fèi)200到500毫秒時間來拼合HTML僵驰,將寫在head與body之間,釋放緩沖唁毒,這樣可以將文件頭先發(fā)送出去蒜茴,然后再發(fā)送文件內(nèi)容,提高效率浆西。

16. Use GET for AJAX Requests 用GET方式進(jìn)行AJAX請求

Get 方法和服務(wù)器只有一次交互(發(fā)送數(shù)據(jù))粉私,而 Post 要兩次(發(fā)送頭部再發(fā)送數(shù)據(jù))。

17. Post-load Components 延遲加載組件

最先加載必須的組件進(jìn)行頁面初始化近零,然后再加載其他诺核,YUI Image Loader 是很好的例子。

18. Preload components 預(yù)加載組件

提前加載以后可能用到的東西久信,和延遲加載并不沖突猪瞬,它的目的是為后續(xù)請求提供更快的響應(yīng),參見Google首頁上的CSS sprites應(yīng)用入篮。

19. Reduce the Number of DOM Elements 減少DOM元素數(shù)量

復(fù)雜的頁面結(jié)構(gòu)意味著更長的下載及響應(yīng)時間,更合理更高效的使用標(biāo)簽來架構(gòu)頁面幌甘,是好的前端的必備條件潮售。

20. Split Components Across Domains 跨域分離組件

頁面組件多個來源可以增大你的平行下載量痊项,但注意不要過多,超過2-4個域名會引起上面說到的DNS查找浪費(fèi)酥诽。

21. Minimize the Number of iframes 減少iframe數(shù)量

需要更有效的利用 ifames鞍泉。

iframe 優(yōu)點(diǎn):有利于下載緩慢的廣告等第三方內(nèi)容,安全沙箱肮帐,并行下載腳本

iframe 缺點(diǎn):即使為空也會有較大資源消耗咖驮,會阻止頁面的onload,非語義

22. No 404s 不要出現(xiàn)404頁面

站點(diǎn)本身里(非搜索結(jié)果)出現(xiàn)404頁面训枢,無意義的404頁面會影響用戶體驗(yàn)并且會消耗服務(wù)器資源托修。

23. Reduce Cookie Size 減小Cookie

Cookie在服務(wù)器及瀏覽器之間的通過文件頭進(jìn)行交換,盡可能減小Cookie體積恒界,設(shè)置合理的過期時間睦刃,能夠很好的提高效率。

24. Use Cookie-free Domains for Components 對組件使用無Cookie的域名

對靜態(tài)組件的Cookie讀取是一種浪費(fèi)十酣,使用另一個無Cookie的域名來存放你的靜態(tài)組件式一個好方法涩拙,或者也可以在Cookie中只存放帶www的域名。

25. Minimize DOM Access 減少DOM的訪問次數(shù)

JS訪問DOM是很慢的耸采,盡量不要用JS來設(shè)置頁面布局兴泥。

26. Develop Smart Event Handlers 開發(fā)靈活的事件處理句柄

DOM樹上過多的元素被加入事件句柄的話,反應(yīng)效率肯定會低虾宇,YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設(shè)置DOM事件句柄

27. Choose < link >over @import 使用< link >而非 @import

在IE中使用@import就和在頁面底部用< link >一樣搓彻,我們前面說要把< link >放頂部的。

28. Avoid Filters 避免過濾器的使用

如果需要Alpha透明文留,不要使用AlphaImageLoader好唯,它效率低下而且只對IE6及以下的版本適用,用PNG8圖片燥翅。如果你非要使用骑篙,加上_filter以免影響IE7+用戶。

29. Optimize Images 優(yōu)化圖片

將你的GIF轉(zhuǎn)為PNG8會是個減小體積的好辦法森书,另外有很多方法處理你的JPG及PNG圖片以達(dá)到優(yōu)化效果靶端。

30. Optimize CSS Sprites 優(yōu)化CSS Sprites

在CSS Sprites中豎直并盡量緊湊的排列圖片,盡量將顏色相似的圖片排在一起凛膏,會減小圖片本身的大小及提高頁面圖片顯示速度杨名。

31. Don’t Scale Images in HTML 不要在HTML中縮放圖片

圖片要用多大的就用多大的,1000X1000的圖片被width=”100″ height=”100″以后猖毫,本身的KB數(shù)是不會減少的台谍。

32. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小并緩存它

站點(diǎn)的瀏覽器ICO應(yīng)該不是經(jīng)常換吧,那就長時間的緩存它吁断,并且最好控制在1K以下趁蕊。

33. Keep Components under 25K 保證組件在25K以下

iPhone不能緩存25K以上的組件坞生,并且這還是要在被壓縮前。

34. Pack Components into a Multipart Document 將組件打包進(jìn)一個多部分的文檔中

就好像在郵件中加入附件一樣掷伙,一個HTTP請求就夠了是己,但是這一技術(shù)需要確保你的代理支持,iPhone就不支持任柜。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末卒废,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宙地,更是在濱河造成了極大的恐慌摔认,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绸栅,死亡現(xiàn)場離奇詭異级野,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)粹胯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進(jìn)店門蓖柔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人风纠,你說我怎么就攤上這事况鸣。” “怎么了竹观?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵镐捧,是天一觀的道長。 經(jīng)常有香客問我臭增,道長懂酱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任誊抛,我火速辦了婚禮列牺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拗窃。我一直安慰自己瞎领,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布随夸。 她就那樣靜靜地躺著九默,像睡著了一般。 火紅的嫁衣襯著肌膚如雪宾毒。 梳的紋絲不亂的頭發(fā)上驼修,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼邪锌。 笑死勉躺,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的觅丰。 我是一名探鬼主播,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼妨退,長吁一口氣:“原來是場噩夢啊……” “哼妇萄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起咬荷,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤冠句,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后幸乒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體懦底,經(jīng)...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年罕扎,在試婚紗的時候發(fā)現(xiàn)自己被綠了聚唐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡腔召,死狀恐怖杆查,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情臀蛛,我是刑警寧澤亲桦,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站浊仆,受9級特大地震影響客峭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜抡柿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一舔琅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧沙绝,春花似錦搏明、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至粗悯,卻和暖如春虚循,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工横缔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留铺遂,地道東北人。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓茎刚,卻偏偏與公主長得像襟锐,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子膛锭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 關(guān)于前端性能優(yōu)化網(wǎng)上資料很多很多粮坞。。此篇文章不是鵬哥寫的初狰,只是之前獲取的資料莫杈,別人的,發(fā)上來記錄一些奢入,以后看著方便...
    虛幻的銹色閱讀 499評論 0 5
  • 1.Minimize HTTP Requests 減少HTTP請求 圖片筝闹、css、script腥光、flash等等這些...
    米塔塔閱讀 291評論 1 4
  • 1.Minimize HTTP Requests 減少HTTP請求 圖片关顷、css、script柴我、flash等等這些...
    gtt21閱讀 213評論 0 0
  • H5性能優(yōu)化方案 H5性能優(yōu)化意義 對于一個H5的產(chǎn)品解寝,功能無疑很重要,但是性能同樣是用戶體驗(yàn)中不可或缺的一環(huán)艘儒。原...
    自然心情閱讀 8,039評論 0 14
  • 2017年9月11日聋伦,星期一。 最近幾天過的特別充實(shí)界睁,每天都做了很多的事情觉增。今天周一,單位的事情不少翻斟,再加上好多朋...
    Ms娟子閱讀 451評論 0 0