這是部門同事的一次內部分享，聽完後受益頗多，趁著記憶還算新鮮，趕緊記錄一波。
當瀏覽器傳送乙個請求到接受所有響應資料截止，這個過程發生了什麼？我們最關心的時間又是如何被消耗的？
從connection start到content download
圖（1）請求並得到乙個網路資源/檔案的過程、及時間
名詞解釋：
stalled.阻塞。 當產生queueing 時，請求會被阻塞。
dns lookup. dns 查詢。瀏覽器正在查詢請求的 ip 位址。
proxy negotiation.瀏覽器正在和**伺服器協商請求。
request sent。開始傳送請求。
waiting(ttfb).瀏覽器正在等待響應的第乙個位元組。ttfb表示time to first byte。它包括1次往返延遲的時間和服務端準備響應的時間。
content download.瀏覽器正在接收響應。
當html檔案的相應位元組被瀏覽器接受到被後，會觸發finish loading事件。然後，瀏覽器開始parse html，也就是開始構建 dom 樹。
解析過程是從上到下依次進行，當遇到以下情況，parse過程將被阻塞：
當load事件被觸發，瀏覽器執行以下操作，開始頁面渲染。
recalculate style-->layout-->update layer tree-->paint-->composite layers
我們使用chrome瀏覽器的dev-tool進行頁面效能分析，錄製的是航班管家h5(本地)首頁初始載入的情況。
圖（2）概覽
我們將圖2放大一點：
圖（3）
main項表示瀏覽器主要流程時序，network項表示網路請求時序。
結合圖2、圖3的main項可以看到，
第一步：傳送了乙個請求->send request(home)，對應network中灰色的home(wtest.133.cn)，它表示請求這個html頁面，響應資料是分段傳送的，瀏覽器接受到資料片段即開始parse html。並且在parse html(home[1...54])過程中，並行傳送了從alpaca.css到resize-vue.js的 7 個請求。
第二步：等待資源載入完畢，執行指令碼後，繼續parse html(home[55...])
第三步：domcontentloaded事件完成，開始渲染頁面。此時執行延遲指令碼，傳送圖2中第乙個紅線框的js請求，等待響應。
第四步：瀏覽器接受響應，執行指令碼後，傳送第二個紅線框的 js 請求，等待響應。
第五步：瀏覽器接受響應，執行指令碼。end。
通過以上分析，我們已經清楚了時間都被浪費在了哪些地方：
優化舉措：
猜測預載入技術
我們知道，js 載入和執行過程中會阻塞頁面parse。但仔細觀察圖3，請求幾乎都是同時傳送的，這是為什麼呢？
為了減少阻塞時間，現代瀏覽器使用了一種「猜測預載入」的技術。當渲染被阻塞的時候，它會做以下事情：
但是，猜測預載入不能發現通過j**ascript指令碼來載入的資源檔案（如，document.write()），參見。
更多：詳談合成層（composite layers）
效能測試 瓶頸定位 工具使用（下）
報告分析 1 為方便查詢 a 以 timestamp webtestname userload 命名 test result b 將部分指標以 換算 ex network i o fail ratio 2 效能定位的目的 基於成本考量，將系統最昂貴部分用至極限從而確定了優先順序排序 i o cpu ...
頁面元素定位cssSelector Xpath
頁面定位 id name linktext cssselector xpath classname tagname 一 xpath是xml path的簡稱，由於html文件本身就是乙個標準的xml頁面，所以我們可以使用xpath 的用法來定位頁面元素 相對路徑的引用寫法 查詢頁面上第乙個form元素...
HTML頁面底部定位
先帝創業未半，而中道崩殂 今天下三分，益州疲敝，此誠危急存亡之秋也。然侍衛之臣，不懈於內 忠志之士，忘身於外者 蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣 不宜妄自菲薄，引喻失義，以塞忠諫之路也。宮中府中，俱為一體 陟罰臧否，不宜異同 若有作奸犯科，及為忠善者，宜付有司...