大屏數據顯示優化

大屏數據顯示優化

大屏數據的頁面裏面包含了一些3D地圖和世界航班趨勢圖，反應上來有個問題，就是動畫比較卡頓。

緣由無外乎兩個：

一、電腦配置比較低
二、頁面計算量較大

針對第二點的優化方案以下

jquery動畫去除

圖形漸變使用了jquery動畫，其中還會夾雜一些Dom操做。這些是有必要去除的，因此把這些動畫所有換成了css3動畫。

圖片壓縮

有些風景圖片須要展現，這些照片都是高清的。清晰度過高的圖片，瀏覽器處理起來也是有很明顯的卡頓，尤爲是圖片切換到時候。而大屏像素很低，高清的圖片也顯示的像素點很大，看起來很是模糊，因此並無必要使用高清的。把圖片質量下降一些，切換卡頓就不見了，顯示卻並無特別的變化。

echarts圖表優化

有兩個比較大的圖表在切換，當一個圖片顯示的時候，能夠先把另外一個銷燬，這樣就少了一個圖表動畫在運行。

作了以上工做，刷新一下感受好了點，卡頓好多了。

可是，咱們太天真，當頁面運行時間一長的時候，卡頓仍是會出現，因此。。。

刷新大法好！！！