最近一直在准备面试,发现在不少面试题中都涉及到了对前端性能优化的考查,对于前端工程师来讲,页面的性能优化是必不可缺的一部分,当然也从中体现了你的功力。由于没有找到更好的优化分类方式,我就以Yahoo军规35条为大纲,然后对前端性能优化逐一总结。
1:网页内容
- 减少http请求次数
- 减少DNS查询
- 避免页面跳转
- 缓存Ajax
- 延迟加载
- 提前加载
- 减少DOM元素数量
- 根据域名划分内容
- 减少iframe数量
- 避免404
2:服务器
- 使用CDN
- 添加Expires或Cache-Control报文头
- Gzip压缩传输文件
- 配置ETags
- 尽早Flash输出
- 使用GET Ajax请求
- 避免空的图片Src
3:Cookie
- 减小Cookie大小
- 页面内容使用无Cookie域名
4:CSS
- 将样式表置顶
- 避免css表达式
- 用link代替@import
- 避免使用filters
5:JavaScript
- 将脚本置底
- 使用外部javascript和css文件
- 去除重复脚本
- 减少DOM访问
- ’使用智能事件处理
6:图片
- 优化图像
- 优化CSS Sprite
- 不要在HTML中缩放图片
- 使用小且可缓存的favicon .ico
7:移动客户端
- 保持单个内容小于25KB
- 打包组建成符合文档