HTML筑基知识
文章平均质量分 85
林恒smileZAZ
这个作者很懒,什么都没留下…
展开
-
记录--别想调试我的前端页面代码
这里我们不介绍禁止右键菜单, 禁止F12快捷键和代码混淆方案。原创 2024-07-31 15:00:57 · 636 阅读 · 0 评论 -
图片预加载和懒加
图片预加载和图片懒加载是网页优化的两种常见技术,它们可以提升用户体验并改善网页性能。原创 2024-07-30 18:09:52 · 243 阅读 · 0 评论 -
JavaScript中==和===的区别
JavaScript 中的相等运算符无疑是新手开发者最容易混淆的知识点之一。==和===这两个运算符的细微差别往往会在代码中造成一些令人困惑的行为在本文中,我们将深入探讨这两个相等运算符的工作原理,比较它们的特点和局限性让我们开始吧!本文讲解了==和===的数据对比之间的区别,通过代码示例深入分析如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。原创 2024-07-19 17:02:32 · 967 阅读 · 0 评论 -
bundletool工具使用(Android aab包安装)
由于现在上传Google play只需要上传.aab文件,不需要再上传apk的安装包,然而在测试中只需要对apk的包进行测试,aab的包虽然在理论上与apk的包是相同的,但是在测试到上线过程中缺少对aab包的测试过程,安装aab包需要几个步骤,需要将aab的包转化成apks格式后进行安装。原创 2024-07-16 17:45:55 · 571 阅读 · 0 评论 -
从0到1打造一个 WebRTC 应用
2020 年初突如其来的新冠肺炎疫情让线下就医渠道几乎被切断,在此背景下,微医作为数字健康行业的领军者通过在线问诊等形式快速解决了大量急需就医人们的燃眉之急。而作为微医 Web 端在线问诊中重要的一环-医患之间的视频问诊正是应用了接下来讲述的 WebRTC 技术。原创 2024-07-15 17:53:38 · 780 阅读 · 0 评论 -
前端预览图片的两种方式:转Base64预览或转本地blob的URL预览,并再重新转回去
createObjectURL是JS自带的一个函数,它可以将Blob、File等二进制文件转为浏览器可直接显示的URL地址,从而方便进行展示。一般情况下,预览图片功能,是后端返回一个图片地址资源(字符串)给前端,如:ashuai.work/static/img/…之所以有这个图片地址资源,也是因为之前有上传图片的操作,后端存到文件服务器上,生成一份图片url地址。但是某些情况下,需要前端去临时预览一下图片(是否上传是后续的操作,需要先看一下)'图片读取的Base64的值为--->'原创 2024-07-11 18:06:19 · 1175 阅读 · 0 评论 -
前端如何取消接口调用
对于用户主动离开页面,或者用户的网络很卡的时候(预期返回顺序是:接口1 => 接口2;但是接口1返回太慢,导致顺序混乱。)这就需要手动终止请求。构造函数AbortController的实例信号量signal(可以作为ref存储起来),signal作为fetch的参数,在每次请求的时候,可以手动调用abort方法,取消上一次的请求。如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。原创 2024-07-10 18:23:47 · 1057 阅读 · 0 评论 -
如何快速实现一个无缝轮播效果
轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用element、ant等UI库实现。某些场景,为了一个简单的功能安装一个库是没必要的,我们最好的选择就是手搓。我们来看一个需求上述需求核心就是实现一个无缝轮播的切换效果。在本教程中,我们通过简单代码实现了无缝轮播效果,样式是左右切换,我们也可以通过样式控制实现上下切换的效果,比如将translateX设置为translateY即可。opacity: 0;原创 2024-07-09 17:21:18 · 1087 阅读 · 0 评论 -
你可以终止 forEach 吗?
虽然 JavaScript 中的 forEach 方法提供了一种简单的数组迭代方法,但它缺乏中断或停止中循环的灵活性。幸运的是,像 for…of 循环这样的替代方法,以及像 some() 和 every() 这样的方法,可以替代 forEach。如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。原创 2024-07-08 19:26:47 · 470 阅读 · 0 评论 -
8种方案解决移动端1px边框的问题
css中的1px并不等于移动设备的1px,这是由不同手机由不同像素密度,在window对象中有一个devicePixelRatio属性,他可以反应css中像素与设备的像素比。对于老项目,这种方案比较完美, 原理是把原来的所有边框去掉,通过伪类崇左border,并且transform的scale缩小一半,原先的单挑border样式设置。devicePixelRatio 的官方给的定义为: 设备物理像素和设备独立像素的比例,也就是devicePixelRatio = 物理像素 / 独立像素。原创 2024-07-05 17:35:21 · 820 阅读 · 0 评论 -
前端如何优雅的添加水印及去除水印
在最近接手的一个项目中,需要对整个页面加上一个水印,还需要动态修改增加背景色功能。由于使用的第三方库不支持背景色功能,故记录一下。文末会附上如何利用技术手段去除水印。原创 2024-07-03 17:24:20 · 901 阅读 · 0 评论 -
为什么 [] == ![] 为 true?
面试官问我,[] ==![] 的结果是啥,我:蒙一个true;面试官:你是对的;我:内心非常高兴;面试官:解释一下为什么;我:一定要冷静,要不就说不会吧;这个时候,面试官笑了,同学,感觉你很慌的一批啊!不必慌张,我们慢慢来!在当今的编程领域,面试不仅是技术能力的考察,更是思维灵活性与深度理解的试金石。面试中偶遇诸如 [] ==![] 表达式这类题目,虽让人初感意外,实则深藏玄机,考验着我们对于JavaScript这类动态语言特性的透彻理解。原创 2024-07-02 18:02:10 · 1032 阅读 · 1 评论 -
前端如何用密文跟后端互通?原来那么简单!
SM2是一种基于椭圆曲线密码学的非对称加密算法。sm-crypto提供了SM2的密钥生成、加密、解密等功能。通过调用相关方法,开发者可以轻松地生成SM2密钥对,并使用公钥进行加密、私钥进行解密。// 生成密钥对// 公钥// 私钥// 待加密的消息// 使用公钥加密// 使用私钥解密console.log('加密结果:', encrypted);console.log('解密结果:', decrypted.toString());// 输出原始消息。原创 2024-07-01 18:30:04 · 835 阅读 · 0 评论 -
记录---实现一个支持@的输入框
在选择的用户或者内容发生改变时将数据抛给父组件/** @的用户列表发生改变时,将最新值暴露给父组件 */转载 2024-06-28 19:22:18 · 95 阅读 · 0 评论 -
sessionStorage 能在多个标签页之间共享数据吗?
最近,我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。原创 2024-06-27 18:08:31 · 613 阅读 · 0 评论 -
骚操作:如何让一个网页一直处于空白情况?
🧑💻 写在开头点赞 + 收藏 === 学会🤣🤣🤣如题,惯性思路很简单,就是直接撸上一个空内容的html。注:以下都是在现代浏览器中执行,主要为**Chrome 版本 120.0.6099.217(正式版本) (64 位)和Firefox123.0.1 (64 位) **؏؏☝ᖗ乛◡乛ᖘ☝؏؏~但是,要优雅~咱玩的花一点,如果这个HTML中加入一行文字,比如下面这样,如何让这行文字一直不显示出来呢?思考几秒~有了,江湖一直传言,Javascrip代码执行不是影响Render树生成么,上循环!原创 2024-06-24 18:27:26 · 309 阅读 · 0 评论 -
记录--前端如何截屏
在这个示例中,我们首先设置了页面的视口大小为 1200x800,然后打开了一个页面,并模拟了页面的滚动,每次滚动800px。在 Puppeteer 中实现截取长图的功能相对复杂,因为 Puppeteer 默认只能截取当前视口(Viewport)的内容,无法直接截取整个页面的内容。但可以通过模拟页面的滚动,并多次截取不同部分的内容,然后将截取到的内容拼接成一张长图来实现。**转换为 data URL:**使用 canvas 的 toDataURL 方法将 canvas 中的内容转换为 data URL。转载 2024-06-19 18:57:08 · 63 阅读 · 0 评论 -
记录--createObjectURL这个API真好用,我举几个场景你们就懂了
随着我用 URL.createObjectURL 这个 API 越来越多次,越发感觉真的是一个很好用的方法,列举一下我在项目中用到它的场景吧~转载 2024-06-18 18:38:12 · 157 阅读 · 0 评论 -
一行代码实现鼠标横向滚动
在项目中我们可能会遇到当鼠标在某个区域内,我们希望滚动鼠标里面的内容可以横向滚动;原创 2024-06-17 19:36:15 · 285 阅读 · 0 评论 -
记录--60行JS速通购物车小球斜抛动画
技术文章,尤其是前端技术文章具有时效性。本文主要介绍了一种基于Web Animations API实现的元素斜抛动画解决方案。本文相比于其他方案不同的是:为了使代码结构更紧凑,复用更方便,本文没有采取@keyframes的方式声明动画,也不需要在html部分声明任何标签,而是直接采用class类的方式用JS集中处理DOM元素的挂载、样式配置、动画播放。实现这个效果前,我不是没查阅过用@keyframes实现的文章。转载 2024-06-15 17:14:33 · 33 阅读 · 0 评论 -
记录--N 个值得一看的前端代码片段
在日常的开发过程中,我们都会有一些常用的代码片段,这些代码片段可以直接复制到各个项目中使用,非常方便。如果你有接手过别人的项目,就可以很明显感受到几个项目一般都会有一些相同的工具类方法,这些方法就是之前开发者的常用代码片段。转载 2024-06-14 18:47:00 · 57 阅读 · 0 评论 -
记录--别忘了前端是靠什么起家的
回想起多年前,前端开发者常被戏称为“切图仔”,但就是这样的角色,通过精湛的CSS技巧,能够实现各种复杂的交互和特效,展现出前所未有的网页魔法。例如,开发者可以使用子选择器(>)来仅为特定父元素的直接子元素应用样式,或使用相邻兄弟选择器(+)来为紧跟在特定元素后的兄弟元素应用样式。这种做法增加了样式的可复用性,因为相同的组合选择器样式可以在不同的HTML结构中被复用,只要这些结构符合选择器定义的元素关系。总之,伪元素选择器为CSS提供了强大的功能,使得开发者能够以更细致和动态的方式控制网页的样式和内容。转载 2024-06-11 19:44:30 · 37 阅读 · 0 评论 -
记录--前端起dev从110秒减少到7秒, 开发体验大幅提升
首先看fileSerializer以 middleware 的形式来分代码职责, 执行fileSerializer的serialize()或deserialize()的时候, 会轮流执行各个 middleware 的对应的serialize()或deserialize()方法.经过观察可以看到, _openPack()的读取硬盘, 和afterAllStored()的写入文件, 都是通过fileSerializer()来进行的.转载 2024-06-06 19:43:55 · 33 阅读 · 0 评论 -
【前端缓存】localStorage是同步还是异步的?为什么?
localStorage 的数据是持久存储在用户的硬盘上的,而不是内存。不过,这也意味着如果涉及较多数据的读写操作时,可能对性能产生负面影响,特别是在主线程上,因为它会阻塞UI的更新和其他js的执行。不过,在 Web 浏览器环境中,localStorage 的API是设计为同步的,即使底层的硬盘读写操作有着IO的特性。在同步的 localStorage 操作期间,由于 js 的单线程性质,整个线程会阻塞,即不会执行其他任何js代码,也不会进行任何渲染操作,直到 localStorage 调用返回。转载 2024-06-05 18:23:17 · 128 阅读 · 0 评论 -
瀑布流最佳实现方案
这里有个细节,我把page.update丢进computed中作为手动触发更新的开关而不是把cacheList声明响应式的原因是因为页面只需要用到一个响应数组,如果把cacheList也设置为响应式,那就导致了数组过长时,响应式过多的性能开销,所以这里用一个引用值作为手动触发更新依赖的方式会更加好。细心的同学这时已经发现问题了,就是当某一列的图片高度都很长时,会产生较大的空隙,因为是没有任何的高度计算处理而是按照数组顺序的逐个添加导致,像下面这样。当前文章的gif文件较大,加载的时长可能较久。转载 2024-06-03 19:30:56 · 96 阅读 · 0 评论 -
如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?
基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,比如 Ant Design 文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器。这里称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器。需要将中间的内容放在html结构最后,否则右侧会臣在中间内容的下方。在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高。原创 2024-06-01 18:30:59 · 564 阅读 · 0 评论 -
说说你对单例模式的理解?如何实现?
单例模式(Singleton Pattern):创建型模式,提供了一种创建对象的最佳方式,这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。在前端中,很多情况都是用到单例模式,例如页面存在一个模态框的时候,只有用户点击的时候才会创建,而不是加载完成之后再创建弹窗和隐藏,并且保证弹窗全局只有一个。现在很多第三方库都是单例模式,多次引用只会使用同一个对象,如jquery、lodash、moment…上述这种实现称为惰性单例,意图解决需要时才创建类实例对象。原创 2024-05-31 19:02:22 · 532 阅读 · 0 评论 -
说说 Javascript 数字精度丢失的问题,如何解决?
这个数无限循环,再大的内存它也存不下,所以不能存储一个相对于数学来说的值,只能存储一个近似值,当计算机存储后再取出时就会出现精度丢失问题。主要是存储二进制时小数点的偏移量最大为52位,最多可以表达的位数是2^53=9007199254740992,对应科学计数尾数是 9.007199254740992,这也是 JS 最多能表示的精度。计算机存储双精度浮点数需要先把十进制数转换为二进制的科学记数法的形式,然后计算机以自己的规则{符号位+(指数位+指数偏移量的二进制)+小数部分}存储二进制的科学记数法。原创 2024-05-30 18:21:06 · 1124 阅读 · 0 评论 -
Node性能如何进行监控以及优化?
这里采用Easy-Monitor 2.0,其是轻量级的 Node.js 项目内核性能监控 + 分析工具,在默认模式下,只需要在项目入口文件 require 一次,无需改动任何业务代码即可开启内核级别的性能监控分析。并不是所有数据都需要缓存,访问频率高,生成代价比较高的才考虑是否缓存,也就是说影响你性能瓶颈的考虑去缓存,并且而且缓存还有缓存雪崩、缓存穿透等问题要解决。通过减少内存占用,可以提高服务器的性能。leak的内存非常大,造成内存泄露,应当避免这样的操作,通过减少内存使用,是提高服务性能的手段之一。原创 2024-05-29 18:40:09 · 939 阅读 · 0 评论 -
举例说明你对尾递归的理解,有哪些应用场景
这时候,我们就可以使用尾递归,即一个函数中所有递归形式的调用都出现在函数的末尾,对于尾递归来说,由于只存在一个调用记录,所以永远不会发生"栈溢出"错误。可以看到,每一次返回的就是一个新的函数,不带上一个函数的参数,也就不需要储存上一个函数了。尾递归只需要保存一个调用栈,复杂度 O(1)如果n等于5,这个方法要执行5次,才返回最终的计算表达式,这样每次都要保存这个方法,就容易造成栈溢出,复杂度为O(n)因此,递归将函数调用简化为一个更简单的函数调用,然后再将其简化为一个更简单的函数,以此类推,直到结果。原创 2024-05-28 18:11:52 · 787 阅读 · 0 评论 -
如何判断一个元素是否在可视区域中?
Intersection Observer 即重叠观察者,从这个命名就可以看出它用于判断两个元素是否重叠,因为不用进行事件的监听,性能方面相比getBoundingClientRect会好很多。通过上述方式,可以看到可视区域颜色会变成黄色了,但是可以明显看到有卡顿的现象,原因在于我们绑定了scroll事件,scroll事件伴随了大量的计算,会造成资源方面的浪费。然后开始监听scroll事件,判断页面上哪些元素在可视区域中,如果在可视区域中则将背景颜色设置为yellow。原创 2024-05-27 17:42:14 · 979 阅读 · 0 评论 -
说说Loader和Plugin的区别?编写Loader,Plugin的思路?
对于loader,实质是一个转换器,将A文件进行编译形成B文件,操作的是文件,比如将A.scss或A.less转变为B.css,单纯的文件转换过程。在Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过Webpack提供的 API改变输出结果。由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务。一般在编写loader的过程中,保持功能单一,避免做多种功能。原创 2024-05-23 18:52:27 · 1056 阅读 · 0 评论 -
如何实现上拉加载,下拉刷新?
下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同开源社区也有很多优秀的解决方案,如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载,下拉刷新,有助于对第三方库有更好的理解与使用。原创 2024-05-22 18:38:38 · 1058 阅读 · 0 评论 -
什么是单点登录?如何实现?
确认无误后,应用系统记录用户的登录状态,并将 Token写入Cookie,然后给本次访问放行。当一个系统成功登录以后,passport将会颁发一个令牌给各个子系统,子系统可以拿着令牌会获取各自的受保护资源,为了减少频繁认证,各个子系统在被passport授权以后,会建立一个局部会话,在一定时间内可以无需再次向passport发起认证。用户统一在认证中心进行登录,登录成功后,认证中心记录用户的登录状态,并将 token 写入 Cookie(注意这个 Cookie是认证中心的,应用系统是访问不到的)原创 2024-05-20 18:01:19 · 1078 阅读 · 0 评论 -
解释下什么是事件代理?应用场景?
适合事件委托的事件有:click,mousedown,mouseup,keydown,keyup,keypress减少整个页面所需的内存,提升整体性能动态绑定,减少重复工作focus、blur这些事件没有事件冒泡机制,所以无法进行委托绑定事件mousemove、mouseout这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的如果把所有事件都用事件代理,可能会出现事件误判,即本不该被触发的事件被绑定上了事件。原创 2024-05-18 17:44:53 · 765 阅读 · 0 评论 -
说说JavaScript中的事件模型
javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等。如上,当希望为同一个元素绑定多个同类型事件的时候(上面的这个btn元素绑定2个点击事件),是不被允许的,后绑定的事件会覆盖之前的事件。由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念。事件捕获与事件冒泡相反,事件最开始由不太具体的节点最早接受事件, 而最具体的节点(触发节点)最后接受事件。原创 2024-05-17 19:11:04 · 725 阅读 · 0 评论 -
JavaScript中执行上下文和执行栈是什么?
简单的来说,执行上下文是一种对Javascript代码执行环境的抽象概念,也就是说只要有Javascript代码运行,那么它就一定是运行在执行上下文中。引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文),当该函数执行结束后,对应的执行上下文就会被弹出,然后控制流程到达执行栈的下一个执行上下文。留意上面的代码,let和const定义的变量a和b在创建阶段没有被赋值,但var声明的变量从在创建阶段被赋值为undefined。紫色框住的部分为全局上下文,蓝色和橘色框起来的是不同的函数上下文。原创 2024-05-16 17:09:14 · 700 阅读 · 0 评论 -
说说你对盒子模型的理解?
当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)padding,即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的background属性影响。boreder,即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成。margin,即外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域。标准盒子模型,是浏览器默认的盒子模型。原创 2024-05-06 17:46:22 · 862 阅读 · 0 评论 -
两种方式实现水平瀑布流布局
在实际开发中,经常会遇到图片排序处理的问题,进过多次尝试,我在这里总结两种图片水平排序的方式:第一种:CSS属性直接设置图片样式具体是使用CSS中的column-count属性,给图片的外部box设置后,里面的img可以直接根据数量来进行排序页面效果就是以下这样:html和css代码如下:可能细心的你会发现,但是这个属性可以进行水平对齐,但是排序会出现问题,所以应用场...原创 2020-09-12 15:31:00 · 435 阅读 · 0 评论