购物网站的商品展示模块,网页设计与制作课程设计方案,建设工程项目,广西南宁网站空间1.防抖和节流分别是什么#xff0c;应用场景 防抖#xff1a;在事件被触发后#xff0c;只有在指定的延迟时间内没有再次触发#xff0c;才执行事件处理函数。 在我的理解中#xff0c;简单的说就是在一个指定的时间内#xff0c;仅触发一次#xff0c;如果有多次重复触…1.防抖和节流分别是什么应用场景 防抖在事件被触发后只有在指定的延迟时间内没有再次触发才执行事件处理函数。 在我的理解中简单的说就是在一个指定的时间内仅触发一次如果有多次重复触发就开始重新计时。防抖的使用场景主要是处理用户频繁触发的操作例如搜索框输入表单验证等通过防抖机制可以减少频繁调用函数的次数提高性能。 节流在指定的时间间隔内只允许事件处理函数执行一次。 总结节流就是在指定的时间内不论触发多少次就只执行一次。节流的使用场景主要是控制高频触发的事件比如页面滚动按钮点击或者鼠标移动等场景保证在一定时间内只执行一次事件处理避免性能开销 2.在过往的项目中都有做过什么样的性能优化具体怎么实现的呢 对于这样的回答其实就是考察我们的实际项目经验可以从真实场景具体措施和结果三个方面回答。 像我们平常做大屏开发的项目比较多就可以这样回答 在我参与的项目中占据大屏的项目居多我的工作能主要就是负责实时数据展示和图表渲染同时为了保证用户的使用体验随着数据量和图表的增多页面渲染卡顿数据更新延迟通常我会采取这些优化措施 首先我会通过websocket替代传统的轮询方式实现双向通信实时推送数据减少数据请求的频率提高实时数据的流畅性。 其次对于在Echarts图表渲染大量数据中通常我会结合dataZoom实现数据分段加载默认显示前1000条数据当用户拖动缩放时在通过API获取剩余的数据 然后对于一些数据更新不频繁的图表采用懒加载和组件按需渲染利用 Vue 的 keep-alive 特性对不频繁更新的图表进行缓存避免重复初始化和 DOM 操作减少资源开销。 最后对于静态资源我们可以通过CDN加速将静态资源上传到CDN提高加载速率缩短用户和资源节点之间的网络延迟。 3.说说你对websocket的了解 WebSocket 是一种双向通信协议它允许客户端和服务器之间保持一个长期的连接双方可以随时互相发送消息而不需要频繁建立连接。相对于传统的 HTTP 协议WebSocket 在性能上有很大优势特别是在实时应用场景中比如在线聊天、实时数据推送等。 自己回答 在我参与的一个智慧农业灌溉大屏项目中我们做过一个自动化灌溉的功能灌溉系统涉及到的设备开关需要实时展示和操作比如用户通过大屏点击开关控制设备的状态而状态变化需要实时反馈到前端这里我们就是用了websocket来实现。 具体的来说当用户操作灌溉系统的开关时前端通过websocket向服务器发送开关状态的指令服务器接受到指令后会执行设备控制的逻辑并实时返回操作结果给前端。 比如说用户点击关闭按钮时系统就能在毫秒级返回设备的当前状态整个过程是非常流畅的。
