一、浏览器结构
- 用户界面（User Interface）：包括交互组件，地址栏，返回前进按钮
- 浏览器引擎（Browser engine）：控制和管理下一级的渲染引擎
- 渲染引擎（Rendering engine）：解析请求内容，HTML,XML,CSS
- 网络（Networking）：处理HTTP请求等
- UI后端（UI backend）：绘制提示框等浏览器组件
- JavaScript解析器（JavaScript Interpreter）：解析和执行JavaScript代码
- 数据存储（Data Storage）持久化存储，cookie,缓存
二、网络请求过程
- 用户在地址栏输入域名，DNS（Domain Name System）域名解析服务器根据域名查找IP地址，向其发起请求
- 返回200响应码，说明响应成功
- 浏览器得到并解析服务器返回的内容response
- 加载HTML文件，及所需js，css，image等资源
三、渲染过程（关键渲染路径Critical Rendering Path）
- 构建DOM树，从上到下解析HTML文档生成DOM节点树，也叫内容树
- 构建CSSOM树，加载解析样式生成CSSOM树
- 执行JavaScript，加载并执行JavaScript代码
- 构建渲染树Render Tree，根据DOM树和CSSOM树生成。按顺序展示在屏幕的一系列矩阵，带有字体，颜色，尺寸等属性
- 布局Layout，根据渲染树将节点树的每一个节点布局在屏幕上的正确位置
-
绘制painting，遍历渲染树绘制所有节点，为每一个节点对应样式
rendering path
浏览器会每处理一部分内容，并展现在屏幕上，所以页面加载时是自上而下展现的
通常javascript会改变文档DOM结构，浏览器以同步方式解析，加载和执行脚本，遇到<script>标签时，会解析并立即执行直到完成，阻塞文档的解析。所以一般建议将<script>放在<body>前，而不是<head>标签内
而浏览器对样式的解析不会阻塞文档解析
布局Layout（或叫回流Reflow），通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置。有时会在文档布局完成后对DOM进行修改，就需要重新布局，称为回流，本质上还是布局的过程
四、页面渲染优化
- HTML文档结构层次尽量少
- 脚本放最好在</body>前
- 首屏样式内联放在<head>内，样式结构尽量简单
- 减少DOM操作，尽量缓存访问DOM的样式信息
- 减少通过javascript代码修改样式，多操作class
- 动画尽量使用在绝对定位或固定定位的元素上
- 缓存DOM查找，查找器尽量简洁
- 涉及多域名的网站，可以开旗域名预解析
参考文章：前端页面渲染机制-熊 建刚
