前端性能優(yōu)化

1. 減少HTTP請求次數(shù)

盡量合并圖片、CSS捻勉、JS。比如加載一個頁面刀森,如果有5個css文件的話踱启,那么會發(fā)出5次http請求,這樣會讓用戶第一次訪問你的頁面的時候會長時間等待撒强。而如果把這個5個文件合成一個的話禽捆,就只需要發(fā)出一次http請求,節(jié)省網(wǎng)絡(luò)請求時間飘哨,加快頁面的加載胚想。

2. 使用CDN

網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā)芽隆,圖片亦然浊服。

3. 避免空的src和href

當(dāng)link標(biāo)簽的href屬性為空、script標(biāo)簽的src屬性為空的時候胚吁,瀏覽器渲染的時候會把當(dāng)前頁面的URL作為它們的屬性值牙躺,從而把頁面的內(nèi)容加載進(jìn)來作為它們的值。所以要避免犯這樣的疏忽腕扶。

4. 為文件頭指定Expires

Exipres是用來設(shè)置文件的過期時間的孽拷,一般對css、js半抱、圖片資源有效脓恕。? 他可以使內(nèi)容具有緩存性,這樣下回再訪問同樣的資源時就通過瀏覽器緩存區(qū)讀取窿侈,不需要再發(fā)出http請求炼幔。如下例子:

<img src="https://pic1.zhimg.com/50/bfa4b58630eec8492318aa88cbb23378_hd.png" data-rawwidth="1266" data-rawheight="160" class="origin_image zh-lightbox-thumb" width="1266" data-original="https://pic1.zhimg.com/bfa4b58630eec8492318aa88cbb23378_r.png">新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.

新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.

5. 使用gzip壓縮內(nèi)容

gzip能夠壓縮任何一個文本類型的響應(yīng),包括html史简,xml乃秀,json。大大縮小請求返回的數(shù)據(jù)量。

6. 把CSS放到頂部

網(wǎng)頁上的資源加載時從上網(wǎng)下順序加載的跺讯,所以css放在頁面的頂部能夠優(yōu)先渲染頁面枢贿,讓用戶感覺頁面加載很快。

7. 把JS放到底部

加載js時會對后續(xù)的資源造成阻塞抬吟,必須得等js加載完才去加載后續(xù)的文件 萨咕,所以就把js放在頁面底部最后加載。

8. 避免使用CSS表達(dá)式

舉個css表達(dá)式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

這個表達(dá)式會持續(xù)的在頁面上計(jì)算樣式火本,影響頁面的性能。并且css表達(dá)式只被IE支持聪建。

9. 將CSS和JS放到外部文件中

目的是緩存文件钙畔,可以參考原則4。 但有時候?yàn)榱藴p少請求金麸,也會直接寫到頁面里擎析,需根據(jù)PV和IP的比例權(quán)衡。

10. 權(quán)衡DNS查找次數(shù)

減少主機(jī)名可以節(jié)省響應(yīng)時間挥下。但同時揍魂,需要注意,減少主機(jī)會減少頁面中并行下載的數(shù)量棚瘟。

IE瀏覽器在同一時刻只能從同一域名下載兩個文件现斋。當(dāng)在一個頁面顯示多張圖片時,IE 用戶的圖片下載速度就會受到影響偎蘸。所以新浪會搞N個二級域名來放圖片庄蹋。

下面是新浪微博的圖片域名,我們可以看到他有多個域名迷雪,這樣可以保證這些不同域名能夠同時去下載圖片限书,而不用排隊(duì)。不過如果當(dāng)使用的域名過多時章咧,響應(yīng)時間就會慢倦西,因?yàn)椴挥庙憫?yīng)域名時間不一致。

<img src="https://pic3.zhimg.com/50/1b3b00a1c147fc9211b6a90d55788a22_hd.png" data-rawwidth="599" data-rawheight="62" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic3.zhimg.com/1b3b00a1c147fc9211b6a90d55788a22_r.png">

