前端性能優(yōu)化點(diǎn)

一捺球、瀏覽器加載過(guò)程:

1乎莉、建立連接過(guò)程

? ? ? (1) 瀏覽器查找域名的IP地址

  (2) 瀏覽器給web服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求

  (3) 服務(wù)器發(fā)送永久重定向響應(yīng)

  (4) 瀏覽器跟蹤重定向地址

  (5) 服務(wù)器“處理”請(qǐng)求

(6) 服務(wù)器發(fā)回一個(gè)HTML響應(yīng)

2稚晚、瀏覽器渲染

解析HTML

構(gòu)建DOM樹(shù)

渲染樹(shù)構(gòu)建

渲染樹(shù)布局

繪制渲染樹(shù)

二、優(yōu)化方法

1、啟用瀏覽器緩存

瀏覽器要根據(jù)域名找出IP地址躏鱼,而DNS查找過(guò)程的第一步是在瀏覽器緩存中查找蜕窿,根據(jù)Chrome的PageSpeed給出的建議:要利用瀏覽器緩存存儲(chǔ)可緩存的資源谋逻。在 HTTP 標(biāo)頭中為靜態(tài)資源設(shè)置有效期或最長(zhǎng)存在時(shí)間,可指示瀏覽器從本地磁盤(pán)中加載以前下載的資源而不是從網(wǎng)絡(luò)中加載桐经。

HTTP 1.1提供的緩存方法主要有兩種:

(1) Expires和Cache-Control:max-age. 即內(nèi)容在緩存中的生命有效期毁兆。第一次請(qǐng)求后將在生命有效期之內(nèi)直接從本地緩存中拿取。

(2) Last-Modified和ETag.:Last-Modified標(biāo)記文件最后一次修改的時(shí)間阴挣,瀏覽器請(qǐng)求是在頭部加入上次請(qǐng)求緩存下來(lái)的Last-Modified時(shí)間气堕,若兩次請(qǐng)求期間服務(wù)器的內(nèi)容沒(méi)有修改,服務(wù)器返回304 Not Modified畔咧,則不下載資源茎芭,瀏覽器直接使用本地緩存;否則盒卸,服務(wù)器會(huì)返回200以及更新后的版本骗爆。ETag是服務(wù)器對(duì)于文件生成的Hash散列,其生成算法與最后一次修改的時(shí)間相關(guān)蔽介。瀏覽器第二次請(qǐng)求發(fā)送上次的ETag信息摘投,服務(wù)器通過(guò)簡(jiǎn)單的比對(duì)就知道是否應(yīng)該返回304還是200。PageSpeed建議虹蓄,要為資源指定Last-Modified或ETag標(biāo)頭犀呼,以便啟動(dòng)緩存驗(yàn)證。

2薇组、頁(yè)面內(nèi)容組織

① 為 HTML 文檔指定字符集外臂,可讓瀏覽器立即開(kāi)始執(zhí)行腳本。

② 將內(nèi)嵌樣式塊和 元素從文檔主體移至文檔標(biāo)題律胀,可改善顯示性能宋光。

③ 將小型樣式表或者腳本內(nèi)嵌到主 HTML 網(wǎng)頁(yè)中貌矿,可減少在下載其他資源時(shí)的往返時(shí)間 (RTT) 和延遲時(shí)間。

④ 正確地排列外部樣式表與外部和內(nèi)嵌腳本的順序罪佳,可增加下載時(shí)同時(shí)加載的數(shù)據(jù)量逛漫,并提高瀏覽器顯示網(wǎng)頁(yè)的速度。為確保能夠并行下載這CSS 文件赘艳,始終將外部 CSS 文件排在外部 JavaScript 文件前面酌毡。

PS:有圖有真相

VS:

3、HTML

① 使用HTML5新標(biāo)簽蕾管,例如header枷踏、footer、section掰曾、nav旭蠕、article。因?yàn)樗鼈冋Z(yǔ)義化婴梧,速度快下梢,結(jié)構(gòu)合理客蹋,瀏覽器上識(shí)別能力強(qiáng)塞蹭。

