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

Web-FE
Catalogue

最近买火车票，感觉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。

https://kyfw.12306.cn/otn/resources/merged/login_js.js?scriptVersion
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
}
Share