参考：https://www.cnblogs.com/MarcoHan/p/5295398.html、站长之家：http://www.chinaz.com/tags/Webqianduanxingnengyouhua.shtml
1、性能优化的重要性
研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验，也决定了这个网站的生死存亡。
只有10%~20%的最终用户响应时间花在了下载HTML文档上（即从Web服务器获取HTML文档并传送到浏览器的），其余的80%~90%时间花在了下载页面中的所有组件上。
进行页面优化的方法如下：
2、减少HTTP请求达到性能优化
上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量次数
2.1、使用字体图标
在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式，何乐而不为。
2.2、合并脚本和样式表
将多个样式表或者脚本文件合并到一个文件中，可以减少HTTP请求的数量从而缩短效应时间。
不过合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来说可能导致反而增加了下载量。
2.3、CSS Sprites技术
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，然后通过CSS background背景定位技术技巧布局网页背景。这样一来，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
示例代码：
<div> <span id="image1" class="nav"></span> <span id="image2" class="nav"></span> <span id="image3" class="nav"></span> <span id="image4" class="nav"></span> <span id="image5" class="nav"></span> </div>
.nav { width: 50px; height: 50px; display: inline-block; border: 1px solid #000; background-image: url('E:/1.png'); } #image1 { background-position: 0 0; } #image2 { background-position: -95px 0; } #image3 { background-position: -185px 0; } #image4 { background-position: -275px 0; } #image5 { background-position: -366px -3px; }
3、使用CDN缩短HTTP请求的时间
如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络拥堵的测量。例如，CDN可能选择具有最短响应时间的服务器，由此缩短了HTTP请求的时间。
4、添加Expires头来缓存组件
Cache-Control和expires都是在server端配置。
5、压缩组件
客户端请求报文中包含Accept-Encoding表示客户端能识别的压缩方法，如果客户端请求报文没有包含Accept-Encoding首部，服务器就会假设客户端能够接受任何编码格式；服务器响应报文中包含Content-Encoding表示采用的压缩方法。
（然而，一个统计表明，大约有15%的客户端请求是没有Accept-Encoding请求的，因为客户端的一些web代理和PC安全软件会移除浏览器发出的Accept-Encoding，因为监听未经压缩的响应会占用更少的CPU资源，但却无疑增加了网络传输的时间。）
6、将样式表放在头部（实现逐步渲染）
7、将脚本放在底部（避免阻塞DOM解析）
//在DOM加载后，全部内容加载前运行 $(document).ready(function(){}); //在全部内容加载后运行 window.onload = function(){}; // —-js $(window).load(function(){}); //---jquery
7.1、script标签应该放在body标签内
许多人认为只要放在底部了，无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的，其实还是有差别的，因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错，是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签， 都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。