前端知识总结--性能优化

前端性能优化方案大体分为网络传输优化和页面内容优化，

网络方面

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选择器，多使用伪元素等帮助定位

 

转载于:https://www.cnblogs.com/fanlu/p/10861991.html