- 博客(48)
- 收藏
- 关注
RSS订阅原创 测试框架（jest & mock）的使用和对比
前端单元测试中，Mock框架的作用是模拟（或伪造）依赖的服务或对象，以隔离被测试代码与其他系统组件的交互，确保测试的纯粹性和效率。Jest是一个由Meta（前Facebook）开发并现在由OpenJS Foundation维护的JavaScript测试框架，特别适合于前端应用的单元测试和集成测试。综上所述，Mock框架是前端单元测试中不可或缺的工具，合理使用可以大幅提升测试的效率和质量，但也要注意平衡模拟与真实环境之间的差距，确保测试的有效性。: 通常使用npm或yarn安装Jest到项目中作为开发依赖。
2024-05-16 12:51:08
458
原创 一些常见开发框架相关题目，RESTful是什么，Electron是什么，Express, Koa
Electron是一个，它允许使用Web技术（HTML, CSS, JavaScript）来开发原生桌面应用程序。这意味着开发者可以利用Web开发技能来创建既能在Windows、macOS，也能在Linux上运行的桌面应用。ipcMain，指至少两个进程或线程间传送数据或信号的一些技术或方法。IPC的方式通常有等。其中 Socket和Streams支持不同主机上的两个进程IPC。进程是计算机系统分配资源的最小单位(严格说来是线程)。每个进程都有自己的一部分独立的系统资源，彼此是隔离的。
2024-05-15 15:19:10
521
原创 常见网络攻击及解决方案
网络安全是开发中常常会遇到的情况，为什么会遇到网络攻击，网络攻击是如何进行的，如何抵御网络攻击，都是我们需要思考的问题。
2024-05-14 19:34:01
1242
原创 Vue3与Vue2的区别，在性能优化上有哪些特别之处
这些改进共同作用，使得 Vue 3 相比 Vue 2 在运行时性能、初始化速度、内存使用等方面都有了显著提升，为开发者提供了更高效的开发环境。Vue 3 是对 Vue 2 的一次全面升级，它在保留Vue原有简洁易用的基础上，通过一系列改进进一步提高了框架的性能、灵活性和开发效率。Vue 3 相较于 Vue 2 有几个显著的不同和改进，这些变化旨在提升性能、开发体验和功能性。
2024-05-14 15:21:36
620
1
原创 JavaScript 算法题目思考
有序数组，重复的数据一定是相邻的，那我们定义一个fast指针，一个slow指针，如果fast!== slow，说明fast指向的位置不是重复的，就可以将fast的值存给slow，两个指针都往前一步；若fast === slow，则表示重复，fast++，slow停在原地，等待下一个不重复的值存进来slow的位置，直到fast走完全程，得到的slow就是去重后的数组长度。中序遍历的特点是“左、根、右”，即每次遍历时，先遍历左节点的数据，之后遍历本节点，最后遍历右节点，循环往复，直至树中数据遍历完成。
2024-05-07 14:44:58
424
1
原创 HTTP 缓存 - 强制缓存和协商缓存
浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力。http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求的结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
2024-04-24 16:41:25
1023
原创 时间复杂度和空间复杂度是什么
如何衡量代码好坏，算法的考察到底是在考察什么呢？，就是我们后面要说到的时间复杂度和空间复杂度，也是学好算法的重要基石。确切的占内用存或运行时间无法进行计算，而且同一段代码在不同性能的机器上执行的时间也不一样，可是代码的基本执行次数，我们是可以算得出来的，这就是时间复杂度。平时表示算法复杂度主要就是用O()，读作大欧表示法，只用一个O()表示。
2024-04-24 16:01:30
926
原创 如何实现调接口控制 - 每次最多只能同时进行n个请求
题目：调接口时限制每次最多只能有两个接口同时请求，最终让所有接口都完成请求。思考：计数：每次调接口加一，调完减一，如果正在执行的接口 >= 2，则等待，否则继续执行如何阻止继续请求接口？第一步模拟一个调接口的方法做测试，设置一个定时器，promise延迟返回，模拟调接口的异步情况，等待时候做空定时器等待，满足条件在跳出定时器继续执行
2024-04-24 14:50:58
231
原创 内存泄露和内存溢出，有何区别，如何预防和解决
内存泄露和内存溢出是什么意思。内存泄漏是指程序在分配了内存之后，无法释放这些内存空间的现象。发生内存泄漏的代码可能会被多次执行，每次执行都可能导致一部分内存未被释放。随着程序的持续运行，这些未释放的内存会不断累积，最终可能导致程序性能下降或耗尽系统资源。内存泄漏通常是由程序中的错误代码、不正确的引用管理或资源未正确关闭等原因导致的。。内存溢出是指程序尝试分配更多的内存空间，但系统中已经没有足够的内存可供分配时所发生的情况。
2024-04-21 16:18:47
628
原创 webpack 打包优化 - splitChunks
webpack5 默认情况下只对异步模块做打包优化，额外的打包必须满足 4 个条件（webpack 的默认配置，可修改）。根据需求可调整为只对初始模块做打包优化，或者初始和异步模块一起优化。同时可配置自己的打包规则。简而言之：chunks 控制打包作用范围，其他控制打包规则。webpack5 的 splitChunks 功能是比较强大的，不过推荐还是使用默认模式，或者提取一下第三方库。
2024-04-19 21:17:19
1268
原创 js 事件模型 事件捕获、事件冒泡
什么是事件捕获、事件冒泡事件冒泡（event bubbling）和事件捕获（event capturing）是指在 DOM 树中处理事件的两种不同方式。
2024-04-17 11:31:34
909
原创 长页面多模块调接口优化
背景：查询近3年数据之类的，接口就会有大量数据需要查询做聚合，因此接口响应较慢。同时前端页面有大量不同维度展示的图表，渲染阻塞时间过长，用户体验较差，长时间loading，导致无法交互。因此前端做了一个懒加载功能。
2024-04-17 11:12:37
213
原创 浏览器跨标签页通信的方式都有哪些
localStoragewebsocketsharedWorkercookie优缺点优点: 操作简单，易于理解。缺点: 存储大小限制只能监听非己页面跨域不共享 (总体来说较为推荐)优点: 理论上可是实现任何数据共享跨域共享 缺点: 需要服务端配合增加服务器压力上手不易 (总体不推荐)优点: 理论上可以实现任何数据共享性能较好 缺点: 跨域不共享调试不方便兼容性不好 (总体推荐一般)优点: 兼容性好易于上手和理解 缺点: 有存储大小限制轮询消耗性能发请求会携带cookie (总体不推荐)
2024-04-16 11:01:57
780
原创 vue原理相关一些 题目整理
可以使用 requestAnimation 这个方法，将数据进行分割，分批次渲染，减少了 js 的连续运行时间，并且加快了渲染时间，利用加长总运行时间换取了渲染时间，用户既能快速得到反馈，而且不会因为过长时间的 js 运行而无法与页面交互。如何操作dom、更新dom？存在大量数据并且都是复杂类型的时候，会导致vue对数据的劫持时间和渲染时间变长， js 连续执行时间过长，会导致页面长时间无法交互，而且渲染时间太慢，用户一次交互反馈的时间过长。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
2024-04-12 16:24:24
412
原创 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
537
原创 call、apply、bind三者有何异同
call bind apply的异同？相同：用来指定一个函数内部的this的值，都可以手动改变原本this的指向；不同：call和apply传参不同，call是依次传参，apply是数组传入，bind是需要执行的，返回一个函数。
2024-04-04 17:46:30
870
原创 axios封装，请求取消和重试，请求头公共参数传递
axios本身功能已经很强大了，封装也无需过度，只要能满足自己项目的需求即可。可按需封装终止请求或请求重发。
2024-03-31 22:16:05
692
原创 浏览器渲染，重排和重绘，如何优化
documentFragment不是真实DOM树的一部分，它的属性变化不会直接导致DOM树的更新，故频繁改动不会有性能问题。2. 尽量使用脱离文本流的动画主体，比如让它fixed 或者absolute，脱离文档流，将全局的重排转化为局部的重排，提升一部分性能;浏览器解析页面内容时会生成一个渲染树，当渲染树中部分或全部元素的尺寸、结构、内容发生变化是，浏览器就会出发重新生成渲染树的方法，进而进行重新渲染。一般情况下，动画都会频繁操作dom，会导致被操作的dom比较多的时候页面性能降低。
2024-03-29 16:03:40
319
原创 CDN是做什么的，CDN和DNS有什么异同？
用户向CDN全局负载均衡设备发出请求，CDN全局负载均衡设备会根据IP+url选择一台用户所属区域内的负载均衡设备，选择合适的空闲的服务器提供服务，用户就向这个服务器发出请求再返回所需内容。浏览器输入地址之后，先在浏览器缓存中查找是否有该域名，没有的话再去操作系统缓存中查找（host），路由器缓存，ISP的DNS服务器，根域名服务器，按此顺序查找。DNS解析之后，指向CDN专用的DNS服务器，会将域名解析权交给CNAME指向的CDN专用的DNS服务器，CDN就将全局负载均衡设备返回给用户。
2024-03-29 16:01:54
594
原创 前端性能优化
思考：从A页面 到B页面，会经历哪些步骤？跳转特别慢，如何优化？首先需要知道到底是哪一步特别慢，可以利用浏览器提供的钩子埋点，检测每个步骤的耗时：chrome提供的performance。
2024-03-28 20:10:28
1049
原创 webpack为什么要使用loader，如何手写loader
webpack是一个打包工具，即webpack会将一切文件视为模块，但是webpack在打包的时候只是认识JS文件或者JSON文件，并不认识CSS文件，png图片等，如果想让webpack能够在打包的时候识别其他文件，就必须要使用loader，即loader的作用就是让webpack拥有可以加载和了解除JS文件以外的其他文件。
2024-03-24 21:36:01
485
原创 webpack原理之-打包流程&热更新HMR
plugin即为插件，是一个扩展器，丰富webpack本身，增强功能 ，针对的是在loader结束之后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。loader即文件加载器：用来预处理文件。
2024-03-24 21:11:57
1198
原创 AST抽象语法树&webpack逻辑解析
1. parsing：解析过程，词法分析、语法分析、构建AST；1) 词法分析：读取代码字符串，识别每一个单词及其种类，移除空格注释，按照预定规则合并成一个个的标识（token），产出一个token数组（令牌）2) 语法分析：读取令牌流，在语法约束下生成树形的中间表示，便于描述逻辑结构，给出了令牌流的结构表示，同时验证语法，如果有错误抛出语法错误。
2024-03-24 12:53:10
807
原创 前端面试集中复习 - http篇
是浏览器的自动行为，是一种http请求方法，主要功能是一个预处理 预发送，浏览器会在请求之前浏览器主动发送一个体积较小，速度较快的请求，和服务器交互一种合适的方式传输数据，并利用服务器端的回复获取一部分服务器的状态和性能 判断浏览器是否需要做缓存等逻辑，检查访问权限，CORS等，可以顺利交互。MD5、SHA1等 => 单向不可逆，且输入敏感型，输出长度固定，所以对于数据的修改都会导致值的变化，所以可以做完整性校验，判断信息中途未经修改。握手一次就可以建立一个长链接，可以接收客户端的推送。
2024-03-20 20:28:38
882
原创 前端面试集中复习 - JS篇
对象在获取属性时会优先在自身属性查找，若找不到则会去原型链上继续找，（每个对象都有自己的【__proto__】顺序：对象本身 =>原型对象 =>直到null 终止查找）如果想要跳过自身属性使用原型链的属性，就可以使用 Object.prototype.toString.call() （见上条）。在一个函数中访问另一个函数作用域中变量的方法。提高性能，先提升，编译解析，后面多次使用到该变量或方法，就只需要去头部找到就可以，无需重复解析，这样就会更加灵活，允许补充定义，规避掉一些不必要的报错。
2024-03-19 12:09:42
1001
原创 vue插槽的几种方式
插槽的作用：可以实现子组件的个性化引用，复用更灵活，参数&层级 数据加工 个性化动态拼装。相当于在父子组件之间挖一个洞，在洞里进行连接和传递数据。在子组件中留一个空间，由父组件进行搭建。
2024-03-17 11:55:49
376
1
原创 es6语法及新特性
1.let 声明的变量具有块级作用域，这意味着它们只能在包含它们的代码块内访问。如果尝试在块级作用域之外访问 let 变量，将会抛出异常。2.const 用于定义常量，一旦被赋值，其值就不能改变。常量的赋值必须在声明时完成。复杂数据类型，如数组和对象，const只是指向该变量的存储地址，若修改复杂数据类型里的值是可以操作的。例如数组push操作，修改arr[0]=1，但不可对整个数组重新赋值var 和 let 的区别？1、var声明的变量往往会越域；let声明的变量有严格局部作用域。
2024-03-16 16:51:14
777
1
原创 TypeScript入门
/ obj.prop = 'abc' // 不可以 会报错，未声明prop属性// ok 可继承Object上的所有方法interface 是对行为的一种抽象，具体行为由类实现，定义一套规则，后面用到的时候按规则解析校验// 接口可以只读/任意// any可以使不确定的参数等进行接收，比如后端接口返回数据age: 18,// Zhang.gender = 'female' // error 不可更改// 问题：只读和js的const有什么区别。
2024-03-15 19:27:35
351
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
156
1
原创 渐进增强和优雅降级
而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器(如 IE、Mozila 等)的前一个版本。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。(1)优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
2024-03-14 20:23:55
106
1
原创 Vue 3项目搭建
1. 首先确保我们的电脑安装了node，如何确认？打开命令提示符，搜索栏输入 cmd，输入。输入 vue --version 检查是否安装成功，若出现版本号则表示安装成功。如果出现正常的版本号则表示已安装，可以在node官网进行下载，进入创建目录文件夹，vue create 你的项目名。创建项目时默认选中vue3，可切换vue版本。3. 利用vue脚手架创建vue项目。4. 进入文件夹就可以启动项目了。2. 安装vue脚手架 cli。可以下载稳定版本均可使用。
2024-03-09 10:40:11
213
1
原创 从输入URL到页面加载发生了什么（DNS解析和优化，TCP连接）
浏览器在解析的过程中，如果遇到请求外部资源时，如图像、iconfont等，浏览器将异步请求下载该资源，并不会影响HTML文档进行加载，但是当文档加载过程中遇到js文件，HTML文档会挂起渲染过程，要等到文档中js文件加载完毕并解析执行完毕，才会继续HTML的渲染过程。CSS的文件加载不影响JS文件的加载，但是却影响JS文件的执行。DNS负载均衡：DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器距离用户的地理位置的距离等等，这种过程就是DNS负载均衡，又叫做DNS的重定向。
2024-02-27 15:22:02
849
原创 js事件循环机制 Event Loop
不同的任务源会被分配到不同的 Task 队列中，任务源可以分为微任务（microtask）和宏任务（macrotask），在ES6规范中，微任务称为 jobs，宏任务称为 task。本质上来讲，JS中的异步行为还是同步行为。背景：JS是一种单线程语言，一次只能执行一个任务，如果有多个任务，就排队，执行完一个再执行下一个任务，会造成资源浪费，无法及时响应用户的行为。在程序中设置两个线程，一个负责程序本身的运行，称为“主线程”，另一个负责主线程与其他进程的通信，被称为“Event Loop线程”（消息线程）。
2024-02-27 13:41:40
145
原创 Vue组件间通信方式
具体步骤：vuex更新时同时出发浏览器缓存，确保刷新之前的缓存数据为最新，在页面刷新时，优先调用缓存数据更新vuex，若接口提供了最新数据则调取接口更新。在刷新前将vuex中的数据直接保存到浏览器缓存中，页面刷新后，在页面刷新的时候获取缓存数据，使之动态更新vuex数据，获取子组件: this.$refs.children 或 this.$refs["children"]1. props 传递数据，父组件传递给子组件，在使用子组件时通过标签中字面量来传递值。2. $emit 子组件反馈给父组件的方法。
2024-02-27 11:07:51
268
原创 Vue生命周期
触发时机上 created 是比 mounted更早的，放在mounted中的请求有可能导致页面闪动，因为此时dom结构已经生成，但如果放在页面加载之前完成请求，则不会出现此情况。beforecreate → 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务。mounted → 初始化结束，dom已创建，可用于获取访问数据和dom元素。是在组件实例一旦创建完成的时候立刻调用，这时候页面的dom节点并未生成；beforeMount → 未执行渲染、更新，dom未创建。
2024-02-26 11:50:42
137
1
原创 前端常见面试题，三次握手四次挥手
虚拟IP发送大量请求，服务器端收到之后就会返回确认信息，由于客户端不存在所以收不到反馈，只能重发，直到超时删除队列，在HTTP1.x 中，并发多个请求需要多个TCP 连接，浏览器为了控制资源会有6-8个TCP 连接都限制。同时，自己自己还要发送SYN请求信息，将SYN位置为1，Sequence Number为y；客户端发送连接请求报文段，将SYN位置为1，Sequence Number为x；服务器端将上述所有信息放到一个报文段（即SYN+ACK报文段）中，一并发送给客户端，服务器收到客户端的SYN报文段，
2023-08-11 10:46:03
184
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人