前端性能优化（面试题）

前端性能优化：（面试题）

0. CSS优化：

• CSS写在头部，JavaScript写在尾部或异步
• 避免图片和iFrame等的空src
• 尽量避免重置图片大小
• 图片尽量避免使用DataURL
• 尽量避免写在HTML标签中写style属性
• 避免CSS表达式
• 移除空的CSS规则
• 正确使用Display的属性
• 不滥用浮动Float
• 不滥用Web字体
• 不声明过多的Font-size
• 值为0时不需要任何单位
• 标准化各种浏览器前缀
• 避免让选择符看起来像正则表达式

1. 加载优化：

• 合并CSS、JavaScript
• 合并小图片、使用精灵图
• 缓存一切可缓存的资源
• 使用外链式引用CSS、JavaScript
• 压缩HTML、CSS、JavaScript
• 启用GZip
• 使用首屏加载、按需加载、滚屏加载
• 通过Media Query加载
• 增加Loading进度条
• 减少Cookie
• 避免重定向
• 异步加载第三方资源

2. 图片优化

• 使用智图 http://zhitu.tencent.com/
• 使用（CSS3、SVG、IconFont）代替图片
• 使用Srcset
• webP优于JPG
• PNG8优于GIF
• 图片不宽于640

3. 脚本优化

• 减少重绘和回流
• 缓存Dom选择与计算
• 尽量使用事件处理，避免批量绑定事件
• 尽量使用ID选择器
• 使用touchstart、touchend代替click

4. 渲染优化

• HTML使用Viewpoint
• 减少Dom节点
• 尽量使用CSS3动画
• 合理使用requestAnimationFrame动画代替setTimeout
• 适当使用Canvas动画
• Touchmove、Scroll事件会导致多次渲染
• 使用（CSS3 transitions、CSS3 3D transform、Opacity、Canvas、WebGL Video）来触发GPU渲染