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

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

今日作者: 光光同学_

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180524G1GFS100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券