前端优化基础原则:尽量减少http请求数据量

本文属于《高性能web前端优化指南》系列文章。

实现此原则可以加快用户第一次访问你的网站的载入速度,对流量来源多为搜索引擎的网站来说尤为重要!

有一个浅显易懂的道理:下载1M的东西肯定比下载100M的东西要快的多。其实,用户浏览网页时,浏览器进行的就是一个下载并解析的过程。在速度不变的情况下,小一些的内容少的网页肯定下载得更快。而如果我们把解析的过程比作压缩包解压,那解压一个小的同样比解压一个大的包更快吧?轻便,意味着速度。

所以,web前端优化基础的原则就是:尽量减少数据量

请求数据量的多少往往由内容的多少决定,减少请求的同时也会减少展示给用户的内容,这问题就大了。大部分网站都有这个问题:不想减少展示内容(比如广告),但又想把网页变小。我敢保证,如果各大门户网站把他们上面的广告给去掉,载入速度至少提高一半——但,他们肯定不会答应的…orz

在内容不能少的情况下让请求的数据量尽量少。如果你是普通博主,有个非常有效的网页加速方案适合你:不要放广告

广告一般是通过javascript从其他广告发布网站(如google)加载进来,可能载入的是文字链接,但多数时候是图片或flash,体积不小。而且js代码插入位置一般都是在网页主体代码内,打乱源代码布局不说,如果碰巧此js链接地址有点卡,那就会阻止这个JS后面所有内容的加载。这样一来,网页想加速就难了。

如果你要放广告,可以尝试将广告静态化

普通的减少数据量有两个途径,一就是减少文件个数,二就是压缩文件体积。

先说如何减少文件个数,主要就是通过合并文件:

  1. 注意文件重用:就是不要出现来源不同但实际上完全一样的文件。比如同一张图片,却放在两个相册里,调用的时候可能从相册1,也许从相册2,这是一种很明显的浪费网站空间和流量的行为。(详细:暂无)
  2. 整合图片:两张图片合并成一张图片后,会比两张独立的图片加起来的体积要小。图片整合技术包括图片地图(Images Maps)以及CSS sprites(详细:暂无)
  3. 合并CSS:合并多个通用的CSS到一个文件中。这很容易(详细:暂无)
  4. 合并javascript:合并多个javascript文件。这比较困难,要分析每个JS文件的作用,而且合并时很容易报错(详细:暂无)

再说如何减小网页文件体积:

  1. 开启服务器压缩!(如gzip压缩)这是最直接最有效的方法,html及css等可通过此方法减少50%+的体积。
  2. 精简html源码:技术活,详情请进
  3. 压缩css:比较简单,网上很多CSS压缩方法和工具(详细
  4. 混淆和精简javascript:有点麻烦,可能报错(详细)

写完这篇文章才发现,具体方法全部都是暂无,如果我是读者都会忍不住想抽作者。但鄙人也没办法啊,脑袋只有一个,手只有一双,更新只有一步步来啊,我会加油的。

发表评论

电子邮件地址不会被公开。