前端面试题之性能优化

1、网络相关

• DNS 预解析

<link rel="dns-prefetch" href="//host_name_to_prefetch.com" />
复制代码

• 缓存（见上文浏览器缓存机制）
• 使用 HTTP / 2.0
• 预加载 —— 可以将一些不影响首屏但重要的文件延后加载，能够降低首屏加载的时间，缺点是兼容性不好

<link rel="preload" href="http://example.com" />
复制代码

• 预渲染 —— 将要下载的文件预先在后台渲染

<link rel="prerender" href="http://example.com" />
复制代码

2、优化渲染过程

• 代码层面的优化（参考浏览器篇如何减少重绘和回流）
• 懒执行 —— 将某些逻辑放到使用时再进行，可以通过定时器或事件进行唤醒
• 懒加载 —— 将不关键的资源延后加载，如图片、视频资源等。

3、文件优化

图片优化：

• 可以用 css 模拟代替的尽量不要用图片
• 小图片用 base64 格式
• 雪碧图
• 选择正确的图片格式
  • 选择使用 WebP 格式，体积较小，缺点是兼容性不好
  • 小图使用 PNG ，图标类可以使用