长页面多模块调接口优化

背景:

查询近3年数据之类的,接口就会有大量数据需要查询做聚合,因此接口响应较慢。同时前端页面有大量不同维度展示的图表,渲染阻塞时间过长,用户体验较差,长时间loading,导致无法交互。因此前端做了一个懒加载功能。

实现:

1. 首先控制图表宽高固定,多次查询只触发重绘,修改数据即可,减少重排

具体实现:

表格宽高固定,内容做文字超出隐藏,显示省略号。

2. 页面接口当滚动到可视区域时再进行调用,且来回滚动不会重复调用。

利用 IntersectionObserver监听指定元素需要出现在可视区域

具体实现:

// elementArray:是需要监听的页面dom元素组,建议使用一个div包裹住需要监听的dom元素
// callback: 是回调函数
const monitorVisualArea = (elementArray, callback) => {
    // 创建JS交叉观察函数
    var observer = new IntersectionObserver((mutaions) => {
        // 创建IntersectionObserver对象
        if (mutaions[0].isIntersecting) {
            // 传入参数并调用回调函数,这个参数根据自己的需要定义
            callback(mutaions[0].target.id)
        }
    });
    for (let i = 0; i < elementArray.length; i++) {
        // 需要监听的元素
        observer.observe(elementArray[i]);
    }
}

// 放到vue的原型链上,就可以使用 this.$monitorVisualArea 调取该方法
Vue.prototype.$monitorVisualArea = monitorVisualArea

获取需要监测的dom集合,传入 callback 方法,实行自己需要的动作:

// 尽量将需要监测的元素起一个相同的class或者用一个特殊class 的div包裹 document.querySelector(".xxx").children
const elementArray = document.querySelector(".table-part");
this.$monitorVisualArea(elementArray, this.loadHandler)


methods: {
    loadHandler(id) {
      // 如果不包含该id,就push进去 并调取对应初始化的接口
      if(!this.list.includes(id)) {
        this.list.push(id)
        this[`load${id}`]()
      }
    },
}

用了一个懒方法,将loadData方法拼接了容器对应的id,这样判断到没有加载过就push进去记录,再调用对应方法,若重复滚动判断到push过该id,也就不会重复调用了。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以。Nginx 的 Lua 模块可以通过用 Java 的 REST 接口来与 Java 交互。一种常见的做法是,在 Nginx 中使用 Lua 脚本来处理 HTTP 请求,然后利用 Lua 的 HTTP 客户端库(如 `lua-resty-http`)向 Java 的 REST 接口发送请求,并获取返回的数据进行处理。 以下是一个简单的示例,展示了如何在 Lua 脚本中使用 `lua-resty-http` 库用 Java 的 REST 接口: ```lua -- 加载 lua-resty-http 库 local http = require "resty.http" -- 创建 HTTP 客户端对象 local httpc = http.new() -- 构造请求参数 local headers = {["Content-Type"] = "application/json"} local body = '{"name": "John Doe", "age": 30}' local options = {method = "POST", body = body, headers = headers} -- 发送 HTTP 请求 local res, err = httpc:request_uri("http://example.com/api/user", options) -- 检查是否出错 if not res then ngx.log(ngx.ERR, "failed to send request: ", err) return ngx.exit(ngx.HTTP_INTERNAL_SERVER_ERROR) end -- 打印返回结果 ngx.say(res.body) -- 关闭 HTTP 客户端 httpc:close() ``` 在这个示例中,我们使用 `lua-resty-http` 库创建了一个 HTTP 客户端对象,并使用 `request_uri` 方法向 Java 的 REST 接口发送了一个 POST 请求。请求参数包含一个 JSON 格式的数据,表示一个用户信息。在接收到 Java 返回的数据后,我们将其打印到 Nginx 的页面上。 需要注意的是,这只是一个简单的示例,实际的应用中还需要考虑安全性、性能等方面的问题,例如如何处理异常情况、如何处理 HTTP 请求头、如何优化网络连接等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值