前端面试准备问题2

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

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

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

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

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

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

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

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

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

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

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

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

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

3.说说你对websocket的了解

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

自己回答:

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

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

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

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 的基本数据类型与包装类的区别

Java 提供了 8 种基本数据类型:byte、short、int、long、float、double、char 和 boolean。它们是直接存储值的,不是对象。 而包装类(如 Integer、Double 等)是将基本数据类型封装为对象,提供了更多方法支持&#xff…

RabbitMQ 基本使用方法详解

RabbitMQ 基本使用方法 在你的代码中,涉及到了 RabbitMQ 的基本使用,包括队列定义、交换机的配置、消息的发送与接收等内容。下面我将详细总结 RabbitMQ 的基本使用方法,重点解释如何在 Spring Boot 项目中与 RabbitMQ 集成。 1. 引入依赖 …

【AI知识】有监督学习分类任务之支持向量机

1.支持向量机概念 支持向量机(Support Vector Machine, SVM) 是一种有监督学习算法,主要用于分类任务(也可用于回归任务,即支持向量回归,SVR)。SVM的核心思想是找到一个最优的超平面&#xff0…

杭州乘云联合信通院发布《云计算智能化可观测性能力成熟度模型》

原文地址:杭州乘云联合中国信通院等单位正式发布《云计算智能化可观测性能力成熟度模型》标准 2024年12月3日,由全球数字经济大会组委会主办、中国信通院承办的 2024全球数字经济大会 云AI计算创新发展大会(2024 Cloud AI Compute Ignite&…

【经典】制造供应链四类策略(MTS、MTO、ATO、ETO)细说

关注作者 制造供应链的牛鞭问题与复杂问题主要是从两个方面解决,一是同步化供应链消减从需求到供应的放大效应,二是供应链细分,针对不同的客户、不同的需求供应的匹配策略来应对复杂性,更好的满足客户并以最低的总成本来实现。 对…

实时日志与发展:Elasticsearch 推出全新专用的 logsdb 索引模式

作者:来自 Elastic Mark Settle, George Kobar 及 Amena Siddiqi Elastic 最新发布的 logsdb 索引模式是专为日志管理优化的功能,旨在提升日志数据的存储效率、查询性能以及整体可用性。这个模式专注于满足现代日志处理需求,提供更高效的日志…

React Image Crop——在React应用中轻松实现图片裁剪功能

React Image Crop是一个用于在React应用程序中裁剪和调整图像的库。它提供了一个简单而强大的界面,允许用户选择和调整裁剪区域,并生成裁剪后的图像。 什么是React Image Crop? React Image Crop是一个开源的React组件,用于在浏览…

Vue.js 中,前端如何处理从后端返回的 Excel 文件流

目的:页面中点击按钮实现下载excel文件 步骤: 向后端发送请求: 使用 axios(或其他 HTTP 客户端)向后端发送请求以获取文件。通常,文件会以 Blob 形式返回。 处理响应数据: 将响应数据(Blob 对象)处理为下载链接,并模拟点击以触发下载。 具体步骤: 1. 安装 axios(…

【HarmonyOS】鸿蒙应用实现手机摇一摇功能

【HarmonyOS】鸿蒙应用实现手机摇一摇功能 一、前言 手机摇一摇功能,是通过获取手机设备,加速度传感器接口,获取其中的数值,进行逻辑判断实现的功能。 在鸿蒙中手机设备传感器ohos.sensor (传感器)的系统API监听有以下&#xf…

微积分复习笔记 Calculus Volume 2 - 3.7 Improper Integrals

3.7 Improper Integrals - Calculus Volume 2 | OpenStax

box 提取

box 提取 import json import os import shutilimport cv2 import numpy as np import pypinyinclass Aaa():passdef pinyin(word):s for i in pypinyin.pinyin(word, stylepypinyin.NORMAL):s .join(i)return s if __name__ __main__:selfAaa()base_dirrE:\data\dao\20241…

ViewModel

ViewMode是MVVM架构模式中VM层对应的类,它的作用是存储界面数据,并和界面发生数据交互。ViewModel能感知生命周期,并且在界面由于配置问题发生重建时候,可以保持当前的数据不变。生命周期如下: ViewMode由ViewModePr…

ESP32-S3模组上跑通ES8388(29)

接前一篇文章:ESP32-S3模组上跑通ES8388(28) 二、利用ESP-ADF操作ES8388 2. 详细解析 上一回解析到了es8388_init函数中的第11段也是最后一段代码,没有解析完,本回继续解析。为了便于理解和回顾,再次贴出该片段,在components\audio_hal\driver\es8388\es8388.c中,如下…

C#—索引器

C#—索引器 索引器(Indexer)是类中的一个特殊成员,它能够让对象以类似数组的形式来操作,使程序看起来更为直观,更容易编写。索引器与属性类似,在定义索引器时同样会用到 get 和 set 访问器,不同…

智慧城市道路分割数据集labelme格式2648张1类别

数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数):2648 标注数量(json文件个数):2648 标注类别数:1 标注类别名称:["road"] 每个类别标注的框数&#x…

YOLOv5+pyqt5+摄像头在特定条件下进行目标检测并采集原始数据

项目介绍 项目地址 GitHub - biabu0/Yolov5_D435i: 通过YOLOV5与pyqt5实现一个使用D435i深度摄像头采集特定需求与场景下的深度数据的小程序 通过YOLOV5对指定的区域进行检测,当检测到目标进入特定区域时,开始保存数据,摄像头采用D435i深度…

图像的放缩比率如何计算的?

图像的放缩比率如何计算关键点 在医疗软件的胶片打印中,图像放缩比率的计算需要更加精确和考虑更多因素,以确保最终打印出来的影像准确无误,符合诊断要求。 以下是一些关键点: 像素间距(Pixel Spacing)&a…

leetcode-73.矩阵置零-day5

class Solution {public void setZeroes(int[][] mat) {int m mat.length, n mat[0].length;// 1. 扫描「首行」和「首列」记录「首行」和「首列」是否该被置零boolean r0 false, c0 false;for (int i 0; i < m; i) {if (mat[i][0] 0) {r0 true;break;}}for (int j …

uni-app H5端使用注意事项 【跨端开发系列】

&#x1f517; uniapp 跨端开发系列文章&#xff1a;&#x1f380;&#x1f380;&#x1f380; uni-app 组成和跨端原理 【跨端开发系列】 uni-app 各端差异注意事项 【跨端开发系列】uni-app 离线本地存储方案 【跨端开发系列】uni-app UI库、框架、组件选型指南 【跨端开…

相机不动,机构动作----Hands Eyes

最近在研究 手眼标定&#xff0c;发现大家都需付费&#xff0c;搞啥子&#xff0c;说好的开源。。。 以相机在上固定不动&#xff0c;机械手为 EPSON_Robot 为例&#xff0c;详细的一步一步实例操作指引 EPSON_Robot 的192.168.0.1 2004 Server 详细操作步骤 1. 启动程序 运…