如何提高网页页面加载速度

最近一直给问到这个问题，也引发我的思考。在此也做下总结。
首先，想要提高网页页面加载速度，要了解网页加载是什么样一个原理。这就有一个很经典的问题《当你在浏览器地址栏输入一个URL后回车，将会发生的事情？》。
简单总结一下这个过程，首先你输入一个URL地址，浏览器会去查找相应的IP地址，利用的是DNS。之后就是HTTP请求过程，即客户端给服务器发出一个HTTP请求，服务器响应一个301永久重定向，然后浏览器跟踪重定向地址。接着服务器进行处理，处理完毕返回一个HTML响应，浏览器就开始显示HTML了。渲染期间会继续请求服务器使得相应的元素能正常渲染，比如获取嵌入到HTML的CSS等。在Web2.0后，有会有Ajax请求。总之就是浏览器请求服务器，服务器应答，浏览器再作答这么一个简单的过程。
这里大家就能体会到了，页面加载会有请求发生，所以优化的方案也围绕这个展开。因此，我总结以下几个方案：

1. 减少请求
优化代码，减少不必要的请求，空的src。
2. 图片处理
网页中肯定有图片的存在。图片的大小需要考虑，图片的格式也是JPG和GIF已经不再适应了，尽量使用PNG格式。
3. JS脚本处理
这里有很多种优化。第一，合并JS文件，优点一是大大减少JS文件的大小，二是能减少HTTP请求；第二，按需加载脚本，延迟加载脚本。按照一定的需要再去加载脚本。第三，JS脚本后置，CSS样式前置，这样的优点是网页在浏览的时候可以先浏览到一部分内容，然后同时再慢慢渲染后面的内容。第四，利用压缩工具，如Gzip有很多不错的压缩算法，可以对脚本进行优化。
4. CSS文件处理
既然JS可以优化，那么CSS也是同样。第一，类似的可以进行文件合并。第二，有一个CSS精灵的工具，可以对图像进行映射处理，其优化的根本也是减少请求。另外，使用外部文件代替内联定义来适应浏览器的缓存机制。
5. 删除一些不必要的元素，减少DOM
DOM太多元加大页面加载和脚本执行的效率，简单一个例子，如果有很多Li，那么一次getElementById(“li”),就需要遍历很多Node
6. 利用缓存cache-control
缓存需要考虑的因素就多了，缓存多久，使用哪种方式。设置一个合理的过期时间，这样也会减少响应时间。
7. 减少cookie大小
cookie很重要，但cookie的使用也有很多细节要处理，对cookie进行检查，设置expire。
8. 一个高深的东西：利用CDN
CDN:content distribution network.主要原理是，用户会请求最近的服务器节点，因此可以利用其原理，将静态内容放置在较近的节点上，提高请求速度。
9. Ajax大法好
Ajax的优点大家都清楚，也是Ajax，JS发展得越来越好。利用Ajax异步请求，可以避免用户花费时间等待页面刷新元素。
10. 还是要优化代码结构，优化布局
尽量避免使用table，坚持简约原则，不要增加无用元素增加负担。

大致总结如上，如果将来有更深入的了解会继续更新。

参考：25种提高网页加载速度的方法和技巧