關於12306
中國鐵路客戶服務中心(12306.cn)，相信大家都不陌生。作為一個超大型的類電商網站，具體業務不予置評，但從前端設計來看，卻有諸多的不足。
12306訂票首頁分析
12306首頁(https://kyfw.12306.cn/otn/)請求達到32個，累計文件大小近800k。
其中有一半是圖片資源，大小達到444kb。
另外有6個css文件請求，特別的是有2次css請求完全指向同一個css文件。
還有8個js請求
這就是首頁初次打開所需要的內容，當然還有兩個html頁面，就不計算了。可以看到，打開整個頁面文件大小達到800k，和taobao，jd之類的比起來，這個大小是很小的，但是為什么給用戶的體驗就是卡頓、加載中、加載中呢？
接下來，就從前端的角度來看下，有沒有可以優化的地方呢？
優化1、使用瀏覽器緩存
在頁面加載中，12306請求了如此多的資源，很多資源看起來，根本就是不太容易變化的，應在HTTP標頭中設置有效期，盡可能多的使用瀏覽器緩存。
優化2、圖片優化
數據傳輸時間，在訪問網站的過程中，是一個耗時比較大的過程，其中又以圖片傳輸為最，如果網站上有較多的圖片，那么就要想辦法減少體積，延遲加載等等。在12306的頁面上，logo（https://kyfw.12306.cn/otn/resources/images/logo.png ），icon（https://kyfw.12306.cn/otn/resources/images/logo.png ）等等圖片都是可以優化的。
優化3、圖片組合為CSS貼圖
瀏覽器一般都有並發連接數限制，也就是同時請求的資源數量是有效的，前端優化點之一就是減少請求數量，那么12306中的諸多小圖片完全可以合並到一個大圖之中，采用貼圖定位的方式，降低請求數量。
優化4、暫緩JS解析
由於JS是阻塞加載的，一般來說，把js放在head中會影響頁面的渲染速度，很多時候，我們都推薦把js放在body結束標記之前。但12306偏偏沒有這么做，把大把的js放在head中。
優化5、使用css而不是圖片控制背景
這個似乎是大家都知道的常識，就算為了兼容老版本的瀏覽器，也可以考慮做優雅降級。但12306偏偏就大量使用背景圖。
優化6、CSS合並
同樣為了減少請求數，應該盡量將CSS壓縮合並。分析12306的站點css，發現部分合並了，部分沒有，而且有些css連壓縮都沒做，很難想象是怎么打算的。另外，外部控件的樣式（不會變的樣式）完全可以打包放到cdn上。
優化7、JS合並
JS同上，該打包就打包，不要搞一堆js出來，加載還慢。。
總結
搶票還是每年的一個老大難的問題。12306，你可以推說你的核心邏輯復雜，這個我接受。但你完全可以把前端的一些基本優化點做到吧。就算我買不到票，至少我搶票的時候心情不至於太差。。
以上，搶票之余作為一個偽前端的發泄。