关于前端性能优化

前端性能优化主要关注的点就是速度，具体分为加载性能和运行性能。

加载性能

检查加载性能可以参考window.performance的使用。

包括白屏时间，请求/响应时间，dom加载时间等。

应对策略基本需要考虑文件打包、gzip压缩、cdn引入第三方库、js代码懒加载、图片懒加载、图片质量压缩、浏览器缓存等。
还有就是如果对SEO要求比较高（大型资讯类网页）可以考虑使用SSR(服务端渲染)。

运行性能

检查运行性能可以使用chrome开发者工具上的performance->点开rendering，
勾选Paint flashing（高亮重绘区域）和Frame Rendering Stats（显示帧渲染信息），然后浏览量页面就可以看到网页渲染变化。

应对策略，避免频繁操作dom，现在的mvvm框架（vue/react）采用数据驱动的dom的方式，可以帮助我们合并多余的dom操作，提高渲染性能。

js循环数组应该先循环第一级再循环第二级，性能较好。
条件非常多的情况不要使用if-else，使用对象key-value封装的形式比较好。

高频触发的事件回调需要考虑函数防抖和节流（scroll，input等）。

尽量避免一帧一帧的实现动画，优先使用css3动画效果。transform 和 opacity不会触发重排和重绘，只会触发合成器处理。

如果使用css3动画效果还是有体验问题，可以考虑启用GPU硬件加速（使用GPU渲染）。默认页面渲染是靠浏览器的渲染引擎的，一些复杂的动画（如3d变幻等）浏览器厂商会支持自动开启GPU硬件加速。

.demo {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}