文章目录
- 一，浏览器的基本结构
- 二，浏览器内核
- 三，渲染流程
- （1）构建DOM树
- （2）构建CSSOM树
- （3）执行渲染
- 四，Javascript加载
- 串行
- 异步
一，浏览器的基本结构
浏览器内核是浏览器最核心的组成部分——渲染引擎
HTML和CSS内容会被渲染引擎解析并渲染到屏幕上
在控制台输入命令 navigator.userAgent 后能看见浏览器相关的信息
二，浏览器内核
| 主流浏览器 | Chrome | IE | Edge | FireFox | Opera | Safari |
|---|---|---|---|---|---|---|
| 渲染引擎 | Webkit | Trident | Webkit | Gecko | Webkit | Webkit |
三，渲染流程
（1）解析HTML标签并生成DOM树
（2）解析CSS规则并生成CSSDOM树
（3）将DOM树与CSSOM树合并为一个渲染树
（4）根据渲染树来进行布局
（5）对渲染树上的节点进行绘制
（1）构建DOM树
DOM全称Document Object Model
当服务器将HTML文档发送到浏览器后，浏览器会根据标签之间的嵌套结构，基于语法，分析其并解析为一棵DOM树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM树</title>
</head>
<body>
<div>
<div>
<p></p>
<img/>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
标签数据越多，解析时间越长
（2）构建CSSOM树
CSSOM全称 Cascade Style Sheet Object Model
平时我们编写的CSS文件里面的自定义代码，是对默认样式的替换。 默认样式一般表现在ul这类标签，当你写了一个ul列表时，整个ul在渲染完成后，会自动左侧内填充有40px的距离
这是因为ul的默认左侧内填充距离为40px，我们只要写padding-left：0px即可抵消其默认左侧内填充的距离
（3）执行渲染
浏览器将CSS样式依附到DOM树上，是按照从右到左匹配的规则。怎么理解这个？
比如:
<div><span>1</span><span>2</span></div>
上面这个代码，如果对其进行css样式编写，在渲染的时候找到div标签后，会先从内容为2的span标签往内容为1的span标签进行渲染，这样做的好处是，减少翻来覆去查找匹配的渲染次数，节省性能，防止css从左往右渲染产生的回溯操作（什么是回溯，比如你定义了全部span为红色，然后定义最后一个span为蓝色，如果是从左往右，会先让全部变成蓝色后再让最后一个变成红色）。
所以在平时写代码的时候，能以最短的代码找到dom点最好，不要写太复杂的代码徒增了浏览器渲染查找标签的工作，从而避免影响性能
写页面的时候特别注意的规则：在对元素样式进行修改的时候，尽量避免对页面布局进行重排，因为重排后的布局会触发新的dom树绘制，从而耗费性能，css中有两个属性就是鲜明的对比，一个是margin-left，一个是translate。前者如果在页面渲染完成后改变，会导致页面重排，但是后者不会，后者不会
四，Javascript加载
javascript引擎是用于解析和执行js代码的单线程程序，js的加载主要有两种方式：串行和异步
串行
js是串行的，在同一时间以单线程的方式操作DOM，执行逻辑运算，CSS的渲染和JS引擎会互相阻塞进行。
为什么一般要把js文件的引入标签放在html文件底部？
因为阻塞加载的行为，如果一开始就在页面头部引入js文件，当js文件容量很大的时候，下载js的代码时间会过长，页面会一直等待js加载完成后才开始css的渲染，这样会导致页面存在一定的空白期，用户等待时间一般超过4s就会离开网站，从而导致我们用户流失。所以一般先等html,css渲染排版好后开始js的渲染，来加快页面加载出来的速度
异步
（1）defer 会将执行js的操作延后，等待HTML解析完成后才执行
代码举例如下 ：
<script src="example.js" defer></script>
（2）async 能实现并发请求js，如果请求速度快于其他文件，会在其他文件请求完成前执行
代码举例如下 ：
<script src="example.js" async></script>
