> ## JS性能优化 * 常见编码规范 * JS放到body尾部 * 非核心代码的异步加载 * 减少DOM操作 * 减少触发事件(节流防抖) * 懒加载 > ## 页面渲染/CSS优化 * CSS代码放在前面 * 尽早执行操作 * 配置渲染引擎 * 最小化重绘(repaint)和回流(reflow) > ## 网络优化（三预一缓 压缩CDN） * DNS**预**解析 * 静态资源的**合并压缩** * 利用**缓存**机制，尽可能使用缓存减少请求 * 使用CDN * **预**加载 * **预**渲染 * 图片优化（懒加载见JS） > ### 插入几万个 DOM，如何实现页面不卡顿？ * 肯定不能一次性把几万个 DOM 全部插入，这样肯定会造成**卡顿**，所以解决问题的重点应该是如何**分批次部分渲染 DOM**。 * 部分人应该可以想到通过 `requestAnimationFrame` 的方式去循环的插入 DOM，其实还有种方式去解决这个问题：**虚拟滚动**（virtualized scroller）。 * 这种技术的原理就是**只渲染可视区域内的内容**，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容。  从上图中我们可以发现，即使列表很长，但是**渲染的 DOM 元素永远只有那么几个**，当我们滚动页面的时候就会实时去更新 DOM，这个技术就能顺利解决这发问题。如果你想了解更多的内容可以了解下这个 [react-virtualized](https://github.com/bvaughn/react-virtualized)。