这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战
渲染过程：
- 输入url，浏览器根据 DNS 服务器得到域名的 IP 地址
- 向服务器请求，服务器返回请求，客户端得到返回的内容
- 自上而下生成dom树
- 渲染css树，生成cssom
- 渲染layout，计算节点大小，位置
- 根据以上进行页面渲染
思考
渲染过程中，如果遇到<script>就停止渲染，执行 JS 代码，这个时候解析器是暂停状态，等 JS 加载完毕后，再进行构建
所以，建议将 script 标签放在 body 标签底部的原因就是这样
结构
dom tree的根是document，左枝右杆是head和body，以下都是树叶子节点
回流/重排：
当渲染树中的一部分或者全部因为布局等问题需要重新构建，就会进行回流/重排,每个页面必定会有一次，就是第一次加载的时候
重绘： 当渲染树中的一部分因为样式等问题需要重新构建，就会进行重绘
重排一定会重绘，但重绘不一定重排
重排重绘会造成浏览器耗时，卡顿等问题，所以不能频繁重复改变dom
根据以上问题优化
- 直接改变classname
- 如果要创建多个dom，就一次性加进去
- 需要多次重排的元素，设置绝对定位脱离文档流，就不会对其他元素造成影响了
- 避免使用 CSS 表达式
- 避免使用 table 布局
所以有了虚拟dom来优化这一点
虚拟dom是用js模拟出来的树，当构建完后一次性的渲染到文档流里
更新时利用diff算法进行更新，diff算法涉及一个key，用来保证能精确的找到节点位置进行更改，不然会造成后续节点的重复构造，消耗不必要的性能
