- 博客(56)
- 收藏
- 关注
原创 前端限流如何实现,如何防止服务器过载
前端限流技术主要包括时间窗口算法、漏桶算法和计数器算法三种实现方式。时间窗口算法通过固定时间间隔限制请求;漏桶算法以恒定速率处理请求,超过容量则拒绝;计数器算法统计时间段内的请求数进行限制。此外,还可以使用bottleneck等第三方库实现高级限流功能。合理选择限流策略可以有效控制请求频率,保护后端服务。
2025-06-03 10:42:37
426
原创 async和await如何捕获异常
使用async/await时,异常处理应通过try...catch实现。基本模式是在async函数中用try包裹await操作,catch捕获错误。多个异步调用可统一处理,或为每个await单独添加try...catch。使用Promise.all并发执行任务时,任一Promise拒绝将触发catch,仅返回第一个错误。这些方法能有效管理异步异常,提升代码健壮性。
2025-05-27 16:20:50
250
原创 在promise中,多个then如何传值
在 JavaScript 中,Promise的多个.then()是的,值可以通过的方式,在多个.then()之间传递。这是 Promise 链式调用的核心机制。
2025-05-27 16:10:16
369
原创 如何改变this的指向
在JavaScript中,this关键字的指向通常取决于函数的调用方式。但是,在某些情况下,你可能需要改变this的值,使其指向不同的对象。以下是几种常见的方法来改变this。
2025-05-27 15:48:03
338
原创 如何创建一个流程图/思维导图
遇到复杂问题的时候需要首先理清思路才能动手写代码,创建思维导图是一种有效的方法,可以帮助我们组织信息、激发创意和解决问题。
2025-05-27 15:41:05
424
原创 call的作用是什么,为什么要使用它?
摘要:call()方法主要用于三种场景:1)继承父类构造函数,通过Product.call(this)实现子类继承父类属性;2)改变匿名函数的this指向,如fn.call(obj)使this指向指定对象;3)指定函数执行上下文并传参,如greet.call(person,'Hi')。call第一个参数决定this指向,不传参时非严格模式指向window,严格模式为undefined。该方法能灵活控制函数执行上下文,实现继承和参数传递。
2025-05-26 16:43:23
395
1
原创 变量提升,var声明和函数声明
在同一作用域内,如果有函数声明和变量声明同名,函数声明的优先级高于 var 声明。并且后续的 var 声明不会覆盖已经存在的绑定(只影响赋值部分)。如果var a = 1;最后输出的a就是 1,不管这句话在上还是在下。这样的话a就是1,会被覆盖。已经存在的绑定 是什么?
2025-03-07 11:24:28
215
原创 测试框架(jest & mock)的使用和对比
前端单元测试中,Mock框架的作用是模拟(或伪造)依赖的服务或对象,以隔离被测试代码与其他系统组件的交互,确保测试的纯粹性和效率。Jest是一个由Meta(前Facebook)开发并现在由OpenJS Foundation维护的JavaScript测试框架,特别适合于前端应用的单元测试和集成测试。综上所述,Mock框架是前端单元测试中不可或缺的工具,合理使用可以大幅提升测试的效率和质量,但也要注意平衡模拟与真实环境之间的差距,确保测试的有效性。: 通常使用npm或yarn安装Jest到项目中作为开发依赖。
2024-05-16 12:51:08
715
原创 一些常见开发框架相关题目,RESTful是什么,Electron是什么,Express, Koa
Electron是一个,它允许使用Web技术(HTML, CSS, JavaScript)来开发原生桌面应用程序。这意味着开发者可以利用Web开发技能来创建既能在Windows、macOS,也能在Linux上运行的桌面应用。ipcMain,指至少两个进程或线程间传送数据或信号的一些技术或方法。IPC的方式通常有等。其中 Socket和Streams支持不同主机上的两个进程IPC。进程是计算机系统分配资源的最小单位(严格说来是线程)。每个进程都有自己的一部分独立的系统资源,彼此是隔离的。
2024-05-15 15:19:10
622
原创 常见网络攻击及解决方案
网络安全是开发中常常会遇到的情况,为什么会遇到网络攻击,网络攻击是如何进行的,如何抵御网络攻击,都是我们需要思考的问题。
2024-05-14 19:34:01
2297
原创 Vue3与Vue2的区别,在性能优化上有哪些特别之处
这些改进共同作用,使得 Vue 3 相比 Vue 2 在运行时性能、初始化速度、内存使用等方面都有了显著提升,为开发者提供了更高效的开发环境。Vue 3 是对 Vue 2 的一次全面升级,它在保留Vue原有简洁易用的基础上,通过一系列改进进一步提高了框架的性能、灵活性和开发效率。Vue 3 相较于 Vue 2 有几个显著的不同和改进,这些变化旨在提升性能、开发体验和功能性。
2024-05-14 15:21:36
990
1
原创 JavaScript 算法题目思考
有序数组,重复的数据一定是相邻的,那我们定义一个fast指针,一个slow指针,如果fast!== slow,说明fast指向的位置不是重复的,就可以将fast的值存给slow,两个指针都往前一步;若fast === slow,则表示重复,fast++,slow停在原地,等待下一个不重复的值存进来slow的位置,直到fast走完全程,得到的slow就是去重后的数组长度。中序遍历的特点是“左、根、右”,即每次遍历时,先遍历左节点的数据,之后遍历本节点,最后遍历右节点,循环往复,直至树中数据遍历完成。
2024-05-07 14:44:58
556
1
原创 HTTP 缓存 - 强制缓存和协商缓存
浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存,以便下一次访问时重复使用,节省带宽,提高访问速度,降低服务器压力。http缓存机制主要在http响应头中设定,响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。Expires是HTTP/1.0控制网页缓存的字段,其值为服务器返回该请求的结果缓存的到期时间,即再次发送请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。
2024-04-24 16:41:25
1151
原创 时间复杂度和空间复杂度是什么
如何衡量代码好坏,算法的考察到底是在考察什么呢?,就是我们后面要说到的时间复杂度和空间复杂度,也是学好算法的重要基石。确切的占内用存或运行时间无法进行计算,而且同一段代码在不同性能的机器上执行的时间也不一样,可是代码的基本执行次数,我们是可以算得出来的,这就是时间复杂度。平时表示算法复杂度主要就是用O(),读作大欧表示法,只用一个O()表示。
2024-04-24 16:01:30
983
原创 如何实现调接口控制 - 每次最多只能同时进行n个请求
题目:调接口时限制每次最多只能有两个接口同时请求,最终让所有接口都完成请求。思考:计数:每次调接口加一,调完减一,如果正在执行的接口 >= 2,则等待,否则继续执行如何阻止继续请求接口?第一步模拟一个调接口的方法做测试,设置一个定时器,promise延迟返回,模拟调接口的异步情况,等待时候做空定时器等待,满足条件在跳出定时器继续执行
2024-04-24 14:50:58
402
原创 内存泄露和内存溢出,有何区别,如何预防和解决
内存泄露和内存溢出是什么意思。内存泄漏是指程序在分配了内存之后,无法释放这些内存空间的现象。发生内存泄漏的代码可能会被多次执行,每次执行都可能导致一部分内存未被释放。随着程序的持续运行,这些未释放的内存会不断累积,最终可能导致程序性能下降或耗尽系统资源。内存泄漏通常是由程序中的错误代码、不正确的引用管理或资源未正确关闭等原因导致的。。内存溢出是指程序尝试分配更多的内存空间,但系统中已经没有足够的内存可供分配时所发生的情况。
2024-04-21 16:18:47
1468
原创 webpack 打包优化 - splitChunks
webpack5 默认情况下只对异步模块做打包优化,额外的打包必须满足 4 个条件(webpack 的默认配置,可修改)。根据需求可调整为只对初始模块做打包优化,或者初始和异步模块一起优化。同时可配置自己的打包规则。简而言之:chunks 控制打包作用范围,其他控制打包规则。webpack5 的 splitChunks 功能是比较强大的,不过推荐还是使用默认模式,或者提取一下第三方库。
2024-04-19 21:17:19
4639
原创 js 事件模型 事件捕获、事件冒泡
什么是事件捕获、事件冒泡事件冒泡(event bubbling)和事件捕获(event capturing)是指在 DOM 树中处理事件的两种不同方式。
2024-04-17 11:31:34
1616
原创 长页面多模块调接口优化
背景:查询近3年数据之类的,接口就会有大量数据需要查询做聚合,因此接口响应较慢。同时前端页面有大量不同维度展示的图表,渲染阻塞时间过长,用户体验较差,长时间loading,导致无法交互。因此前端做了一个懒加载功能。
2024-04-17 11:12:37
350
原创 浏览器跨标签页通信的方式都有哪些
localStoragewebsocketsharedWorkercookie优缺点优点: 操作简单,易于理解。缺点: 存储大小限制只能监听非己页面跨域不共享 (总体来说较为推荐)优点: 理论上可是实现任何数据共享跨域共享 缺点: 需要服务端配合增加服务器压力上手不易 (总体不推荐)优点: 理论上可以实现任何数据共享性能较好 缺点: 跨域不共享调试不方便兼容性不好 (总体推荐一般)优点: 兼容性好易于上手和理解 缺点: 有存储大小限制轮询消耗性能发请求会携带cookie (总体不推荐)
2024-04-16 11:01:57
1333
原创 vue原理相关一些 题目整理
可以使用 requestAnimation 这个方法,将数据进行分割,分批次渲染,减少了 js 的连续运行时间,并且加快了渲染时间,利用加长总运行时间换取了渲染时间,用户既能快速得到反馈,而且不会因为过长时间的 js 运行而无法与页面交互。如何操作dom、更新dom?存在大量数据并且都是复杂类型的时候,会导致vue对数据的劫持时间和渲染时间变长, js 连续执行时间过长,会导致页面长时间无法交互,而且渲染时间太慢,用户一次交互反馈的时间过长。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
2024-04-12 16:24:24
489
原创 ES6的new Set()方法有什么用法
new Set()生成出来的数据是Set数据结构,需要自行转换成对应结构,size是set的长度标识。元素唯一使用全等‘===’判断,除了NaN,在set 中,NaN是相等的。1) 遍历Set的keys(), 返回键名的遍历器,相等于返回键值遍历器values()主要分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。3) 遍历Set的entries(), 返回键值对的遍历器。2) 遍历Set的values(), 返回键值的遍历器。只能去重简单数据类型,复杂数据类型不可以。
2024-04-05 16:02:22
898
原创 call、apply、bind三者有何异同
call bind apply的异同?相同:用来指定一个函数内部的this的值,都可以手动改变原本this的指向;不同:call和apply传参不同,call是依次传参,apply是数组传入,bind是需要执行的,返回一个函数。
2024-04-04 17:46:30
1034
原创 axios封装,请求取消和重试,请求头公共参数传递
axios本身功能已经很强大了,封装也无需过度,只要能满足自己项目的需求即可。可按需封装终止请求或请求重发。
2024-03-31 22:16:05
1118
原创 浏览器渲染,重排和重绘,如何优化
documentFragment不是真实DOM树的一部分,它的属性变化不会直接导致DOM树的更新,故频繁改动不会有性能问题。2. 尽量使用脱离文本流的动画主体,比如让它fixed 或者absolute,脱离文档流,将全局的重排转化为局部的重排,提升一部分性能;浏览器解析页面内容时会生成一个渲染树,当渲染树中部分或全部元素的尺寸、结构、内容发生变化是,浏览器就会出发重新生成渲染树的方法,进而进行重新渲染。一般情况下,动画都会频繁操作dom,会导致被操作的dom比较多的时候页面性能降低。
2024-03-29 16:03:40
396
原创 CDN是做什么的,CDN和DNS有什么异同?
用户向CDN全局负载均衡设备发出请求,CDN全局负载均衡设备会根据IP+url选择一台用户所属区域内的负载均衡设备,选择合适的空闲的服务器提供服务,用户就向这个服务器发出请求再返回所需内容。浏览器输入地址之后,先在浏览器缓存中查找是否有该域名,没有的话再去操作系统缓存中查找(host),路由器缓存,ISP的DNS服务器,根域名服务器,按此顺序查找。DNS解析之后,指向CDN专用的DNS服务器,会将域名解析权交给CNAME指向的CDN专用的DNS服务器,CDN就将全局负载均衡设备返回给用户。
2024-03-29 16:01:54
694
原创 前端性能优化
思考:从A页面 到B页面,会经历哪些步骤?跳转特别慢,如何优化?首先需要知道到底是哪一步特别慢,可以利用浏览器提供的钩子埋点,检测每个步骤的耗时:chrome提供的performance。
2024-03-28 20:10:28
1108
原创 webpack为什么要使用loader,如何手写loader
webpack是一个打包工具,即webpack会将一切文件视为模块,但是webpack在打包的时候只是认识JS文件或者JSON文件,并不认识CSS文件,png图片等,如果想让webpack能够在打包的时候识别其他文件,就必须要使用loader,即loader的作用就是让webpack拥有可以加载和了解除JS文件以外的其他文件。
2024-03-24 21:36:01
592
原创 webpack原理之-打包流程&热更新HMR
plugin即为插件,是一个扩展器,丰富webpack本身,增强功能 ,针对的是在loader结束之后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,监听webpack打包过程中的某些节点,执行广泛的任务。webpack 在编译代码过程中,会触发一系列 Tapable 钩子事件,插件所做的,就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样,当 webpack 构建的时候,插件注册的事件就会随着钩子的触发而执行了。loader即文件加载器:用来预处理文件。
2024-03-24 21:11:57
1753
原创 AST抽象语法树&webpack逻辑解析
1. parsing:解析过程,词法分析、语法分析、构建AST;1) 词法分析:读取代码字符串,识别每一个单词及其种类,移除空格注释,按照预定规则合并成一个个的标识(token),产出一个token数组(令牌)2) 语法分析:读取令牌流,在语法约束下生成树形的中间表示,便于描述逻辑结构,给出了令牌流的结构表示,同时验证语法,如果有错误抛出语法错误。
2024-03-24 12:53:10
1173
原创 前端面试集中复习 - http篇
是浏览器的自动行为,是一种http请求方法,主要功能是一个预处理 预发送,浏览器会在请求之前浏览器主动发送一个体积较小,速度较快的请求,和服务器交互一种合适的方式传输数据,并利用服务器端的回复获取一部分服务器的状态和性能 判断浏览器是否需要做缓存等逻辑,检查访问权限,CORS等,可以顺利交互。MD5、SHA1等 => 单向不可逆,且输入敏感型,输出长度固定,所以对于数据的修改都会导致值的变化,所以可以做完整性校验,判断信息中途未经修改。握手一次就可以建立一个长链接,可以接收客户端的推送。
2024-03-20 20:28:38
953
原创 前端面试集中复习 - JS篇
对象在获取属性时会优先在自身属性查找,若找不到则会去原型链上继续找,(每个对象都有自己的【__proto__】顺序:对象本身 =>原型对象 =>直到null 终止查找)如果想要跳过自身属性使用原型链的属性,就可以使用 Object.prototype.toString.call() (见上条)。在一个函数中访问另一个函数作用域中变量的方法。提高性能,先提升,编译解析,后面多次使用到该变量或方法,就只需要去头部找到就可以,无需重复解析,这样就会更加灵活,允许补充定义,规避掉一些不必要的报错。
2024-03-19 12:09:42
1061
原创 vue插槽的几种方式
插槽的作用:可以实现子组件的个性化引用,复用更灵活,参数&层级 数据加工 个性化动态拼装。相当于在父子组件之间挖一个洞,在洞里进行连接和传递数据。在子组件中留一个空间,由父组件进行搭建。
2024-03-17 11:55:49
517
1
原创 es6语法及新特性
1.let 声明的变量具有块级作用域,这意味着它们只能在包含它们的代码块内访问。如果尝试在块级作用域之外访问 let 变量,将会抛出异常。2.const 用于定义常量,一旦被赋值,其值就不能改变。常量的赋值必须在声明时完成。复杂数据类型,如数组和对象,const只是指向该变量的存储地址,若修改复杂数据类型里的值是可以操作的。例如数组push操作,修改arr[0]=1,但不可对整个数组重新赋值var 和 let 的区别?1、var声明的变量往往会越域;let声明的变量有严格局部作用域。
2024-03-16 16:51:14
1148
1
原创 TypeScript入门
/ obj.prop = 'abc' // 不可以 会报错,未声明prop属性// ok 可继承Object上的所有方法interface 是对行为的一种抽象,具体行为由类实现,定义一套规则,后面用到的时候按规则解析校验// 接口可以只读/任意// any可以使不确定的参数等进行接收,比如后端接口返回数据age: 18,// Zhang.gender = 'female' // error 不可更改// 问题:只读和js的const有什么区别。
2024-03-15 19:27:35
466
1
原创 前端面试常见问题
1. 数据响应不一样,2.x 是getter setter 新的动态属性无法检测到,3.x是proxy,可以监听。2. 2.x用的双端diff算法,3.x是文本diff算法,类似git检测代码不一样时的方法。fiber 把原先不可中断的渲染过程变得可以中断,响应用户操作,再继续渲染,用户友好。函数内部变量可以在外部使用,问题:占用内存,容易造成内存泄漏,this指向 一个是静态的 一个是动态的。map会返回一个新的数组。1. type和instance的区别。5. 箭头函数和普通函数的区别。
2024-03-14 21:05:25
204
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人