最近一直给问到这个问题,也引发我的思考。在此也做下总结。
首先,想要提高网页页面加载速度,要了解网页加载是什么样一个原理。这就有一个很经典的问题《当你在浏览器地址栏输入一个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,坚持简约原则,不要增加无用元素增加负担。
大致总结如上,如果将来有更深入的了解会继续更新。