前端性能优化就我个人经验来说可以分四个方面进行：内容、网络传输、dom渲染、以及最基础的代码层面。

内容层面

内容层面主要是关注内容来源、以及内容结果

• 使用CDN
• 单域名与多域名权衡：单域名可以减少DNS查找次数，多域名可以增加浏览器并行下载数量。原则上同一个域下不要超过四个资源
• 避免重定向、404

网络层面

在网络层面上可以假定网络速度不变，通过减少传输内容的体积、多寡、以及传输时机来加快获得页面的渲染结果。

• 利用缓存，资源缓存可以提高资源的获取速度
• 文件压缩通过Accept- Encoding：gzip、deflate、br和服务器约定压缩类型
• 按需加载、提取公共代码、tree-shaking。这些我们可以通过webpack打包来实现
• 减少cookie大小
• 文件合并、css雪碧图
• 文件预加载、图片懒加载

渲染层面

渲染层面是属于客户端一侧的，我们需要注意静态资源的加载时机，css放顶部、js放底部。另外还需要减少reflow（回流）和repaint（重绘）以及减少dom节点。渲染层面的优化场景通常是长列表优化。服务端返回大量数据，前端如果直接渲染会造成页面卡顿。通常的解决方式就是虚拟dom，懒加载。排除这两种方式后，就需要利用到回流、重绘、减少dom节点这三个原则了。你可以假设一个首屏页面最多可以显示10条数据，你可以保持这10个节点节点不变，在用户滚动的时候计算滚动高度，然后计算替换其中一部分节点的内容。

代码层面

• 缓存dom节点，减少节点查找、css选择器层级优化
• 减少dom节点操作
• 事件监听器及时移除