页面性能优化

浏览器的一个请求从发送到返回都经历了什么？

1. 首先用户在浏览器中输入了一个url，浏览器将url解析成domain
2. dns服务器会根据domain去查询相关host对应的ip地址，并且返回给浏览器
3. 浏览器将该ip地址中携带的协议发送到网络中
4. 请求到达服务端
5. 服务端将response返回给浏览器
6. 浏览器开始渲染页面

在以上过程中有哪些可以优化的点呢？

1. 资源压缩合并，减少HTTP请求
2. 非核心代码异步加载
3. 利用浏览器缓存
4. 使用CDN
5. 预解析DNS
6. 服务端渲染

1. 异步加载

1. 动态脚本加载
   创建script标签，将标签加载到文档中
2. defer
   加载script标签的时候，增加defer字段
3. async
   加载script标签的时候，增加async字段

1.2 异步加载的区别

1. defer是在HTML解析完之后才会执行，如果是多个，按照加载顺序依次执行，前一个文件加载执行完毕之后，才会执行下一个文件。
2. async是在加载完之后立即执行，如果是多个，执行顺序与加载顺序无关（根据请求完成顺序执行）

2. 缓存

2. 1缓存的分类

强缓存：直接使用缓存文件
Expires：缓存失效的绝对时间
cache-control 相对时间，在该时间段内会直接从浏览器中取缓存
如果浏览器两个字段都下发了，以后者为准
协商缓存：
由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。
即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段。
Last-Modified/If-Modified-Since：二者的值都是GMT格式的时间字符串
Etag/If-None-Match：这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。