前端面试准备问题2

1.防抖和节流分别是什么,应用场景

防抖:在事件被触发后,只有在指定的延迟时间内没有再次触发,才执行事件处理函数。

在我的理解中,简单的说就是在一个指定的时间内,仅触发一次,如果有多次重复触发,就开始重新计时。防抖的使用场景主要是处理用户频繁触发的操作,例如搜索框输入,表单验证等,通过防抖机制,可以减少频繁调用函数的次数,提高性能。

节流:在指定的时间间隔内,只允许事件处理函数执行一次。

总结:节流,就是在指定的时间内,不论触发多少次,就只执行一次。节流的使用场景主要是控制高频触发的事件,比如页面滚动,按钮点击或者鼠标移动等场景,保证在一定时间内只执行一次事件处理,避免性能开销

2.在过往的项目中都有做过什么样的性能优化,具体怎么实现的呢?

对于这样的回答,其实就是考察我们的实际项目经验,可以从真实场景,具体措施和结果三个方面回答。

像我们平常做大屏开发的项目比较多,就可以这样回答:

在我参与的项目中,占据大屏的项目居多,我的工作能主要就是负责实时数据展示和图表渲染,同时为了保证用户的使用体验,随着数据量和图表的增多,页面渲染卡顿,数据更新延迟,通常我会采取这些优化措施:

首先:我会通过websocket替代传统的轮询方式,实现双向通信,实时推送数据,减少数据请求的频率,提高实时数据的流畅性。

其次:对于在Echarts图表渲染大量数据中,通常我会结合dataZoom实现数据分段加载,默认显示前1000条数据,当用户拖动缩放时,在通过API获取剩余的数据

然后:对于一些数据更新不频繁的图表,采用懒加载和组件按需渲染,利用 Vue 的 keep-alive 特性,对不频繁更新的图表进行缓存,避免重复初始化和 DOM 操作,减少资源开销。

最后,对于静态资源,我们可以通过CDN加速,将静态资源上传到CDN,提高加载速率,缩短用户和资源节点之间的网络延迟。

3.说说你对websocket的了解

WebSocket 是一种双向通信协议,它允许客户端和服务器之间保持一个长期的连接,双方可以随时互相发送消息,而不需要频繁建立连接。相对于传统的 HTTP 协议,WebSocket 在性能上有很大优势,特别是在实时应用场景中,比如在线聊天、实时数据推送等。

自己回答:

在我参与的一个智慧农业灌溉大屏项目中,我们做过一个自动化灌溉的功能,灌溉系统涉及到的设备开关需要实时展示和操作,比如用户通过大屏点击开关控制设备的状态,而状态变化需要实时反馈到前端,这里我们就是用了websocket来实现。

具体的来说,当用户操作灌溉系统的开关时,前端通过websocket向服务器发送开关状态的指令,服务器接受到指令后,会执行设备控制的逻辑,并实时返回操作结果给前端。

比如说用户点击关闭按钮时,系统就能在毫秒级返回设备的当前状态,整个过程是非常流畅的。

相关推荐
粥里有勺糖5 分钟前
视野修炼-技术周刊第127期 | Valdi
前端·javascript·github
前端世界31 分钟前
从零搭建 ASP.NET 单文件 Web 项目:一个能真用的 BookShop 管理页实战
服务器·前端·asp.net
码上成长42 分钟前
Vue Router 3 升级 4:写法、坑点、兼容一次讲透
前端·javascript·vue.js
BBB努力学习程序设计42 分钟前
响应式页面设计与实现:让网站适配所有设备的艺术
前端·html
IT从业者张某某1 小时前
less 工具 OpenHarmony PC适配实践
前端·microsoft·less
程序员东岸1 小时前
从零开始学二叉树(上):树的初识 —— 从文件系统到树的基本概念
数据结构·经验分享·笔记·学习·算法
行走的陀螺仪2 小时前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
isyuah2 小时前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
会飞的小蛮猪2 小时前
Skywalking运维之路(exporter状态监控)
经验分享
qq_398586542 小时前
浏览器中内嵌一个浏览器
前端·javascript·css·css3