利用Ajax提升網頁渲染速度——以Highcharts為例

先來看看速度優化對比(這裡用了 的 庫來查看狀態)

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換數據並更新部分網頁內容。

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。

在項目一開始時, 為了呈現數據的工資趨勢圖,把所有的關鍵詞趨勢數據一次性處理後發送至前端, 造成DOM數目過多, 導致網頁渲染數據極慢, 到了無法忍受的1分多鐘的時間.

後面使用Ajax的 方法, 只對於要下鑽的關鍵詞工資趨勢獲取對應數據, 最終把時間壓到了20秒以內(由於整個頁面還包含其他圖表, 如果只有單個圖表, 時間可以進一步縮短)

前端發送請求

下面的代碼片就是添加了 方法後的highcharts片段.

這段代碼的意思是用 函數發送請求, 請求的內容是

是 , 這裡的url會交由Django後台的路由識別出對應函數進行處理.

處理後的返回數據保存在 中. 函數體內部把返回的數據 保存在 中供後面的圖表渲染.

Django響應請求

在Django的視圖模塊 中, 響應ajax請求, 處理完畢後發送回前端

參考資料

關於HighCharts的Ajax例子可以參考官方文檔 https://www.hcharts.cn/docs/ajax

菜鳥教程 http://www.runoob.com/ajax/ajax-tutorial.html

還在修改中的項目, 歡迎吐槽(逃

https://github.com/FesonX/JobDataViewer

代碼對比

(覺得太丑可以直接跳過)

下面這段是修改前的js代碼片

下面這段是修改後的js代碼片

下面這段是修改前的python代碼片

下面這段是修改後的python代碼片

入門小白, 歡迎大家指出錯誤, 技術交流

今日作者: 光光同學_

不愛看電影的攝影師不是好的程序員

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！