先来看看速度优化对比(这里用了 的 库来查看状态)
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代码片
入门小白, 欢迎大家指出错误, 技术交流
今日作者: 光光同学_
不爱看电影的摄影师不是好的程序员
领取专属 10元无门槛券
私享最新 技术干货