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