寫于2017.08.07
web優(yōu)化是個工程性的問題盯捌，因為有些優(yōu)化策略本身是相互矛盾的，所以工作中優(yōu)化策略的選擇必須是根據(jù)實際數(shù)據(jù)測算結(jié)果后的考量結(jié)果蘑秽，今天我們就談下饺著，理論上的優(yōu)化策略
首先我們思考一個老生常談的問題：
一、從你在網(wǎng)頁地址欄輸入URL敲回車到頁面數(shù)據(jù)展現(xiàn)出來肠牲，這個過程中發(fā)生了什么幼衰？
1、DNS查詢（找IP）
2缀雳、建立TCP連接（三次握手）
3渡嚣、發(fā)送http請求
4、等待（等待服務(wù)器響應(yīng)）
5肥印、得到響應(yīng)的第一個字節(jié)
6识椰、下載響應(yīng)文件，直到最后一個字節(jié)
7深碱、解析HTML文件
8裤唠、渲染頁面
我們就拿打開知乎來觀測各個階段的時間
1、找IP（DNS查詢） 12.28ms
2莹痢、建立TCP連接 57.28ms
https加密 32.2ms
3种蘸、發(fā)送請求 0.12ms
4、等待 1.14s
5竞膳、響應(yīng)（下載） 91.17ms
二航瞭、如何優(yōu)化？
優(yōu)化一般有兩個目的：減少服務(wù)器壓力和增加用戶體驗
我們這里談的是增加用戶體驗坦辟，就是優(yōu)化速度刊侯，分別在每個階段如何優(yōu)化？
1锉走、DNS查詢
可以設(shè)置緩存滨彻，比如兩個小時之內(nèi)不需要再查藕届。還有就是減少域名個數(shù)。因為多一個域名意味著就要多查詢一次IP
2亭饵、建立TCP連接
實際的情況是一個請求建立一次TCP連接休偶，所以建議html、css辜羊、js文件整合在一個文件里踏兜，這樣請求只發(fā)一次
3、發(fā)送請求
讓cookie的體積盡量小
4八秃、等待時間：完全取決于服務(wù)器碱妆，前端沒法優(yōu)化
5、下載響應(yīng)
拋開寬帶的影響昔驱，可以
①使用gzip疹尾，相當(dāng)于就是個壓縮包，下載后瀏覽器來解壓
②cdn 設(shè)立中轉(zhuǎn)服務(wù)器骤肛，減輕因地理位置遠加載速度慢的影響
③使用緩存：但是這要分情況
④把img纳本、css、js放在不同域名下萌衬，這樣可以實現(xiàn)并行下載，但是這會增加DNS域名的查詢時間它抱，與1矛盾秕豫，所以要實際測算結(jié)果
代碼層面如何優(yōu)化
①懶加載
比如圖片的懶加載，滑動鼠標(biāo)到那個位置圖片才會顯示观蓄，節(jié)省服務(wù)器帶寬
②預(yù)加載（增加用戶體驗）
比如UC瀏覽器看小說時混移，提前把下一頁的內(nèi)容下載好。這樣增加帶寬壓力侮穿，但是增加了用戶體驗
③動態(tài)加載：把首頁不顯示的內(nèi)容動態(tài)加載（不放在HTML中歌径，放在js里面）
上一頁完成了，動態(tài)下載HTML亲茅、CSS回铛、js
如：
$(function(){
$.get('./nextpage.html').then(function(response){
docunment.body.lastChild.html=response
var link = document.createElement('link')
link.href=""
link.rel=""
})
}
)
專題復(fù)習(xí)九丈秩、web性能優(yōu)化
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門鸟召，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人氨鹏，你說我怎么就攤上這事欧募。” “怎么了喻犁？”我有些...
- 文/不壞的土叔 我叫張陵槽片，是天一觀的道長。 經(jīng)常有香客問我肢础，道長还栓，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任传轰，我火速辦了婚禮剩盒，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘慨蛙。我一直安慰自己辽聊，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布期贫。 她就那樣靜靜地躺著跟匆，像睡著了一般。 火紅的嫁衣襯著肌膚如雪通砍。 梳的紋絲不亂的頭發(fā)上玛臂，一...
- 文/蒼蘭香墨 我猛地睜開眼膜蠢，長吁一口氣：“原來是場噩夢啊……” “哼堪藐！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起挑围，我...
- 正文 年R本政府宣布句喷，位于F島的核電站，受9級特大地震影響兔毙，放射性物質(zhì)發(fā)生泄漏唾琼。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一澎剥、第九天 我趴在偏房一處隱蔽的房頂上張望锡溯。 院中可真熱鬧，春花似錦哑姚、人聲如沸祭饭。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽倡蝙。三九已至，卻和暖如春绞佩，著一層夾襖步出監(jiān)牢的瞬間寺鸥，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)檐蚜，斷路器，智...
- 對瀏覽器原理有過了解的一定不會陌生這篇神文《How Browsers Work》中文翻譯：瀏覽器原理：新式網(wǎng)絡(luò)瀏覽...
- Yahoo!的Exceptional Performance團隊為改善Web性能帶來最佳實踐旺聚。他們?yōu)榇诉M行了一系列...
- 網(wǎng)站優(yōu)化離不開前后端的互相協(xié)作，但是對于前端工程師來說，在保證后端技術(shù)方案不變時填帽，能不能只利用前端技術(shù)來優(yōu)化網(wǎng)站呢...
