前端性能优化点总结
1. 前言
- 前端性能优化不完全总结，性能优化任重而道远。但应该切记的是，不可为了优化而优化，性能优化和开发效率、用户体验以及实现成本等是相结合的。
- 性能优化，其实现手段多样，关注领域复杂，从前到后，自上而下，方方面面都是性能优化的地方。
2. 图片
优化图像
- 检查gif图片图像颜色数量和调色板规格是否一致
- 有gif的情况考虑换成png
- 色值较少的图片切成jpg
Inline images
- 通过编码的字符串将图片直接内嵌在网页文本中
- base64编码
image Maps
- 将多张图拼在一起，通过坐标来控制显示导航
优化css sptite，合成雪碧图
- 可以选用单独的工具来生成雪碧图
- 使用构建工具来分析产出雪碧图
不在html中缩放图片
使用小且可缓存defavicon.ico
- 浏览器总会去请求这个图标
- 确保图标存在，否则报错
- 文件尽量小，最好小于1K
- 设置一个长的过期时间
todo
- 规范
- 工具
3. javascript
js脚本文件置底
现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行
使用外链js和css文件
精简代码
减少DOM访问和查询
- 换成已经访问过的元素
- 优化dom的选择器
- 避免通过js修复layout
- 优化逻辑减少dom操作
- 双向数据绑定
- dom diff
- dom拼接
减少或避免引起页面repaint或reflow的代码逻辑
使用智能事件处理方式
- 事件代理
语言基础
todo
- 形成规范进行培训
- 代码检查工具
- 性能监测工具
- 代码走查
- 将现有问题形成开发任务
4. css
样式表置顶
避免css表达式
用link代替@import
减少层级
避免filters
避免冗余
css文件合理管理
todo
- 代码规则检查工具
- 代码规范培训
5. cookie
减少cookie大小
- cookie用来做认证和个性化设置，在请求中包含在http报文头
- 如果网页不需要用cookie，就完全禁掉
- 去除没必要的cookie
- cookie的domain不可影响到子domain
- 设置合适的过期时间
页面内容使用无cookie域名
6. 服务器
使用cdn分发资源
- CDN通过部署在不同地区的服务器来提高客户的下载速度
- 可将站点大量的静态内容放上cdn
添加expires或cache-control报文头
- 静态内容添加expires，将静态内容设置为永不过期
- 动态内容适合cache-control，让浏览器根据条件来发送请求
gzip压缩- 配置etags
flush输出
get请求
避免空的图片src
- 空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源
7. 网页内容
减少http请求次数
- combo合并多个文件请求为一个
- 打包合并文件，打包策略很重要
减少dns查询次数
- 愿意在于网页中包含不同domain的内容时，如嵌入广告或引用了外部图片或脚本导致
- dns查询结果可缓存在本地和浏览器一段时间，所以一般在首次访问时消耗流量
避免页面跳转
缓存ajax请求
延迟加载
- 确定页面初始加载需要的最小内容集，剩下内容推到延迟加载的集合中
提前加载
- 有条件提前加载
- 用户的输入推断需要加载的内容，如智能搜索框
- 无条件提前加载
- 优点
- 用来加载速度较慢的广告
- 安全沙箱保护
- 脚本可以并行下载
- 缺点
