国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

頁面加載過程詳解和優化策略

xiyang / 380人閱讀

摘要：前言通過相關的，我們可以對頁面進行性能分析。下面會就幾個比較重要的過程進行分析，給出耗時計算方法，并針對性的給出一些優化建議。下文中的均表示解析域名系統英文，縮寫是互聯網的一項服務。

前言

通過HTML5 Performanc相關的API，我們可以對頁面進行性能分析。

下面會就幾個比較重要的過程進行分析，給出耗時計算方法，并針對性的給出一些優化建議。

// 下文中的timing均表示performance.timing
let timing = window.performance.timing;
DNS解析 
域名系統（英文：Domain Name System，縮寫：DNS）是互聯網的一項服務。它作為將域名和IP地址相互映射的一個分布式數據庫，能夠使人更方便地訪問互聯網。

簡單來說就是將一個域名映射到其對應的服務器IP地址，后續的請求均發送到該服務器。

DNS查詢的基本過程如下：

查找瀏覽器緩存
瀏覽器會緩存DNS查詢結果，不同的瀏覽器緩存時間會有所不同。如果瀏覽器存在緩存，那么DNS查詢就到此為止。

查找系統緩存
瀏覽器緩存中沒有需要的數據時，就會往上找到操作系統緩存。我們也可以手動配置host文件，這樣瀏覽器會優先使用我們的配置。

查找路由器緩存
系統緩存中也沒有需要的數據時，就會找到路由器。

查找運營商DNS緩存
之后會向運營的服務器（網絡配置中的DNS服務器地址）請求DNS數據。

遞歸搜索
如果運營商服務器內也沒有需要的數據時，就會開始消耗最大的遞歸搜索。

舉個栗子m.taobao.com：

首先向根域名服務器請求頂級域com的IP地址；

獲取返回值后，向頂級域com的服務器請求一級域名taobao的IP地址；

獲取返回值后，向一級域名taobao的服務器請求二級域名m的IP地址；

獲取返回值后，完成查找，返回m.taobao.com的IP地址；
根據網絡的不同，這一塊的耗時可能高達十幾秒。

耗時計算：

let dns = timing.domainLookupEnd - timing.domainLookupStart;

明白工作原理后我們就可以針對域名解析這塊做出一些優化，下面是一些優化建議：

考慮到域名解析是有時間消耗的，而且有可能消耗還不小，所以我們可以減少頁面中使用到的域名數量，從而減少解析次數；

另外一個方法是進行DNS預解析，提前解析好的域名地址會被緩存在瀏覽器中，對其他頁面也能起到加速的作用；

HttpDNS，減少時延的同時還能防劫持；

建立連接

耗時計算：

let tcp = timing.connectEnd - timing.connectStart;

優化點如下：

避免重定向，這個不解釋；

適當的合并請求，同上，減少握手次數；

長鏈接keep-alive，同上，減少握手次數；

發送請求

從發送請求到開始響應的過程。
耗時計算：

let req = timing.responseStart - timing.requestStart;

優化點如下：

避免重定向，還是不解釋；

減少請求數據量，檢查是否存在冗余的cookie；

使用CDN，縮短傳輸鏈路；

接收數據

從響應開始到數據傳輸完成的過程。
耗時計算：

let res = timing.responseEnd - timing.responseStart;

優化點如下：

減小html代碼體積，包括去冗余以及代碼壓縮；

傳輸過程開啟Gzip，進一步壓縮傳輸數據量；

使用CDN，縮短傳輸鏈路；

解析DOM樹

耗時計算：

let dom = timing.domInteractive - timing.domLoading;

優化點如下：

簡化DOM結構，刪除多余節點，避免深層嵌套；

同步的js會阻塞解析過程，考慮對js進行分段加載，延遲加載；

網頁加載完成

下載并執行擁有defer屬性的腳本。
耗時計算：

let dom = timing.domInteractive - timing.domLoading;

這一塊的優化點主要集中在js代碼層次的優化。然鵝，js的優化值得寫本書來好好念叨念叨，so，這里就不展開了，主要給幾個點吧：

減少需要加載的文件數，合并代碼；

減小變量調用鏈路，多次訪問到的對象成員保存成局部變量；

緩存函數運行結果；

算法優化，減少迭代次數，以及迭代的工作量；

縮短函數調用鏈；

DOM加載完成

DOM和CSSOM解析完成，并組合成為渲染樹之后開始加載并執行defer的腳本。

defer的腳本執行完成就觸發了DOMContentLoad事件，同時進行的還有圖片，css等，這些資源文件加載完成后才是domComplete。

domComplete之后就立刻觸發load事件。
耗時計算

let domComplete = timing.domComplete - timing.domContentLoadedEventEnd;

這一塊的優化主要集中在資源層次的優化，這也是一個比較大的項目，一樣，挑幾個點說一下：

使用css，iconfont，svg代替圖片

根據屏幕分辨率進行適配

使用合適的圖片格式，兼容的情況下，webp是個不錯的選擇

小圖片使用data url代替

資源prefetch

lazyload

此外，DOMContentLoaded事件耗時和DOMLoad事件耗時，主要就是執行js代碼，優化建議參考網頁加載完成。

以上～

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89443.html

相關文章

  • 前端性能優化不完全手冊

    摘要：負載均衡就是用來幫助我們將眾多的客戶端請求合理的分配到各個服務器，以達到服務端資源的充分利用和更少的請求時間。如下面的配置復制代碼這樣可以完美繞過瀏覽器的同源策略訪問的屬于同源訪問，而對服務端轉發的請求不會觸發瀏覽器的同源策略。 性能優化是一門大學問，本文僅對個人一些積累知識的闡述，歡迎下面補充。 拋出一個問題，從輸入url地址欄到所有內容顯示到界面上做了哪些事？ 1.瀏覽器向 DN...

    ranwu 評論0 收藏0

  • 前端性能優化不完全手冊

    摘要：負載均衡就是用來幫助我們將眾多的客戶端請求合理的分配到各個服務器，以達到服務端資源的充分利用和更少的請求時間。如下面的配置復制代碼這樣可以完美繞過瀏覽器的同源策略訪問的屬于同源訪問，而對服務端轉發的請求不會觸發瀏覽器的同源策略。 性能優化是一門大學問，本文僅對個人一些積累知識的闡述，歡迎下面補充。 拋出一個問題，從輸入url地址欄到所有內容顯示到界面上做了哪些事？ 1.瀏覽器向 DN...

    jayce 評論0 收藏0

  • 2017文章總結

    摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...

    dailybird 評論0 收藏0

發表評論

0條評論

xiyang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<