- 博客(34)
- 收藏
- 关注
RSS订阅原创 vue从template模板到真实渲染在页面上发生了什么
Diff算法是虚拟DOM技术的核心，用于高效比较新旧虚拟DOM树的差异并最小化真实DOM操作第一步：diff算法的入口函数：patch函数，主要判断新旧节点是不是同一个节点，然后交由不同的逻辑进行处理。// 判断传入的第一个参数，是DOM节点还是虚拟节点// 传入的第一个参数是DOM节点，此时要包装成虚拟节点// 判断oldVnode和newVnode是不是同一个节点//是同一个节点，则进行精细化比较else {// 不是同一个节点，暴力插入新的，删除旧的。
2025-09-24 17:40:31
624
1
原创 vue生命周期
每个组件都相当于一个构造函数（方便复用），页面上创建一个组件，相当于这个组件的构造函数去new一个实例，在beforeCreate这个阶段，相当于构造函数刚开始执行，初始化还没有进行完毕。beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。都是处于不可用状态。beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。但是还没有挂载到页面中，此时，页面还是旧的。
2025-09-20 14:09:21
891
原创 原型和原型链详解&手写new操作符
那至于原型链的理解，就是将原型一层层的找下去，比如我们的实例对象有自己的原型对象，那我们这个原型对象也是一个对象，也有自己的_proto_属性去指向他的原型，这样一层层串起来就构成了原型链。首先：所有的js对象都有一个原型（当然，除了null），这个原型我们通过_proto_或者Object.getProtoTypeOf来访问，访问到的就是我们对象的原型。重写原型会切断现有实例与原型的联系：若直接替换prototype对象，已创建的实例仍指向旧原型，新实例指向新原型。
2025-09-18 00:14:27
800
原创 HTML简单面试题汇总【持续更新】
面试问问题总是会层层深入，因此这份面试题排序按照一个问题引发的另一个问题进行排序，比如问html语义化会引出回答SEO，SEO会引出爬虫问题，爬虫会引出权重问题，最终引出如何做优化的问题。
2025-09-17 17:11:33
559
原创 从浏览器角度讲进程和线程
查资料的过程中发现以谷歌浏览器为例，先后出现了网络进程和网络线程这两种说法，乍一看觉得不对，既然网络进程已经被独立出来，为什么别的进程（例如主进程）还要分出来一个网络线程呢？共享资源不同：多个进程间不能共享资源，每个进程有自己的堆、栈、虚存空间（页表）、文件描述符等信息，而线程可以共享进程资源文件（堆和方法区）。从属关系不同：进程是正在运行程序的实例，进程中包含了线程，而线程中不能包含进程。
2025-09-17 14:16:10
1073
原创 js中异步编程的实现方式【详细】
Promise是异步编程的一种解决方案，Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。首先，我已知promise的then方法返回的是一个新的promise,从这段代码可以看出，p1的then方法的成功回调中返回一个字符串—‘下一步’，直接被下一个then方法捕获了。当你then里面的回调函数返回一个promise时候，then返回新的promise会跟随你在回调函数中返回的promise的状态[你也可以看成同一个promise,没有差别，反正都是执行相同的回调]。
2025-09-16 23:32:09
979
原创 对浏览器事件机制的理解
大量元素需要绑定的情况吧，无限滚动列表、动态渲染的表格数据，比如数据可能动态生成，越来越多，或者会有一些动态生成的dom元素不好绑定【vue已经不需要手动做事件委托了，Vue的模板语法已优化事件处理机制，直接通过@click绑定到子元素时，Vue会复用事件处理器而非重复创建，因此短列表或静态内容无需强制使用事件委托】当然，事件委托也是有局限的。也可以使用capture来指定捕获阶段执行，这样如果父元素绑定的也是捕获事件，那就会先执行父元素的回调，再执行子元素的回调。， 事件除了用户触发的动作外，还可以是。
2025-09-11 23:26:12
441
原创 js的事件循环机制的理解
这是由JS的用途决定的，JS的用途是与用户交互，以及操作DOM，假设JS有两个线程，一个要在某个DOM节点上添加内容，一个要删除这个节点，那浏览器该以哪个为准呢，事情就变得复杂了。【如果是这样的话，那一个3秒的宏任务，会和一个耗费8秒的微任务几乎同时分别推入宏任务队列和微任务队列，那这个时候如果调用栈执行空了，先取出这个微任务执行，那可能8s的打印出来了，定时器还没打印出来，同步任务与宏任务：整个脚本（主线程代码），即script标签里的代码，本身就是一个宏任务，主线程执行脚本中的同步代码属于初始宏任务。
2025-09-11 17:15:25
555
原创 data为什么是一个函数而不是对象
那我们在所有实例中访问data,实际上都会去访问构造函数身上的原型对象，那我们修改这个data的某个值，实际上修改了堆中存放的数据，而栈中的地址是不发生改变的，这就会导致所有的实例访问到的数据都会同样改变，无法做到数据隔离。这个例子中，构造函数的原型的data属性，实际上存放了{message：10}这个对象在栈中的指针，而这个{message：10}对象实际上是存放在堆中的。我们知道，vue的每个组件都相当于构造函数，在页面上的每次使用都相当于构造函数进行了一次实例化。
2025-09-11 12:06:49
173
原创 request to https://registry.npm.taobao.org failed, reason: certificate has expired
安装依赖的时候报错certificate has expired，简单意思就是证书过期了，尝试配置。意思是关闭严格协议检查。
2024-03-07 16:14:31
327
原创 前端使用jsrsasign签名和验签，加密解密
/ 传入key实例, 初始化signature实例。// 方式1: 先建立 key 对象。// 创建 Signature 对象。// 签名, 得到16进制字符结果。
2024-03-01 15:21:28
2113
原创 小程序带参跳转第三方小程序
这种情况下B会跳转至A当时跳过去的页面，但是extraData的内容需要在app.vue的onShow里面获取。这种情况可以在app.vue的onShow方法中把获取到的数据存入vueX或者存到本地。同一个方法，这种情况可以直接在跳转的时候设置跳回A的页面path，如果path带上query参数，那在A的页面就可以直接在onLoad中获取数据，（如果是跳回原页面，onload可能不执行）要求点击A某页面上的领取按钮，跳转至B，B拉取用户授权或强制用户登录后将得到的openid等信息在跳转的时候返回给A。
2024-02-29 16:11:37
842
原创 js面试题
声明一个函数，然后立即调用这个函数就叫做立即执行函数，优点：1不必为函数命名，避免了污染全局变量2立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量})(12345)比如你想在页面加载完成后做一些事情，比如更改一个dom元素的样式，但是这个更改在初始化以后只需要做一次，那你完全可以把要更改的内容写在一个立即执行函数里面，这样函数里面用的变量在执行完成后就会回收掉，避免污染全局变量。
2023-12-22 15:35:04
434
原创 利用html2Canvas将表格下载为html
平常做的下载都是后端返回二进制流，这次前端做下载那就必须把页面先画出来，因为下载下来的表格在页面上是不显示的，所以要画出来再隐藏一下，隐藏的时候可选方式有很多，但是v-if,v-show这种会导致页面重构的不建议使用（事实也证明v-if和v-show在这种场景是不能使用的，因为这种场景要求表格是实际存在的元素）所以我选择了绝对定位加上z-index:-999的方式，让表格隐藏在文档流下面。表格画好以后，考虑两种下载的方法，一种是将表格转成图片，然后将图片转成html页面下载。1：html代码-表格样式。
2023-12-22 15:22:42
994
原创 ios下微信小程序中input框漂移问题
不断尝试的过程中发现，如果删除小程序，重新进入，第一次进入这个购物车页面的时候，不论如何滑动，这个input框都是正常显示的，离开页面第二次进入就会出现错位的问题，这时候这个bug原因就变的清晰了起来。一旦明确了这个问题，我就尝试了一种最简单的方法，在弹窗上增加了v-if判断，强制每次进入都重新渲染一遍，至此，困扰半个月的问题解决了。最近开发一个弹窗购物车的时候出现了滑动弹窗时里面的数字input框错位的问题，上微信社区看了好多问答仍然没有解决。同时这个问题还是一个兼容性问题，只在苹果手机上出现。
2023-12-22 15:04:54
1226
原创 ios下tab切换的时候除active的tab以外，部分tab被隐藏不显示
就发现写了一个v-if，这种频繁的切换在pc端我们是不能使用v-if的，会有性能问题，但是因为ios小程序不支持v-show,所以一般还是用v-if，我先把这个v-if给注释掉了，这个v-if是给active的tab下面加那个条形边框用的，去掉之后发现就正常了，然后我就去手机上看，然后想到我的手机是ios的嘛，就想着看下安卓的是不是也有这样的问题，结果安卓是好的，那就是ios的渲染问题了，就觉得很简单嘛，打开模拟器，发现模拟器上显示正常的，那凉凉，这种就不是简单的样式问题了，可能是真机上一些渲染的问题了，
2023-12-14 15:42:31
538
原创 git pull 报错 warning: ignoring broken ref refs/remotes/origin/HEAD
unable to resolve reference ‘refs/remotes/origin/master’: reference broken大概就是报这两个错，偶尔操作不慎会造成这样的后果，字面意思就是远程分支和本地分支对应不起来了，大概率是本地分支坏了把.git/refs/heads(存放本地分支)和.git/refs/remote/origin(存放远程分支) 两个文件夹中报错的分支删掉，然后执行 git fetch（把远程仓库的分支更新到git），fetch成功后就不会报错了，剩下的随便操
2021-11-29 15:03:08
5835
2
原创 实现echarts中国地图迁徙图
最近做的项目需要实现一个中国地图上烟草流动走向的需求，因为之前没有做过，遇到了不少问题，因此将过程记录下来首先安装echarts,可以参考另一篇博文,链接如下：angular项目中使用echarts安装好以后测试一下页面中是否可以正常使用，就可以开始实现迁徙图了，第一步，首先要将中国地图显示出来，即引入china.js文件，因为echarts现在不提供地图文件了，所以我使用了网上大佬提供的china.js文件，放到你的工具文件夹下面，然后在页面中引入，比如在ts文件里如下引入，我使用的requi
2021-04-25 15:19:33
2782
原创 angular项目中使用echarts
第一步安装echartnpm install echarts --save第二步安装angular对应echart的插件npm install ngx-echarts@3.2.0 --save第三步在angular.json文件中引入echarts.js（这一步或许打包后有用不清楚，可以跳过）{ ... "build":{ ... "options":{ ... "scripts":[
2021-04-25 14:07:38
1131
原创 项目中忽略或者禁用eslint
找到项目下面的eslintignore文件，将想禁用的文件或者文件夹添加进去例如node_modules/src/main/docker/src/main/webapp/--------我新添加的src/test/javascript/protractor.conf.jssrc/test/javascript/jest.conf.jswebpack/target/build/node/postcss.config.js...
2021-04-25 11:19:40
886
原创 为什么在页面上操作几次后就变的很卡，接口长时间处于pending状态
首先考虑浏览器的请求限制问题，谷歌浏览器限制同页面同时只能处理六个请求，点开network查看所有资源请求，看看是否有请求阻塞。第二考虑项目中是否使用了echarts,百度地图等工具且数据量较大，如果使用在路由跳转之前对实例进行清空处理。比如：ngOnDestroy() { this.chart1.clear(); this.chart2.clear(); this.chart3.clear(); this.chart4.clear(); }...
2021-04-25 10:49:31
2624
原创 echarts传入空数组原来的数据图层仍然显示
尝试1： this.chart3 = echarts.init(document.getElementById('echart3')); this.chart3.resize(); this.chart3.setOption(option, true); this.chart3.resize();先resize()一下再setOption()，我是用这种方法解决的。至于为什么用
2021-04-14 15:37:33
1307
3
原创 echarts使用百度地图超出容器问题
百度地图会默认添加一个绝对定位的样式，但是绝对定位是相对于离他最近的position值为relative的容器的，因此只需要给容器添加position：relative属性值即可解决<div id="echart5" echarts style="height: 100%; width: 100%;position: relative;"></div>...
2021-03-17 10:43:48
1508
原创 echarts地图首次进入坐标偏移，鼠标点击或拖拽后恢复问题
尝试设置：animation:false 即可解决 let option = { animation: false, bmap: {}}
2021-03-16 19:08:20
1543
原创 鼠标右键未响应
鼠标右键未响应解决方法1：终端输入regedit，打开注册表编辑器找到 HKEY_CLASSES_ROOT/Directory/Background/shellex/ContextMenuHandlers下面的key值只留下一个new和一个workfolder的key值。即可修复。解决方法2：如果遇到顽固类型（方法1无法解决或者重启后注册表复原等）电脑管家的工具箱中搜索管理右键菜单然后全部反选，看看是否解决。如果解决，就一个一个试一试，发现造成影响的进程以后禁用...
2020-12-18 11:35:23
1644
原创 npm安装taro-ui出错
解决方法，不使用npm.搜索powershell以管理员身份运行，然后使用yarn add taro-ui 安装即可
2019-11-25 20:48:38
2231
原创 PowerShell yarn : 无法加载文件 C:\Users\Admin\AppData\Roaming\npm\yarn.ps1,因为在此系统因为在此系统上禁止运行脚本。
解决方法1：搜索cmd，以管理员方式运行powershell2：使用命令更改计算机的执行策略PS C:\Users\Administrator> set-ExecutionPolicy RemoteSigned执行策略更改执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=1351...
2019-11-25 20:45:49
21828
3
原创 npm包管理器使用淘宝镜像
由于npm在安装模块时是从http://registry.npmjs.org下载对应的插件包，因为该网站服务器位于国外，所以经常下载缓慢或出现异常，在国内可以使用淘宝镜像进行安装，或者使用cnpm。淘宝npm镜像搜索地址：http://npm.taobao.org/registry地址：http://registry.npm.taobao.org/cnpmjs镜像搜索地址：http://...
2019-11-22 09:58:04
287
原创 Eslint规范导致报错
比如单引号双引号问题，括号分号空格问题1：在项目根目录下面新建 .prettierrc文件2：文件编码格式为Json格式3：在文件中进行相应配置，常见配置如下{ "printWidth": 100, //每行最多多少个字符换行 "singleQuote": true, //单引号 "trailingComma": "es5", // 对象属性最后有 "," "semi":...
2019-11-21 11:17:37
1022
原创 node-sass安装失败经验
提示缺少Python文件使用淘宝镜像安装：npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/提示 A complete log of this run can be found in:清除缓存1：首先删除node-modules文件夹2：执行npm cache clean --forc...
2019-11-21 10:01:21
231
原创 从输入网址到页面加载完毕
1：输入url以后，浏览器开启一个线程处理这个URL，同时将这个URL交给DNS进行解析，拿到对应的ip地址。2：向IP对应的web服务器发起get请求，服务器接收到请求以后返回资源信息3：浏览器接收文档，对html进行解析生成DOM Tree,css进行解析生成CSSRule Tree,再将两个Tree结合生成渲染树，（即将css规则树的节点附着在dom树对应的节点上）...
2019-10-16 08:50:13
153
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人