万物皆有裂痕，那是光照进来的地方
image.png
前端界面渲染主流程（webkit）
渲染引擎首先通过网络获得请求文档的内容，然后开始渲染主流程，别废话，上图。
image.png
这当中干的活分别是：解析html构建dom树->构建render树->布局render树->绘制render树
- 将html代码按照深度优先遍历生成dom树
- css文件下载完成后渲染生成相应的CSSOM
- 当所有的CSSOM文件构建结束后，就会和dom一起生成render tree
- 然后是layout阶段，会将所有的节点位置计算出来
- finally，通过painting环节将所有的节点内容呈现出来
涉及概念
DOM： Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
CSSOM： CSS Object Model，浏览器将CSS解析成树形结构，简称CSSOM。
Render Tree： DOM和CSSOM合并就称之为Render Tree
layout： 有了Render Tree，浏览器就知道网页有哪些节点，各个节点的具体位置
painting： 按照计算出来的位置，通过显卡，把内容画在屏幕上。
回流和重绘
回流(reflow)：当浏览器发现某个部分发生了点变化影响了布局，比如：尺寸，位置，隐藏/显示等，需要倒回去重新渲染，这个过程谓之回流。
常见引起回流的事件
- 网页初始化
- DOM操作，比如元素添加，删除，修改，元素顺序变化
- 内容变化
- CSS属性的计算或者改变
- 添加或删除样式表
- 浏览器窗口的缩放、滚动等
- 伪类激活
JS获取layout属性值，如offsetLeft、scollTop、getComputedStyle等都会引起回流。回流一定引起重绘，重绘不一定引起回流
重绘(repaint)： 一个元素的外观被改变，但是没有改变布局情况下发生的。 如果只是改变某个元素的背景色，文字颜色，边框颜色等等不影响它周围或内部布局的属性时，将只会引起浏览器屏幕的一部分重画。
为什么javascript文件要写在html文件底部body标签前，css文件引用放在head标签中
- 浏览器获得HTML文件后，会自上而下的加载，并在加载过程进行解析和渲染。遇到CSS文件和图片的时候哦，浏览器会另外发出一个请求，来获取CSS文件和图片，这个请求是异步的，并不影响HTML文件
- html加载遇到javascript文件时，html文件会挂起渲染的线程，等待javascript加载完毕后，html才继续渲染。而且javascript可能会修改DOM，这也将导致后续的HTML资源白加载。所以最好就是在html渲染后再加载javascript
