【刷題】麪筋-頁面很卡的緣由分析及解決方案

打開開發者工具看network裏的瀑布圖。

緣由一：http請求次數太多

解決：減小http請求次數
①　圖片地圖：把多張圖片整合到一張圖片中，以位置定位超連接。
②　CSS Sprites合併圖片，經過指定CSS的backgroud-image和backgroud-position來顯示元素。
③　合併JS腳本和CSS樣式表。
④　使用外部JS和CSS文件。

緣由二：接收數據時間過長，以下載資源過大

解決：對HTTP傳輸進行壓縮，即在js，css、圖片等資源已經壓縮的基礎上，在HTTP傳輸過程當中的再次壓縮。客戶端能夠經過Accept-Encoding頭來聲明瀏覽器支持的壓縮方式，服務端經過Content-Encoding來啓用壓縮，配置壓縮的文件類型，壓縮方式。gzip使用無損壓縮，壓縮效果最佳，已經成爲使用最爲廣泛、支持的瀏覽器最多的數據壓縮格式。

緣由三：JavaScript腳本過大，阻塞了頁面的加載

解決：將JavaScript腳本放在標籤前。script沒有async和defer時，JS文件將在下載後當即執行。這種狀況下，script放在頂部會阻塞頁面呈現，在網速慢的狀況下會致使「白屏」，直到腳本下載完畢才繼續呈現頁面。所以，script放在底部可讓頁面儘快呈現。
https://blog.csdn.net/zhouziyu2011/article/details/71330739

緣由四：CSS、JavaScript、圖片等須要重複加載

解決：靜態資源統一放在一個靜態域名上，減輕重複下載靜態資源的負擔。

緣由五：cookie影響

解決：減少cookie的影響
①　去除沒有必要的cookie，若是網頁不須要cookie就徹底禁掉。
②　將cookie的大小減到最小：減少HTTP請求報文的大小，提升響應速度。
③　設置合適的過時時間：cookie信息將存儲到硬盤上，即便瀏覽器退出cookie還會存在，只要cookie未被清除且還在過時時間內，該cookie就會在訪問對應域名時發送給服務器。
④　經過使用不一樣的domain減小cookie的使用：cookie在訪問對應域名下的資源時都會經過HTTP請求發送到服務器，但在訪問一些資源，如js，css和圖片時，大多數狀況下cookie是多餘的，可使用不一樣的domain來存儲這些靜態資源，這樣訪問這些資源時就不會發送多餘的cookie，從而提升響應速度。

緣由六：網頁資源過多

解決：使用CDN部署網絡以提升下載速度，能夠先經過免費的CDN供應商來分發網頁資源。
緣由：DNS解析速度
DNS解析是從域名到IP的解析。DNS解析包括往復解析的次數及每次解析所花費的時間，它們二者的積便是DNS解析所耗費的總時間。許多人無視了DNS解析的因素，其實它對網站解析速度也是十分重要的。能夠更換延遲比較低的DNS服務器。

參考連接

• 網頁很卡的緣由

END