淺析12306前端優化點

關於12306

中國鐵路客戶服務中心(12306.cn)，相信你們都不陌生。做爲一個超大型的類電商網站，具體業務不予置評，但從前端設計來看，卻有諸多的不足。

12306訂票首頁分析

12306首頁(https://kyfw.12306.cn/otn/)請求達到32個，累計文件大小近800k。

其中有一半是圖片資源，大小達到444kb。

另外有6個css文件請求，特別的是有2次css請求徹底指向同一個css文件。

還有8個js請求

這就是首頁初次打開所須要的內容，固然還有兩個html頁面，就不計算了。能夠看到，打開整個頁面文件大小達到800k，和taobao，jd之類的比起來，這個大小是很小的，可是爲何給用戶的體驗就是卡頓、加載中、加載中呢？

接下來，就從前端的角度來看下，有沒有能夠優化的地方呢？

優化一、使用瀏覽器緩存

在頁面加載中，12306請求瞭如此多的資源，不少資源看起來，根本就是不太容易變化的，應在HTTP標頭中設置有效期，儘量多的使用瀏覽器緩存。

優化二、圖片優化

數據傳輸時間，在訪問網站的過程當中，是一個耗時比較大的過程，其中又以圖片傳輸爲最，若是網站上有較多的圖片，那麼就要想辦法減小體積，延遲加載等等。在12306的頁面上，logo（https://kyfw.12306.cn/otn/resources/images/logo.png ），icon（https://kyfw.12306.cn/otn/resources/images/logo.png ）等等圖片都是能夠優化的。

優化三、圖片組合爲CSS貼圖

瀏覽器通常都有併發鏈接數限制，也就是同時請求的資源數量是有效的，前端優化點之一就是減小請求數量，那麼12306中的諸多小圖片徹底能夠合併到一個大圖之中，採用貼圖定位的方式，下降請求數量。

優化四、暫緩JS解析

因爲JS是阻塞加載的，通常來講，把js放在head中會影響頁面的渲染速度，不少時候，咱們都推薦把js放在body結束標記以前。但12306恰恰沒有這麼作，把大把的js放在head中。

優化五、使用css而不是圖片控制背景

這個彷佛是你們都知道的常識，就算爲了兼容老版本的瀏覽器，也能夠考慮作優雅降級。但12306恰恰就大量使用背景圖。

優化六、CSS合併

一樣爲了減小請求數，應該儘可能將CSS壓縮合並。分析12306的站點css，發現部分合並了，部分沒有，並且有些css連壓縮都沒作，很難想象是怎麼打算的。另外，外部控件的樣式（不會變的樣式）徹底能夠打包放到cdn上。

優化七、JS合併

JS同上，該打包就打包，不要搞一堆js出來，加載還慢。。

總結

搶票仍是每一年的一個老大難的問題。12306，你能夠推說你的核心邏輯複雜，這個我接受。但你徹底能夠把前端的一些基本優化點作到吧。就算我買不到票，至少我搶票的時候心情不至於太差。。

以上，搶票之餘做爲一個僞前端的發泄。