浏览器如何呈现网页
以该代码为例分析关键路径
<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>主要内容</p>
</div>
<script src="common.js"></script>
<script src="index.js"></script>
</body>
</html>
一个网页的呈现有以下关键字，DOM树、CSSOM树和渲染树。如上代码所示，
DOM由HTML标签组成，浏览器能识别H5标签将其转化为DOM树。
DOM-Tree.png
body {
background-color:red;
h1 {
font-size: 13px;
}
.root {
color: red;
p {
text-align: center;
}
}
}
浏览器解析css，生成CSSOM。
cssom.png
浏览器将DOM树和CSS树结合，形成渲染树，在网页中呈现出来的即是我们看到的网页。
浏览器解析过程
浏览器遇到HTML文件，首先解析其中的标签生成DOM树，之后遇到link请求外部CSS文件（DOM还没有完全生成），之后一直向下解析标签元素，直到遇到script标签，请求js文件并返回请求，最后生成一个完整的包含样式的DOM树呈现在页面上。浏览器在接受到js后会立即解析并执行js，js会阻塞DOM树和CSSOM树的创建，内联的css和js会一直阻塞DOM树的建设。
网页性能优化
浏览器首先发送请求，下载HTML文件，在解析HTML文件的过程中，分别遇到外链接的css文件和js文件，需要在发送CSS、js请求并收到response后继续解析DOM。浏览器解析js时会阻止DOM和CSSOM树的创建。浏览器每次发送的数据有大小限制，超过该限制会再发起一次交互。
综上所述，一个网页的优化有以下几个方面：
- 页面大小。空格、换行都占字符大小。
- 发送请求的次数。
部分CSS和js可以更改为内联样式，
为css设置媒体识别信息，为外部脚本js设置async属性（异步执行，不阻塞DOM创建）
。。。。。（扎心，总感觉还有什么没有交代清楚。第一次写技术分享文章，有说的不清楚或错误的地方欢迎大家指出，大家共同进步）。。。。。
