前端页面性能优化
开发
- http combo(js、css、ajax)合并资源请求,减少接口请求
- dns perfetch,尽量减少dns域名数量,并访问前预解析dns
- 优先首屏渲染,非必须资源延迟加载,包括js、image等
- 使用cdn访问资源
- css
- css放
</head> 前
- css减少表达式、@import、通配符等使用
- 避免位置、大小等会引起 reflow 的操作
- js
- js放
</body> 前
- js减少dom访问,合理的事件监听
- 减少dom层级
- 逻辑和组件复用,减少代码
- iconfront 减少请求和请求体积
- bundle 公共代码(框架、ui库等)提取,单独引用,减少变更是需要重新下载的代码
编译时
- 混淆和压缩(css、js、html、image)减少体积
- gzip 压缩,减少传输体积
- commons chunk 提取公共代码,减少体积
- image sprite 雪碧图,减少请求
- combine(css、js)合并文件,减少请求
- cdn 域名替换,提升访问速度
服务端
- gzip 压缩,提升资源传输速度
- cache 缓存文件
Cache-Control 缓存机制
Expires 过期时间,如果 Cache-Control 设置 max-age 将被忽略
Etag 标示符,防止空中碰撞
Last-Modified 最后修改时间,比较是否一致
- cdn combo 合并资源请求,减少请求
- ajax combo 服务接口请求合并,减少请求
- 减少 cookie 长度
- 禁止 redirect 重定向
- 防止出现 404 请求
- SSL/https