② 減少HTML標(biāo)簽嵌套深度,嵌套越深讶坯,在移動(dòng)端的Web頁(yè)面渲染速度以及滾動(dòng)流暢度都會(huì)有所減低番电。

③ 為圖片指定大小,減少重排辆琅。

④ 壓縮HTML漱办。

4、 CSS

① 使用CssSprite將零星的背景圖包含到一張圖中婉烟,通過(guò)background-position來(lái)使它顯示在正確的位置娩井;只請(qǐng)求一張圖,減少了HTTP請(qǐng)求的次數(shù)似袁。

② 模塊化洞辣、精簡(jiǎn)css,提高復(fù)用率昙衅。

③ 減少漸變扬霜、陰影的使用。

④ 合理使用CSS3高性能動(dòng)畫(huà)而涉,Translate3d支持硬件加速著瓶。

⑤ 避免使用濾鏡。

⑥ 不使用@import啼县。

⑦ 合并和壓縮CSS代碼材原。

5沸久、JavaScript

① 暫緩 JavaScript 解析,暫緩解析不需要的 JavaScript(等到需要執(zhí)行時(shí)再進(jìn)行解析)余蟹,可以提高網(wǎng)頁(yè)的初始加載速度麦向。

② 使用事件委托機(jī)制,避免頻繁操作DOM節(jié)點(diǎn)客叉。

③ 模塊化代碼:SeaJs诵竭。

④ 合并和壓縮JavaScript代碼。

⑤ 壓縮工具:YUI Compressor或JSMin等兼搏。

6卵慰、 圖片優(yōu)化

① 圖片時(shí)頁(yè)面大部分加載時(shí)間所花的地方,在圖片設(shè)計(jì)的時(shí)候應(yīng)該考慮相應(yīng)的圖片大小和格式

② 壓縮圖片

三佛呻、實(shí)戰(zhàn)分析

1裳朋、 network

2、status看資源請(qǐng)求情況

3吓著、timeline 可看頁(yè)面渲染情況

4鲤嫡、profiles可看函數(shù)執(zhí)行情況

四、工具

1绑莺、Chrome Developer Tools —— 分析性能

2暖眼、PageSpeed —— 查看性能建議

3、Fiddler —— HTTP/HTTPS網(wǎng)絡(luò)調(diào)試

以上大多數(shù)總結(jié)自yahoo前端優(yōu)化規(guī)則 & Chrome pagespeed的優(yōu)化建議

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末纺裁,一起剝皮案震驚了整個(gè)濱河市诫肠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌欺缘,老刑警劉巖栋豫,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異谚殊,居然都是意外死亡丧鸯,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)嫩絮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)丛肢,“玉大人,你說(shuō)我怎么就攤上這事絮记∷猓” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵怨愤,是天一觀的道長(zhǎng)派敷。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么篮愉? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任腐芍,我火速辦了婚禮,結(jié)果婚禮上试躏,老公的妹妹穿的比我還像新娘猪勇。我一直安慰自己,他們只是感情好颠蕴,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布泣刹。 她就那樣靜靜地躺著,像睡著了一般犀被。 火紅的嫁衣襯著肌膚如雪椅您。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,679評(píng)論 1 305
  • 那天寡键,我揣著相機(jī)與錄音掀泳,去河邊找鬼。 笑死西轩,一個(gè)胖子當(dāng)著我的面吹牛员舵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播藕畔,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼马僻,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了劫流?” 一聲冷哼從身側(cè)響起巫玻,我...
    開(kāi)封第一講書(shū)人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祠汇,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體熄诡,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡可很,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了凰浮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片我抠。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖袜茧,靈堂內(nèi)的尸體忽然破棺而出菜拓,到底是詐尸還是另有隱情,我是刑警寧澤笛厦,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布纳鼎,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏贱鄙。R本人自食惡果不足惜劝贸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逗宁。 院中可真熱鬧映九,春花似錦、人聲如沸瞎颗。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)哼拔。三九已至嚼蚀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間管挟,已是汗流浹背轿曙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留僻孝,地道東北人导帝。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像穿铆,于是被迫代替她去往敵國(guó)和親您单。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355