1、浏览器页面渲染流程
浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：
1、解析文档构建的DOM树
三部分：HTML（解析为DOM树）+CSS（解析样式表）+JavaScript（解析脚本）；
2、构建渲染树
3、布局与绘制渲染树
解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow（重排）
---------------------------------------------------------------------------------------------------------------------------------------------------------
2、脚本和样式文件对页面渲染的影响
浏览器从服务器获取文档并从上到下进行解析，在脚本文件标签不包含defer和async属性的情况下，会按照如下规则执行文档内容：
1、解析html文档，遇到HTML标签时，构建DOM树
2、在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网络连接，开始下载样式文件和脚本文件
3、样式文件下载完成后，构建CSS Rule DOM，脚本文件下载完成后，解释并立即执行。
4、构建DOM的同时，结合CSS规则树完成页面渲染。
5、如果DOM树先于CSS规则树构建完成，则在CSS规则树构建完成后，页面会发生一次重绘，将新构建的CSS规则应用于渲染树。
3、CSS对页面渲染的影响
前端页面渲染时会根据DOM结构生成一个DOM树,然后加上CSS样式生成渲染树。如果CSS文件放在<head>标签中，则CSS Rule Tree会先于DOM树完成构建，之后浏览器就可以边构建DOM树边完成渲染；反之，CSS文件放在所有页面标签之后，比如<body/>之前，那么当DOM树构建完成了，渲染树才构建，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。而且页面还可能会出现闪跳的感觉，或者白屏或者布局混乱或者样式很丑，直到CSS加载完成，页面重绘才能恢复正常。
因此，一般来讲，css标签应放在标签之间。但如果css文件较大，会让首页白屏时间更长，所以并不是说把css都放顶部是一个完美的方法。权衡利弊，应该把必须的css（js）放顶部，把不那么重要的css（js）放底部。
4、回流和重绘
reflow（回流）
DOM结构中的各个元素都有自己的盒子模型，浏览器会根据各样式计算元素的尺寸和位置，构建渲染树的过程称为回流（reflow）当渲染树节点的尺寸，布局，隐藏属性发生改变的时，会触发reflow操作，重新构建渲染树，每个页面在第一次加载的时候，都会发生一次回流。
完成回流后，浏览器会重绘受影响的部分到屏幕中。因此，回流必定导致重绘。
repain（重绘）
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小确定后，浏览器会把那些元素按照各自的特点进行绘制，于是页面的内容出现了，这个过程为重绘。
下面这些动作会触发reflow操作：
- 增加、删除、修改 DOM 结点
- 移动 DOM 的位置
- 绘制动画
- 修改 CSS 样式
- Resize 窗口的时候或是滚动
- 修改网页的默认字体
- 注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化
如何能将Reflow对性能的影响减到最小呢？
- 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className
- 把 DOM 离线后修改。
- 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。