资源压缩合并, 减少 http 请求
非核心代码异步加载 ---> 异步加载的方法 ---> 异步加载的区别
利用浏览器缓存 ---> 缓存的分类 ---> 缓存的原理
使用 CDN
预解析 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"> 强制打开预解析
异步加载
异步加载的方式
动态脚本加载
- let script = document.createElement("script");
- script.src = "./async1.js";
- document.head.append(script);
- defer
- <script src="./defer1.js" charset="utf-8" defer></script>
- <script src="./defer2.js" charset="utf-8" defer></script>
- async
- <script src="./async1.js" charset="utf-8" async></script>
- <script src="./async2.js" charset="utf-8" async></script>
异步加载的区别
defer 是在 http 解析完之后才会执行, 如果是多个, 按照加载的顺序依次执行
async 是在加载完成之后立即执行, 如果是多个, 执行顺序和加载顺序无关
浏览器缓存
分类
强缓存, 浏览器强制缓存
Expires 绝对时间, 服务器下发, 客户端时间可能和服务端时间可能不一致
Cache-Control 相对时间, 优先级比 Expires 高
协商缓存, 浏览器问下服务器这个缓存文件能不能用
Last-Modified 上次修改的时间, 服务器下发的
If-Modified-Since 客户端下次请求带上 Last-Modified
Etag 哈希值
If-None-Match
来源: http://www.jianshu.com/p/36fa0fe8a72a