前端性能优化方案
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.使用骨架屏
提高首页加载速度(提高加载速度)