持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

题外话

这个疫情啊，真滴是服气了，居家快一个月了，居家不是办公就是做饭，脑子都快麻木了，为了活跃自己的大脑，也为了帮助大家增长知识，我给大家分享一点冷知识，嘿嘿嘿……

冷知识：飞行员中有个规定，就是飞机机长与副驾驶员不可同时吃饭，以此防止两人会同时闹肚子。

咳咳~进入正题吧

正文

社招的时候最常问的前端问题可能就是如何优化你的项目，那么今天就来看看如何优化项目

<link rel="dns-prefetch" href="xxxx.com">

适用于网页引入了大量其他域名的资源，例如淘宝等。

强缓存通过两种响应头：Expires和Cache-Control。强缓存不需要和服务器通信，状态status Code 为200

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires是HTTP/1.0的产物，表示资源在某个时间过期，需要再次请求。Expires受限于本地时间，如果修改了本地时间，很可能造成缓存失败。

Cache-control: max-age=30

Cache-Control是HTTP/1.1提出的，优先级高于Expires，表示在30秒后缓存过期。

如果强缓存不存在或失效，就判断协商缓存是否命中，协商缓存需要和服务器通信，缓存可用返回status Code为304，缓存失效需要重新发送请求，status Code为200.

Last-Modified和If-Modified-Since：Last-Modified表示本地文件最后被修改的时间，If-Modified-Since把Last-Modified的值发送给服务器，询问在这日期后资源是否有更新，有更新的话就将新的资源发送回来。

但是如果在本地打开缓存文件，就会造成Last-Modified时间被修改造成缓存失败

Etag和If-None-Match：Etag类似于文件指纹，If-None-Match会将当前的Etag发送给服务器，询问服务器该资源Etag是否有变动，有变化的话就将新的资源发送回来。Etag的优先级高于Last-Modified。

因为浏览器会有并发请求限制，HTTP/1.1时代，每个请求都需要建立连接和断开，并且由于TCP慢启动的原因，加载体积过大的文件需要更多的时间。

HTTP/2.0引入多路复用，也就是多个请求使用一个TCP连接

如果你问我优化就这些吗？当然不是，怎么可能就这些，但是今天就先说这么多