网页优化总结：

1.减少HTTP请求数量

HTTP请求建立连接需要耗费一定的时间，如果请求过多，那么大部分时间都浪费在了建立连接上。
可以通过以下几种方法减少HTTP请求数量:

1. 将多个图片合成一个图片，这样一个请求就可以获取到多个图片。
2. 将多个js/css文件合并成一个js/css文件

2. 加载速度优化

1. 使用CDN(内容分发网络)
   CDN 由一系列分散到各个不同地理位置上的Web服务器组成，它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。很多js框架都提供了CDN服务，如bootstrap等。如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

3. 使用缓存

1. 不会变化的图片，http头部增加expires字段，设定合理的过期时间，让客户端尽可能缓存久一点。

4. 文件放置位置

1. 将css放在头部
   将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，防止“白屏”。增加用户的耐心时间，优化用户体验
2. 将js放在底部
   构建DOM树期间，如果遇到JS，会阻塞DOM树及CSSOM树的构建，优先加载执行JS文件，加载完毕，再继续构建DOM树及CSSOM树。所以一般将js文件放置到页面底部，或者使用async / defer加载js文件

5. 其它方法

1. 文件压缩
   诚然，文件越小，下载速度就会越快。现在比较成熟和流程的压缩网页的方式是通过Gzip压缩，一般可以将网页文本内容减少60%以上。
2. 使用外部的JavaScript和CSS
   内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。
3. 非首页资源使用懒加载。

开发人员的角度

1.HTML文件代码优化

1. 避免使用空请求，包括空的href链接、空src链接。空链接本身无法请求成功，因此会把一个HTTP请求拖到超时，而且空链接会阻塞页面中其他资源的下载进程，会拖慢页面加载速度。譬如：<img src="" alt="">。
2. 根据项目大小，选择主要使用class还是id。id选择器优先级最高，访问速度最快。但是在html中每声明一个id，就会在JS底层声明一个全局变量，而全局变量的增多，将会拖慢JS中变量遍历的效率，若变量遍历达到十万次以上，就会出现较显著的延迟，而且容易造成全局变量污染。对于小项目，并无影响，但是对中大型项目来说，尤其是游戏项目，影响很大。个人推荐，当项目较小时，灵活使用class和id，当项目较大时，尽量少使用id。
3. 预先设定图片大小。在页面加载过程中，图片最后加载，若不对图片预设大小，当图片加载完成后，将会引起大量的重排，将会浪费浏览器资源及拖慢页面加载速度。
4. 尽量减少DOM元素的数量与层级。解析HTML时，标签的数量越多，标签的层级越深，浏览器解析构建DOM树的时间就越长，应尽可能的减少DOM元素的数量和层级。
5. 尽量避免使用table标签。浏览器对table标签的解析是全部生成后再一次性绘制的，因此会造成表格位置较长时间的空白，推荐使用ul及li标签绘制表格。
6. 使用异步加载iframe标签。浏览器加载iframe标签时，会阻塞父页面渲染树的构建及HTTP请求，因此尽量使用异步加载iframe。

2. js文件代码优化

1. ajax请求方法按需求选择get或是post，访问接口所花费的时间在页面加载时间中占很大的比重，而接口访问方法中，get方法远比post方法要快，因此按需选择接口访问方法很重要。
2. 减少全局变量，尽量使用局部变量。js中，全局变量运算速率远低于局部变量，速度差异达到上百倍，且全局变量越多，全局变量的查找速率便越慢。详情请见：减少全局变量对效率的提升
3. 减少对DOM的操作。js操作DOM将会引起页面的重绘及重排，需要花费时间及耗费浏览器资源。

3. css文件代码优化

1. 禁止使用样式表达式。CSS表达式从IE5起开始支持，但仅有IE支持。它的解析速度较慢，而且运算次数远比我们想象的要大，随意动动鼠标就能轻松达到上万次运算，会对页面性能造成影响。譬如："#myDiv{width:expression(document.body.offsetWidth - 110 + "px"); }"
2. 优化关键选择器，去掉无效的父级选择器，尽量少在选择器末尾使用通配符。大多数人都认为，浏览器对CSS选择器的解析式从左往右进行的，譬如选择器："#myDiv ul li a"，大多数人会认为这个选择器效率极高，毕竟第一个ID #myDiv 就已经把范围限定了，先选择 #myDiv ，再在 #myDiv 下寻找 ul ，再一级一级往下，直到找到 a 标签，效率很高。事实上这是错的，浏览器对CSS选择器的解析式从右往左进行的。在上述选择器中，浏览器会先去寻找 a 标签，范围为全局，再在 a 标签的列表中，寻找父级标签是 li 标签的 a 标签，一直向上，直到最后，找到父级标签是 #myDiv ul li 的a标签。因此，效率并不像想象中那么高。显而易见，"#myDi a"选择器比"#myDiv ul li a"选择器效率要高得多。而通配符 a 的效率远比类选择器及id选择器低，若给 a 标签添加一个class myA ，构造新选择器："#myDiv .myA"，它的效率又远比"#myDi a"要高了。浏览器对CSS选择器的解析式从右往左进行，因此在选择器末尾最好使用类选择器，而不是通配符。