前端知识总结--性能优化
Posted fanlu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端知识总结--性能优化相关的知识，希望对你有一定的参考价值。
前端性能优化方案大体分为网络传输优化和页面内容优化，
网络方面
1、减少http请求
- 合并js文件
- 合并css文件
- 雪碧图的使用(css sprite)
- 使用base64表示简单的图片
2、减小资源体积
- gzip压缩
- js混淆
- css压缩
- 图片压缩
3、使用缓存
- DNS缓存
- CDN部署与缓存
- http缓存
页面方面
1、优化网页渲染
- css的文件放在头部，js文件放在尾部或者异步
- 尽量避免內联样式
2、DOM操作优化
- 避免在document上直接进行频繁的DOM操作
- 使用classname代替大量的内联样式修改
- 对于复杂的UI元素，设置position为absolute或fixed
- 尽量使用css动画
- 使用requestAnimationFrame代替setInterval操作
- 适当使用canvas
- 尽量减少css表达式的使用
- 使用事件代理
3、操作细节
- 避免图片或者frame使用空src
- 在css属性为0时，去掉单位
- 禁止图像缩放
- 正确的css前缀的使用
- 移除空的css规则
- 对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
- 缩短css选择器，多使用伪元素等帮助定位
以上是关于前端知识总结--性能优化的主要内容，如果未能解决你的问题，请参考以下文章