分析網(wǎng)頁性能

在分析網(wǎng)頁性能之前要清楚的知道，從我們輸入url開始到看到網(wǎng)站，這整個(gè)過程到底發(fā)生了什么。那么在針對每個(gè)過程優(yōu)化。現(xiàn)在就讓我們從前端面試的經(jīng)典問題走起：從輸入url到頁面加載完發(fā)生了什么？用最簡單的話來描述如下：

1. DNS解析：從url定位到ip的過程
2. 發(fā)送網(wǎng)絡(luò)請求：下載html文檔。通常我們使用http協(xié)議（現(xiàn)在通常升級到HTTP2.0，SPDY），底層可能是TCP/UTP，這里會(huì)有經(jīng)典的三次握手連接。
   3.下載完html文檔之后，瀏覽器開始解析html文檔。話說瀏覽器的解析也可以長到一篇文章來說明，這里簡單講下。就是構(gòu)建dom樹，然后下載css樣式，然后渲染樹出來，然后瀏覽器繪制。然后下載js（因?yàn)橐话鉰s都是放在底部），然后解析js。整個(gè)頁面完全出來了。

如下是繪制的一個(gè)完整的網(wǎng)頁請求：

QQ截圖20160901215414.png

推薦閱讀更多精彩內(nèi)容

• 優(yōu)秀第三方

  發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...

  肇東周閱讀 12,180評論 4贊 61
• 從輸入U(xiǎn)RL到頁面實(shí)現(xiàn)

  在我們點(diǎn)擊一個(gè)網(wǎng)址，到它能夠呈現(xiàn)在瀏覽器中，展示在我們面前，這個(gè)過程中，電腦里，網(wǎng)絡(luò)上，究竟發(fā)生了什么事情。 服務(wù)...

  studystudy閱讀 343評論 0贊 0
• WebView性能、體驗(yàn)分析與優(yōu)化

  在App開發(fā)中，內(nèi)嵌WebView始終占有著一席之地。它能以較低的成本實(shí)現(xiàn)Android、iOS和Web的復(fù)用，也...

  獨(dú)酌丿紅顏閱讀 11,419評論 0贊 33
• 甜蜜的瞬間

  這是一條讓人尷尬的回答，我愛過的人并沒有愛過我，在我第一次表白的時(shí)候，他就拒絕我了。但還是有一些甜蜜瞬間的，至少對...

  艾冬天閱讀 499評論 0贊 0
• 巖土鬼谷子的端午腦洞

  曾經(jīng)對巖土鬼谷子有過一些想法，甚至打算寫一篇小說來“鬼谷子”一把。我現(xiàn)在不寫是因?yàn)檎嫘呐聦懥司偷焦鹊滓姽砣チ耍冒?..

  貫軍閱讀 395評論 3贊 1