利用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代码片

入门小白, 欢迎大家指出错误, 技术交流

今日作者: 光光同学_

不爱看电影的摄影师不是好的程序员