懒加载与预加载
懒加载
- 图片进入可视区域之后请求图片资源 - 进入可视区域之后修改 src 属性
UI与电商等图片资源很多，页面很长的业务场景使用- 减少无效资源的加载
- 并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用
实现方式：需要去监听 scroll 事件，在 scrool 滚动事件的回调中
预加载
- 图片等静态资源在使用之前的提前请求
- 资源使用时能从缓存中加载，提升用户体验
- 页面展示的依赖关系维护
实现方式：
- 使用
XMLHttpRequest对象 - 使用
Image对象 - 使用
preload.js库
重绘与回流
- 理解浏览器重绘与回流的机制
- 对于一些经典的案例进行分析
- 重绘与回流的案例实战
css 性能会让 JavaScript 变慢？
在加载 css 的时候，js 的执行被阻塞，在 js 中执行的时候，页面的渲染也是被阻塞的。
频繁触发重绘与回流，会导致 UI 频繁渲染，最终导致 js 执行效率。
回流
当
render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏改变而需要重新构建，这就成为回流（reflow）当页面布局和几何属性改变时就需要回流
重绘
当 render tree 的一些元素需要更新属性，二者属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color 。则成为重绘。
综上，回流一定会触发重绘，重绘不一定会触发回流。
触发页面重新布局的属性
- 盒子模型相关属性会触
- 定位属性及浮动也会触发
- 改变节点内部文字结构
将频发重绘回流的 DOM 元素单独作为一个独立图层，那么这个 DOM 元素的重绘和回流的影响只会在这个图层中。
Chrome 创建图层的条件：
- 3D 或透视变换
CSS属性（perspective transform） - 使用加速视频解码的
video节点 - 拥有 3D （
WebGL） 上下文或加速的 2D 上下文的canvas节点 - 混合插件（如
Flash） - 对自己的
opacity做CSS动画或使用一个动画webkit变换的元素 - 拥有加速
CSS过滤器的元素 - 元素有一个包含复合层的后代节点
- 元素由一个
z-index较低且包含一个复合层的兄弟元素
优化策略
- 避免使用触发重绘、回流的 CSS 属性
- 将重绘、 回流的影响返回限制在单独的图层之内
