页面性能

1. 资源压缩合并，减少http请求
2. 非核心代码异步加载 --->异步加载的方法--->异步加载的区别
3. 利用浏览器缓存--->缓存的分类--->缓存的原理
4. 使用CDN
5. 预解析DNS
   <meta http-equiv="x-dns-prefech-control" content="on">
   <link rel="dns-prefetch" href="...com">
   高级浏览器中a标签默认开启预解析，然而页面是https协议的是默认关闭预解析的，可以使用<meta http-equiv="x-dns-prefech-control" content="on">强制打开预解析

异步加载

异步加载的方式

1. 动态脚本加载

    let script = document.createElement("script");
    script.src = "./async1.js";
    document.head.append(script);

2. defer

    <script src="./defer1.js" charset="utf-8" defer></script>
    <script src="./defer2.js" charset="utf-8" defer></script>

3. async

    <script src="./async1.js" charset="utf-8" async></script>
    <script src="./async2.js" charset="utf-8" async></script>

异步加载的区别

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

浏览器缓存

分类

1. 强缓存，浏览器强制缓存
   Expires 绝对时间，服务器下发，客户端时间可能和服务端时间可能不一致
   Cache-Control 相对时间，优先级比Expires高
2. 协商缓存， 浏览器问下服务器这个缓存文件能不能用
   Last-Modified 上次修改的时间，服务器下发的
   If-Modified-Since 客户端下次请求带上Last-Modified
   Etag 哈希值
   If-None-Match