页面性能优化

页面性能优化方法有：资源的压缩合并，减少http请求；非核心代码异步加载；浏览器缓存（强缓存、协商缓存）；使用CDN；DNS预解析

一、资源的合并和压缩，减少http请求

1.合并图片、CSS文件和JS文件的合并压缩
2.图片较多的页面采用懒加载技术进行优化
3.精灵图

二、非核心代码异步加载

异步加载的方式：动态脚本加载、defer、async

1.动态脚本加载：使用document.createElement创建一个script标签，然后将该标签加到body上去
2.在script标签后加defer/async属性

<script src="./defer1.js" defer></script>
<script src="./async1.js" async></script>

defer与async的区别：
defer：HTML加载完之后执行，若为多个，执行顺序为加载顺序
async：HTML加载完之后执行，若为多个，执行顺序和加载顺序无关，谁先加载完谁先执行

三、浏览器缓存（强缓存、协商缓存）！！！重要 ！！！

缓存：资源文件在本地硬盘存有副本，浏览器下次请求时，直接从本地磁盘中读取，而不会重新请求

好处：减少服务器负担，提升网站性能；加快客户端加载网页的速度

1.强缓存：不请求服务器，直接使用本地的缓存

实现原理：利用http响应头（response header）里的Expires/Cache-Control实现
浏览器第一次请求一个资源时，服务器在返回资源的同时，把这两个属性放在响应头中

注：上面的两个属性只用一个，同时使用，Cache-Control优先级高于Expires

—Expires/Cache-Control的区别（结合上图理解）

• Expires：服务器返回的绝对时间。浏览器再次请求资源时，先从缓存中寻找，找到后，将当前时间与该资源的Expires比较，若当前时间在Expires的时间之前，则命中缓存，否则返回资源并更新Expires
• 缺点：随意修改客户端时间，就能影响命中结果
• Cache-Control：服务器返回的相对时间。浏览器第一次请求资源后，在接下来的相对时间内，均可利用本地缓存，超出该时间，则不能命中缓存，重新请求时，Cache-Control会被更新

2.协商缓存：即Cache-control的属性为-no-cache

实现原理：浏览器发现本地有资源的副本，但不确定是否使用，去询问服务器
当浏览器对某个资源的请求没有命中强缓存，就会发出一个请求到服务器，验证协商缓存是否命中
两对header：Last-Modified、If-Modified-Since和ETag、If-None-Match

—Last-Modified、If-Modified-Since过程：

1.浏览器第一次请求一个资源，服务器在返回该资源的同时，会加上Last-Modified这个 response header，该header表示这该资源在服务器上的最后修改时间



2.浏览器再次请求这个资源时，会加上If-Modified-Since这个 request header，这个header的值就是上一次返回的Last-Modified的值



3.服务器收到第二次请求时，对比浏览器传过来的If-Modified-Since和资源在服务器上的最后修改时间Last-Modified，判断资源是否有变化。若无变化则返回304
Not Modified，但不返回资源内容（此时，服务器不会返回 Last-Modified 这个 response header）；若有变化，就正常返回资源内容（继续重复整个流程）
 
4.浏览器如果收到304的响应，就会从缓存中加载资源

缺点：服务器上的资源变化了，但是最后的修改时间却没有变化

因为是以秒为单位的，若资源在服务器端一秒内修改多次，但产生的Last-Modified只有一个值，会导致缓存命中产生错误，由下一对header解决

—ETag、If-None-Match的过程：

1.浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上ETag这个 response header，该header是服务器根据当前请求的资源生成的hash值，只要资源有变化该值就不同，与最后修改时间无关，故弥补了Last-Modified的不足



2.浏览器再次请求这个资源时，会加上If-None-Match这个 request header，该header的值就是上一次返回的ETag的值


3.服务器第二次请求时，对比浏览器传过来的If-None-Match和服务器重新生成的一个新的ETag，判断资源是否有变化。若无变化则返回304
Not Modified，但不返回资源内容（此时，由于ETag重新生成过，response
header中还会把该ETag返回，即使这个ETag并无变化）。若有变化，就正常返回资源内容（继续重复整个流程）


4.浏览器如果收到304的响应，就会从缓存中加载资源

缺点：增大服务器开销，因为需要生成hash值，但精度高，优先用ETag

最后用一张图来解释整个流程：

四、CDN：内容分发网络

浏览器在第一次打开页面的时候，浏览器缓存不起作用，此时使用CDN
依靠部署在各地的边缘服务器，是用户就近获取内容

五、DNS预解析

DNS：管理域名和IP地址的对应关系
告诉浏览器未来可能从某个特定的URL获取资源，当浏览器真正使用到该域中的某个资源时即可尽快的完成DNS解析

1.打开/关闭DNS预解析
在文档中使用值为 http-equiv 的meta标签

<meta http-equiv="x-dns-prefetch-control" content="on">

注意：在一些高级浏览器中，页面中所有的超链接（<a>标签），默认打开了DNS预解析。但若页面中采用的https协议，很多浏览器是默认关闭了超链接的DNS预解析。只有加了上面这行代码，则表明强制打开浏览器的预解析
对指定的域名进行DNS预解析

2.若将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的标签中加入以下内容：

<link rel="dns-prefetch" href="http://www.smyhvae.com/">

当我们从该 URL 请求一个资源时，就不再需要等待 DNS 解析的过程