- 博客(216)
- 收藏
- 关注
RSS订阅
原创 浏览器渲染原理
浏览器是如何渲染页面的？当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
2024-01-03 15:57:20
1045
原创 通俗易懂，最完整 ------- 事件循环详解以及必备面试问答题（附答案）
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
2023-12-27 17:41:33
1624
1
原创 SSE技术的使用和场景
SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
2024-04-30 14:53:01
658
原创 浏览器跨域的四种解决办法
主要是出于浏览器的同源策略限制，它是浏览器最核心也最基本的安全功能。当一个请求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
513
原创 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
373
原创 OSI七层网络参考模型学习记录
在数据链路层的时候说过了如果所有的使用互联网的用户在同一个网段中，会产生广播风暴，所以要将用户进行划分，让他们在不同的网段中，自己在自己的小网段中广播。：在同一个网络中的内部通信并不需要网络层设备，仅仅靠数据链路层就可以完成相互通信，对于不同的网络之间相互通信则必须借助路由器等三层设备。在这一层通过以上的方式，会获取他们对应的传送信号，电压，转换成010101010101但是数据还未组织，仅作为原始的电气电压处理。，MAC地址是绑定在网卡上的，网络地址则是管理员分配的，它们只是随机组合在一起。
2024-04-29 14:31:44
948
原创 div模拟textarea文本域轻松实现高度自适应
看效果可以看到div在获取焦点的时候，会有个黑色边框，如果想要去掉需要设置outline属性为none。需要注意这个div可以识别富文本需要注意安全问题，最好可以做html标签的过滤。这里提供一个平替方法 就是div+contenteditable属性。记录了四种实现textarea自适应的方法，希望可以帮助到敏娜。众所周知文本域不能做到随着内容自适应高度的。
2024-04-22 16:27:12
225
原创 常用HTML全局属性学习记录
HTML全局属性详解accesskey、autocapitalize、contenteditable、data-*、draggable、tabindex、dir
2024-04-22 11:42:04
1113
原创 html5自定义属性--------Dataset
div class="mm" data-name="无版权">.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;DOMStringMap对象。
2024-04-22 10:57:48
480
原创 如何让contenteditable元素只能输入纯文本
可以看到contenteditable属性值是有一个plaintext-only纯文本的，但是还是兼容性不太好，火狐不支持。而这两者的区别就在于，一个可以输入富文本，而下面一个只能输入纯文本。不用在意，基本上没有浏览器支持，以后估计也不会有。表示只读，就是普通元素的默认状态啦。会让元素表现得像个文本域一样，可以。
2024-04-22 10:39:07
250
原创 iframe和 blob实现JS,CSS,HTML直接当前页预览
否则，HTML代码会被自动转移为安全的纯文本显示在。对我们的字符数据进行转换的时候，一定要指定。
2024-04-19 16:06:14
771
原创 css实现宽度自适应的波浪线（动态、静态波浪线）
属性控制两个空格占据的宽度足够宽，这样空格字符的装饰线的尺寸一定可以充满整个容器，此时只要设置装饰线的类型是波浪线，宽度100%自适应的波浪线效果就实现了。也很明显，就是波浪线的颜色无法实时跟着文字的颜色发生变化，适用于文字颜色不会多变的场景。：这种实现方法的优点在于非常容易理解，非常容易上手，然后的话颜色很好控制，使用。就是设置两个空格字符，然后两端对齐，这个时候的波浪线自然就正好横跨整个元素了。是线条边缘平滑，效果细腻，易理解，易上手，易维护。属性，代码更轻便，更容易理解，更优雅。
2024-04-19 14:20:16
367
原创 :has()伪类使用
元素就会匹配，是或的关系，不是与。如果希望是与的关系，也就是同时有。我们可以使用这个选择器轻松区分是文字链接还是图像链接。元素会被匹配，而关系更远的后代元素则不考虑。元素有天蓝色边框，而后者表示包含不是。伪类还可以和其他伪类混用，例如。下面的 CSS 代码表示如果。前面的选择器表示没有包含。
2024-04-17 11:07:18
358
原创 CSS3 max/min-content及fit-content、fill-available值的详解
上面水平居中的案例就是很好的说明，可以让元素保留原有display值的特性的同时，拥有别的display值的特性。
2024-04-17 10:28:54
730
原创 23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化
23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化，容器查询，@container 、container-name和container-type。
2024-04-16 17:45:13
889
原创 百分比padding---------实现图片固定比例并自适应布局 以及aspect-ratio属性、cqw单位
这种方式固然可以但是存在一个不好的体验问题：那就是随着页面加载的进行，图片占据的高度会有一个从。在文档流中css的margin和padding这两个属性垂直方向的百分百值都是基于宽度计算的，这个也是本次布局方式的核心。记住，如果遇到这种需求场景，没有比百分比。2.使用vw单位，加入我们的图片不是通栏，左右有间距的话，那么就需要用calc去计算高度的值。但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比。到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。
2024-04-16 14:44:31
520
原创 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
1019
原创 uniapp h5 touch事件踩坑记录
经过很久的排查发现，是uniapp在h5项目运行时给一个表情加了position。众所周知如果给悬浮球设置定位，并且其祖先元素并未设置定位，那么悬浮球是相对body来定位的。但是uniapp给body内其中一个元素设置了定位，那么悬浮球的参照物就改变了。然后监听悬浮球的touch事件，从事件对象中拿到clientY和clientX赋值给悬浮球的left和top属性。注意鼠标相对悬浮球的位置，应该就是左上角，因为left和top属性是从左上角作为起点的。这里就不贴啦，有很多解决办法，难不倒各位程序猿！
2024-03-28 17:33:55
608
原创 uniapp开发h5，引入微信开放标签实现h5跳转小程序功能，全网最全最细踩坑记录
首先需要在项目中引入微信的sdk，具体引入方式详见我写的另一篇文章，里面包含了引入sdk以及配置wx.config的详细教学以及踩坑记录。如果引入完微信sdk的前提下接下来就是根据微信文档提供的demo来引入开放标签debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳。
2024-03-26 17:23:58
1512
原创 在微信小程序里的ecahrts图表，tooltip中内容有黑色阴影的问题
tooltip并没有设置文字阴影相关配置，但是实际真机测试出来有黑色阴影（本地编译器没有阴影）， 经过研究发现，需要在tooltip中加上以下配置就OK了。textShadowBlur必须写，并且不能为0，否则textShadowColor不生效。
2024-03-08 15:13:44
609
原创 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
2290
原创 你不知道的 CSS 之 包含块 ! 最细讲解，一听就懂！
没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。
2024-01-03 16:11:35
1196
原创 CSS 属性计算过程
你是否了解 CSS 的属性计算过程呢？上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。但是要说 CSS 属性的计算过程，还真的不是很清楚。没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。上面的代码也非常简单，就是在 body 中有一个 h1 标题而已，该 h1 标题呈现出来的外观是如下：目前我们没有设置该 h1 的任何样式，但是却能看到该 h1 有一定的默认样式，例如有默认的字体大小、默认的颜色。
2024-01-03 16:07:09
1260
原创 为什么微信小程序不用div而是用自创的view标签？
但是考虑到小程序是一个多 WebView 的架构，每一个小程序页面都是不同的WebView 渲染后显示的，在这个架构下我们不好去用某个WebView中的ServiceWorker去管理所有的小程序页面。得益于客户端系统有JavaScript 的解释引擎（在iOS下是用内置的 JavaScriptCore框架，在安卓则是用腾讯x5内核提供的JsCore环境），我们可以创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，也就是我们前面一直提到的逻辑层。
2023-12-28 09:38:59
464
原创 el-cascader 级联选择器 选中范围扩大方式
经过网上冲浪发现可以通过修改css样式去实现，首先最开始先想到的就是用深度选择器去选中，然后修改。但是结果是深度选择器是无法选中，经过排查发现，因为级联选择器组件dom是被加载到了body的子级。这就导致和vue的挂载dom----- #app是同级。遇到的问题：el-cascader打开的选择框只能点击圆点才能被选中，点击文字并不能选中，方法1：el-cascader有一个配置项，但是文档上明显标识，不推荐这么做。然后在对应新增的class上面写样式：注意不能是scoped的样式隔离，
2023-12-27 13:42:10
666
原创 通过IntersectionObserver实现图片下拉加载（瀑布流布局）
【代码】通过IntersectionObserver实现图片下拉加载（瀑布流布局）
2023-12-26 16:06:22
467
原创 Intersection Observer 实现图片懒加载
假如HTML格式如上图所示，src值是默认图片，真正图片格式放在data-src里。下面的js，非常简单。
2023-12-26 14:14:03
472
原创 前端跨页面交互信息或传递信息都有这么几种方式，总有一个满足你的使用场景
父A = 非同源应用A （e.g. http://localhost:63342/demo/iframe/page1.html）父B = 非同源应用B （e.g. http://192.168.2.112:3000/）子B = 非同源iframe桥 （e.g. http://localhost:8081/）子A = 非同源iframe桥（e.g. http://localhost:8081/）2. iframe接收后发起同源广播，同源广播可以在另一个应用中监听。iframe 【代理】
2023-12-23 13:55:47
558
原创 如何实现酷狗音乐pc页面点击播放时，打开多个歌曲播放时，始终在一个播放页面，（标签页的通讯）
第一种是利用同源所以localStorage是共享的这个原理去做，第一打开播放页时候就本地存个值（比如设置已打开标签页的数量），播放页关闭的时候去掉这个值。第二种是 b页面也是可以给a页面发送消息，当b页面被打开时候，往a页面去发送消息，表示标签页被打开，然后a页面去管理这个状态，从而识别标签页是否被打开。这种方式有个弊端，就是每次点击播放页，总是会刷新播放页，并不是很好，而酷狗播放页并不是刷新而是跳转过来直接就是播放。这种方式有两个前提条件，一个是必须同源，一个是必须通道名相同。
2023-12-23 13:41:10
681
原创 十个帮你建网站的网站
小到个人博客，大到企业官网，电商平台，他的强大之处在于傻瓜式、多主题、插件丰富，可视化配置网站，插件包含表单、投票、邮件发送等强大插件。
2023-12-22 16:03:45
824
三个项目： 项目1：利用IntersectionObserver实现懒加载图片 项目2：瀑布流布局的上拉刷新加载图片功能
2023-12-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人