性能优化

关于性能优化

资源压缩合并，减少http请求

1.合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩
2. 图片较多的页面也可以使用 lazyLoad 等技术进行优化。
3.精灵图等

非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别

1. 动态脚本加载
   使用document.createElement创建一个script标签，即document.createElement(‘script’)，然后把这个标签加载到body上面去。
   2.defer
   通过异步的方式加载defer1.js文件：

<script src="./defer1.js" defer></script>

3.async
HTmL5新增特性。
通过异步的方式加载async1.js文件：

<script src="./async1.js" async></script>

利用浏览器缓存 --> 缓存的分类 --> 缓存的原理

缓存：资源文件（比如图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的url。

缓存分为

强缓存:
不用请求服务器，直接使用本地的缓存。

协商缓存:
浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。当浏览器对某个资源的请求没有命中强缓存（也就是说超出时间了），就会发一个请求到服务器，验证协商缓存是否命中。

使用CDN

怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小，另外就是CDN。

要注意，浏览器第一次打开页面的时候，浏览器缓存是起不了作任何用的，使用CDN，效果就很明显。

DNS预解析

通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。

第一步：打开或关闭DNS预解析

你可以通过在服务器端发送 X-DNS-Prefetch-Control 报头。或是在文档中使用值为 http-equiv 的meta标签：

<meta http-equiv="x-dns-prefetch-control" content="on">

需要说明的是，在一些高级浏览器中，页面中所有的超链接，默认打开了DNS预解析。但是，如果页面中采用的https协议，很多浏览器是默认关闭了超链接的DNS预解析。如果加了上面这行代码，则表明强制打开浏览器的预解析。（如果你能在面试中把这句话说出来，则一定是你出彩的地方）

第二步：对指定的域名进行DNS预解析

如果我们将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的 标签中加入以下内容：

<link rel="dns-prefetch" href="http://www.smyhvae.com/">

当我们从该 URL 请求一个资源时，就不再需要等待 DNS 解析的过程。该技术对使用第三方资源特别有用。