- 资源的压缩合并,减少HTTP请求
- 异步加载
- 使用更快的网络:CDN
- 使用浏览器的缓存
- 预解析 DNS
<meta http-equiv="x-dns-prefetch-control" content="off">
<link rel="dns-prefetch" href="//www.zhix.net">
异步加载 —异步加载的方式 —异步加载的区别
异步加载有三种方式
- async
async属性是HTML5新增属性,需要Chrome、FireFox、IE9+浏览器支持
async属性规定一旦脚本可用,则会异步执行
async属性仅适用于外部脚本
页面加载完成后立即执行,如果多个的话,不会按照顺序执行
<script type="text/javascript" src="xxx.js" async="async"></script>
- defer
defer兼容全部浏览器
在HTML解析完成后执行
多个js会按照加载顺序执行
如果脚本不会改变文档的内容,可将defer属性加入到script标签中,以便加快处理文档的速度
<script type="text/javascript" src="xxx.js" defer></script>
- 动态脚本加载
function addScript(src){
let script = document.createElement('script');
script.setAttribute("type","text/javascript")
script.src = src
script.appendChild(script)
}
window.onload = function(){
addScript('xxx.js')
}
浏览器缓存 — 缓存分类 — 缓存原理
强缓存
不会向服务器发送请求,而是直接从浏览器中读取缓存资源
强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control。
Expires 是绝对时间,按客户端为准
Cache-Control 相对时间,即在这个时间之内不会再去服务端请求数据
协商缓存
协商缓存生效,返回304和Not Modified
协商缓存失效,返回200和请求结果
协商缓存可以通过设置两种 HTTP Header 实现:Last-Modified 和 ETag 。