![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 74
北海屿鹿
越努力,越幸运
展开
-
使用 Web Serial API 在浏览器中实现串口通讯(纯前端)
对于这个API谷歌有提供示例工程:在线使用:https://googlechromelabs.github.io/serial-terminal/项目地址:https://github.com/GoogleChromeLabs/serial-terminal使用 Web Serial API 访问串口非常方便,目前来说唯一的问题是这还是实验性质的功能,可能之后接口还会变动,需要根据实际情况进行调整。原创 2024-07-23 16:03:02 · 323 阅读 · 0 评论 -
Less 文件转 CSS 文件
组件库,同一组件在不同平台的功能一致,但是样式有所不同,如果仍然使用上面的方式进行打包,显然很难满足不同平台对不同样式的需求,因此我开始调研相关的解决方案。发现在诸如 ant-design 这样的知名组件库中,React 组件的书写和样式的书写是分开的,用户在使用过程中,除了需要引入 React 组件之外,还需要统一引入打包好的 css 样式文件。到这里,其实基本上完成了我的需求,只需要将不同主题的各个样式文件统一到对应的入口 less 文件中,之后统一运行编译命令即可生成对应主题的 css 文件。原创 2024-05-17 09:46:06 · 548 阅读 · 0 评论 -
单文件组件 CSS 功能
可以通过给module.red {color: red;原创 2024-05-16 17:22:38 · 822 阅读 · 0 评论 -
Vue数组变更方法和替换方法
1、删除 —— 可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除项的项数。2、插入 —— 可以向指定位置插入任意数量的项,只需要提供3个参数:插入起始位置、0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四、第五,一直任意多个项。3、替换 —— 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需要指定3个指定参数:起始位置、要删除的项数和要插入的任意数量项。插入的项数是不必与删除的项数相等。原创 2023-12-20 16:09:47 · 990 阅读 · 0 评论 -
前端高频面试题
常见的前端性能优化方法包括减少HTTP请求,合并和压缩资源文件,使用CDN加速,使用缓存,优化图片,延迟加载,使用懒加载,使用异步加载,优化DOM操作,使用CSS Sprites,优化JavaScript代码等。浏览器缓存是指浏览器在访问网页时,将网页的资源(如HTML、CSS、JavaScript、图片等)保存在本地磁盘中,以便在下次访问相同网页时直接从本地加载,提高访问速度。跨域请求是指在浏览器中,通过JavaScript发起的请求,请求的目标与当前网页所在的域名不一致。原创 2023-08-14 10:57:23 · 452 阅读 · 0 评论 -
WebSocket心跳机制(笔记大全)
第一种方式会对服务器造成很大的压力,因为即使WebSocket连接正常,也要定时发送心跳包,从而消耗服务器资源。WebSocket心跳机制是必要的,它可以使WebSocket连接保持长连接,避免断开连接的情况发生。WebSocket心跳机制的原理是利用心跳包及时发送和接收数据,保证WebSocket长连接不被断开。WebSocket需要心跳,因为WebSocket连接可能会因为长时间没有数据传输而被断开,而心跳机制可以及时检测连接状态,保持WebSocket长连接。原创 2023-07-25 10:32:06 · 16563 阅读 · 2 评论 -
对Webpack的理解
Webpack是目前比较物流的前端构建工具,它基于入口,用不同的Loader来处理不同的文件Webpack的核心概念Entry:入口,Webpack执行构建的第一步将从Entry开始,可抽象成输入。告诉Webpack要使用哪个模块作为构建项目的起点,默认为./src/index.jsoutput:出口,告诉Webpack在哪里输出它打包好的代码以及如何命名,默认为./distModule:模块,在Webpack里一切皆模块,一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出原创 2023-07-25 10:27:55 · 922 阅读 · 0 评论 -
WebSocket心跳机制
存在网络忽然断开的情况,这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息,这些数据会丢失。为了解决上面的问题,就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。(1)websocket在连接后,如果长时间服务端和客户端不发消息,服务端会把websocket给断开。1、创建webSocket。2、websocket事件。3、WebSocket方法。原创 2023-07-25 10:21:11 · 1961 阅读 · 0 评论 -
Vue实例挂载的过程发生了什么
源码位置:src\platforms\web\runtime\index.js。方法,但发现本文件中并没有此方法,但仔细可以看到文件下方定义了很多初始化方法。源码位置:src\core\instance\lifecycle.js。源码位置:src\core\instance\render.js。源码位置:src\core\instance\index.js。源码位置:src\core\instance\state.js。源码位置:src\core\instance\init.js。的挂载,因此无法访问到。原创 2023-07-22 10:43:48 · 282 阅读 · 0 评论 -
我的创作纪念日
2022年02月23日发布第一篇博客。获得了一些粉丝的关注获得了不少正向的反馈,如赞、评论、阅读量等同时还认识了许多技术大神不叫猫先生、经海路大白狗......创作已然是生活的一部分在有限的精力下,可以很好平衡创作和工作学习原创 2023-07-20 10:11:48 · 203 阅读 · 0 评论 -
React中组件间过渡动画如何实现?
当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验。属性,让元素在两个状态之间平滑过渡,从而得到相应的动画效果。发生变化的时候,先保存移除的节点,当动画结束后才真正移除。在日常开发中,页面切换时的转场动画是比较基础的一个场景。可以帮助我们方便的实现组件的入场和离场动画。,然后开始执行动画,当动画结束后,移除两个。插入的节点,先渲染dom,然后再做动画。删除的节点,先做动画,然后再删除dom。当有一组动画的时候,就可将这些。当动画执行结束后,会移除两个原创 2023-07-13 10:49:07 · 1372 阅读 · 0 评论 -
React中的key有什么作用?
良好使用key属性是性能优化的非常关键的一步,注意事项为:key 应该是唯一的key不要使用随机值(随机数在下一次 render 时,会重新生成一个数字)使用 index 作为 key值,对性能没有优化react判断key。当拥有key的时候,react根据key属性匹配原有树上的子元素以及最新树上的子元素,像上述情况只需要将000元素插入到最前面位置当没有key的时候,所有的li标签都需要进行修改同样,并不是拥有key值代表性能越高,如果说只是文本内容改变了,不写key反而性能和效率更高原创 2023-07-13 10:43:33 · 829 阅读 · 0 评论 -
React中 Real DOM 和 Virtual DOM 的区别?优缺点?
性能方面:使用 Virtual DOM,能够有效避免真实 DOM 数频繁更新,减少多次引起重绘与回流,提高性能。请求后,并不知道后续还有 9 次更新操作,因此会马上执行流程,最终执行 10 次流程。,意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实。跨平台:React 借助虚拟 DOM,带来了跨平台的能力,一套代码多端运行。第二个参数是个对象,里面存着标签的一些属性,例如 id、class 等。节点,浏览器没这么智能,收到第一个更新。执行,返回值是一个对象,也就是虚拟。原创 2023-07-13 10:40:16 · 728 阅读 · 0 评论 -
Vue中组件和插件有什么区别?
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历、时间、范围等组件作具体的实现调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单。原创 2023-06-30 14:44:07 · 607 阅读 · 0 评论 -
Vue实例挂载的过程
我们都听过知其然知其所以然这句话那么不知道是否思考过new Vue()这个过程中究竟做了些什么?过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等首先找到vue的构造函数源码位置:src\core\instance\index.js是用户传递过来的配置项,如等常用的方法vue构建函数调用_init方法,但我们发现本文件中并没有此方法,但仔细可以看到文件下方定定义了很多初始化方法首先可以看initMixin方法,发现该方法在Vue原型上定义了_init方法。原创 2023-06-30 10:08:02 · 1099 阅读 · 0 评论 -
CSP(Content Security Policy)可以解决什么问题?
当浏览器尝试加载一个 Web 页面时,它会检查页面是否包含 CSP 头,并根据该头信息确定允许加载哪些资源。CSP 通过限制 Web 应用程序能够加载和执行的内容,来减少恶意攻击的成功率。需要注意的是,在实际应用中,Web 开发人员需要谨慎设置 CSP 规则,以确保不会限制正常的 Web 应用程序功能。此外,开发人员也需要定期审核 CSP 规则,以确保其仍然适用于最新的 Web 应用程序版本。总之,CSP 的原理是通过限制 Web 应用程序能够加载和执行的内容,来减少恶意攻击的成功率。原创 2023-06-29 11:22:01 · 432 阅读 · 0 评论 -
对 Electron 架构的理解
Electron 的架构采用了 Chromium 和 Node.js 的组合方式,将 web 技术栈和底层系统功能完美地结合起来,提供了一种灵活、可扩展的桌面应用程序开发方式。对于前端开发人员来说,它提供了一种全新的开发方式和编程思路,为构建高质量的桌面应用程序提供了更多的便利和选择。与传统的桌面应用程序不同,Electron 应用程序使用 HTML、CSS 和 JavaScript 技术栈来实现界面设计和业务逻辑,并且具有良好的跨平台性能和扩展性。原创 2023-06-29 11:22:18 · 1740 阅读 · 0 评论 -
Vue常用的修饰符有哪些?分别有什么应用场景?
在程序世界里,修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理vue。vue中修饰符分为以下五种:表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符原创 2023-06-29 11:17:45 · 383 阅读 · 0 评论 -
CSS3新增了哪些新特性?
动画这个平常用的也很多,主要是做一个预设的动画。和一些页面交互的动画效果,结果和过渡应该一样,让页面不会那么生硬。(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观。background-size属性常用来调整背景图片的大小,主要用于设定图片本身。通常情况,背景都是覆盖整个元素的,利用这个属性可以设定背景颜色或图片的覆盖范围。能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色。当我们设置背景图片时,图片是会以左上角对齐,但是是以。原创 2023-06-27 12:00:07 · 768 阅读 · 0 评论 -
Javascript如何实现继承?
继承(inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”继承的优点继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码在子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能虽然JavaScript并不是真正的面向对象语言,但它天生的灵活性,使应用场景更加丰富原创 2023-06-27 11:47:54 · 222 阅读 · 0 评论 -
JavaScript 中内存泄漏的几种情况?
并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。进入环境的变量所占用的内存就不能释放,当变量离开环境时,则将其标记为“离开环境“然后,它会将所有在上下文中的变量,以及被在上下文中的变量引用的变量的标记去掉。这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"随后垃圾回收程序做一次内存清理,销毁带标记的所有值并收回它们的内存。语言中,因为是手动管理内存,内存泄露是经常出现的事情。原创 2023-06-26 16:10:23 · 606 阅读 · 0 评论 -
ajax原理是什么?如何实现?
AJAX全称(Async Javascript and XML)即异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页Ajax的原理简单来说通过对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面流程图如下:Ajax请求数据流程与“领导想找小李汇报一下工作”类似,上述秘书就相当于对象,领导相当于浏览器,响应数据相当于小李浏览器可以发送HTTP。原创 2023-06-26 16:01:22 · 769 阅读 · 1 评论 -
对作用域链的理解
引擎会尝试在当前作用域下去寻找该变量,如果没找到,再到它的上层作用域寻找,以此类推直到找到该变量或是已经到了全局作用域。可见上述代码中在函数内部声明的变量或函数,在函数外部是无法访问的,这说明在函数内部定义的变量或者方法只是函数作用域。词法作用域,又叫静态作用域,变量被创建时就确定好了,而非执行阶段确定的。把作用域比喻成一个建筑,这份建筑代表程序中的嵌套作用域链,第一层代表当前的执行作用域,顶层代表全局作用域。变量的引用会顺着当前楼层进行查找,如果找不到,则会往上一层找,一旦到达顶层,查找的过程都会停止。原创 2023-06-26 15:43:17 · 359 阅读 · 0 评论 -
Canvas和SVG有什么区别?
svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会失真和锯齿。而canvas输出标量画布,就像一张图片一样,放大会失真或者锯齿。Canvas适用于像素级绘图和动画,而SVG适用于矢量图形和可缩放的图像。选择使用Canvas还是SVG取决于具体的需求和场景。原创 2023-06-15 18:53:45 · 1313 阅读 · 2 评论 -
Html中语义化的理解
语义化是指在编写HTML和CSS代码时,通过恰当的选择标签和属性,使得代码更具有语义性和可读性,使得页面结构和内容更加清晰明了。语义化的目的是让页面具备良好的可访问性、可维护性和可扩展性。可访问性(Accessibility):通过使用恰当的标签和属性,可以提高页面的可访问性,使得辅助技术(如屏幕阅读器)能够更好地理解和解析页面内容,使得残障用户能够正常浏览和使用网页。原创 2023-06-15 18:48:08 · 1675 阅读 · 0 评论 -
Taro 的实现原理是怎么样的?
Taro 利用 Babel、React、Webpack 等技术,通过封装原生 API 和提供不同的 Polyfill 实现了多端适配,同时也支持复杂的样式表达和自动化导入组件等特性。Taro 是一个多端统一开发框架,可以使用一套代码编译成微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序、QQ 小程序、快应用、H5 等多个平台的应用。:Taro 在运行时对代码进行了一些优化,例如使用字典树实现 JSX 解析、避免使用内置事件监听器、减少对原生 API 的调用等方式来优化性能。原创 2023-05-30 10:53:39 · 1031 阅读 · 6 评论 -
HTTP请求中token、cookie、session有什么区别
cookieHTTP无状态的,每次请求都要携带cookie,以帮助识别身份服务端也可以向客户端set-cookie,cookie大小4kb默认有跨域限制:不可跨域共享,不可跨域传递cookie(可通过设置withCredential跨域传递cookie)cookie本地存储HTML5之前cookie常被用于本地存储HTML5之后推荐使用localStorage和sessionStorage现代浏览器开始禁止第三方cookie原创 2023-05-30 10:13:17 · 1143 阅读 · 0 评论 -
JavaScript判断对象是否为空对象的几种方法
用于转换结果的函数或数组。因为 JSON.stringify() 序列化时会忽略一些特殊的值,所以不能保证序列化后的字符串还是以特定的顺序出现(数组除外)。Object 对象的 getOwnPropertyNames 方法,获取到对象中的属性名,存到一个数组中,返回数组对象,我们可以通过判断数组的 length 来判断此对象是否为空。深拷贝最粗暴的方式是JSON.parse(JSON.stringify()),这个方式实现深拷贝会因为序列化的诸多特性从而导致诸多的坑点:比如现在我们要说的循环引用问题。原创 2023-05-23 09:08:42 · 889 阅读 · 0 评论 -
ES6函数新增了哪些扩展?
上面的foo函数,当参数为对象的时候才能进行解构,如果没有提供参数的时候,变量x和y就不会生成,从而报错,这里设置默认值避免。如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。参数默认值应该是函数的尾参数,如果不是非尾部的参数设置默认值,实际上这个参数是没发省略的。如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域。参数默认值可以与解构赋值的默认值结合起来使用。原创 2023-05-22 10:05:10 · 599 阅读 · 0 评论 -
ES6对象新增了哪些扩展?
Reflect.ownKeys(obj):返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。Object.keys(obj):返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。返回一个对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对的数组。返回自身的(不含继承的)所有可遍历(enumerable)属性的键名的数组。在解构赋值中,未被读取的可遍历的属性,分配到指定的对象上面。原创 2023-05-22 09:54:48 · 955 阅读 · 0 评论 -
ES6中数组新增了哪些扩展?
注意:通过扩展运算符实现的是浅拷贝,修改了引用指向的值,会同步反映到新数组。还可以接受第二个参数,用来对每个元素进行处理,将处理后的值放入返回的数组。返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回。参数是一个回调函数,接受三个参数依次为当前的值、当前的位置和原数组。如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。方法的参数写成一个整数,表示想要拉平的层数,默认为1。参数的逆运算,将一个数组转为用逗号分隔的参数序列。当参数只有一个的时候,实际上是指定数组的长度。原创 2023-05-22 09:19:43 · 872 阅读 · 0 评论 -
页面加载的过程中,JS 文件是不是一定会阻塞 DOM 和 CSSOM 的构建?
JavaScript阻塞DOM和CSSOM的构建的情况主要集中在以下两个方面:JavaScript文件被放置在head标签内部当JavaScript文件被放置在head标签内部时,浏览器会先加载JavaScript文件并执行它,然后才会继续解析HTML文档。因此,如果JavaScript文件过大或服务器响应时间过长,就会导致页面一直处于等待状态,进而影响DOM和CSSOM的构建。原创 2023-05-16 17:26:46 · 817 阅读 · 0 评论 -
Vite 和 Webpack 的区别
Vite 的构建速度比 Webpack 更快,因为 Vite 在开发环境下使用了浏览器原生的 ES 模块加载,而不是像 Webpack 一样使用打包后的文件进行模块加载。:Vite 的配置相对更简单,因为它无需进行大量的配置,只需指定一些基本的选项就可以开始开发。:Webpack 是一个功能更加全面的打包工具,支持各种 Loader 和插件,可以处理多种类型的文件和资源。总之,Vite 更适合用于开发环境下的快速构建,而 Webpack 则更适合用于生产环境下的复杂应用程序的打包处理。原创 2023-05-16 17:23:45 · 1213 阅读 · 0 评论 -
【前端面试题——JS篇】
事件代理又叫事件委托,是在网页设计中的一种设计思想,即把一个或者一组元素(目标元素)的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素,⽽不是⽬标元素。当事件响应到⽬标元素上时,会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上,然后在外层元素上去执⾏函数。防抖函数(debounce)功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。比如一个输入框,当应用实现防抖函数之后,用户不断输入内容时,函数会一直被触发,则不会发送请求。原创 2023-04-17 16:02:49 · 617 阅读 · 1 评论 -
Vite详解
构建工具 Vite,目前只有vue3才可以使用Vite,如果本文对你有所帮助请三连支持博主。Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite2,Vite全新的插件架构、丝滑的开发体验,可以和Vue3的完美结合。原创 2023-04-13 14:09:55 · 1939 阅读 · 0 评论 -
什么是瀑布流布局?瀑布流式布局的优缺点
是一种多列等宽不等高的一种页面布局方式。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式,用于图片比较复杂,图片尺寸比较复杂时可以使用的一种展示方式,这种展示方式可以使页面比较美观,让人有种错落有致的感觉。瀑布流是一种允许用户不断往下滑动,页面自动刷新呈现内容的交互形式。便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。原创 2023-04-12 10:51:48 · 1891 阅读 · 0 评论 -
【AMD、CMD和CommonJS】
对于基本数据类型,属于复制。即会被模块缓存。同时,在另一个模块可以对该模块输出的变量重新赋值。对于复杂数据类型,属于浅拷贝。由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块。当使用require命令加载某个模块时,就会运行整个模块的代码。当使用require命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。循环加载时,属于原创 2022-12-03 10:01:46 · 906 阅读 · 0 评论 -
详解抓包原理以及抓包工具whistle的用法
分析网络问题业务分析分析网络信息流通量网络大数据金融风险控制探测企图入侵网络的攻击探测由内部和外部的用户滥用网络资源探测网络入侵后的影响监测链接互联网宽频流量监测网络使用流量(包括内部用户,外部用户和系统)监测互联网和用户电脑的安全状态渗透与欺骗数据在网络上是以很小的帧的单位传输的,帧通过特定的称为网络驱动程序的程序进行成型,然后通过网卡发送到网线上,通过网线到达目的机器,在目的机器的一端执行相反的过程。原创 2023-03-08 14:46:53 · 1289 阅读 · 0 评论 -
我的创作纪念日
职业规划、创作规划。原创 2023-02-23 09:06:55 · 78 阅读 · 0 评论 -
SPA单页面的理解
SPA(single-page application),翻译过来就是单页应用SPA是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTMLJavaScript和CSS。原创 2023-02-23 08:59:56 · 166 阅读 · 0 评论