前端优化之资源加载

一、CSS、JS的装载与执行

html页面加载渲染的过程

特点：
1、顺序执行、并发加载

• 一个域名并发加载有限制，利用多个CDN域名
• 词法分析
• 并发加载
• 并发上限

2、是否阻塞

• css head中阻塞页面的渲染
• css阻塞js的执行
• css不阻塞外部脚本的加载
• 直接引入的js阻塞页面的渲染
• js不阻塞资源的加载
• js顺序执行，阻塞后续js逻辑的执行

3、依赖关系

• 页面渲染依赖于css的加载
• js的执行顺序的依赖关系
• js逻辑对于dom节点的依赖关系

4、引入方式

• 直接引入
• defer
• async
• 异步动态引入js

二、懒加载和预加载

懒加载

• 图片进入可视区域之后请求图片资源
• 对于电商等图片很多，页面很长的业务场景适用
• 减少无效资源的加载
• 并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用

预加载

• 图片等静态资源在使用之前的提前请求
• 资源使用到时能从缓存中加载，提升用户体验
• 页面展示的依赖关系维护

三、回流和重绘

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
当页面布局和几何属性改变时就需要回流

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流

触发页面重布局的属性

• 盒子模型相关属性会触发重布局
• 定位属性及浮动也会触发重布局
• 改变节点内部文字结构也会触发重布局

只触发重绘的属性

新建DOM的过程
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果（Recalculate style–样式重计算）
3. 为每个节点生成图形和位置（Layout–回流和重布局）
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint–重绘）
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组）