Web学习笔记
文章平均质量分 65
前端开发基础杂记、各种Web API和网络传输理论基础
音仔小瓜皮
好好学习,天天向上
展开
-
【css】常见布局概述
本文将对css的常见布局方案进行概述,给大家提供系统化的布局解决方案参考。原创 2024-09-25 10:28:03 · 1208 阅读 · 0 评论 -
【vue Lottie】lottie在vue项目中的使用心得
使用的时候,不要一股脑的复制粘贴过来,而是应该进行如下步骤的清洗。assets属性下,引用的图片资源对象中的p属性下,表示路径。,并根据其click等事件的触发,调用上述这些实例方法,来。,让图片资源经过webpack/vite的打包处理。:在lottie.json存放的动画数据中,我们可以。一些很大的背景图片(不影响主体内容展示的)可以放在。可以控制Lottie的大小、速度、展示方向等等。能用原生实现的动效,就不要切Lottie,同样的图片依赖素材,减小依赖图片的大小。等方法控制Lottie动画的显示。原创 2024-09-02 10:35:52 · 704 阅读 · 0 评论 -
【bug记录8】vue-router和location.href跳转区别
1、微信小程序会对一些数据、配置、资源进行缓存,如果不刷新则导致无法及时获取2、如何使得页面及时刷新呢?这涉及到vue-router和location.href的跳转区别。原创 2024-09-01 16:33:08 · 509 阅读 · 0 评论 -
【移动端H5】click事件和touch事件的区分
touch事件是移动端区别于pc端触控的独有事件,也是实现很多手势的基础事件。它具体包含了:touchstart(触摸开始时触发)、touchmove(触摸并产生移动时触发)、touchend(触摸结束时触发)等一系列事件。原创 2024-08-17 15:12:25 · 436 阅读 · 0 评论 -
【JS动画】帧的理解与requestAnimationFrame的使用
performance.now()与一些js中的time类(例如Date.now())不同的是,它不仅仅可以精确到一毫秒,而且可以以毫秒为单位作为浮点数返回,最大可精确到微秒级别。requestAnimationFrame的返回值是一个long类型的非0值,可理解为请求DI,作为回调列表中的唯一标识。此时,利用箭头函数的特性【即this指向的是函数定义时,外部最近作用域中的this对象】,才可以准确调用frame函数。值得注意的是,当在class类中定义frame函数,并用将其作为回调函数时,原创 2024-07-14 13:26:24 · 1267 阅读 · 0 评论 -
移动端阻止Touch导致的页面滑动/缩放
应用场景:比如我们制作一个H5小游戏的时候,一些玩家需要通过左右滑动操作来控制角色移动。但在默认情况下,移动端的左右/上下滑动会导致页面也被滑动/缩放,这样非常影响体验。原创 2024-07-13 22:56:07 · 730 阅读 · 0 评论 -
canvas高清绘制与retina屏
具体而言,当dpr=1设置1px在浏览器上会显示1px;当dpr=2设置1px在浏览器上会显示2px;当dpr=3设置1px在浏览器上会显示3px。(英语:Retina Display)是一种由苹果公司设计和委托制造的现实屏幕,具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏幕。*dpi通常理解为打印分辨率,ppi通常为屏幕显示分辨率。1、canvas元素的宽高属性指的是canvas系统画布的大小。这个设置如果没有遵循画布比例,可能会导致显示畸形。2、css中的宽高属性代表canvas。原创 2024-07-09 18:40:35 · 289 阅读 · 0 评论 -
给元素的margin-top/top设置百分比,是基于什么进行计算?
宽度。原创 2024-07-09 18:14:31 · 240 阅读 · 0 评论 -
【JS】用正则匹配实现模糊搜索
) 执行正则表达式中的正向预查。正向预查是一种零宽度断言,它不消耗自身字符去匹配,而是用于查看字符串中的 当前位置之后是否能够匹配指定的模式。*注意,这里正向预查的括号,代表里面的预查都是独立的,是接着外部正则表达式指向的位置来查的,所以当多个预查连续排列是,预查开始的位置不是上一个预查结束的位置,而是括号外部指向的、此时匹配到的位置。利用这个性质,我们可以实现模糊搜索要求的乱序字符匹配!正则表达式中,除了正向预查外,还有其他预查方式,作出一个补充:1、正向肯定预查 (?原创 2024-01-25 19:57:52 · 1587 阅读 · 0 评论 -
【图片滚动加载】如何解决滚动触发大量事件导致加载性能差
2、防抖:在节流的基础上,避免大量滚动触发事件导致相同的功能函数执行多次,因此设置timeout定时器,在等待执行的定时器有且仅有一个,delay时间后定时器中的内容执行完毕,定时器取消。3、两者互相控制:由于有时候网络请求比较快,快于delay时间,那么仅仅使用节流函数,会导致为了满足delay长的等待时间而导致。1、节流:特定delay时间内,无法再触发相关功能函数的执行。所以,加入timeout定时器,原创 2024-01-15 12:18:52 · 480 阅读 · 0 评论 -
【flex布局】理解flex-grow、flex-shrink和flex-basis
在使用弹性布局的时候,我们经常用上述三个css属性去控制弹性元素在主轴方向上的尺寸和伸缩性。接下来将详细介绍下在控制这三个属性的应用场景和功能特性。的宽度。在支持这个关键字的浏览器你可以看见文本已尽可能抓住机会来自动换行,使之变得尽可能小且没有溢出。这就是该字符串的大小。本质上讲,字符串中最长的单词决定了大小。第二段设置了值,其与前者相反。它会变得尽可能大,没有自动换行的机会。如果容器太窄,它就会溢出其自身的盒子。flex-direction切换主轴。原创 2023-09-25 23:50:47 · 1716 阅读 · 0 评论 -
浅拷贝、深拷贝和浅比较、深比较的理解
当传入的依赖项是一个数组或者对象时,如果每次更新数组和对象不是返回新的引用,而仅仅是直接修改其内容中的key:value则不会触发useEffect执行。在js中===、react中useEffect、useMemo(根据依赖项缓存函数返回值,有时候也可以视作对于依赖项的一些再加工计算)的执行都根据的是浅比较,那么在写代码时候如何让其实现深比较呢?当你去复制或者传递一个值的时候,浅拷贝会创建一个新的空间或对象,然后简单地将值复制给新的对象。深拷贝也是创建了一个新的空间或对象,但是并不是简单的赋值,而是。原创 2023-08-19 13:40:34 · 295 阅读 · 0 评论 -
【http】长连接和短连接的区别以及socket发挥的作用
短连接也可以使用Socket来实现,但在短连接模式下,每次通信都需要建立一个新的Socket连接,然后在通信完成后关闭连接。- 长连接可以使用Socket来实现,通过在客户端和服务器之间建立一个持久的Socket连接,可以保持通信通道一直打开,从而实现实时数据推送等需求。- 在长连接的情况下,客户端和服务器可以使用同一个Socket连接来交换多次请求和响应,而不需要频繁地建立和关闭连接。- 短连接模式下,每次连接的生命周期很短,只在需要通信时才建立连接,通信完成后立即关闭。原创 2023-08-18 10:19:33 · 874 阅读 · 1 评论 -
antd Table组件——固定列宽度遇到的问题
antd table组件小问题记录原创 2022-08-31 22:17:33 · 8524 阅读 · 2 评论 -
【HTTP】关于GET和POST请求参数位置
HTTP基础请求响应报文结构以及get post区别总结记录原创 2022-08-30 22:10:26 · 6026 阅读 · 0 评论 -
【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式
【前端】vue中使用element plus/ui的自定义全局变量样式,以及如何去修改做出自己的scss样式原创 2022-08-28 23:52:41 · 23706 阅读 · 7 评论