12306首页可以做的前端优化项

发表于 更新于 本文字数： 492 阅读时长 ≈ 1 分钟
本文是作者对12306首页可以做的前端优化项的分析，包括HTML、CSS、JS压缩、GZIP/BR压缩、CDN静态资源、多路复用、域名分片等，这些优化项可以帮助提高12306首页的性能。

12036最难的应该是班次查询买票，但前端性能也可以做的更好，这里以前端视角来分析下页面性能可以优化的项。

  1. HTML，CSS，JS没有做压缩，通过Webpack等打包工具去除空格，换行等
  2. GZIP/BR压缩开启，体积可以进一步缩小，降低带宽开销2/3
  3. 全部使用的协商缓存，强缓存设置的0，这样带来了部分没必要的请求代价，应该两种结合使用
  4. HTTP2.0应该开启，实现多路复用，请求效率更高
  5. CDN静态资源，实现域名分片
  6. 部分JS，CSS通过Webpack等打包工具bundle到一起，进一步降低请求次数
  7. 懒加载部分资源比如非可见的图片，及部分数据请求
  8. 预DNS解析，配置<link rel="dns-prefetch" href="//kyfw.12306.cn">

以上即观察后发现可以优化的项。

Chrome Dev Tools中有LightHouse可以对网站性能作出测试，同时给出优化建议，试了下，60分。so，还是有很多优化空间的。

写在最后

骂归骂，但总要说出123才行，这里仅从前端性能优化角度分析下国民应用12306的一些问题。