摘要:前言通過(guò)相關(guān)的,我們可以對(duì)頁(yè)面進(jìn)行性能分析。下面會(huì)就幾個(gè)比較重要的過(guò)程進(jìn)行分析,給出耗時(shí)計(jì)算方法,并針對(duì)性的給出一些優(yōu)化建議。下文中的均表示解析域名系統(tǒng)英文,縮寫是互聯(lián)網(wǎng)的一項(xiàng)服務(wù)。
前言
通過(guò)HTML5 Performanc相關(guān)的API,我們可以對(duì)頁(yè)面進(jìn)行性能分析。
下面會(huì)就幾個(gè)比較重要的過(guò)程進(jìn)行分析,給出耗時(shí)計(jì)算方法,并針對(duì)性的給出一些優(yōu)化建議。
// 下文中的timing均表示performance.timing let timing = window.performance.timing;DNS解析
域名系統(tǒng)(英文:Domain Name System,縮寫:DNS)是互聯(lián)網(wǎng)的一項(xiàng)服務(wù)。它作為將域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù),能夠使人更方便地訪問互聯(lián)網(wǎng)。
簡(jiǎn)單來(lái)說(shuō)就是將一個(gè)域名映射到其對(duì)應(yīng)的服務(wù)器IP地址,后續(xù)的請(qǐng)求均發(fā)送到該服務(wù)器。
DNS查詢的基本過(guò)程如下:
查找瀏覽器緩存
瀏覽器會(huì)緩存DNS查詢結(jié)果,不同的瀏覽器緩存時(shí)間會(huì)有所不同。如果瀏覽器存在緩存,那么DNS查詢就到此為止。
查找系統(tǒng)緩存
瀏覽器緩存中沒有需要的數(shù)據(jù)時(shí),就會(huì)往上找到操作系統(tǒng)緩存。我們也可以手動(dòng)配置host文件,這樣瀏覽器會(huì)優(yōu)先使用我們的配置。
查找路由器緩存
系統(tǒng)緩存中也沒有需要的數(shù)據(jù)時(shí),就會(huì)找到路由器。
查找運(yùn)營(yíng)商DNS緩存
之后會(huì)向運(yùn)營(yíng)的服務(wù)器(網(wǎng)絡(luò)配置中的DNS服務(wù)器地址)請(qǐng)求DNS數(shù)據(jù)。
遞歸搜索
如果運(yùn)營(yíng)商服務(wù)器內(nèi)也沒有需要的數(shù)據(jù)時(shí),就會(huì)開始消耗最大的遞歸搜索。
舉個(gè)栗子m.taobao.com:
首先向根域名服務(wù)器請(qǐng)求頂級(jí)域com的IP地址;
獲取返回值后,向頂級(jí)域com的服務(wù)器請(qǐng)求一級(jí)域名taobao的IP地址;
獲取返回值后,向一級(jí)域名taobao的服務(wù)器請(qǐng)求二級(jí)域名m的IP地址;
獲取返回值后,完成查找,返回m.taobao.com的IP地址;
根據(jù)網(wǎng)絡(luò)的不同,這一塊的耗時(shí)可能高達(dá)十幾秒。
耗時(shí)計(jì)算:
let dns = timing.domainLookupEnd - timing.domainLookupStart;
明白工作原理后我們就可以針對(duì)域名解析這塊做出一些優(yōu)化,下面是一些優(yōu)化建議:
考慮到域名解析是有時(shí)間消耗的,而且有可能消耗還不小,所以我們可以減少頁(yè)面中使用到的域名數(shù)量,從而減少解析次數(shù);
另外一個(gè)方法是進(jìn)行DNS預(yù)解析,提前解析好的域名地址會(huì)被緩存在瀏覽器中,對(duì)其他頁(yè)面也能起到加速的作用;
HttpDNS,減少時(shí)延的同時(shí)還能防劫持;
建立連接耗時(shí)計(jì)算:
let tcp = timing.connectEnd - timing.connectStart;
優(yōu)化點(diǎn)如下:
避免重定向,這個(gè)不解釋;
適當(dāng)?shù)暮喜⒄?qǐng)求,同上,減少握手次數(shù);
長(zhǎng)鏈接keep-alive,同上,減少握手次數(shù);
發(fā)送請(qǐng)求從發(fā)送請(qǐng)求到開始響應(yīng)的過(guò)程。
耗時(shí)計(jì)算:
let req = timing.responseStart - timing.requestStart;
優(yōu)化點(diǎn)如下:
避免重定向,還是不解釋;
減少請(qǐng)求數(shù)據(jù)量,檢查是否存在冗余的cookie;
使用CDN,縮短傳輸鏈路;
接收數(shù)據(jù)從響應(yīng)開始到數(shù)據(jù)傳輸完成的過(guò)程。
耗時(shí)計(jì)算:
let res = timing.responseEnd - timing.responseStart;
優(yōu)化點(diǎn)如下:
減小html代碼體積,包括去冗余以及代碼壓縮;
傳輸過(guò)程開啟Gzip,進(jìn)一步壓縮傳輸數(shù)據(jù)量;
使用CDN,縮短傳輸鏈路;
解析DOM樹耗時(shí)計(jì)算:
let dom = timing.domInteractive - timing.domLoading;
優(yōu)化點(diǎn)如下:
簡(jiǎn)化DOM結(jié)構(gòu),刪除多余節(jié)點(diǎn),避免深層嵌套;
同步的js會(huì)阻塞解析過(guò)程,考慮對(duì)js進(jìn)行分段加載,延遲加載;
網(wǎng)頁(yè)加載完成下載并執(zhí)行擁有defer屬性的腳本。
耗時(shí)計(jì)算:
let dom = timing.domInteractive - timing.domLoading;
這一塊的優(yōu)化點(diǎn)主要集中在js代碼層次的優(yōu)化。然鵝,js的優(yōu)化值得寫本書來(lái)好好念叨念叨,so,這里就不展開了,主要給幾個(gè)點(diǎn)吧:
減少需要加載的文件數(shù),合并代碼;
減小變量調(diào)用鏈路,多次訪問到的對(duì)象成員保存成局部變量;
緩存函數(shù)運(yùn)行結(jié)果;
算法優(yōu)化,減少迭代次數(shù),以及迭代的工作量;
縮短函數(shù)調(diào)用鏈;
DOM加載完成DOM和CSSOM解析完成,并組合成為渲染樹之后開始加載并執(zhí)行defer的腳本。
defer的腳本執(zhí)行完成就觸發(fā)了DOMContentLoad事件,同時(shí)進(jìn)行的還有圖片,css等,這些資源文件加載完成后才是domComplete。
domComplete之后就立刻觸發(fā)load事件。
耗時(shí)計(jì)算
let domComplete = timing.domComplete - timing.domContentLoadedEventEnd;
這一塊的優(yōu)化主要集中在資源層次的優(yōu)化,這也是一個(gè)比較大的項(xiàng)目,一樣,挑幾個(gè)點(diǎn)說(shuō)一下:
使用css,iconfont,svg代替圖片
根據(jù)屏幕分辨率進(jìn)行適配
使用合適的圖片格式,兼容的情況下,webp是個(gè)不錯(cuò)的選擇
小圖片使用data url代替
資源prefetch
lazyload
此外,DOMContentLoaded事件耗時(shí)和DOMLoad事件耗時(shí),主要就是執(zhí)行js代碼,優(yōu)化建議參考網(wǎng)頁(yè)加載完成。
以上~
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/89443.html
摘要:負(fù)載均衡就是用來(lái)幫助我們將眾多的客戶端請(qǐng)求合理的分配到各個(gè)服務(wù)器,以達(dá)到服務(wù)端資源的充分利用和更少的請(qǐng)求時(shí)間。如下面的配置復(fù)制代碼這樣可以完美繞過(guò)瀏覽器的同源策略訪問的屬于同源訪問,而對(duì)服務(wù)端轉(zhuǎn)發(fā)的請(qǐng)求不會(huì)觸發(fā)瀏覽器的同源策略。 性能優(yōu)化是一門大學(xué)問,本文僅對(duì)個(gè)人一些積累知識(shí)的闡述,歡迎下面補(bǔ)充。 拋出一個(gè)問題,從輸入url地址欄到所有內(nèi)容顯示到界面上做了哪些事? 1.瀏覽器向 DN...
摘要:負(fù)載均衡就是用來(lái)幫助我們將眾多的客戶端請(qǐng)求合理的分配到各個(gè)服務(wù)器,以達(dá)到服務(wù)端資源的充分利用和更少的請(qǐng)求時(shí)間。如下面的配置復(fù)制代碼這樣可以完美繞過(guò)瀏覽器的同源策略訪問的屬于同源訪問,而對(duì)服務(wù)端轉(zhuǎn)發(fā)的請(qǐng)求不會(huì)觸發(fā)瀏覽器的同源策略。 性能優(yōu)化是一門大學(xué)問,本文僅對(duì)個(gè)人一些積累知識(shí)的闡述,歡迎下面補(bǔ)充。 拋出一個(gè)問題,從輸入url地址欄到所有內(nèi)容顯示到界面上做了哪些事? 1.瀏覽器向 DN...
摘要:歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開緩存網(wǎng)頁(yè)性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫法...
閱讀 2310·2023-04-25 14:22
閱讀 3748·2021-11-15 18:12
閱讀 1303·2019-08-30 15:44
閱讀 3224·2019-08-29 15:37
閱讀 653·2019-08-29 13:49
閱讀 3466·2019-08-26 12:11
閱讀 886·2019-08-23 18:28
閱讀 1592·2019-08-23 14:55