11. 精簡CSS和JS

這里就涉及到css和js的壓縮了赁严。比如下面的新浪的一個css文件扰柠,把空格回車全部去掉,減少文件的大小∥蟀模現(xiàn)在的壓縮工具有很多耻矮,基本主流的前端構(gòu)建工具都能進(jìn)行css和js文件的壓縮,如grunt忆谓,glup等裆装。

12. 避免跳轉(zhuǎn)

有種現(xiàn)象會比較坑爹,看起來沒什么差別,其實(shí)多次了一次頁面跳轉(zhuǎn)哨免。比如當(dāng)URL本該有斜杠(/)卻被忽略掉時茎活。例如,當(dāng)我們要訪問http://baidu.com時琢唾,實(shí)際上返回的是一個包含301代碼的跳轉(zhuǎn)载荔,它指向的是http://baidu.com/(注意末尾的斜杠)。在nginx服務(wù)器可以使用rewrite采桃;Apache服務(wù)器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免懒熙。

另一種是不用域名之間的跳轉(zhuǎn), 比如訪問http://baidu.com/bbs跳轉(zhuǎn)到http://bbs.baidu.com/普办。那么可以通過使用Alias或者mod_rewirte建立CNAME(保存一個域名和另外一個域名之間關(guān)系的DNS記錄)來替代工扎。

13. 刪除重復(fù)的JS和CSS

重復(fù)調(diào)用腳本,除了增加額外的HTTP請求外衔蹲,多次運(yùn)算也會浪費(fèi)時間肢娘。在IE和Firefox中不管腳本是否可緩存,它們都存在重復(fù)運(yùn)算JavaScript的問題舆驶。

14. 配置ETags

它用來判斷瀏覽器緩存里的元素是否和原來服務(wù)器上的一致橱健。比last-modified date更具有彈性,例如某個文件在1秒內(nèi)修改了10次沙廉,Etag可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù))拘荡,MTime(修改時間)和Size來精準(zhǔn)的進(jìn)行判斷,避開UNIX記錄MTime只能精確到秒的問題蓝仲。 服務(wù)器集群使用俱病,可取后兩個參數(shù)。使用ETags減少Web應(yīng)用帶寬和負(fù)載

15. 可緩存的AJAX

異步請求同樣的造成用戶等待袱结,所以使用ajax請求時亮隙,要主動告訴瀏覽器如果該請求有緩存就去請求緩存內(nèi)容。如下代碼片段,? ? cache:true就是顯式的要求如果當(dāng)前請求有緩存的話垢夹,直接使用緩存

$.ajax({? ? url : 'url',? ? dataType : "json",? ? cache: true,? ? success : function(son, status){? ? ? ? ? ? ? ? }

16. 使用GET來完成AJAX請求

當(dāng)使用XMLHttpRequest時溢吻,瀏覽器中的POST方法是一個“兩步走”的過程:首先發(fā)送文件頭,然后才發(fā)送數(shù)據(jù)果元。因此使用GET獲取數(shù)據(jù)時更加有意義促王。

17. 減少DOM元素?cái)?shù)量

這是一門大學(xué)問,這里可以引申出一堆優(yōu)化的細(xì)節(jié)而晒。想要具體研究的可以看后面推薦書籍蝇狼。總之大原則減少DOM數(shù)量倡怎,就會減少瀏覽器的解析負(fù)擔(dān)

18. 避免404

比如外鏈的css或者js文件出現(xiàn)問題返回404時迅耘,會破壞瀏覽器對文件的并行加載贱枣。并且瀏覽器會把試圖在返回的404響應(yīng)內(nèi)容中找到可能有用的部分當(dāng)作JavaScript代碼來執(zhí)行。

19. 減少Cookie的大小

Cookie里面別塞那么多東西颤专,因?yàn)槊總€請求都得帶著他跑

20. 使用無cookie的域

