瀏覽器如何呈現(xiàn)網(wǎng)頁(yè)
以該代碼為例分析關(guān)鍵路徑
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>題目</h1>
<div id="root">
<p>主要內(nèi)容</p>
</div>
<script src="common.js"></script>
<script src="index.js"></script>
</body>
</html>
一個(gè)網(wǎng)頁(yè)的呈現(xiàn)有以下關(guān)鍵字，DOM樹(shù)、CSSOM樹(shù)和渲染樹(shù)票编。如上代碼所示，
DOM由HTML標(biāo)簽組成卵渴，瀏覽器能識(shí)別H5標(biāo)簽將其轉(zhuǎn)化為DOM樹(shù)慧域。
body {
background-color:red;
h1 {
font-size: 13px;
}
.root {
color: red;
p {
text-align: center;
}
}
}
瀏覽器解析css，生成CSSOM浪读。
瀏覽器將DOM樹(shù)和CSS樹(shù)結(jié)合昔榴，形成渲染樹(shù)，在網(wǎng)頁(yè)中呈現(xiàn)出來(lái)的即是我們看到的網(wǎng)頁(yè)碘橘。
瀏覽器解析過(guò)程
瀏覽器遇到HTML文件互订，首先解析其中的標(biāo)簽生成DOM樹(shù)，之后遇到link請(qǐng)求外部CSS文件（DOM還沒(méi)有完全生成）痘拆，之后一直向下解析標(biāo)簽元素仰禽，直到遇到script標(biāo)簽，請(qǐng)求js文件并返回請(qǐng)求，最后生成一個(gè)完整的包含樣式的DOM樹(shù)呈現(xiàn)在頁(yè)面上吐葵。瀏覽器在接受到j(luò)s后會(huì)立即解析并執(zhí)行js规揪，js會(huì)阻塞DOM樹(shù)和CSSOM樹(shù)的創(chuàng)建，內(nèi)聯(lián)的css和js會(huì)一直阻塞DOM樹(shù)的建設(shè)温峭。
網(wǎng)頁(yè)性能優(yōu)化
瀏覽器首先發(fā)送請(qǐng)求猛铅，下載HTML文件，在解析HTML文件的過(guò)程中凤藏，分別遇到外鏈接的css文件和js文件奸忽，需要在發(fā)送CSS、js請(qǐng)求并收到response后繼續(xù)解析DOM揖庄。瀏覽器解析js時(shí)會(huì)阻止DOM和CSSOM樹(shù)的創(chuàng)建月杉。瀏覽器每次發(fā)送的數(shù)據(jù)有大小限制，超過(guò)該限制會(huì)再發(fā)起一次交互抠艾。
綜上所述苛萎，一個(gè)網(wǎng)頁(yè)的優(yōu)化有以下幾個(gè)方面：
- 頁(yè)面大小〖旌牛空格腌歉、換行都占字符大小。
- 發(fā)送請(qǐng)求的次數(shù)齐苛。
部分CSS和js可以更改為內(nèi)聯(lián)樣式翘盖，
為css設(shè)置媒體識(shí)別信息，為外部腳本js設(shè)置async屬性（異步執(zhí)行凹蜂，不阻塞DOM創(chuàng)建）
馍驯。。玛痊。汰瘫。。（扎心擂煞，總感覺(jué)還有什么沒(méi)有交代清楚混弥。第一次寫(xiě)技術(shù)分享文章，有說(shuō)的不清楚或錯(cuò)誤的地方歡迎大家指出对省，大家共同進(jìn)步）蝗拿。。蒿涎。哀托。。
