优化你的网页性能是改善用户体验的好方法，但是快速的网站会带来很多损失。Web性能优化是一项永无止境的工作。
一、资源的合并和压缩，减少http请求
-
Html文件压缩
- 使用在线网站进行压缩(开发过程中一般不用)
- nodejs 提供了html-minifier工具
- 后端模板引擎渲染压缩
-
CSS文件压缩
- css代码压缩简单来说就是无效代码删除和css语义合并
- 使用html-minifier工具
- 使用clean-css对css压缩
-
JS文件压缩
- 无效字符的删除
- 剔除注释
- 代码语义的缩减和优化
- 代码保护(代码逻辑变得混乱，降低代码的可读性)
- 使用html-minifier工具
- 使用uglifyjs2对js进行压缩
-
缩小图像尺寸
- 图片较多的页面采用懒加载技术进行优化
- 精灵图
二、非核心代码异步加载
异步加载的三种方式：动态脚本加载、defer、async
<script src="./defer1.js" defer></script>
<script src="./async1.js" async></script>
defer与async的区别：
defer：HTML加载完之后执行，若为多个，执行顺序为加载顺序
async：HTML加载完之后执行，若为多个，执行顺序和加载顺序无关，谁先加载完谁先执行
三、浏览器缓存（强缓存、协商缓存）
对于web应用来说，缓存是提升页面性能同时减少服务器压力的利器。
缓存：
资源文件在本地硬盘存有副本，浏览器下次请求时，直接从本地磁盘中读取，而不会重新请求
好处：减少服务器负担，提升网站性能；加快客户端加载网页的速度
1.强缓存：不请求服务器，直接使用本地的缓存
实现原理：利用http响应头（response header）里的Expires/Cache-Control实现 浏览器第一次请求一个资源时，服务器在返回资源的同时，把这两个属性放在响应头中
2.协商缓存：即Cache-control的属性为-no-cache
实现原理：浏览器发现本地有资源的副本，但不确定是否使用，去询问服务器 当浏览器对某个资源的请求没有命中强缓存，就会发出一个请求到服务器，验证协商缓存是否命中
四、使用CDN（内容分发网络）
浏览器在第一次打开页面的时候，浏览器缓存不起作用，此时使用CDN。
通过将静态资源(例如javascript，css，图片等等，缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。
CDN是怎么做到加速的呢？
其实是CDN服务商在全国各个省份部署计算节点，CDN加速将网站的内容缓存在网络边缘，不同地区的用户就会访问到离自己最近的相同网络线路上的CDN节点。
当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户，并将内容缓存下来以便响应给后续访问的用户。
因此，一个地区内只要有一个用户先加载资源，在CDN中建立了缓存，该地区的其他后续用户都能因此而受益。
五、DNS预解析
DNS：管理域名和IP地址的对应关系
通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。
示例
将来可从某网址获取图片或音频资源，那么可以在文档顶部的标签中加入以下内容
<linkrel="dns-prefetch"href="//example.com">
