- 博客(208)
- 收藏
- 关注
RSS订阅原创 vue-quill-editor支持图片缩放和粘贴图片过来的时候自动过滤
【代码】vue-quill-editor支持图片缩放和粘贴图片过来的时候自动过滤。
2023-08-30 17:36:51
222
原创 element-ui动态v-show设置tabel列时,无效果，v-if设置时值会错位
1、element-ui动态v-show设置tabel列时,无效果，2、v-if设置时，值会错位。
2023-05-31 14:47:50
1274
2
原创 forEach、map、flatMap的区别
1、forEach()返回undefined2、不支持链式调用，forEach性能会好一些，因为不用分配内存空间存储新数组并返回3、除了抛出异常throw 以外，没有办法中止或跳出(break,continue,return)循环。
2023-05-13 10:42:30
199
1
原创 js注意点
const a = b = 3 实际上等于 const a = 3 ，b = 3。又因为这是自执行函数，所以 在作用域外访问，首先先看a和b的值为多少，a 为 undefined。
2023-02-06 19:26:20
41
原创 nodejs事件循环
主线程将所有任务都放在循环队列中，然后由底层的libuv库从循环事件队列中取出任务分配给不同的线程去处理，主线程同时也会进行回调处理，整个过程形成事件循环nodejs实现异步机制的核心便是libuv，libuv承担着nodejs与文件、网络等异步任务的沟通桥梁通过事件驱动模型实现了高并发和异步 I/O ，适合处理I/O密集型任务。
2022-12-02 11:03:22
1812
原创 基础类型存放在栈上，引用类型存放在堆上，请问是为什么？ 字符串是存放在栈上么？
记住一句话：能量是守衡的，无非是时间换空间，空间换时间的问题堆比栈大，栈比堆的运算速度快，对象是一个复杂的结构，并且可以自由扩展，如：数组可以无限扩充，对象可以自由添加属性。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。相对于简单数据类型而言，简单数据类型就比较稳定，并且它只占据很小的内存。不将简单数据类型放在堆是因为通过引用到堆中查找实际对象是要花费时间的，而这个综合成本远大于直接从栈中取得实际值的成本。所以简单数据类型的值直接存放在栈中。
2022-11-16 17:18:41
868
原创 JS 0.1+0.2为什么不等于0.3
简单地说，number在内存中是以64位二进制存储的，所以0.1 和 0.2 的二进制表示形式是不精确的，所以它们相加时，结果不是精确地 0.3。而是 非常 接近的值：0.30000000000000004，但是如果你的比较失败了，“接近”是无关紧要的。最常见的做法是使用一个很小的“错误舍入”值作为比较的 容差。这个很小的值经常被称为“机械极小值（machine epsilon）”， 对于 JavaScript 来说这种 number 通常为 Number.EPSILON。
2022-11-16 15:41:17
709
原创 Vue2.0 和 Vue3.0 Dom Diff 对比
diff算法的目的是为了找到哪些节点发生了变化，哪些节点没有发生变化可以复用。如果用最传统的diff算法，如下图所示，每个节点都要遍历另一棵树上的所有节点做比较，这就是o(n^2) 的复杂度，加上更新节点时的o(n)复杂度，那就总共达到了O(n^3)的复杂度，这对于一个结构复杂节点数众多的页面，成本是非常大的。实际上vue和react都对虚拟dom的diff算法做了一定的优化，将复杂度降低到了o(n)级别，具体的策略是：同层的节点才相互比较从根节点起遍历整个节点数，只对同层的节点进行相互比较。
2022-10-13 17:11:23
1305
原创 js对象传值传的是引用
答案为：{name: 123, siteUrl: ‘http://www.baidu.com’}因为 对象传值传的是引用，引用是copy给函数形参。
2022-10-10 10:26:31
130
原创 js非匿名自执行函数，函数名只读
这里输出就是20了，因为 b = 20;相当于替换掉全局变量的 b 的值。这里 b = 20；实际上是更改b函数名，但是又修改不了，所以也是无效语句。所以答案显而易见， 为 [Function b]类似于const，不能被修改；
2022-09-27 10:33:48
166
原创 面试官：运行 npm run xxx 的时候发生了什么？
npm run xxx的时候，首先会去项目的package.json文件里找scripts 里找对应的xxx，然后执行 xxx的命令，例如启动vue项目 npm run serve的时候，实际上就是执行了vue-cli-service serve 这条命令package.json文件。
2022-08-04 17:03:20
265
原创 JavaScript 中如何取消请求
众所周知，JavaScript实现异步请求就靠浏览器提供的两个API——XMLHttpRequest和Fetch。我们平常用的较多的是Promise请求库axios，它基于XMLHttpRequest。
2022-07-27 10:29:37
3608
原创 javascript设计模式之适配器模式
个人认为适配器模式其实是一种亡羊补牢式的设计模式，如果在项目开发的开始阶段我们就知道我们期待的数据格式或者方法名等，我们就可能永远都用不到适配器模式；但是项目的迭代往往是不可预期的，当项目迭代之后数据格式或者方法名发生变化之后，我们通常可以使用适配器模式来进行适配解决；当然了，最好的解决办法就是项目开发过程中前后端协商讨论数据格式、文件名等代码规范，这样是对项目的开发效率是会有很大的提升的；...
2022-07-26 11:57:37
404
原创 tree shaking的原理是什么?
别名叫摇晃树，最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术tree-shaking会在打包过程中 静态分析 模块之间的导入导出，确定哪些模块导出值没有被使用，并将其删除，从而实现了打包产物的优化。在之前CommonJs、AMD、CMD的模块化方案中，这种导入导出是动态的，难以预测的，因此在打包阶段，是无法分析哪些模块被使用，例如：而ES 静态module方案下，模块之间的依赖关系是高度确定的静态的，与运行状态无关，可以进行可靠的静态分析，因此整个依赖树可以被静态地推导
2022-07-14 15:13:22
2813
原创 JS 数组的排序 sort方法详解
Array.prototype.sort()sort() 方法用于对数组的元素进行排序，并返回数组。如果省略，sort方法会调用数组中每一项的toString()方法，然后按照unicode编码进行排序，如果数组含有undefined元素，它们将会被排到尾部。数组元素超过2位数排序就出了问题，上面已经说过了sort排序是按照元素的unicode码来进行排序了，先对每一项的第一位按照ascii从小到大进行排序，如果第一位相同再将第二位按照unicode从小到大进行排序。因为 1、2、3、6、7的unic
2022-06-29 14:06:43
6613
原创 实现JavaScript对象迭代(iterator)功能
当我们需要对一个对象进行使用for of进行遍历时，这个时候就会出现错误，如下：对于这种报错是由于：js的内置类型并没有实现iterable接口譬如：String、Array、TypedArray、Map 和 Set，都是可迭代对象。可迭代对象， 需要具备 Symbol.iterator 和 next 这两个函数，即可用 for…of 进行迭代，...
2022-06-27 17:51:52
886
原创 svg和canvas的区别
1.可伸缩的矢量图形2.是基于xml进行绘制图形3.svg放大或者改变尺寸情况下图形质量不会有损。4.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，1.h5新增属性2.基于js进行绘制图形1、svg每个图形都可以看作是一个对象，如果对象属性发生变化，浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成，不会再得到浏览器的关注。如果图形位置改变，浏览器需要重新绘制。2、canvas依赖分辨率，svg不依赖分辨率。3、canvas不支持事件处理器，svg支持
2022-06-27 16:17:03
1728
原创 HTML5的离线储存
离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示使用方法： （1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：（2）在 cache.manif
2022-06-27 14:32:24
1547
1
原创 z-index属性在什么情况下会失效？
通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。z-index属性在下列情况下会失效：...
2022-06-27 11:48:32
1116
原创 canvas 实现图片、页面新增水印
给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展示一个图片使用的是img标签；绘制功能用canvas实现。添加水印的功能需要在img标签、ca
2022-06-23 17:44:35
1029
1
原创 webpack配置优化
多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader。由于启动项目和打包项目都需要加速，所以配置在webpack.base.jscache-loader缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader，由于启动项目和打包项目都需要加速，所以配置在webpack.base.js开启热更新比如你修改了项目中某一个文件，会导致整个项目刷新，这非
2022-06-23 16:35:11
608
原创 HTTP/0.9 到 HTTP/3.0
HTTP协议是HyperText Transfer Protocol（超文本传输协议）的缩写，它是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。伴随着计算机网络和浏览器的诞生，HTTP1.0也随之而来，处于计算机网络中的应用层，HTTP是建立在TCP协议之上，所以HTTP协议的瓶颈及其优化技巧都是基于TCP协议本身的特性，例如TCP建立连接的3次握手和断开连接的4次挥手以及每次建立连接带来的RTT延迟时间。每次请求都必须新建一次连接(connection)，必须通过tcp的三次握手
2022-06-15 14:33:14
583
原创 深入理解web Worker
我们都知道js是单线程模型。也就是说一次只能处理一件事情，前面的事情没有完毕，后面的事情要等待前面的事情处理完毕后才能执行。随着多核CPU的出现，我们可以最大限度的利用cpu多核，来提高js的性能。Worker接口可以创建后台任务。即可以给js运行新增线程。用于处理一些耗时、耗费性能的任务（异步的除外）。要解决的问题是：1.解决页面卡死问题。2.发挥多核CPU的优势，提高js性能。1.非同源限制(本地代码如果以盘符的方式打开也不行，因为没有源啦)主线程代码与Worker线程代码必须同源才能一起正常工作。2
2022-06-14 17:51:17
614
原创 白屏时间、首屏时间
浏览器显示第一个字符或者元素的时间可使用 Performance API 时白屏时间 = firstPaint - performance.timing.navigationStart;白屏时间 = firstPaint - pageStartTime;首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间，dom处于比较稳定的阶段。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过1
2022-06-10 16:28:42
1019
原创 前端实现断点下载
当下载一个很大的文件时，如果下载到一半暂停，如果继续下载呢？断点下载就是解决这个问题的。所谓断点下载就是可以一部分一部分的下载，不用一次性把文件数据全部拿到。If-Range 请求头字段用来使得 Range 头字段在一定条件下起作用If-None-Match：如果ETag不匹配If-Match：如果ETag匹配HTTP HEAD方法（因为安全策略，浏览器中通过XMLHttpRequest只能获取部分头部信息）请求资源的头部信息, 并且这些头部与 HTTP GET 方法请求时返回的一致。 该请求方法的一个使
2022-06-10 11:27:45
1624
6
原创 vue中自定义指令的使用
权限方法，随便举个例子function checkArray(value) { let arr = [1, 2, 3]; return arr.indexOf(value) > -1;}判断用户是否有权限展示如果没有权限则不渲染Vue.directive('permission', { //元素插入 inserted(el, binding) { let value = binding.value; if (value) { //判断元素是否有权
2022-05-26 16:44:52
82
原创 require.context的使用
解释require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块使用说明require.context函数接受三个参数directory {String} -读取文件的路径useSubdirectories {Boolean} -是否遍历文件的子目
2022-05-26 16:03:54
1080
原创 vue实现 虚拟dom生成真实dom和更新时候的对比
虚拟dom生成真实domfunction patch(vNode) { let tag = vNode.tag; //目标元素 不可或缺 let attrs = vNode.attrs || {}; //属性 let children = vNode.children || [] //子节点 if (!tag) { return null; } //创建对应的dom let ele = document.createElement(t
2022-05-20 16:33:12
480
原创 Object与Map区别
概念Object在ECMAScript中，Object是一个特殊的对象。它本身是一个顶级对象，同时还是一个构造函数，可以通过它（如：new Object()）来创建一个对象。我们可以认为JavaScript中所有的对象都是Object的一个实例，对象可以用字面量的方法const obj = {}即可声明。MapMap是Object的一个子类，可以有序保存任意类型的数据，使用键值对去存储，其中键可以存储任意类型，通过const m = new Map();即可得到一个map实例。访问map
2022-05-18 09:58:28
3357
原创 Vue 模板是如何编译的
认识模板编译我们知道 <template></template> 这个是模板，不是真实的 HTML，浏览器是不认识模板的，所以我们需要把它编译成浏览器认识的原生的 HTML这一块的主要流程就是提取出模板中的原生 HTML 和非原生 HTML，比如绑定的属性、事件、指令等等经过一些处理生成 render 函数render 函数再将模板内容生成对应的 vnode再经过 patch 过程( Diff )得到要渲染到视图中的 vnode最后根据 vnode 创建真实的 DOM
2022-05-17 15:31:53
551
原创 async/await 进行错误处理
1、try/catch一般情况下 async/await 在错误处理方面，主要使用 try/catch，像这样const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve('fetch data is me') }, 1000) })}(async () => { tr
2022-05-17 11:43:01
3162
原创 GPU硬件加速的原理
引入面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。首先，我们先从 CPU 和 GPU 开始了解。CPU 和 GPU 的区别CPU 即中央处理器，GPU 即图形处理器。CPU是计算机的大脑，它提供了一套指令集，我们写的程序最终会通过 CPU 指令来控制的计算机的运行。它会对指令进行译码，然后通过逻辑电路执行该指令。整个执行的流程分为了多个阶段，叫做流水线。指令流水线包括取指令、译码、执行、取数、写回五
2022-05-16 17:43:34
5409
原创 重绘、重排区别及如何减少
重绘当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。重排（回流）当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。关系重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。触发重排的方法-页面初始渲染，这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺
2022-05-12 15:42:10
660
原创 实现可过期的localstorage数据
惰性删除惰性删除是指某个键值过期后，该键值不会被马上删除，而是等到下次被使用的时候，才会被检查到过期，此时才能得到删除。实现方法是，存储的数据类型是个对象，该对象有两个key，一个是要存储的value值，另一个是当前时间。获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。定时删除每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。实现过程
2022-05-12 14:25:20
341
原创 vue Diff算法比较过程
第一步：patch函数中对新老节点进行比较如果新节点不存在 就销毁老节点 如果老节点不存在，直接创建新的节点 当两个节点是相同节点的时候，进入 patctVnode 的过程，比较两个节点的内部 第二步：patchVnode函数比较两个虚拟节点内部 如果两个虚拟节点完全相同，返回 当前vnode 的children 不是textNode， 再分成三种情况 - 有新children，没有旧children，创建新的 - 没有新children，有旧children，删除旧的
2022-05-10 11:42:28
953
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人