- 博客(224)
- 收藏
- 关注
RSS订阅
原创 浏览器渲染原理
浏览器是如何渲染页面的？当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
2024-01-03 15:57:20
1161
原创 通俗易懂，最完整 ------- 事件循环详解以及必备面试问答题（附答案）
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
2023-12-27 17:41:33
2122
1
原创 h5调起支付，在第三方app的webview里拉起了微信支付，支付完成后返回白屏问题记录
根据图片中的逻辑，大胆猜测可能是微信这边跳转目标页面时候是push保留了历史记录，而不是replace，所以导致跳到目标页面时候如果该页面有导航栏返回按键，那么回退页面栈就到了拉起deeplink页面，这个页面微信会检测订单是否被支付过的判断，就卡到这页面。根据微信开放社区中搜索，发现这个问题有人提到过，但是官方并没有回复，目前作为问题记录，后续有解决办法再回来补解决方案。
2024-12-06 16:16:04
286
原创 iphone8 老版本ios不支持transparent属性导致黑色阴影问题处理方案
经查看dom发现是css有个背景渐变 用到了transparent ，将transparent 改为 rgba(255,255,255,0) 就好了。
2024-10-22 10:33:36
158
原创 伪类和伪元素学习记录
表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。匹配被用户激活的元素。和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的。表示当元素或其任意后代元素被聚焦时，将匹配该元素。根据元素在父元素的子元素列表中的索引来选择元素。选择器根据父元素内的所有兄弟元素的位置来选择子元素。
2024-08-09 14:55:48
1071
原创 vue3中你不知道的七个奇技淫巧
我主要是在组件上使用onVnodeMounted，当需要在组件挂载时执行一些代码，或者在更新时使用onVnodeUpdated进行调试，可以确定的是所有这些钩子都能在某些情况下派上用场。如果你想要我的意见，除非你绝对需要一个多根节点组件，否则请使用单个根节点并且根本不要处理这个设计限制。如果您使用第三方组件，您可能会将其实现包装在您自己的“包装器”组件中。在 Vue 3 中，我们终于可以拥有不止“一个根节点”的组件。在每个组件或html标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。
2024-08-08 11:08:18
828
原创 闭包与内存泄漏问题
上述代码中，假设button这个点击事件只需要触发一次，那么就存在内存泄露，因为垃圾回收器不敢回收increase，因为你点击button的时候是需要执行increase这个函数的。此时再看上述代码，点击按钮触发的函数其实就只有createIncrease函数中的increase函数，但是如果打开f12的memory一进去打个快照，然后多次点击按钮，然后点击垃圾回收，然后再打个快照，发现内存变大，并未回收掉。当本应该被销毁的函数未被销毁，导致其关联的此法环境无法销毁，造成内存泄漏。
2024-08-06 15:57:41
496
原创 JavaScript开发小技巧
基本上，设备类型是通过识别浏览器的 userAgent 来确定的。cookie 可能是我见过的最糟糕的 API，它很难使用，以至于我们不得不重新封装它以最大限度地提高开发效率。其实，只要把它的过期时间设置为这一刻，它就会立即过期。作为前端开发人员，您可能会遇到各种兼容性问题，这时候可能需要获取浏览器的类型和版本。你一定遇到过这样的场景，需要全屏播放视频，并在浏览器中全屏打开页面。是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。当然，如果知道页面的高度，也可以平滑滚动到页面底部。
2024-07-29 15:22:05
670
原创 CSS 轻松实现常见各类奇形怪状按钮
基于上述的实现，我们不难发现，一些稍微特殊的按钮，无非都通过拼接、障眼法、遮罩等方式实现。渐变（线性渐变、径向渐变、多重渐变）遮罩mask裁剪clip-path变形transform发挥了重要的作用，熟练使用它们，我们对于这些图形就可以信手拈来，基于它们的变形也能从容面对。上述的图形，再配合，基本都能实现不规则阴影。再者，更为复杂的图形，如下所示：还是切图吧，CSS 虽好，实际使用中也需要考虑投入产出比。
2024-06-24 10:48:58
2091
原创 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
495
原创 SSE技术的使用和场景
SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
2024-04-30 14:53:01
2178
原创 浏览器跨域的四种解决办法
主要是出于浏览器的同源策略限制，它是浏览器最核心也最基本的安全功能。当一个请求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
2619
原创 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
495
原创 OSI七层网络参考模型学习记录
在数据链路层的时候说过了如果所有的使用互联网的用户在同一个网段中，会产生广播风暴，所以要将用户进行划分，让他们在不同的网段中，自己在自己的小网段中广播。：在同一个网络中的内部通信并不需要网络层设备，仅仅靠数据链路层就可以完成相互通信，对于不同的网络之间相互通信则必须借助路由器等三层设备。在这一层通过以上的方式，会获取他们对应的传送信号，电压，转换成010101010101但是数据还未组织，仅作为原始的电气电压处理。，MAC地址是绑定在网卡上的，网络地址则是管理员分配的，它们只是随机组合在一起。
2024-04-29 14:31:44
1056
原创 div模拟textarea文本域轻松实现高度自适应
看效果可以看到div在获取焦点的时候，会有个黑色边框，如果想要去掉需要设置outline属性为none。需要注意这个div可以识别富文本需要注意安全问题，最好可以做html标签的过滤。这里提供一个平替方法 就是div+contenteditable属性。记录了四种实现textarea自适应的方法，希望可以帮助到敏娜。众所周知文本域不能做到随着内容自适应高度的。
2024-04-22 16:27:12
434
原创 常用HTML全局属性学习记录
HTML全局属性详解accesskey、autocapitalize、contenteditable、data-*、draggable、tabindex、dir
2024-04-22 11:42:04
1279
原创 html5自定义属性--------Dataset
div class="mm" data-name="无版权">.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;DOMStringMap对象。
2024-04-22 10:57:48
947
原创 如何让contenteditable元素只能输入纯文本
可以看到contenteditable属性值是有一个plaintext-only纯文本的，但是还是兼容性不太好，火狐不支持。而这两者的区别就在于，一个可以输入富文本，而下面一个只能输入纯文本。不用在意，基本上没有浏览器支持，以后估计也不会有。表示只读，就是普通元素的默认状态啦。会让元素表现得像个文本域一样，可以。
2024-04-22 10:39:07
735
原创 iframe和 blob实现JS,CSS,HTML直接当前页预览
否则，HTML代码会被自动转移为安全的纯文本显示在。对我们的字符数据进行转换的时候，一定要指定。
2024-04-19 16:06:14
1112
3
原创 css实现宽度自适应的波浪线（动态、静态波浪线）
属性控制两个空格占据的宽度足够宽，这样空格字符的装饰线的尺寸一定可以充满整个容器，此时只要设置装饰线的类型是波浪线，宽度100%自适应的波浪线效果就实现了。也很明显，就是波浪线的颜色无法实时跟着文字的颜色发生变化，适用于文字颜色不会多变的场景。：这种实现方法的优点在于非常容易理解，非常容易上手，然后的话颜色很好控制，使用。就是设置两个空格字符，然后两端对齐，这个时候的波浪线自然就正好横跨整个元素了。是线条边缘平滑，效果细腻，易理解，易上手，易维护。属性，代码更轻便，更容易理解，更优雅。
2024-04-19 14:20:16
1652
原创 :has()伪类使用
元素就会匹配，是或的关系，不是与。如果希望是与的关系，也就是同时有。我们可以使用这个选择器轻松区分是文字链接还是图像链接。元素会被匹配，而关系更远的后代元素则不考虑。元素有天蓝色边框，而后者表示包含不是。伪类还可以和其他伪类混用，例如。下面的 CSS 代码表示如果。前面的选择器表示没有包含。
2024-04-17 11:07:18
533
原创 CSS3 max/min-content及fit-content、fill-available值的详解
上面水平居中的案例就是很好的说明，可以让元素保留原有display值的特性的同时，拥有别的display值的特性。
2024-04-17 10:28:54
1532
原创 23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化
23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化，容器查询，@container 、container-name和container-type。
2024-04-16 17:45:13
1572
原创 百分比padding---------实现图片固定比例并自适应布局 以及aspect-ratio属性、cqw单位
这种方式固然可以但是存在一个不好的体验问题：那就是随着页面加载的进行，图片占据的高度会有一个从。在文档流中css的margin和padding这两个属性垂直方向的百分百值都是基于宽度计算的，这个也是本次布局方式的核心。记住，如果遇到这种需求场景，没有比百分比。2.使用vw单位，加入我们的图片不是通栏，左右有间距的话，那么就需要用calc去计算高度的值。但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比。到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。
2024-04-16 14:44:31
823
原创 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
1440
原创 uniapp h5 touch事件踩坑记录
经过很久的排查发现，是uniapp在h5项目运行时给一个表情加了position。众所周知如果给悬浮球设置定位，并且其祖先元素并未设置定位，那么悬浮球是相对body来定位的。但是uniapp给body内其中一个元素设置了定位，那么悬浮球的参照物就改变了。然后监听悬浮球的touch事件，从事件对象中拿到clientY和clientX赋值给悬浮球的left和top属性。注意鼠标相对悬浮球的位置，应该就是左上角，因为left和top属性是从左上角作为起点的。这里就不贴啦，有很多解决办法，难不倒各位程序猿！
2024-03-28 17:33:55
817
原创 uniapp开发h5，引入微信开放标签实现h5跳转小程序功能，全网最全最细踩坑记录
首先需要在项目中引入微信的sdk，具体引入方式详见我写的另一篇文章，里面包含了引入sdk以及配置wx.config的详细教学以及踩坑记录。如果引入完微信sdk的前提下接下来就是根据微信文档提供的demo来引入开放标签debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳。
2024-03-26 17:23:58
3076
原创 在微信小程序里的ecahrts图表，tooltip中内容有黑色阴影的问题
tooltip并没有设置文字阴影相关配置，但是实际真机测试出来有黑色阴影（本地编译器没有阴影）， 经过研究发现，需要在tooltip中加上以下配置就OK了。textShadowBlur必须写，并且不能为0，否则textShadowColor不生效。
2024-03-08 15:13:44
1386
4
原创 nvm 配置淘宝镜像失效，以及安装node后 npm-v 无效
接下来安装网上大多数攻略是配置淘宝镜像，原因是nvm服务器在国外，下载速度会和很慢，这个操作刚好解决了这一个问题。但是接下来你nvm install v版本号 你会发现会报报错，复制报错文字翻译后大意是淘宝的证书过期了。然后nvm install v版本号，会显示node大概率会下载comlete，但是npm会下载失败，接下来在npm文件夹里面的bin文件夹中找到下图中红框中的四个文件，复制出来和。接下来根据报错提示去github下载 node版本对应的npm版本，下载npm安装包之后，解压。
2024-01-23 14:33:42
3137
原创 你不知道的 CSS 之 包含块 ! 最细讲解，一听就懂！
没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。
2024-01-03 16:11:35
1719
2
原创 CSS 属性计算过程
你是否了解 CSS 的属性计算过程呢？上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。但是要说 CSS 属性的计算过程，还真的不是很清楚。没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。上面的代码也非常简单，就是在 body 中有一个 h1 标题而已，该 h1 标题呈现出来的外观是如下：目前我们没有设置该 h1 的任何样式，但是却能看到该 h1 有一定的默认样式，例如有默认的字体大小、默认的颜色。
2024-01-03 16:07:09
1321
原创 为什么微信小程序不用div而是用自创的view标签？
但是考虑到小程序是一个多 WebView 的架构，每一个小程序页面都是不同的WebView 渲染后显示的，在这个架构下我们不好去用某个WebView中的ServiceWorker去管理所有的小程序页面。得益于客户端系统有JavaScript 的解释引擎（在iOS下是用内置的 JavaScriptCore框架，在安卓则是用腾讯x5内核提供的JsCore环境），我们可以创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，也就是我们前面一直提到的逻辑层。
2023-12-28 09:38:59
609
三个项目： 项目1：利用IntersectionObserver实现懒加载图片 项目2：瀑布流布局的上拉刷新加载图片功能
2023-12-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人