- 博客(233)
- 收藏
- 关注
RSS订阅
原创 浏览器渲染原理
浏览器是如何渲染页面的？当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
2024-01-03 15:57:20
1225
原创 通俗易懂，最完整 ------- 事件循环详解以及必备面试问答题（附答案）
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
2023-12-27 17:41:33
2323
原创 bug记录延伸至对企业项目中router路由跳转的理解
Vue Router 3.x 中存在一个特殊现象：使用 name 跳转未注册路由时不会触发404捕获，而是退化为跳转根路径"/"。这是因为设计上 name 跳转被视为开发期确定存在的操作，失败时直接生成空路径。文章分析了两种解决方案：封装安全跳转方法或使用前置守卫拦截，并对比了它们的优缺点。值得注意的是，Vue Router 4.x 已改为显式失败机制，会直接 reject 未注册的 name 跳转。该现象并非 bug，而是历史版本的设计选择，开发时需要注意这种差异行为。
2026-01-14 10:35:09
805
原创 学习记录-package.json的scripts添加参数的方式有那些
本文总结了Node.js项目中7种传递参数的常用方法：1.命令行传参（--标识符+process.argv解析）；2.环境变量传参（推荐使用cross-env跨平台）；3.npm环境变量机制（npm_config_前缀）；4..env文件配置（需dotenv包支持）；5.npm生命周期变量；6.组合式传参（环境变量+命令行）；7.对比了各方案特点，并给出场景建议：环境区分用cross-env、临时参数用命令行、稳定配置用.env文件、CLI工具开发用process.argv解析。
2025-10-27 15:26:36
633
原创 vue2和vue3函数式调用组件学习记录
Vue2与Vue3动态组件实现对比：Vue2使用Vue.extend+$mount()创建实例，通过data.show控制显示，$destroy()销毁；Vue3改用createVNode+render()，利用ref(show)控制显示，render(null)销毁。Vue2采用Options API，通过实例直接访问方法；Vue3使用Composition API结合defineExpose暴露方法。示例展示了一个假期通知弹窗组件，Vue2版本通过$mount()挂载DOM，Vue3版本利用create
2025-10-17 15:44:52
937
原创 使用HTML2canvas踩坑记录
所以我在这个设置滚动条的dom内加一个div去包裹原本里面内容，然后将这个div传入html2canvas 就好了。我当时的场景是给html2canvas传入的是设置了overflow：auto的dom，导致的问题，②img标签加上crossOrigin="anonymous"问题1：截图下来的img丢失问题，截图不显示img图片。问题2：截图只显示视口范围，截图不全问题。①加上useCORS。
2025-08-20 14:56:01
228
原创 vue中如何在父组件监听子组件的生命周期
摘要：文章介绍了Vue2和Vue3中监听子组件生命周期的两种方法。一是利用父子组件生命周期的执行顺序（子组件mounted后父组件才会执行），二是通过@hook（Vue2）或@vue（Vue3）的文档未公开方式。示例代码展示了如何在父组件中监听子组件的mounted和unmounted事件。特别说明这些方法不仅适用于自定义组件，还能监听虚拟节点的生命周期事件。这些实现方式源自Vue源码的内部机制。
2025-08-11 10:29:04
385
原创 前端h5实现灵动岛动画
这是一个模拟iPhone 14 Pro灵动岛效果的HTML页面。页面包含一个iphone14pro容器，内部有一个动态岛元素(dynamic-island)，默认显示员工信息包括姓名、部门和工位。通过CSS动画实现了四种交互效果：变长(longer)、分离(divide)、融合(fusion)和变大(bigger)。点击动态岛会依次触发这些动画效果，每个动画结束后自动切换到下一个效果，循环播放。动画使用keyframes定义，包含缩放、位移等变换效果，展现了灵动岛动态交互的可能性。
2025-07-30 09:47:44
279
原创 前端实现添加水印，两种方式
本文介绍了两种实现Vue水印功能的方法：1）自定义指令方式，通过canvas生成半透明文字背景图并设置为元素背景；2）组件方式，使用WaterMark组件包裹内容，动态创建canvas水印并监听属性变化。两种方法都实现了重复平铺的斜角水印效果，支持自定义文字内容、颜色和透明度，组件方式额外提供了MutationObserver监听DOM变化确保水印持久化。代码示例包含完整的Vue3组合式API实现，包括props定义、响应式更新和生命周期管理。
2025-07-29 10:41:09
325
原创 前端实现滑块验证功能
本文实现了一个图形拼图验证码功能，包含验证区域和拖动条组件。验证区域显示背景图并包含一个可移动的拼图块，用户需通过拖动滑块将拼图块移动到正确位置（x轴278-285像素范围内）来完成验证。代码通过监听鼠标事件实现拖拽功能，若验证失败则通过动画效果自动复位。该验证码适用于网页安全验证场景，具有简洁直观的交互体验。
2025-07-29 09:49:25
178
原创 uni-app 开发小程序项目中实现前端图片压缩,实现方式
这种方式适合在 H5 中运行的 uni-app 项目，小程序端不支持 DOM。这是 uni-app 封装的一个简单压缩接口，用于压缩临时文件路径图片。这是最常见的一种方式，通过将图片绘制到。，在 H5 和其他平台会失效或无效果。图片质量压缩效果受限，不能调整尺寸。
2025-07-21 16:42:58
1073
原创 h5调起支付，在第三方app的webview里拉起了微信支付，支付完成后返回白屏问题记录
根据图片中的逻辑，大胆猜测可能是微信这边跳转目标页面时候是push保留了历史记录，而不是replace，所以导致跳到目标页面时候如果该页面有导航栏返回按键，那么回退页面栈就到了拉起deeplink页面，这个页面微信会检测订单是否被支付过的判断，就卡到这页面。根据微信开放社区中搜索，发现这个问题有人提到过，但是官方并没有回复，目前作为问题记录，后续有解决办法再回来补解决方案。
2024-12-06 16:16:04
593
原创 iphone8 老版本ios不支持transparent属性导致黑色阴影问题处理方案
经查看dom发现是css有个背景渐变 用到了transparent ，将transparent 改为 rgba(255,255,255,0) 就好了。
2024-10-22 10:33:36
240
原创 伪类和伪元素学习记录
表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。匹配被用户激活的元素。和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的。表示当元素或其任意后代元素被聚焦时，将匹配该元素。根据元素在父元素的子元素列表中的索引来选择元素。选择器根据父元素内的所有兄弟元素的位置来选择子元素。
2024-08-09 14:55:48
1238
原创 vue3中你不知道的七个奇技淫巧
我主要是在组件上使用onVnodeMounted，当需要在组件挂载时执行一些代码，或者在更新时使用onVnodeUpdated进行调试，可以确定的是所有这些钩子都能在某些情况下派上用场。如果你想要我的意见，除非你绝对需要一个多根节点组件，否则请使用单个根节点并且根本不要处理这个设计限制。如果您使用第三方组件，您可能会将其实现包装在您自己的“包装器”组件中。在 Vue 3 中，我们终于可以拥有不止“一个根节点”的组件。在每个组件或html标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。
2024-08-08 11:08:18
978
原创 闭包与内存泄漏问题
上述代码中，假设button这个点击事件只需要触发一次，那么就存在内存泄露，因为垃圾回收器不敢回收increase，因为你点击button的时候是需要执行increase这个函数的。此时再看上述代码，点击按钮触发的函数其实就只有createIncrease函数中的increase函数，但是如果打开f12的memory一进去打个快照，然后多次点击按钮，然后点击垃圾回收，然后再打个快照，发现内存变大，并未回收掉。当本应该被销毁的函数未被销毁，导致其关联的此法环境无法销毁，造成内存泄漏。
2024-08-06 15:57:41
592
原创 JavaScript开发小技巧
基本上，设备类型是通过识别浏览器的 userAgent 来确定的。cookie 可能是我见过的最糟糕的 API，它很难使用，以至于我们不得不重新封装它以最大限度地提高开发效率。其实，只要把它的过期时间设置为这一刻，它就会立即过期。作为前端开发人员，您可能会遇到各种兼容性问题，这时候可能需要获取浏览器的类型和版本。你一定遇到过这样的场景，需要全屏播放视频，并在浏览器中全屏打开页面。是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。当然，如果知道页面的高度，也可以平滑滚动到页面底部。
2024-07-29 15:22:05
1035
原创 CSS 轻松实现常见各类奇形怪状按钮
基于上述的实现，我们不难发现，一些稍微特殊的按钮，无非都通过拼接、障眼法、遮罩等方式实现。渐变（线性渐变、径向渐变、多重渐变）遮罩mask裁剪clip-path变形transform发挥了重要的作用，熟练使用它们，我们对于这些图形就可以信手拈来，基于它们的变形也能从容面对。上述的图形，再配合，基本都能实现不规则阴影。再者，更为复杂的图形，如下所示：还是切图吧，CSS 虽好，实际使用中也需要考虑投入产出比。
2024-06-24 10:48:58
2436
原创 google搜索小技巧
1. 搜索技术是普通人变强的唯一外挂,可以帮助人们学习的比别人快,做的比别人好。2. 掌握搜索技术是互联网时代获取信息的关键,可以极大程度地缩小信息差距。(6)限定网址来源:site （site后必须跟完整域名）(3) 限定标题多个关键词:allintitle。(4) 限定文章内容关键词:intext。(7) 限定图片大小:imagesize。(8) 限定文件类型:filetype。(1) 限定关键词:用双引号""包裹。(5) 限定网址关键词:inurl。(2) 限定标题:intitle。
2024-06-07 14:30:33
738
原创 SSE技术的使用和场景
SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
2024-04-30 14:53:01
3152
原创 浏览器跨域的四种解决办法
主要是出于浏览器的同源策略限制，它是浏览器最核心也最基本的安全功能。当一个请求url的三者之间任意一个与当前页面url不同即为跨域。比如：例子1: https：//aaa.com 于 http://aaa.com 存在跨域例子2: 127.x.x.x:8080 于 127.x.x.x:8181 存在跨域例子3: https://aaa.com 于 https://bbb.com 存在跨域。
2024-04-29 16:58:53
3067
原创 TCP 三次握手和四次挥手学习记录
1.seq（sequence number），序列号随机生成的2.ack（acknowledgement number）确认号 ack = seq + 13.ACK （acknowledgement）确定序列号有效4.SYN（synchronous）发起新连接具体步骤讲解1.首先客户端会发送一个段这个段就是SYN报文，想跟服务端进行连接，并且会携带一个序列号，下次发送的数据序列号还会进行+1。
2024-04-29 15:00:51
554
原创 OSI七层网络参考模型学习记录
在数据链路层的时候说过了如果所有的使用互联网的用户在同一个网段中，会产生广播风暴，所以要将用户进行划分，让他们在不同的网段中，自己在自己的小网段中广播。：在同一个网络中的内部通信并不需要网络层设备，仅仅靠数据链路层就可以完成相互通信，对于不同的网络之间相互通信则必须借助路由器等三层设备。在这一层通过以上的方式，会获取他们对应的传送信号，电压，转换成010101010101但是数据还未组织，仅作为原始的电气电压处理。，MAC地址是绑定在网卡上的，网络地址则是管理员分配的，它们只是随机组合在一起。
2024-04-29 14:31:44
1103
原创 div模拟textarea文本域轻松实现高度自适应
看效果可以看到div在获取焦点的时候，会有个黑色边框，如果想要去掉需要设置outline属性为none。需要注意这个div可以识别富文本需要注意安全问题，最好可以做html标签的过滤。这里提供一个平替方法 就是div+contenteditable属性。记录了四种实现textarea自适应的方法，希望可以帮助到敏娜。众所周知文本域不能做到随着内容自适应高度的。
2024-04-22 16:27:12
481
原创 常用HTML全局属性学习记录
HTML全局属性详解accesskey、autocapitalize、contenteditable、data-*、draggable、tabindex、dir
2024-04-22 11:42:04
1361
原创 html5自定义属性--------Dataset
div class="mm" data-name="无版权">.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;DOMStringMap对象。
2024-04-22 10:57:48
1126
原创 如何让contenteditable元素只能输入纯文本
可以看到contenteditable属性值是有一个plaintext-only纯文本的，但是还是兼容性不太好，火狐不支持。而这两者的区别就在于，一个可以输入富文本，而下面一个只能输入纯文本。不用在意，基本上没有浏览器支持，以后估计也不会有。表示只读，就是普通元素的默认状态啦。会让元素表现得像个文本域一样，可以。
2024-04-22 10:39:07
881
原创 iframe和 blob实现JS,CSS,HTML直接当前页预览
否则，HTML代码会被自动转移为安全的纯文本显示在。对我们的字符数据进行转换的时候，一定要指定。
2024-04-19 16:06:14
1288
3
原创 css实现宽度自适应的波浪线（动态、静态波浪线）
属性控制两个空格占据的宽度足够宽，这样空格字符的装饰线的尺寸一定可以充满整个容器，此时只要设置装饰线的类型是波浪线，宽度100%自适应的波浪线效果就实现了。也很明显，就是波浪线的颜色无法实时跟着文字的颜色发生变化，适用于文字颜色不会多变的场景。：这种实现方法的优点在于非常容易理解，非常容易上手，然后的话颜色很好控制，使用。就是设置两个空格字符，然后两端对齐，这个时候的波浪线自然就正好横跨整个元素了。是线条边缘平滑，效果细腻，易理解，易上手，易维护。属性，代码更轻便，更容易理解，更优雅。
2024-04-19 14:20:16
2077
原创 :has()伪类使用
元素就会匹配，是或的关系，不是与。如果希望是与的关系，也就是同时有。我们可以使用这个选择器轻松区分是文字链接还是图像链接。元素会被匹配，而关系更远的后代元素则不考虑。元素有天蓝色边框，而后者表示包含不是。伪类还可以和其他伪类混用，例如。下面的 CSS 代码表示如果。前面的选择器表示没有包含。
2024-04-17 11:07:18
633
原创 CSS3 max/min-content及fit-content、fill-available值的详解
上面水平居中的案例就是很好的说明，可以让元素保留原有display值的特性的同时，拥有别的display值的特性。
2024-04-17 10:28:54
1797
原创 23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化
23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化，容器查询，@container 、container-name和container-type。
2024-04-16 17:45:13
1881
原创 百分比padding---------实现图片固定比例并自适应布局 以及aspect-ratio属性、cqw单位
这种方式固然可以但是存在一个不好的体验问题：那就是随着页面加载的进行，图片占据的高度会有一个从。在文档流中css的margin和padding这两个属性垂直方向的百分百值都是基于宽度计算的，这个也是本次布局方式的核心。记住，如果遇到这种需求场景，没有比百分比。2.使用vw单位，加入我们的图片不是通栏，左右有间距的话，那么就需要用calc去计算高度的值。但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比。到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。
2024-04-16 14:44:31
969
原创 axios post请求参数传输表单数据，其中一个key的value需要json格式, （qs的使用知识扩充）
今天遇到了一个场景，post请求，请求体的content-type是application/x-www-form-urlencoded，然后我按照往常的情况直接设置完，接口参数进行qs.stringify操作。因为我参数中answerMap是一个对象，qs直接把这个answerMap的值给拆分了，但是后端要求answerMap的值是json，所以我在给接口传参前讲answerMap的值用JSON.stringify转化了一下，这样子qs就把整体当做一个value去操作。
2024-04-01 14:04:02
1606
原创 uniapp h5 touch事件踩坑记录
经过很久的排查发现，是uniapp在h5项目运行时给一个表情加了position。众所周知如果给悬浮球设置定位，并且其祖先元素并未设置定位，那么悬浮球是相对body来定位的。但是uniapp给body内其中一个元素设置了定位，那么悬浮球的参照物就改变了。然后监听悬浮球的touch事件，从事件对象中拿到clientY和clientX赋值给悬浮球的left和top属性。注意鼠标相对悬浮球的位置，应该就是左上角，因为left和top属性是从左上角作为起点的。这里就不贴啦，有很多解决办法，难不倒各位程序猿！
2024-03-28 17:33:55
995
三个项目： 项目1：利用IntersectionObserver实现懒加载图片 项目2：瀑布流布局的上拉刷新加载图片功能
2023-12-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人