- 博客(65)
- 收藏
- 关注
RSS订阅原创 JS跟CSS都是怎么阻塞的
总而言之，JS 和 CSS 的阻塞行为是浏览器为了确保页面正确渲染和脚本正确执行而采取的策略。让关键的 CSS 尽快加载，并妥善管理 JavaScript 的加载和执行时机，特别是利用好async和defer属性。
2025-12-03 20:49:02
834
原创 在JS是，一个对象身上用 ‘‘.‘‘ (点)取值跟用 ‘‘[]‘‘ (中括号)取值的区别？
JavaScript对象属性访问的两种方式——点运算符(.)和方括号运算符([])各有特点。点运算符要求属性名是有效标识符，适合静态属性名访问；方括号运算符支持动态属性名，能处理数字、特殊字符等情况。当属性名来自变量、包含特殊字符或为数字时，必须使用方括号。在编写代码时，静态属性名优先用点运算符，动态场景必须用方括号。可选链操作符(?. )可以安全访问嵌套属性，两种语法都支持。
2025-11-18 21:10:25
287
原创 在JS中，修改this的指向有什么方法，他们之间的区别是什么?
在 JavaScript 中，this的指向是动态的，理解并控制它对于编写健壮的代码至关重要。以下是修改this指向的主要方法及其核心区别。方法作用描述调用时机参数形式是否返回新函数call立即调用函数，并指定函数内的this指向和参数列表。参数列表（否apply立即调用函数，并指定函数内的this指向和参数数组。参数数组（否bind创建一个新的函数，该函数被调用时，其this指向被永久绑定到指定对象。（返回待调用的新函数）参数列表（可在绑定时和调用时分两次传入）自身不绑定this，其内部的。
2025-11-18 20:53:00
554
原创 git常用的命令有哪些？
Git的常用命令确实不少，但别担心，一旦理解了它的核心工作流程，这些命令就会变得非常直观。下面这个表格汇总了Git最常用的命令，方便你快速查阅。类别命令说明git init在当前目录初始化一个新的Git仓库。克隆一个远程仓库到本地。将工作区的文件修改添加到暂存区。使用git add .添加所有变动。将暂存区的内容提交到本地仓库，并附上提交说明git status查看工作区和暂存区的状态（哪些文件被修改、已暂存等）。git log查看提交历史记录。git branch列出所有本地分支。
2025-11-05 14:57:59
295
原创 在JS中，数组、对象身上的常用方法有哪些?
在 JavaScript 中，数组和对象提供了丰富的方法来帮助我们高效地处理和操作数据。下面这个表格汇总了它们最常用的方法，方便你快速了解其核心功能。类别方法关键作用是否会修改原数据push()pop()在数组添加/移除元素。是unshift()shift()在数组添加/移除元素。是splice()在添加、删除或替换元素，功能强大。是map()遍历并出一个新数组，常用于数据转换否filter()出满足条件的元素，生成新数组。否find()第一个满足条件的或其。否。
2025-11-05 14:56:36
779
原创 在JS中，判断数据类型的方式有哪些？
JavaScript数据类型判断方法总结：表格对比了typeof、instanceof、Object.prototype.toString.call()等常用方法的特点。typeof适合基本类型但无法区分null；instanceof检查原型链但不适用于原始类型；Object.prototype.toString.call()最精确；Array.isArray()专用于数组检测。建议根据场景组合使用：基本类型用typeof(注意null特例)，数组检测用Array.isArray()，精确类型判断用Obje
2025-11-04 17:34:57
1047
原创 在vue里面，常见的修饰符有哪些？
Vue 中的修饰符是以点号（.）开头的特殊后缀，用于在指令后附加声明，以特殊的方式绑定和调整指令的行为，让你能更专注于数据逻辑而非 DOM 事件细节。下面表格汇总了 Vue 中常见的修饰符及其应用场景：分类修饰符主要作用常见应用场景示例.stop阻止事件冒泡。阻止事件的默认行为。使用事件捕获模式处理事件。仅当事件由元素自身触发时（例如不是从其子元素冒泡而来）才执行。事件处理函数只触发一次。提升移动端滚动等事件的性能，告知浏览器不会阻止默认行为。监听组件根元素的原生事件。.lazy将。
2025-11-04 17:31:50
186
原创 在前端开发中，如何保存一个页面的状态？
在前端开发中，保存页面状态是提升用户体验的关键，它能确保用户在刷新、导航或离开后返回时，页面能恢复到之前交互的状态。下面这个表格汇总了主要的实现方案，帮你快速了解其核心区别。方法分类具体技术核心机制 / 生命周期主要适用场景数据，除非手动删除。同源页面可共享。长期用户偏好（如主题、语言）、登录状态。数据仅在有效，关闭标签页即清除。临时表单数据、单次会话内的浏览状态。可设置过期时间，每次HTTP请求自动携带。存储空间小（约4KB）。
2025-11-04 12:30:46
475
原创 在docker中部署一个vue项目，大概的流程跟Linux命令是什么？
在 Docker 中部署 Vue 项目能有效解决环境一致性问题。其主要流程包括准备构建产物、编写构建文件、制作镜像和运行容器。下面这个流程图概括了主要步骤和关键命令：下面是每个步骤的具体细节和命令。
2025-11-04 12:26:36
510
原创 for循环跟forEach的区别
简单来说，for循环提供了更强大、灵活的控制能力，而forEach方法则提供了更简洁、易读的语法糖。选择哪一个，取决于你的具体需求：是更需要性能和控制力，还是更看重代码的简洁与清晰。
2025-11-04 12:21:46
278
原创 在前端中解决跨域问题的几种方式
选择跨域方案时，若能控制服务器端，CORS是首选的标准方案。若在开发阶段或无法配置后端，代理服务器是更灵活的选择。对于特定通信场景，可考虑或 WebSocket。而JSONP主要用于兼容老旧系统。
2025-10-13 11:04:41
753
原创 浏览器的事件机制是什么？
浏览器的事件机制是前端开发的核心之一，它就像是浏览器为响应用户操作（如点击、按键）或浏览器自身行为（如页面加载完成）而建立的一套精密通信系统。下面这个流程图概括了事件从发生到被处理的完整旅程，你可以先对它有个整体印象。理解了事件流的全过程后，我们来看看如何在这个流程的特定阶段“安插”监听器，以及如何操作事件对象。
2025-10-13 10:57:27
1212
原创 Vue2跟Vue3的生命周期有哪些，最常用的是哪几个？
Vue.js 的生命周期钩子是理解组件从创建到销毁整个过程的关键。下面这个表格清晰地展示了 Vue 2 和 Vue 3 在生命周期钩子上的对应关系和主要区别。
2025-10-11 14:38:39
338
原创 CSS中元素水平和垂直方向上居中有哪些方法？
让元素在水平和垂直方向上都居中，是前端开发中的常见需求。根据不同的布局场景和兼容性要求，可以选择多种方法。下面这个表格汇总了最实用的几种方案，方便你快速了解和选择。方法分类关键CSS代码 (父元素/子元素)优势注意事项代码简洁，布局灵活，无需知道子元素尺寸。。兼容性良好，但对于需要支持非常老旧浏览器（如IE8及以下）的项目需谨慎。代码（一行搞定），适合二维复杂布局。相比Flexbox，浏览器支持稍新，但在现代浏览器中已非常稳定。(父)(子)兼容性好（IE9+），。
2025-10-11 10:40:36
313
原创 Canvas是什么，应用场景是什么？
Canvas 是 HTML5 提供的一个强大图形工具，让你能通过 JavaScript 在网页上动态绘制各种图形、图像和动画。特性描述一个可以通过 JavaScript 进行绘图的 HTML 元素（<canvas>基于像素的（栅格图形）2D图形（通过）和 3D图形（通过 WebGL，如无内置图形元素事件监听，需手动计算坐标实现交互，适合处理复杂动画、游戏、大数据量实时渲染。
2025-10-11 10:34:54
483
原创 localStorage,sessionStorage和Cookie的存储区别
理解和Cookie的区别对前端开发很重要。为了让你快速把握全貌，下面这个表格汇总了它们的核心差异。特性Cookie约 约 （不同浏览器有差异）约 （不同浏览器有差异）可设置过期时间；未设置则，除非手动清除，关闭标签页或浏览器后清除在所有间共享在所有间共享内共享（即使同源，不同标签页也不共享）在 HTTP 请求头中服务器通信服务器通信原生接口不够友好，通常需要自行封装提供setItemgetItem等易用的接口提供。
2025-10-11 10:34:04
1002
原创 CSS中Flex常用的属性有哪些
核心思路：Flex 布局的核心思路是通过容器属性设定总体规则，再通过项目属性（尤其是flex）进行微观调整。实践建议：多动手实践这些属性的组合，特别是理解和flex属性的用法，它们能解决大部分常见的布局需求。
2025-10-11 10:30:40
595
原创 JS中的事件循环机制是什么？宏任务与微任务是什么以及他们的区别
核心机制：事件循环是 “执行宏任务 → 清空微任务队列” 的循环。优先级：微任务的执行时机总是优于宏任务。在同一次循环中，微任务在渲染之前执行，而宏任务在渲染之后执行。实用建议：优化性能：对于需要高优先级、立即执行的异步操作（如更新状态），优先使用微任务（如Promise避免阻塞：警惕微任务队列过长，因为这会阻塞UI渲染和后续宏任务的执行。不要编写可能产生无限循环微任务的代码。合理拆分：对于计算量大的任务，可以考虑使用宏任务（如setTimeout。
2025-10-10 16:52:52
445
原创 在Vue2和Vue3中，父子组件、跨级组件、任意组件和兄弟组件之间是怎么通信传值的？
methods: {</script>-- 父组件 --><template><script>methods: {</script>Vue 3使用编译器宏来定义和触发事件。-- 子组件 -->
2025-10-10 16:46:47
803
原创 Vuex的工作流程
Vuex 的工作流程是一个，它确保了状态变更的可预测性和可追踪性。为了帮你快速建立整体概念，我先用一个流程图来展示这个流程的全貌，然后再为你详细解析每个环节。下面我们来详细拆解图中的每个核心环节。
2025-10-10 16:40:24
887
原创 Pinna与Vuex之间的相同点与不同点
你可以这样理解：Pinia 可以看作是 Vuex 的现代化、简化和优化版本，它吸收了 Vuex 的核心思想，但采用了更符合 Vue 3 设计哲学和现代前端开发习惯的实现方式。对于绝大多数新项目，Pinia 是更推荐的选择。
2025-10-10 16:37:00
322
原创 vue2和vue3响应式原理有何不同?
Vue 2 和 Vue 3 的响应式系统虽然目标一致——实现数据驱动视图的自动更新，但它们在底层实现、性能和使用体验上存在显著差异。了解这些区别有助于你更好地理解 Vue 框架的演进和优化方向。下表清晰地对比了它们的核心区别：对比维度Vue 2Vue 3基于基于Proxy遍历对象属性，递归劫持每个属性代理整个对象，拦截所有操作需重写数组方法（如pushsplice原生支持，无需特殊处理，需借助Vue.setVue.delete，可直接操作。
2025-10-10 14:17:07
538
原创 在vue3中对于普通数据类型是怎么实现响应式的
简单来说，Vue 3 通过ref函数将基本数据类型“装箱”成一个对象，然后利用Proxy代理这个包装对象，从而间接实现了对基本数据类型的响应式追踪。虽然这带来了在 JavaScript 中需要操作.value的一点额外成本，但模板中的自动解包让开发体验保持了流畅。
2025-10-10 14:13:03
387
原创 在JS中，nextTick是什么以及它的作用和应用场景
简单来说，nextTick就像是一个“插队神器”，它允许你把一个任务安排在当前所有同步和微任务之后、浏览器重新渲染或进行下一个宏任务之前立刻执行。在 Vue.js 开发中，它是你安全操作更新后 DOM 的必备工具。在 Node.js 环境中，它帮助你控制任务执行顺序，保证异步 API 的设计一致性。
2025-10-10 14:00:58
922
原创 在JS中，什么时候用computed，什么时候用watch
在 Vue.js 中，computed（计算属性）和watch（侦听器）都是用于响应数据变化的强大工具，但它们的设计初衷和最佳应用场景有所不同。下面这个表格可以帮你快速把握它们的核心区别。特性Computed（计算属性）Watch（侦听器），基于依赖关系计算出一个值，响应数据变化执行副作用✅ ，依赖不变则直接返回缓存值❌ ，每次变化都执行回调❌ 在计算函数内进行异步操作✅ 异步操作，这个值可直接在模板使用，通常用于执行一段逻辑。
2025-10-10 13:58:22
598
原创 JS中箭头函数与普通函数的区别
JavaScript中箭头函数与普通函数的核心区别在于：1）语法上箭头函数更简洁；2）this绑定机制不同，箭头函数继承定义时的外层this且不可更改，普通函数this取决于调用方式；3）功能上普通函数可作为构造函数，拥有prototype和arguments对象，而箭头函数不具备这些特性。实际开发中，箭头函数适合需要固定this的场景（如回调函数），普通函数适合需要动态this或构造函数的场景。理解这些差异有助于根据需求选择合适的函数定义方式。
2025-10-10 13:44:03
752
原创 promise的用法
Promise 的核心价值在于：改善代码结构：通过链式调用扁平化异步流程，避免回调地狱。更好的错误处理：提供统一的.catch方法捕获错误。强大的组合能力：通过等方法轻松处理并发异步任务。最佳实践建议：在.then中总是返回新的值或 Promise，以维持链式调用。使用.catch进行统一的错误处理，而不是在每个.then中都定义第二个错误回调函数。对于复杂的异步流程，可以考虑使用语法，它基于 Promise，能提供更同步的代码书写风格。
2025-10-10 13:41:29
536
原创 CSS中的选择器有哪些？相对定位和绝对定位是相对于谁的？
CSS选择器就像一把“精准的尺子”，帮助您从HTML文档中选出需要添加样式的元素。当多个规则作用于同一元素时，CSS会根据选择器的类型计算一个“权重”来决定哪个样式生效。是两者的根本区别：相对定位“靠自己”，绝对定位“找靠山”（已定位的祖先元素）。（但不设置偏移量，使其视觉位置不变），然后为子元素设置。元素原本占据的空间会被保留，周围的元素不会重新排列。，这样子元素就可以以这个父容器为边界进行精确绝对定位。元素不再占据空间，其原来的位置会被其他元素填充。根据元素的属性及值来匹配元素。
2025-10-10 13:40:06
289
原创 CSS中清除浮动有哪些可以用
在 CSS 中使用float布局后，清除浮动确实是关键步骤，主要是为了避免父元素高度塌陷等问题。下面表格汇总了常用的清除浮动方法及其核心思路和注意事项：方法核心做法优点缺点overflow为父元素设置或。代码简洁。可能裁剪溢出内容；需注意盒模型尺寸以避免出现滚动条。在浮动元素末尾添加空标签（如<div>）并设置 clear: both。方法直观，浏览器兼容性好。添加无语义标签，影响HTML结构整洁。height直接为父元素设定固定高度。简单直接。
2025-10-10 11:05:47
511
原创 CSS的重绘和重排是什么？如何减少css的重绘和重排？
要理解重排和重绘，需要先了解浏览器渲染步骤：构建DOM树、构建CSSOM树、合成渲染树、布局（Layout，即重排）、绘制（Paint，即重绘）。重排 (Reflow / Layout)当渲染树中元素的尺寸、布局、位置或内容发生改变，导致浏览器需要重新计算所有受影响元素的几何属性（位置和大小），并更新整个渲染树的过程，就是重排。重排的范围可能很大，从当前元素向上定位祖先，向下所有子节点都可能被波及。触发重排的常见操作包括：改变窗口大小、更新元素内容、调整CSS盒模型相关属性（如宽度、高度、边距）、操作
2025-10-10 10:36:31
537
原创 webpack和vite的区别是什么
Webpack 更加成熟，功能强大，适用于复杂的构建需求，尤其在生产环境的优化上表现出色，但开发时速度较慢，配置复杂。- Vite 专注于快速的开发体验，利用现代浏览器的特性，启动和热重载非常快，适合现代前端开发，但在一些特殊情况下可能不如 Webpack 强大。选择哪个工具，取决于你的项目需求、团队经验以及对构建速度和兼容性的重视程度。
2025-04-01 20:34:56
1225
原创 CSS中的overflow属性
`overflow` 用于控制内容溢出时的显示行为，常见的值有 `visible`、`hidden`、`scroll` 和 `auto`。- `overflow-x` 和 `overflow-y` 提供了分别控制水平和垂直溢出的能力。- 使用 `overflow` 属性时，确保容器有明确的高度或宽度，才能有效控制溢出效果。
2025-04-01 18:36:18
901
原创 JS中模块化导入导出的方法有几种，这几种之间有什么区别？
特性 | ES6 模块 | CommonJS 模块 | AMD/UMD || 导入方式 | `import` | `require` | `define`（AMD）、`require`（UMD）|
2025-04-01 18:31:04
1155
原创 CSS中的em,rem,vm,vh详解
单位 | 解释 | 基础参考 | 用途 || `em` | 相对单位 | 父元素的字体大小 | 适用于需要根据父元素动态调整的场景。| `rem` | 相对单位 | 根元素（`<html>`）的字体大小 | 适用于确保一致的布局和尺寸，避免父元素影响。| 单位 | 解释 | 用途 || `vh` | 相对于视口高度的单位，1vh = 视口高度的 1% | 用于根据视口的高度设置元素的高度或其他尺寸。
2025-03-29 17:33:16
1360
原创 async和await是怎么理解的，await操作符可以写什么表达式
`async` 将函数标记为异步函数，自动返回 `Promise`。- `await` 用于等待一个 `Promise` 解决（resolve）或者拒绝（reject），可以等待任何返回 `Promise` 的表达式，或者直接等待一个值（它会被包装成一个 `Promise`）。- `await` 不能在普通函数中使用，必须在 `async` 函数内使用。
2025-03-29 11:06:12
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人