前端服务器获取js文件偶尔慢_我所认识的前端性能优化
現(xiàn)象： 用戶體驗(yàn)差 網(wǎng)頁(yè)太卡打不開(kāi)（卡、慢） 服務(wù)器帶寬流量（成本） 服務(wù)器壓力
從哪處理：各處的緩存 地址緩存 減少DNS的解析請(qǐng)求、預(yù)解析DNS（不是"解析DNS"） TCP緩存 HTTP緩存機(jī)制（HTTP請(qǐng)求、HTTP協(xié)議、CDN緩存、瀏覽器緩存）文件打包編譯壓縮CSS、JS阻塞，白屏和FOUC+defer和ansync函數(shù)防抖+函數(shù)節(jié)流 懶加載和預(yù)加載
螞蟻金服如何把前端性能監(jiān)控做到極致?
頁(yè)面性能優(yōu)化辦法有哪些？ · Issue #9 · ljianshu/Blog
方應(yīng)杭：「每日一題」你是如何做性能優(yōu)化的？
【前端詞典】 【前端詞典】從輸入 URL 到展現(xiàn)涉及哪些緩存環(huán)節(jié)(非常詳細(xì))
你真的了解回流和重繪嗎 - 掘金
css加載會(huì)造成阻塞嗎？ - 掘金
javascript性能優(yōu)化 - 掘金
防抖節(jié)流與前端性能優(yōu)化
函數(shù)節(jié)流和防抖 · Issue #43 · ljianshu/Blog
懶加載和預(yù)加載 · Issue #8 · ljianshu/Blog
從輸入 URL 到展現(xiàn)涉及哪些緩存環(huán)節(jié)(非常詳細(xì))
深入理解瀏覽器的緩存機(jī)制
例如：想優(yōu)化公司的網(wǎng)站訪問(wèn)速度
大概的思路：減少HTTP請(qǐng)求，同時(shí)設(shè)置靜態(tài)文件緩存時(shí)間、壓縮情況、保持持久的連接時(shí)間等參數(shù)，但這些東西，又需要你系統(tǒng)了解HTTP協(xié)議。
前言
之前聽(tīng)過(guò)芳芳說(shuō)過(guò)，你要做一件事需要明確目的，就好比每天吃的三餐也是存在目的，只不過(guò)是因?yàn)槲覀兞?xí)慣了它的存在，從而忽略吃三餐的目的其實(shí)就是讓我們活著。
回歸到”為什么要做前端性能優(yōu)化工作“這個(gè)問(wèn)題上？先從我們最熟悉的打開(kāi)網(wǎng)頁(yè)時(shí)要等待時(shí)間這件事說(shuō)起，從“時(shí)間就是生命”這個(gè)角度來(lái)說(shuō)，白白等時(shí)間浪費(fèi)掉，導(dǎo)致的結(jié)果就是損耗生命。
明確了“不想損耗生命“這個(gè)目的，就要從實(shí)際的場(chǎng)景中思考，導(dǎo)致網(wǎng)頁(yè)加載時(shí)間過(guò)長(zhǎng)、過(guò)卡，就能先想到打開(kāi)網(wǎng)頁(yè)的流程中某些情況沒(méi)有優(yōu)化導(dǎo)致：
1、從輸入url開(kāi)始產(chǎn)生需要緩存的地方
2、DNS查詢——優(yōu)化：減少對(duì)單個(gè)域名的查詢時(shí)間或?qū)Χ鄠€(gè)域名進(jìn)行查詢
3、瀏覽器發(fā)送請(qǐng)求緩存優(yōu)化：發(fā)送請(qǐng)求時(shí)——優(yōu)化：減少對(duì)文件的請(qǐng)求，比如可以壓縮、合并文件，添加緩存
4、服務(wù)器響應(yīng)緩存優(yōu)化：服務(wù)器的響應(yīng)——優(yōu)化：（服務(wù)器的優(yōu)化就有點(diǎn)復(fù)雜）
5、解析時(shí)優(yōu)化：解析HTML、CSS、JS時(shí) ——減少或優(yōu)化一些無(wú)用代碼，減少解析時(shí)間
6、渲染優(yōu)化：渲染HTML、CSS、JS、圖片時(shí) —— 避免使用低效代碼對(duì)性能的損耗
（一）緩存優(yōu)化
從輸入 URL 到展現(xiàn)涉及哪些緩存環(huán)節(jié)(非常詳細(xì))
一文讀懂前端緩存
一、從緩存開(kāi)始談起
之前就有針對(duì)瀏覽器的緩存機(jī)制寫了一篇文章，讓你知道如何設(shè)置對(duì)應(yīng)參數(shù)值（通常是設(shè)置時(shí)間），瀏覽器什么時(shí)候使用了緩存文件？而什么時(shí)候需要請(qǐng)求服務(wù)器響應(yīng)接收緩存？感興趣的朋友可以在專欄中再來(lái)看看。
1、緩存可以帶來(lái)什么好處
從實(shí)戰(zhàn)的經(jīng)驗(yàn)來(lái)看，想象一下從URL的輸入開(kāi)始起你經(jīng)歷過(guò)的緩存
有了緩存，減少冗余數(shù)據(jù)傳輸，節(jié)省流量
有了緩存，可從本地獲取緩存文件，減少對(duì)重復(fù)代碼的請(qǐng)求，節(jié)省帶寬，提高頁(yè)面加載速度，和網(wǎng)頁(yè)打開(kāi)速度
有了緩存，可以緩解服務(wù)器請(qǐng)求過(guò)程中產(chǎn)生的阻塞情況
有了緩存，就相當(dāng)于在瀏覽器有個(gè)備份，可以加快響應(yīng)速度
總之，緩存帶來(lái)的直觀感受就是網(wǎng)頁(yè)打開(kāi)速度更快、網(wǎng)頁(yè)資源加載的速度更快。緩存之后，必然是減少了大量的數(shù)據(jù)、資源的請(qǐng)求對(duì)服務(wù)器帶來(lái)的壓力。2、從哪里進(jìn)行緩存
我先從我接觸過(guò)的實(shí)際場(chǎng)景說(shuō)起，當(dāng)然應(yīng)該這中間還有其他緩存，我沒(méi)接觸到：
（1）從在網(wǎng)址地址欄中輸入U(xiǎn)RL里緩存
（2）進(jìn)行DNS查詢時(shí)就會(huì)開(kāi)啟緩存
（3）TCP連接時(shí)進(jìn)行握手時(shí)，發(fā)送和接收的緩存
（4）HTTP請(qǐng)求緩存
（關(guān)于緩存具體信息，會(huì)單獨(dú)再寫一篇文章）
二、從 DNS查詢 和 預(yù)解析DNS 談起
1、先談DNS查詢
之前我們?cè)凇拜斎險(xiǎn)RL到頁(yè)面展現(xiàn)”那篇文章稍微談過(guò)利用DNS查找IP的事情，DNS尋址的這個(gè)過(guò)程本身就是一個(gè)復(fù)雜的尋址過(guò)程。（如果這一塊沒(méi)有講清楚，老司機(jī)們請(qǐng)不吝指教）
2、DNS預(yù)解析（DNS-prefetch）
這是一個(gè)隱藏在瀏覽器的前端優(yōu)化手段，主要體現(xiàn)在這兩點(diǎn)：
- 減少DNS解析次數(shù)
- 進(jìn)行DNS預(yù)解析
預(yù)解析的實(shí)現(xiàn)：
（1）用meta信息來(lái)告知瀏覽器, 當(dāng)前頁(yè)面要做DNS預(yù)解析: <meta http-equiv="x-dns-prefetch-control" content="on" />
（2）在頁(yè)面header中使用link標(biāo)簽來(lái)強(qiáng)制對(duì)DNS預(yù)解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
注：dns-prefetch 需慎用，多頁(yè)面重復(fù) DNS預(yù)解析 會(huì)增加重復(fù)DNS查詢次數(shù)。
三、TCP也涉及緩存
四、HTTP緩存
1、瀏覽器緩存
2、CDN緩存
3、瀏覽器緩存
（二）文件壓縮編譯
（三）CSS、JS解決阻塞問(wèn)題
JS性能優(yōu)化-掘金
一、JS
1、核心JS代碼
2、非核心JS代碼引入方式和異步機(jī)制
二、CSS和JS的阻塞渲染 采取的優(yōu)化
這邊只講一些需要優(yōu)化的現(xiàn)實(shí)狀況，涉及深入原理
1、CSS加載造成阻塞 ？參考：css加載會(huì)造成阻塞嗎？ - 掘金先給個(gè)最終結(jié)論：CSS加載不會(huì)阻塞DOM樹(shù)解析，但會(huì)阻塞DOM樹(shù)渲；CSS加載會(huì)阻塞后面JS語(yǔ)句執(zhí)行注意：不知道有沒(méi)有人注意我描述的字眼不同：解析、加載、渲染。
一般情況下，解析，是解析HTML內(nèi)容；加載，一般是CSS加載、頁(yè)面加載，這個(gè)時(shí)候頁(yè)面還處在如樣式加載、圖片加載的階段，但還沒(méi)渲染到頁(yè)面；渲染，此時(shí)，就是某個(gè)環(huán)節(jié)完成之后，才會(huì)進(jìn)行渲染，如解析完渲染，加載完渲染等等。
以Chrome為例，先在Chrome控制臺(tái)設(shè)置一下網(wǎng)速（百度一下），資源的下載速度上限就會(huì)被限制成20kb/s。（1）CSS加載會(huì)阻塞DOM樹(shù)的解析渲染嗎？
假設(shè)結(jié)果：
CSS加載會(huì)阻塞DOM樹(shù)解析和渲染假設(shè)畫面：按道理在 CSS 還沒(méi)加載完前，下面的內(nèi)容不會(huì)被解析渲染，那么我們一開(kāi)始看到的應(yīng)該是白屏，h1 不會(huì)顯示出來(lái)。并且此時(shí) console.log 結(jié)果應(yīng)該是一個(gè)空數(shù)組。實(shí)際結(jié)果：
如下圖
由上圖我們可以看到，當(dāng)CSS還沒(méi)加載完成的時(shí)候，h1并沒(méi)有顯示，但是此時(shí)控制臺(tái)輸出如下
由上圖，我們也可以看到，當(dāng)CSS還沒(méi)加載出來(lái)的時(shí)候，頁(yè)面顯示白屏，直到CSS加載完成之后，紅色字體才顯示出來(lái)，也就是說(shuō)，下面的內(nèi)容雖然解析了，但是并沒(méi)有被渲染出來(lái)。所以，CSS加載會(huì)阻塞DOM樹(shù)渲染。
評(píng)價(jià)該機(jī)制：有過(guò)項(xiàng)目經(jīng)驗(yàn)的人估計(jì)馬上反應(yīng)，如果是對(duì)DOM節(jié)點(diǎn)和CSS樣式加載操作，一般都是沖著優(yōu)化性能去的。原作者認(rèn)為這是瀏覽器的其中一種優(yōu)化機(jī)制。當(dāng)加載CSS時(shí)，可能會(huì)修改下面DOM節(jié)點(diǎn)的樣式，如果CSS加載不阻塞DOM樹(shù)渲染的話，那么當(dāng)CSS加載完之后，DOM樹(shù)可能又得重新重繪或者回流了，這就造成了一些沒(méi)必要的損耗。所以，干脆先將DOM樹(shù)結(jié)構(gòu)解析完，把可以做的工作做完，然后等你CSS加載完后，再根據(jù)最終的樣式來(lái)渲染DOM樹(shù)，這種做法性能方面確實(shí)會(huì)比較好一點(diǎn)。
由此得出：CSS加載不會(huì)阻塞DOM樹(shù)解析，但是會(huì)阻塞DOM樹(shù)渲染。
（2）CSS加載會(huì)不會(huì)阻塞js執(zhí)行呢?
<!DOCTYPE html> <html lang="en"><head><title>css阻塞</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script>console.log('before css')var startDate = new Date()</script><link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"></head><body><h1>這是紅色的</h1><script>var endDate = new Date()console.log('after css')console.log('經(jīng)過(guò)了' + (endDate -startDate) + 'ms')</script></body> </html>假設(shè)結(jié)果:
css加載會(huì)阻塞后面的js運(yùn)行預(yù)期畫面:
在link后面的js代碼，應(yīng)該要在css加載完成后才會(huì)運(yùn)行實(shí)際結(jié)果:
如下圖
由上圖我們可以看出，位于css加載語(yǔ)句前的那個(gè)js代碼先執(zhí)行了，但是位于css加載語(yǔ)句后面的代碼遲遲沒(méi)有執(zhí)行，直到css加載完成后，它才執(zhí)行。這也就說(shuō)明了，css加載會(huì)阻塞后面的js語(yǔ)句的執(zhí)行。
詳細(xì)結(jié)果看下圖(css加載用了5600+ms):
結(jié)論
由上所述，我們可以得出以下結(jié)論：
- css加載不會(huì)阻塞DOM樹(shù)的解析
- css加載會(huì)阻塞DOM樹(shù)的渲染
- css加載會(huì)阻塞后面js語(yǔ)句的執(zhí)行
解決CSS和JS的阻塞渲染
（1）通過(guò) 最佳放置順序 解決
- CSS，盡可能放在頭部，使用 link 標(biāo)簽將樣式表放在頂部，通常放在 <head>
- JS ，將JS放在底部，通常放在<body>底部
（2）JS解決阻塞：defer和async
2、產(chǎn)生白屏和FOUC現(xiàn)象
白屏，加入CSS沒(méi)有解析和加載完成，或者JS加載時(shí)機(jī)過(guò)晚（渲染進(jìn)程被阻塞），都會(huì)造成白屏現(xiàn)象（白屏是頁(yè)面渲染的其中一個(gè)呈現(xiàn)結(jié)果），HTML解析內(nèi)容完成之后，樣式和交互未出現(xiàn)的話，頁(yè)面則會(huì)出現(xiàn)一片空白，等到 CSS和JS完全解析、加載完畢之后，頁(yè)面才會(huì)渲染出來(lái)。
FOUC，一般是CSS還沒(méi)加載完成前，HTML內(nèi)容已經(jīng)解析、渲染完成。等到CSS解析且加載完畢后，瀏覽器再次渲染。
3、重繪（Repaint ）和重排（ Reflow）
瀏覽器渲染過(guò)程中引起的問(wèn)題
Repaint問(wèn)題 ： 重新繪制。將CSS樣式改變的話，其他元素并未改變，只需要重新繪制某一處就行。 Reflow問(wèn)題： 重新回流，重新計(jì)算。即自身位置發(fā)生變化，給其他元素帶來(lái)了影響，要重新進(jìn)行計(jì)算。
（四）函數(shù)防抖和函數(shù)節(jié)流
一、函數(shù)防抖
帶著一起走
二、函數(shù)節(jié)流
（五）懶加載和預(yù)加載
總結(jié)
以上是生活随笔為你收集整理的前端服务器获取js文件偶尔慢_我所认识的前端性能优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 立减 1200 元：苹果 Apple W
- 下一篇： html如何显示带有记号的文本,如何使用