- 博客(139)
- 收藏
- 关注
RSS订阅原创 前端性能优化
将不需要全局共享的状态移至组件内，减少全局状态更新的开销。例如：使用reactive管理局部状态，而不是在全局store中存储。注意：绘制是重点，要保证初次获取的内容的字节数足够小，这也是我们做按需加载的原因。讨论绘制问题基本都是围绕资源的体积来处理。：将计算密集的逻辑放入组件的computed或watch，而不是在store的getter中。：将Vuex或Pinia的状态模块化，按需加载，提高性能。动画卡顿的原因：单线程，阻塞。
2025-03-16 21:48:21
866
转载 前端知识梳理-浏览器篇
进程是cpu资源分配最小单位，线程是进程最小调度单位。在我们的操作系统中，有许多许多的进程，操作系统每干一件事儿就会交给一个进程去做，比如打开音乐就是一个进程。而每个进程里又包含了许多的线程，例如打开了音乐播放器，放一首歌，就是一个新的线程，切换下一首，可能又是另外一个线程。总之他俩之间的关系就是一个进程包含多个线程。
2025-03-09 21:49:00
12
原创 Vue组件传值异步问题--子组件拿到数据较慢
之前写静态页面的时候，直接父向子传值，是指节能渲染出父组件给子组件的值，但是加上请求后，就会出现请求过慢。就是在组件创建和渲染完毕时，子组件的值才拿到，子组件并没有实时更新模版（灾难始终慢我一步）
2025-03-05 20:02:53
142
转载 前端如何优雅通知用户刷新页面？这几种姿势让你不再被骂！
利用 Service Worker 拦截请求，后台更新资源后提示用户刷新。：每次发版生成唯一版本号，和用户本地存储的版本号对比，不一致就提醒刷新。：通过 WebSocket 建立长连接，服务端主动推送更新消息。：定时轮询接口，检测资源是否更新，若更新则静默刷新。别再让用户骂你“弹窗狂魔”了，赶紧挑个姿势优雅提醒！：电商活动页、运营位频繁更新的页面。：PWA 应用、离线优先的页面。：即时性强，适合高频更新场景。：精准控制，用户无感知更新。：用户无操作压力，减少打扰。：专业感拉满，用户体验丝滑。
2025-02-23 23:07:52
48
原创 vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
第一步:在路由配置文件中为列表页设置meta参数，里面包含useCatch和keepAlive。2.从详情页面返回列表页面需要记住上次浏览的状态。1.搜索页面到列表页面，需要刷新重新获取数据。第二步:在App文件中如下设置。
2025-01-11 17:40:02
384
原创 vue项目打包优化--提高首屏加载速度
开发过程中我们往往需要 console.log 进行调试，调试完后一般也会删除或注释掉，但难免有时会忘记，所以可以使用 terser-webpack-plugin 来清除 console.log。vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了。有一些js的依赖我们可以不用打包到我们程序中，可以使用cdn的方式来链接js的依赖文件。1、首先先看配置：在vue.config.js中设置不打包的文件。vue.config.js的配置。
2024-12-22 21:18:37
328
原创 vue3状态管理库 Pinia
总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation，只保留了 state, getter和action。Pinia拥有更简洁的语法， 扁平化的代码编排，符合Vue3 的 Composition api。
2024-12-15 20:57:54
388
原创 Vue3实现mqtt的订阅与发布
MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，通常用于连接物联网设备和应用程序之间的通信。它最初由IBM开发，现在由OASIS（Organization for the Advancement of Structured Information Standards）进行标准化。MQTT的工作原理很简单：它采用发布/订阅模式，其中设备（称为客户端）可以发布消息到特定的主题（topics），而其他设备可以订阅这些主题以接收消息。
2024-12-08 21:37:53
461
原创 从输入url到页面加载的全过程
3.生成渲染树：从DOM树的根节点开始，遍历每个可见节点，对于每个可见节点，找到CSSOM树中对应的规则并应用，根据每个可见节点及其对应样式，组合生成渲染树。当页面元素样式改变不影响元素在文档流中的位置时，如color、visibility等，浏览器只会将新的样式赋予元素并进行重新绘制的操作。2.如果缓存中没有，浏览器向DNS服务器请求解析url中的域名对应的ip地址。5.根据渲染树及其回流得到的集合信息，得到节点的绝对像素，绘制页面像素信息。4.根据生成的渲染树，进行回流，得到节点的集合信息。
2024-12-01 22:40:58
140
原创 echarts 柱状图
如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用(中间的柱子)。4.如何固定最后一根柱子的高度在同一个位置，data: dataArry.map(item => fixedTotal)3.第一根柱子的 position: "right", 相当于百分比跟随柱子的最右边，data是百分比的数据。数据过多会导致下拉的时候，触发y轴formatter，更新序号，序号会重新排列，不准确。1.y轴显示的序号和名称需要在数据中拼接，而不是在y轴data中拼接，
2024-11-26 17:53:38
276
原创 vue2和vue3版本区别
在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。而在vue3中直接在setup(){}中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得return。setup里面没有this。setup() {//使用ref，说明这个数组就是全局在面板中可以使用了//设置一个函数//改变selectGirl的值要加value//要得到值要加value ，这些都因为使用了ref函数//在标签中使用的变量要使用return。
2024-11-17 21:17:39
288
原创 浅谈JavaScript中的Promise、Async和Await
使用Promise，可以避免所谓的“回调地狱”，即多层嵌套的回调函数，从而使代码更加清晰和易于维护。它可以暂停async函数的执行，等待Promise的解决（resolve），然后以Promise的值继续执行函数。使得处理复杂的异步逻辑更加简单，尤其是在涉及多个依次执行的异步操作时。在很多情况下可以提供更清晰和简洁的代码，但Promise也有其独特的优势。是建立在Promise之上的高级抽象，使得异步代码的编写和阅读更加接近于同步代码的风格。后的代码变成同步代码，但是再往后的代码依旧会被推入微任务队列。
2024-11-10 19:57:27
981
原创 Javascript 中的回流和重绘
当您只想隐藏元素而不影响布局时，请使用visibility:hidden而不是display:none。重绘不涉及重新计算布局，因此比回流更快，但仍然需要重绘页面的部分内容，这需要一些时间。如果许多元素受到一次更改的影响，则回流的成本可能会很高，并且会降低网站的性能。当浏览器重新计算页面上元素的位置、大小和布局时，会发生。当元素的视觉属性发生变化但布局不变时，会发生。以上就是Javascript 中的。降低 css 的复杂性。最小化 dom 操作。
2024-10-20 19:44:54
785
转载 JS怎么实现电子签名呢
通过以上步骤，我们实现了一个简单的前端签名功能。这个功能可以用于各种需要用户签名的Web应用中。通过进一步扩展，可以添加更多的功能，比如不同颜色的签名笔、签名的缩放和撤销功能等。
2024-09-22 20:59:23
276
原创 前端面试刷题必备（CSS篇）
盒子模型它包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）正常模式下，也就是标准盒子模型，盒子的宽度就是 width = content怪异模式下，盒子的宽度是 width = content + padding + border通常我们可以使用box-sizing来修改盒子模式，border-box会将 padding 和 border 都算入 width；就是默认的标准模式。
2024-09-17 21:23:45
1028
原创 丢弃掉模板语法和‘+‘来拼接url，解决无效代码
在前端开发中，我们经常需要处理URL，例如在发起HTTP请求时构建API端点，或在页面导航时构建动态链接、拼接动态参数。过去，我们习惯于使用模板语法和字符串拼接来构建这些URL，现在在代码中依然可以看到新的代码还在使用这种方法。但这种方法不仅容易出错，而且在维护和阅读代码时也不够直观。本文将介绍更现代和更安全的URL构建方法，并展示如何在实际项目中应用它们。传统上，我们常使用字符串拼接或模板语法来构建URL。
2024-09-08 18:22:52
623
原创 JS的执行原理，了解Event Loop事件循环、微任务、宏任务
在事件循环中，当主线程执行完当前的同步任务后，会检查事件队列中是否有待处理的事件。如果有，主线程会取出事件并执行对应的回调函数。这个循环的过程被称为事件循环（Event Loop），它由主线程和任务队列两部分组成。主线程负责执行同步任务，而异步任务则通过任务队列进行处理。这种机制保证了异步任务在适当的时机能够插入执行，从而实现了JavaScript的非阻塞异步执行。主线程读取JavaScript代码，形成相应的堆和执行栈。当主线程遇到异步任务时，将其委托给对应的异步进程（如Web API）处理。
2024-09-01 21:01:52
1027
原创 TypeScript类型定义及复用
我还注意到，在类型复用时，团队成员往往只是简单地为已有类型新增属性，而忽略了更高效的复用方式。例如，有一个已有的类型Props需要复用，但不需要其中的属性c。在这种情况下，团队成员会重新定义Props1，仅包含Props中的属性a和b，同时添加新属性e。a: string;b: string;c: string;a: string;b: string;e: string;实际上，我们可以利用TypeScript提供的工具类型Omit来更高效地实现这种复用。a: string;
2024-08-25 20:48:36
605
原创 鸿蒙关于可以实现滚动效果的容器组件的相关知识
在开发的过程中，用户在使用app的过程中对于滚动条样式审美的提升，不断向开发人员提出建议，开发人员不得不改变滚动条样式。通过使用ScrollBar组件（需要和Grid公用同一个Scroller）来自定义样式。Grid的属性属性名类型说明scrollBarBarState设置滚动条状态。默认值：BarState.autoBarState.off 关闭BarState.on 常驻BarState.auto 按需显示设置滚动条的颜色。设置滚动条的宽度。
2024-08-18 21:17:21
1678
原创 Vue自定义指令
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建文件在main.js引入并调用下面分享几个实用的 Vue 自定义指令v-copyv-debouncev-emojiv-LazyLoad。
2024-08-11 21:45:04
989
原创 DevEso Studio的使用试题
3. DevEco Studio支持使用多种语言进行应用/服务的开发，包括ArkTS、JS和C/C++。2. module.json5文件中的deviceTypes字段中，配置了phone，tablet，2in1等多种设备类型，才能进行多设备预览。1. 如果代码中涉及到一些网络、数据库、传感器等功能的开发，均可使用预览器进行预览。1. 用哪一种装饰器修饰的组件可作为页面入口组件：（@Entry）4. 组件预览通过在组件前添加下面哪个注解： (@Preview)
2024-08-02 17:45:56
444
转载 深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别与用法
深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。
2024-07-21 19:11:50
465
原创 vitest 单元测试应用与配置
jsdom 是一个在 Node.js 环境中使用的纯 JavaScript 实现的 DOM（文档对象模型），它模拟了足够多的浏览器环境，使得你能够在服务器端（如 Node.js 应用程序）中运行那些原本只能在浏览器中运行的脚本。Vitest的配置可以通过多种方式实现，包括在package.json中直接配置，或者创建一个专门的配置文件（如vitest.config.ts或vitest.config.js）。在你的Vue项目中，你可以为组件、函数、工具等编写测试。你可以根据项目的具体需求来配置这些选项。
2024-07-12 16:44:05
1735
原创 【js基础巩固】深入理解作用域与作用域链
先看一段代码，下面代码输出的结果是什么？当执行到这句代码的时候，其调用栈的状态图如下所示：此时，和foo都包含变量myName，那么bar函数里面的myName值到底该选择哪个呢？myNamefoofoomyNamefoomyName如果按照这种方式来查找变量，那么最终执行bar函数打印出来的结果就应该是“极客邦”。但实际情况并非如此，而是打印“极客时间”。要解释这个问题，就涉及到了。其实在每个执行上下文的中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为。
2024-07-07 22:01:31
1096
原创 浏览器中如何获取用户网络状态
以下代码是 ahooks 中的 useNetwork 自定义 Hook 实现方式，其核心原理是通过以上的navigator.onLine和navigator.connection中提供的API进行分装的。其他的自定义Hooks也有类似实现的封装。since?: Date;online?: boolean;rtt?: number;type?: string;downlink?: number;saveData?: boolean;: number;: string;if (!
2024-06-30 22:33:35
675
1
原创 vue中provide和inject的使用
vue中组件传值是比较常见的，也是我们日常编写代码最常用到的，这里主要讲讲provide和inject的用法。我是子组件,我获取的内容是 我是DemoTwo级组件的值。
2024-06-23 21:58:42
271
原创 如何判断一个js对象是否存在循环引用
在前端是我们常用的一个方法，可以将一个对象序列化。例如将如下对象序列化我们发现上面对象是可以使用JSON.stringfy序列化的。personowner我们对上面这个对象进行JSON.stringfy,结果如下，会报错：我们发现他说不能转化一个“圈结构体为JSON”,是因为这个对象的owner属性指向了自己。在转化的时候会变成死循环。
2024-06-16 21:24:10
495
转载 前端如何判断上传图片尺寸（宽度和高度）
在上传图片时，存在需要判断图片的宽高是否符合需求的场景（如指定Icon尺寸）。那么前端如何判断上传图片尺寸（宽度和高度）？
2024-06-10 18:16:43
487
转载 BFC是什么？
BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。详见MDN看不明白？那就对了！官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽）还是让逆战在新冠疫情期的我来给你解答吧！1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
2024-05-26 21:12:32
963
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人