前端性能优化--总结性能优化的几大手段
一、减少网络请求数量
1. 图片处理
使用精灵图,但首次渲染时,加载一张大图较慢。
base64
编码,但会扩大大小
字体图标代替图片
2. 合并文件
合并公共包文件、不同页面单独合并
3. 减少重定向
如果一定要使用重定向,则使用301永久重定向。
4. 使用缓存
5. 避免使用css
的@import
6. 避免使用空的src
和href
a标签的空的href
会重定向到当前页面
form元素空的method会提交表单到当前页面
二、减小资源大小
1. 资源压缩
html
压缩
css
压缩
js
压缩
三、资源加载优化
1. 优化加载位置
css
文件放在head
标签中,先加载外链,后加载内置
js
文件放在body
的底部,先加载外链,后加载内置
处理页面和页面样式的js
文件,放在head
中
body
中尽量不写style
和script
2. 优化加载时机
异步加载js
:defer
和async
预加载和懒加载
按需加载
四、优化网络请求
1. CDN
分发网络
2. DNS
预解析
3. 持久连接、管道连接、并发连接
五、减少重绘回流
1. 样式处理
避免使用层级较深的选择器,或较复杂的选择器
避免使用css
表达式
图片设置大小,否则会从0渲染到图片真实大小
元素适当设置高度和最小高度,避免动态渲染时,页面跳动
避免使用table布局
批量处理css
2. DOM
处理
批量处理DOM
DOM
离线加载
缓存DOM
避免使用嵌套很深的DOM
结构
3. 事件代理
同一个父级元素可处理多个子元素事件
4. 防抖和节流
六、webpack
优化
1. 动态导入和按需加载
2. 打包公共文件
3. tree shaking
七、性能更好的API
1. 性能更好的选择器
id选择器(#myid)
类选择器(.myclassname)
标签选择器(div,h1,p)
相邻选择器(h1+p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(a[rel="external"])
伪类选择器(a:hover,li:nth-child)