前端优化是十分重要的，也是面试官常问的问题。

前端优化最重要的目的应该就是提高性能与用户体验，包括提高加载速度，流畅度，更快的相应用户操作等。

https://github.com/thedaviddias/Front-End-Performance-Checklist

减少http请求次数

通过http请求数据，下载数据的时间占比很小，且文件越小，比例越小，所以可以通过合并多个小文件，来减少HTTP请求耗费的时间。

当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好

domain sharding（域名分片）

浏览器或者客户端是根据domain（域名）来建立连接，浏览器限制了每个域名上活跃的连接数量，通过域名分片，将资源放置在不同的域名下，浏览器就可以同时请求更多的资源，加快页面加载速度。但会增加DNS解析等时间

HTTP2 supports unlimited concurrent requests making domain sharding an obsolete requirement when HTTP/2 is enabled.

使用HTTP/2

HTTP/2 在与HTTP1.1完全语义兼容的基础上，进一步减少了网络延迟，大幅提高了性能

多路复用（MultiPlexing）、头部压缩、流量控制、Server Push

图片优化

Image sprites

将大量的小图标合并为一张图，通过css的background-position获取对应位置的图片，但增加了粒度

base64

将图片的内容以Base64格式内嵌到HTML中，减少HTTP请求数量，但会增加大小，一般用于背景图

使用HTTP2的情况下，Image sprites与base64编码都不适用

使用字体图标

对于纯色图标，使用字体图标比较合适，可以任意缩放，改变颜色，体积更小

使用渐进JPEG

降低大小

在不影响页面效果的情况下尽量压缩图片的大小，可以借助图片压缩工具，也可以通过改变图片格式的方法，比如使用WebP格式，视觉质量相同的情况下，体积却小很多，但是要注意兼容性。最近又有一种AVIF格式的图片，有更好的压缩效率，但是目前只有Chrome浏览器支持。

对于某些大体积的gif图，可以使用html5的video模拟gif播放效果，也可以借助工具给gif添加有损压缩，循环的内联视频来替换动画GIF

HTML优化

压缩html大小，使用外链CSS和JavaScript，使用相对URL等

CSS优化

减少嵌套层级，避免使用通配符 *等

https://csswizardry.com/2011/09/writing-efficient-css-selectors/

JavaScript优化

使用async异步加载JavaScript文件，或使用defer属性延迟加载。

当判断条件数量较多时，使用 switch 而不是 if-else。

。。。

GZIP

懒加载

web workers

减少回流与重绘

防抖和节流

CDN

长连接机制

动态导入和按需加载