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

标签：方案   classname   val   移除   性能   文件   bsp   图片压缩   class   

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

网络方面

1、减少http请求

• 合并js文件
• 合并css文件
• 雪碧图的使用(css sprite)
• 使用base64表示简单的图片

2、减小资源体积

• gzip压缩
• js混淆
• css压缩
• 图片压缩

3、使用缓存

• DNS缓存
• CDN部署与缓存
• http缓存

页面方面

1、优化网页渲染

• css的文件放在头部，js文件放在尾部或者异步
• 尽量避免內联样式

2、DOM操作优化

• 避免图片或者frame使用空src
• 在css属性为0时，去掉单位
• 禁止图像缩放
• 正确的css前缀的使用
• 移除空的css规则
• 对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
• 缩短css选择器，多使用伪元素等帮助定位

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

标签：方案   classname   val   移除   性能   文件   bsp   图片压缩   class   

原文地址：https://www.cnblogs.com/fanlu/p/10861991.html