一、加载时优化
- 减少http请求(可以将多个小文件合并成一个大文件)
- 使用服务器端渲染(客户端渲染是获取html文件,根据需要下载js文件,运行文件,生成DOM再渲染;服务器端端渲染是服务器端返回html文件,客户端只需要解析html文件即可)
- 静态资源使用CDN
- css写在头部,js写在底部(js如果放在头部,需要给script标签加defer属性)
- 字体图标代替图片图标
- 利用缓存不重复加载相同的资源 设置expires
- 图片优化
– 1.图片延迟加载(在页面中先不给图片设置路径,只有当图片出现在浏览器的可视区域时,才去加载真正的图片)
– 2. 降低图片质量
– 3. 尽可能用css3效果代替图片
– 4. 使用雪碧图 - 通过webpack按需加载代码
二、运行时优化
-
减少重绘重排
– 1. js修改样式时,不要直接写样式,而是替换class类来该变样式
– 2. 如果要对dom元素执行一系列的操作,可以将dom元素脱离文档流,修改完成之后再将它带回文档,推荐使用隐藏元素或文档碎片 -
使用事件委托
-
if-else对比switch(判断条件多时用switch)
-
不要覆盖原生方法
-
降低css选择器的复杂性
-
使用弹性布局flexbox
-
用transform和opacity属性更改来实现动画(不会触发重排重绘)
1. 加载优化
- 代码压缩合并
- 代码分割,可以基于路由或动态加载
- 大模块异步加载,例如ECharts,在加载成功后再显示对应图表
- 小模块适度合并,将一些零散的小模块合并一起加载速度较快
2. 图片优化
- 小图使用雪碧图,iconFont,base64
- 图片使用懒加载
- webp代替其他格式
- 图片一定要压缩
3. css优化
- css写在头部
- 避免css表达式
- 移除空置的css规则
- 避免行内style样式
4. js优化
- js写在body底部
- js用defer放在头部,提前在后台下载,又不阻塞dom解析
5. 渲染优化
- 尽量减少重绘和回流(涉及到样式、尺寸、节点增减的操作,都会触发)
- 用变量缓存dom样式,不要频繁读取
- 通过documentFragment或innerHTML批量操作dom
- 动画尽量用requestAnimationFrame,不要用定时器
6. 首屏优化
- 代码分离,将首屏不需要的代码分离出去
7. webpack打包优化
8. vue优化
- 路由懒加载组件
- keep-alive缓存组件
- 列表项添加key,保证唯一
- 列表项绑定事件,使用事件代理(v-for)
- v-if和v-for不要用在一个标签上