比如CSS纽哥、js、圖片等栖秕,客戶端請求靜態(tài)文件的時候春塌,減少了 Cookie 的反復(fù)傳輸對主域名的影響。

21. 不要使用濾鏡

IE獨(dú)有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果簇捍。這個濾鏡的問題在于瀏覽器加載圖片時它會終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器只壳。在每一個元素(不僅僅是圖片)它都會運(yùn)算一次,增加了內(nèi)存開支暑塑,因此它的問題是多方面的吕世。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替,這種格式能在IE中很好地工作梯投。如果你確實(shí)需要使用AlphaImageLoader,請使用下劃線_filter又使之對IE7以上版本的用戶無效况毅。

22. 不要在HTML中縮放圖片

比如你需要的圖片尺寸是50* 50

那就不用用一張500*500的大尺寸圖片分蓖,影響加載

23. 縮小favicon.ico并緩存

高性能網(wǎng)站建設(shè)指南(第二版》,這里面其實(shí)就是細(xì)化的講解了上面的23原則尔许。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末么鹤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子味廊,更是在濱河造成了極大的恐慌蒸甜,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件余佛,死亡現(xiàn)場離奇詭異柠新,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)辉巡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進(jìn)店門恨憎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人郊楣,你說我怎么就攤上這事憔恳。” “怎么了净蚤?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵钥组,是天一觀的道長。 經(jīng)常有香客問我今瀑,道長程梦,這世上最難降的妖魔是什么点把? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮作烟,結(jié)果婚禮上愉粤,老公的妹妹穿的比我還像新娘。我一直安慰自己拿撩,他們只是感情好衣厘,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著压恒,像睡著了一般影暴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上探赫,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天型宙,我揣著相機(jī)與錄音,去河邊找鬼伦吠。 笑死妆兑,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的毛仪。 我是一名探鬼主播搁嗓,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼箱靴!你這毒婦竟也來了腺逛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤衡怀,失蹤者是張志新(化名)和其女友劉穎棍矛,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抛杨,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡够委,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蝶桶。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片慨绳。...
    茶點(diǎn)故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖真竖,靈堂內(nèi)的尸體忽然破棺而出脐雪,到底是詐尸還是另有隱情,我是刑警寧澤恢共,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布战秋,位于F島的核電站,受9級特大地震影響讨韭,放射性物質(zhì)發(fā)生泄漏脂信。R本人自食惡果不足惜癣蟋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望狰闪。 院中可真熱鬧疯搅,春花似錦、人聲如沸埋泵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丽声。三九已至礁蔗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間雁社,已是汗流浹背浴井。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留霉撵,地道東北人磺浙。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像徒坡,于是被迫代替她去往敵國和親屠缭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評論 2 348

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

  • 圍繞前端的性能多如牛毛崭参,涉及到方方面面,以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進(jìn)行羅列注意款咖,是羅列不是展...
    流動碼文閱讀 675評論 0 0
  • PC瀏覽器前端優(yōu)化策略 pc端優(yōu)化的策略很多何暮,如Slow(YSlow時Yahoo發(fā)布的一款Firefox插件,現(xiàn)C...
    姒沝無痕閱讀 505評論 0 0
  • 作者:minwe原文地址:https://csspod.com/frontend-performance-best...
    IT程序獅閱讀 1,660評論 0 13
  • 網(wǎng)站的劃分一般為二:前端和后臺铐殃。我們可以理解成后臺是用來實(shí)現(xiàn)網(wǎng)站的功能的海洼,比如:實(shí)現(xiàn)用戶注冊,用戶能夠?yàn)槲恼掳l(fā)表評...
    ConRon閱讀 755評論 0 0
  • 23條前端性能優(yōu)化富腊,看懂就夠了坏逢! 1、減少HTTP請求次數(shù) 盡量合并圖片赘被、CSS是整、JS。比如加載一個頁面民假,如果有5...
    大笑一聲閱讀 237評論 0 1