页面性能提升

1.资源合并压缩，减少http请求
2.非核心代码异步加载 => 异步加载方式 => 异步加载的区别
方式：

  • 动态创建script节点加载 webpack的异步加载
  • defer 在html解析完成后才执行，如果多个，按加载顺序执行
  • async 在页面加载完成后立即执行，如果多个，执行顺序哪个先加载成功，就先执行哪个

3.利用浏览器缓存 => 缓存的分类 => 缓存的原理

  • 强缓存

当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。

  • 协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，
Last-Modified（响应头） / If-Modified-Since（请求头）
Etag / If-None-Match
4.使用CDN
5.预解析DNS

  1. // 在http下大部分浏览器是开启了dns预解析，但在https协议下很多浏览器会关闭
  2. <meta http-equiv="x-dns-prefetch-control" content="on">

image.png

DNS Prefetch 的原理就是在 HTTP 建立之前，将 DNS 查询的结果缓存到系统/浏览器中，提升网页的加载效率。现代浏览器在 DNS Prefetch 上做了两项工作：

  • html 源码下载完成后，会解析页面的包含链接的标签，提前查询对应的域名
  • 对于访问过的页面，浏览器会记录一份域名列表，当再次打开时，会在 html 下载的同时去解析 DNS