浏览器加载页面和渲染过程
加载过程
- 浏览器根据DNS 服务器得到域名的IP地坛
- 向这个 IP 的机器发送 HTTP请求
- 服务器收到，处理并返回 HTTP请求
- 浏览器得到返回内容
渲染过程
- 根据 HTML 结构生成 DOM 树
- 根据 CSS 生成 CSSOM
- 根据 RenaderTree 开始渲染和展示
- 遇到 <strcipt >会执行并阻塞渲染
懒加载
- 图片进入可视区域之后请求图片资源
- 对于电商等图片很多，页面很长的业务场景适用
- 减少无效资源的加载
- 并发加载的资源过多会阻塞js的加载，景程网站正常使用
预加载
- 图片等静态资源在使用之前的提前请求
- 资源使用到时能从缓存中加载，提升用户体验
- 页面展示的依赖关系维护
页面回流
- 当render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等 改变而需要重新构建。这就称为回流(reflow)
- 当页面布局和几何属性改变时就需要回流
重绘
- 当 renader tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。
回流必将引起重绘而重绘不一定引起回流
触发页面布局的属性
- 盒子模型相关属性会触发重布局
- 定位属性及浮动也会触发重布局
- 改变节点内部文字结构也会触发重布局
只触发重绘的属性
新建DOM的过程
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果（Recalculate style--样式重计算）
3. 为每个节点生成图形和位置（Layout--回流和重布局）
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint--重 绘）
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）
Chrome创建图层的条件
- 3D或透视变换（perspective transform）CSS属性
- 使用加速视频解码的<video>节点
- 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
- 混合插件（如Flash）
- 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
- 拥有加速CSS过滤器的元素
- 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
- 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
实战优化点
- 用translate替代top改变
- 用opacity替代visibility
- 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
- 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
- 动画实现的速度的选择
- 对于动画新建图层
- 启用 GPU 硬件加速
愿你成为终身学习者