一、资源压缩合并，减少HTTP请求
合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩
图片较多的页面也可以使用 lazyLoad 等技术进行优化。
精灵图等
二、非核心代码异步加载(异步加载的方式)
1、动态脚本加载
使用document.createElement创建一个script标签，即document.createElement('script')，然后把这个标签加载到body上面去。参考链接
举例：
function asyncLoaded(url, callBack) {
var script = document.createElement('script');
script.type = 'text/javascript';
if (script.readystate) {//兼容IE
script.onreadystatechange = function () {//状态改变触发事件
if (script.readyState == 'loaded' || script.readyState == 'complete') {
callBack();
script.onreadystatechange = null;
}
}
} else {
script.onload = function (e) {
callBack();
}
}
script.src = url;
document.body.appendChild(script);
}
2、defer
异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。
举例：
<script type="text/javascript" defer="defer">
// do something
</script>
//或者
<script src="./defer1.js" defer></script>
3、async
异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。此为H5新特性
举例：
<script type="text/javascript" src="demo.js" async="async"></script>
有多种执行外部脚本的方法：
• 如果 async = "async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
• 如果不使用 async 且 defer = "defer"：脚本将在页面完成解析时执行
• 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
4、defer和async的区别
defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。
async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--通过异步的方式引入两个外部的js文件-->
<script src="./defer1.js" defer></script>
<script src="./defer2.js" defer></script>
</head>
<body>
<script>
console.log('同步任务');
</script>
</body>
</html>
上方打印结果：
同步任务
defer1
defer2
因为defer的加载是有顺序的，所以两个引入defer文件按顺序执行。如果把引入的文件改为async的方式加载，打印的结果可能是：
同步任务
async2
async1
三、利用浏览器缓存
缓存：资源文件（比如图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的url。
缓存分为：
强缓存：不用请求服务器，直接使用本地的缓存
强缓存是利用 http 响应头中的Expires或Cache-Control实现的。
浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。比如：
need-to-insert-img
注意：这两个response header属性可以只启用一个，也可以同时启用。当response header中，Expires 和 Cache-Control 同时存在时，
Cache-Control 的优先级高于 Expires。
Expires和Cache-Control 的区别：
Expires：服务器返回的绝对时间。
是较老的强缓存管理 response header。浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，如果请求时间在Expires的时间之前，就能命中缓存，否则就不行。
如果缓存没有命中，浏览器直接从服务器请求资源时，Expires Header在重新请求的时候会被更新。
缺点：
由于Expires是服务器返回的一个绝对时间，存在的问题是：服务器的事件和客户端的事件可能不一致。在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改客户端时间，就能影响缓存命中的结果。
Cache-Control：服务器返回的相对时间。
http1.1中新增的 response header。浏览器第一次请求资源之后，在接下来的相对时间之内，都可以利用本地缓存。超出这个时间之后，则不能命中缓存。重新请求时，Cache-Control会被更新。
协商缓存：浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。
当浏览器对某个资源的请求没有命中强缓存（也就是说超出时间了），就会发一个请求到服务器，验证协商缓存是否命中。
协商缓存是利用的是两对Header：
第一对：Last-Modified、If-Modified-Since
第二对：ETag、If-None-Match
①、Last-Modified、If-Modified-Since。过程如下：
(1) 浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上Last-Modified这个 response header，这个header表示这该资源在服务器上的最后修改时间：
need-to-insert-img
(2) 浏览器再次请求这个资源时，会加上If-Modified-Since这个 request header，这个header的值就是上一次返回的Last-Modified 的值：
need-to-insert-img
(3) 服务器收到第二次请求时，会比对浏览器传过来的If-Modified-Since和资源在服务器上的最后修改时间Last-Modified，判断资源是否有变化。如果没有变化则返回304 Not Modified，但不返回资源内容（此时，服务器不会返回 Last-Modified 这个 response header）；如果有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：
need-to-insert-img
(4) 浏览器如果收到304的响应，就会从缓存中加载资源。
缺点：
Last-Modified、If-Modified-Since一般来说都是非常可靠的，但有可能出现的问题是：服务器上的资源变化了，但是最后的修改时间却没有变化。这一对header就无法解决这种情况。
②、ETag、If-None-Match。过程如下：
(1) 浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上ETag这个 response header，这个header是服务器根据当前请求的资源生成的唯一标识。这个唯一标识是一个字符串，只要资源有变化这个串就不同，跟最后修改时间无关，所以也就很好地补充了Last-Modified的不足。如下：
need-to-insert-img
(2) 浏览器再次请求这个资源时，会加上If-None-Match这个 request header，这个header的值就是上一次返回的ETag的值：
need-to-insert-img
(3) 服务器第二次请求时，会对比浏览器传过来的If-None-Match和服务器重新生成的一个新的ETag，判断资源是否有变化。如果没有变化则返回304 Not Modified，但不返回资源内容（此时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag并无变化）。如果有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：
need-to-insert-img
(4) 浏览器如果收到304的响应，就会从缓存中加载资源。参考链接
四、使用CDN
怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小 (例如方式一) ，另外就是CDN。
要注意，浏览器第一次打开页面的时候，浏览器缓存是起不了作任何用的，使用CDN，效果就很明显。
五、DNS预解析
通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。
①、打开或关闭DNS预解析
通过在服务器端发送 X-DNS-Prefetch-Control 报头。或是在文档中使用值为 http-equiv 的meta标签：
<meta http-equiv="x-dns-prefetch-control" content="on">
需要说明的是，在一些高级浏览器中，页面中所有的超链接（<a>标签），默认打开了DNS预解析。但是，如果页面中采用的https协议，很多浏览器是默认关闭了超链接的DNS预解析。如果加了上面这行代码，则表明强制打开浏览器的预解析。
②、对指定的域名进行DNS预解析
如果我们将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的 标签中加入以下内容：
<link rel="dns-prefetch" href="http://www.smyhvae.com/">
当我们从该 URL 请求一个资源时，就不再需要等待 DNS 解析的过程。该技术对使用第三方资源特别有用。
