前端性能优化（包括HTTP缓存）

1、压缩及合并资源

使用webpack或Parcel压缩图片、合并CSS和JS文件
在线压缩图片网站：https://tinypng.com/

2、调整JS和CSS的位置

JS放在body最后，CSS放在head里

3、使用CDN加速

4、服务器上开启Gzip传输压缩

5、使用多域名实现资源并行下载

将图片视频等资源托管到另一个域名

6、资源懒加载

可以初步先做一个图片资源懒加载

5、JS非核心代码异步加载

异步加载的方式：

1、动态脚本加载
document.createElement(),用JS添加html节点，也就是DOM动态创建节点
2、defer
defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），
但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成
3、async
async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。在执行的时候，html解析会停顿

异步加载的区别

不同之处在于执行的时间
defer是在HTML解析完之后才会执行，如果多个，按照加载的顺序依次执行
async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关，和文件大小有关

image.png

6、利用浏览器的缓存

强制缓存方式：（优先级高，这些参数都是第一次请求资源是服务器给的，也就是服务器设置的）

1、服务器开启Cache-Control缓存控制（优先级更高）
（相对时间，在这个时间之前不会和服务器通信，本地拿过来直接用）
Cache-Control:max-age=3600，这里是3600秒过期，过期前不会和服务器通信，直接用本地缓存
Cache-Control:no-cache，不使用本地缓存
2、服务器开启Expires（过期时间，绝对时间）
Expires:Thu,21 Jan 2017 23:39:02 GMT

协商缓存方式：（本地有，问服务器要不要用，是不是过期）

1、Last-Modified（服务器返回此文件最后修改时间）
If-Modified-Since（客户端第二次请求该资源带着上次服务器返回的此文件最后修改时间，比对是否相同）
2、Etag（优先级更高）（第一次请求资源服务器返回一个Etag值）
If-None-Match（第二次请求资源客户端带着之前的Etag值给服务器进行比对）

如果多个参数同事存在时：
强缓存优先级更高，而在强缓存中，Cache-Control比Expires优先级高
协商缓存中，Etag比Last-Modified优先级高

7、预解析DNS

DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。
目前每次DNS解析，通常在200ms以下。针对DNS解析耗时问题，一些浏览器通过DNS Prefetch 来提高访问的流畅性。

此条要结合第五条使用多域名实现资源并行下载使用

小米的官网就预解析了很多DNS