前端性能优化分为两个大部分，一是网络层面，在网络及浏览器各种规则下，更快的拿到需要的东西，另一个是浏览器层面，从渲染、操作等方面展开。
1、网站性能优化
1、content方面
1、减少HTTP请求，合并文件，css精灵（雪碧图）、inline Image(base64)等
2、减少DNS查询，DNS缓存、将资源分到到恰当数量的主机名
3、避免不必要的重定向
2、server层面
1、使用CDN，提高资源访问速度
2、对组件使用Gzip压缩
3、HTML、CSS、JS文件层面
1、将样式表放到⻚⾯顶部，快速生成CSSOM树
2、不使用CSS表达式，过于频繁的执行，影响浏览器性能，诸如重绘重排，鼠标移动等都会引起表达式执行
3、使用 '<link>'标签 而不是@import。使用 link 浏览器会识别该文档为css文件，会并行下载资源并且不会停止对当前文档的处理，@import需要页面网页完全载入以后加载。
4、将脚本放到⻚⾯底部
5、将 javascript 和 css 从外部引⼊
6、压缩文件中 ，含有的空格、制表符、换行符以及注释等，文件更小下载速度更快。
7、使用uglify插件对文件进行压缩
4、用户体验
1、懒加载
- 图片进入可视区域之后请求图片资源
- 对于电商等图片很多，页面很长的业务场景适用
- 减少无效资源的加载
- 并发加载的资源过多会阻塞js的加载，影响网站的正常使用 2、预加载
- 图片等静态资源在使用之前的提前请求
- 资源使用到时能从缓存中加载
- 页面展示的依赖关系维护 3、首页白屏问题 由于文件合并后，单个文件过大，如果遇到网络抖动，会引起单文件加载不成功，解决方式：
- 压缩文件，比如gzip的方式
- 如果可以，抽出部分文件单独打一个包，将大文件包分成两个或者三个
