页面性能

提升页面优化的性能有哪些？

1、资源合并压缩，减少http请求
2、非核心代码异步加载–>异步加载的方式–>异步加载的区别
3、利用浏览器缓存–>缓存的分类–>缓存的原理
4、使用CDN，加速资源，让网络快速到服务器端
5、预解析DNS

<link rel="dns-prefetch" href="">

a标签默认预解析
若是https开头，则默认是关闭预解析的，使用

<meta http-equiv="x-dns-prefetch-control" content="on">//强制打开预解析

一、异步加载的方式

(1）动态脚本加载
一个script标签，用js去创建一个标签，把标签加到body上面去
(2）defer，在script的标签上加上这个属性
(3) 。 async，在script的标签上加上这个属性

二、异步加载的区别

（1）在html解析后才会加载，如果是多个，按照加载的顺序，依次执行
（2）async加载完后立即执行，如果是多个，执行顺序和加载顺序无关

三、浏览器缓存

资源在浏览器中存在的备份，从服务器请求的图片缓存到本地，下次请求直接从磁盘中读取

（1）强缓存
expires:绝对时间（实体主体过期时间）（实体头）
cache-control:max-age=3600秒相对时间//以此为准（通用请求）
俩个都表示资源在缓存中的有效期
直接从缓存中读取给页面，不去请求服务器了

1、浏览器第一次和服务器请求一个资源，服务器在返回这个资源的同时，返回的response中的header加上Expires的header,如

2、浏览器在接收到这个资源后，会把这个资源同所有的response header一起缓存下来
3、当浏览器再请求这个资源时，先从缓存中查找，找到后，拿出时间与expires的时间对比，若小于那个时间，命中强缓存，否则不行
4、若缓存没有命中，浏览器从服务器加载资源，expires也会被更新

区别
expires和cache-control同理，区别是expires是绝对时间，要是浏览器端和服务器端的时间差别较大时，就不准确了，cache-control是相对时间，都是相对于浏览器端的时间，第二次请求时，浏览器自动根据max-age计算是否过期

（2）协商缓存
本地有副本，和服务器协商一下，是否过期
Last-Modified 资源在服务器端的最后一次修改的时间）（实体头）
If-Modefied-Since最后一次更新时间是否一致（请求头）
If-None-Match比较和ETag是否不一致（请求头）

协商缓存的流程

【Last-Modified、If-Modefied-Since】
1、第一次response的header中加入Last-Modified的header，表示的是这个资源在服务器上的最后修改时间
2、二次请求时，在request的header上加入If-Modefied-Since,等于上次的Last-Modified
3、服务器收到请求后，判断资源在服务器上的最后修改时间是否改变（也就是是否资源重新更新了）若没有则返回304 Not Modified，若改变了则从服务器读取资源并且加上Last-Modified的响应头

【ETag、If-None-Match】
1、第一次请求ETage的header,这个是唯一标识符（字符串，资源改变，就变）；
2、再次请求加入If-None-Match的header，这个值就是上次的值
3、服务器再次收到请求后，再次根据资源生成一个新的ETag，相同则没有变化，不返回资源，不同则变化了，返回资源内容
4、浏览器收到304的响应后，从缓存中加载资源
ETag相对于Last-Modified也有优势，可以更加准确判断文件内容是否被修改，从而在实际操作中的实用程度也更高

总结：浏览器第二次资源的时候，首先会判断http header是否命中强缓存，若没有，则通过http header判断是否命中协商缓存，若命中，服务器会将这个请求返回，告诉客户端从缓存中加载资源，浏览器就会在缓存中加载资源。

区别：强缓存不发送请求给服务器，协商缓存要发送请求给服务器
当协商缓存也没有命中时，浏览器直接从服务器加载资源数据