前端性能优化方案

1.合并、压缩、混淆html/css/js文件

webpack实现，减小资源大小
Nginx开启Gzip，进一步压缩资源（减小资源大小）

2.减少http请求次数

3.减少DOM的操作

4.样式表放首部，JS放尾部

JS单线程，会阻塞页面；资源加载方式

5.动画用3D

transition3d/translateZ开启GPU硬件加速之后

6.SPA项目，路由按需加载

通过import或者require做路由按需加载
提高响应时间，可以把登录页面和内容页面，写成两个当页面，可以提高首屏的响应时间

7.如果使用了UI组件库，采用按需加载

8.图片

1.符合条件的图标做base64处理（减小资源大小）
2.使用图片懒加载-lazyload
3.图片可以使用精灵图
4.图片资源使用CDN加速（提高加载速度）
5.使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显

9.设置缓存

强缓存和协商缓存，提高加载速度

10.提前加载资源

link或者src添加rel属性，设置prefetch或preload可预加载资源

11.使用骨架屏

提高首页加载速度（提高加载速度）

13.服务端渲染SSR，加快首屏渲染，利于SEO