12306网站前端初步优化之我见

最新推荐文章于 2024-09-21 22:07:00 发布

zilong-thu

最新推荐文章于 2024-09-21 22:07:00 发布

阅读量1.8k

点赞数

文章标签：性能优化 web前端

本文链接：https://blog.csdn.net/zilong_thu/article/details/17841869

版权

原发表于我的博客：http://borninsummer.com/2014/01/03/how-to-improve-12306/

--------------------------------------- 正文 ----------------------------------------------------

最近买火车票，感觉12306网站做得实在太垃圾了——加载速度慢，使用同步的Ajax验证码，未使用CSS Spirites …… ——完全不是抱着处理大量请求、高并发去的啊。于是抽空瞥了一下网站源码，发现其前端部分是个极好的反面教材，可以作为web前端工程师进行性能优化的案例。本文仅指出12306网站前端方面存在的问题，并提出性能优化建议。鄙人水平有限，如有不对之处，还望读者朋友多多见谅，并感谢批评指正~~

另外，1月3日下午我给12306铁路客运服务的“意见反馈”邮箱发了一封邮件，也不知道他们会不会处理。更不知道会不会被……

参考资料：

1. 减少HTTP请求

以铁路客户服务中心客运首页 https://kyfw.12306.cn/otn/index/init 为例。

问题分析

先看第一次加载页面时的网络瀑布图（蓝色方框标记的为图片请求）：

共34次HTTP请求，图片请求了14次。有很多是非常小的图片，例如 icon_new.png，只为了这1.3KB，就与服务器进行了三次握手，真是愚蠢。

优化建议

icon_new.png使用纯CSS制作（inline-block）
背景色、框，不要使用bg.png、bg_navlist.png、bg_line.png、bg_nav01.png，应尽量使用CSS，可以绘制更高效的界面
将 logo.png，icon_phone.png，icon8.png，bg_nav.png，icon.png合为一张Spirites图。
其他icon也尽可能按照整个网站的需求进行合并（一张图最好）

最后，非照片类图片请求数不应该超过两次。这样可以大大减轻服务器载荷。

2. 压缩组件

以铁路客户服务中心客运首页 https://kyfw.12306.cn/otn/index/init 为例。

打开该页面的源代码，会看到一些注释。总体来说占html文件的比重不多。但是，考虑到该网站在放票的10秒内会接到大量的请求，还是应该将这些注释去掉。

另外，这些注释的存在，使得人感觉这个网站仍然处于开发阶段——太不专业了。

3. 使用异步Ajax

分析的是用户登录页面：https://kyfw.12306.cn/otn/login/init#

用户在登录时需要输入验证码，其验证过程为：输入到第四个字符时，页面向服务器发送POST请求，对验证码进行验证。

“异步”的英文名是Async。12306网站用户登录的随机码相关验证url名为checkRandCodeAnsyn，感觉不太对劲，然后看了下其JavaScript实现，好家伙，居然使用了同步Ajax请求！

这就是为什么输入验证码后页面会假死——其实只是在等待服务器返回数据而已。什么人会故意使用同步Ajax请求呢？就是那些希望用户等待等待等待……的Idiots。

我的优化建议是，把下面代码中async值改为true。

<span style="font-size:18px;">
// 这段代码摘自  https://kyfw.12306.cn/otn/resources/merged/login_js.js?scriptVersion=1.171 
checkRandCode:function(){
  var d;
  var c=$("#randCode").val();
  $.ajax(
      {
          url:ctx+"passcodeNew/checkRandCodeAnsyn",
          type:"post",
          data:{randCode:c,rand:"sjrand"},
          async:false,    // => OK，这里是巨大的BUG。居然使用了同步Ajax请求！改为true就可以了
          success:function(e){
              if(e.data=="N"){
                  d=false;
                  $("#i-ok").css("display","none")
              }else{
                  d=true;
                  $("#i-ok").css("display","block")
              }
          }
      }
  );

  return d
}</span>

---------------------- 后记：关于发给12306客服的邮件 -------------------------

第一封邮件发于1月3日，过去了五天，没有任何反馈。于是1月8日加上“要求回执”“紧急”等参数再次发送。才知道他们根本就不看邮件！！！

尼玛啊。你们把这个邮箱（12306yjfk@rails.com.cn）放在首页干嘛？？听说他们员工压力大，打玩偶和骂墙来减压，真是荒诞。这个星球最戏剧化的情节正在这片大地上演……