- 博客(62)
- 收藏
- 关注
RSS订阅原创 函数式组件中的渲染函数 & JSX
函数式组件（Functional Components）是一种更加简洁的组件形式，通常用于那些没有状态或生命周期需求的场景。它们只关心如何根据输入的props渲染内容，不涉及复杂的逻辑或副作用。在 Vue 和 React 中，函数式组件的最大优势在于其性能上的优化，因为它们通常比传统的组件更轻量，渲染速度也更快。没有内部状态。没有生命周期钩子。只接收props，并返回要渲染的 UI。代码更简洁，适合做一些简单的展示性组件。
2025-03-29 17:48:07
912
原创 使用 fetch 实现流式传输：核心原理与实践
流式传输是一种逐步获取数据的方式，不同于传统的请求响应模式（即一次性返回所有数据），流式传输允许你从服务器获取数据的同时，也能逐步处理数据。这种方式尤其适用于处理大规模数据（如视频、音频、大文件）或实时数据（如实时消息、实时日志等）的场景。fetch通过fetchAPI 实现流式传输，可以有效提高大数据处理的效率和用户体验。无论是下载大文件、实时数据更新还是媒体流传输，流式传输都能帮助开发者避免阻塞 UI、减少内存占用，并使得数据处理更加高效。
2025-03-26 23:11:33
954
原创 CA 机构如何防止中间人攻击
在中间人攻击中，攻击者通过拦截、篡改甚至伪造通信内容，使得通讯双方误以为它们在进行安全的直接通信，而实际上攻击者控制了整个通信过程。比如，攻击者可能伪造服务器的公钥，欺骗客户端使其连接到攻击者的伪装服务器，从而获取用户的敏感信息如密码、账号等。CA 机构通过严格的证书验证、数字签名、加密协议、信任链管理等多重技术手段，为互联网通信提供了强大的安全保障。通过 CA 机构的验证机制，客户端可以确保连接的服务器是合法的、可信的，并避免了中间人攻击的风险。
2025-03-21 23:14:41
751
原创 ES6模块化详解：导入与导出方式
默认导出：每个模块只能有一个默认导出，适用于模块的主要功能。命名（分别）导出：模块可以有多个命名导出，适用于多个功能的导出。导入：将模块中的所有命名导出作为对象导入。命名导入 + 默认导入：可以结合命名导入和默认导入，导入模块中的多个功能。动态导入：用于按需加载模块，返回一个Promise。分别导出与统一导出：分别导出每个功能或统一导出多个功能。
2025-02-28 00:02:23
1001
原创 JavaScript 解构：让代码更简洁和易读
解构是 JavaScript 引入的一种语法，它允许你将数组或对象中的元素/属性直接赋值给变量，而无需逐个访问。这种方式极大地简化了代码，并且提高了可读性。数组解构数组解构使得你可以方便地从数组中提取元素并赋值给变量。解构的顺序与数组元素的顺序相匹配。
2025-02-15 12:59:21
319
原创 深入理解 CSS 层叠上下文
层叠上下文（Stacking Context）是一个三维的概念，它描述了网页元素的“堆叠”方式。当元素具有特定的属性时，它们会被认为是一个独立的层叠上下文。层叠上下文不仅决定元素的绘制顺序，还影响元素的叠加顺序。想象一下，你在浏览器中查看一个页面，页面中的每个 HTML 元素都可以在一个虚拟的 z 轴上进行堆叠。这个堆叠的顺序由 CSS 属性决定，尤其是z-index属性。当我们为某些元素指定了z-index的值，或使用其他特定的 CSS 属性时，就创建了一个层叠上下文。
2025-02-13 15:56:59
1021
原创 如何使用 CSS 隐藏元素
完全隐藏元素，不占空间，最常用的隐藏方式。：隐藏元素但保留占位，适用于不需要影响布局的场景。topleft：将元素移出视口，用于临时移除元素。opacity: 0：让元素透明，但仍占据空间，适合动画和过渡效果。height: 0width: 0：通过修改元素的尺寸来隐藏，适合动态调整。clip-path：通过剪切路径隐藏部分内容，适用于特殊效果和动画。选择合适的方法，可以帮助你高效地控制元素的显示和隐藏，从而提升用户体验和页面性能。
2025-02-10 13:13:09
622
原创 深入理解 Vue 的 keep-alive
keep-alive是 Vue.js 中一个非常有用的特性，它通过缓存组件状态来提高应用性能，尤其是在动态组件和路由切换频繁的情况下。合理使用keep-alive可以避免组件的重复渲染，从而节省时间和计算资源。但在使用时，必须注意合理管理缓存的数量，避免内存泄漏和性能下降。
2025-02-10 12:37:28
809
原创 Vue Router 导航方式详解：声明式导航与编程式导航
这两种方式各有特点，适用于不同的场景。编程式导航是通过 JavaScript 代码来实现路由跳转的方式。：无需编写 JavaScript 代码即可实现路由跳转。实现，适合 JavaScript 逻辑中的动态跳转。适用于 JavaScript 逻辑中的动态跳转。：支持复杂的导航逻辑（如条件跳转、异步跳转）。组件来实现路由跳转的方式。：可以手动处理导航失败或取消的情况。：符合 Vue 的声明式编程风格。：可以在任意逻辑中触发路由跳转。实现，适合模板中的静态链接。：点击后会跳转到指定路由。
2025-02-09 23:51:27
780
原创 路由的两种模式：哈希模式与历史模式
哈希模式和历史模式各有优劣，选择合适的路由模式需要根据项目的需求来决定。如果你的项目注重SEO、用户体验并且运行在现代浏览器中，历史模式无疑是更好的选择。而如果兼容性和简单实现是你的首要考虑，哈希模式则是更方便的选择。了解两者的特点，可以帮助你做出明智的决策。
2025-02-09 23:36:55
910
原创 VueRouter 的路由匹配与组件渲染
VueRouter 初始化时，会根据开发者提供的路由配置（routes数组）构建出一个映射关系对象。这一过程是通过方法完成的，它将每个路由对象（包含path和component）转换为一个键值对，path作为键，component作为值。VueRouter 的核心工作流程可以概括为：通过方法将路由配置转换成路径与组件的映射表，之后根据当前路径匹配到相应的组件并渲染到页面中。整个过程分为路由匹配、动态参数提取以及组件渲染几个关键步骤。
2025-02-09 14:21:07
513
原创 NPM 的扁平化目录与幻影依赖问题，以及 PNPM 如何通过硬链接和软链接解决
NPM 为了节约磁盘空间采用的扁平化目录结构确实带来了很多便利，但也引发了幻影依赖等问题，这让开发者在解决依赖冲突时面临一些挑战。而 PNPM 通过使用硬链接和软链接来优化磁盘空间管理，同时避免了依赖关系的混乱和幻影依赖问题，使得依赖管理更加高效和可靠。pnpm 的创新做法不仅节省了磁盘空间，还保持了依赖关系的清晰和完整，这无疑是解决现代 JavaScript 项目依赖问题的一种有效方案。如果你正在处理复杂的依赖管理问题，不妨尝试使用 pnpm，它将是你更高效、更清晰的选择。
2025-02-06 17:09:00
1130
2
原创 如何在前端控制并发请求数量
通过这种方式，我们能够方便地控制并发请求的数量，避免一次性发起过多请求对服务器和浏览器造成负担。这种控制方法适用于所有需要限制并发请求的场景，比如同时上传文件、发起 API 请求等。
2025-02-06 13:07:14
379
原创 深入理解 JavaScript 的 Promise：实例方法与静态方法
在 JavaScript 中，Promise的实例方法和静态方法提供了强大的工具来管理异步任务。实例方法（如then()catch()finally()）允许我们对单个Promise实例的结果进行操作，而静态方法（如）则为常见的异步操作模式提供了方便的接口。掌握这些方法将帮助我们编写更高效、清晰和可维护的异步代码。
2025-02-05 13:07:12
389
原创 JavaScript常见事件和修饰符
在Web开发中，事件是实现用户交互和页面动态效果的核心。通过合理使用常见事件和修饰符，可以帮助我们轻松地控制事件的行为，使得Web应用更加灵活且用户友好。希望本文能帮助你更好地理解和使用JavaScript中的事件处理机制。
2025-02-02 12:39:18
905
原创 深入了解 npm 和 pnpm：前端包管理工具的选择与比较
是目前最流行的 JavaScript 包管理工具，它是 Node.js 的官方包管理工具，默认随着 Node.js 一起安装。npm 使得开发者能够轻松管理项目的依赖、发布包、以及进行版本控制。pnpm（Performant Node Package Manager）是一个较新的包管理工具，旨在解决 npm 中的一些性能和存储问题。pnpm 提供了类似于 npm 的功能，但通过采用更高效的依赖管理策略，优化了性能和磁盘空间的使用。
2025-01-27 17:25:14
1375
原创 前端版本号管理：理解和应用
版本号是用来标识软件或应用的不同发布版本的一个数字序列。它能够帮助开发者、维护人员和用户区分不同版本之间的差异，明确功能、修复和兼容性等方面的变化。版本号通常是由三个数字组成的，格式为（主版本号.次版本号.修订号）。根据软件开发中的变化，这三个数字会有不同的变化规则。前端版本号管理是一个非常关键的工作，它涉及到代码的发布、依赖的管理和团队的协作。通过合理的版本号策略和版本控制，可以确保开发过程的顺利进行，并在团队间保持一致性。
2025-01-27 17:23:56
1214
原创 前端拖拽上传文件与文件夹的实现
通过和文件上传：使用直接访问文件信息。文件夹上传：使用获取文件夹及其内部的文件，通过遍历文件夹内的所有文件。这种方式不仅提升了用户体验，而且简化了上传逻辑，让用户能够直观地将文件和文件夹拖拽到 Web 应用中。
2025-01-27 14:42:54
498
原创 深入探索 HTML5 拖拽效果 API：打造流畅交互体验
HTML5 的拖拽 API 允许用户通过鼠标或触摸屏等设备直接在网页上进行拖动和放置元素的操作。它的核心概念是拖拽源（drag source）和拖拽目标（drop target）。开发者可以控制拖拽过程中的各种细节，包括元素的开始、移动、放置等时机。
2025-01-27 12:07:29
1546
原创 深入了解 HTTP 头部中的 Accept-Encoding：gzip、deflate、br、zstd
是HTTP协议中的一个重要头部，用于告知服务器客户端支持的压缩方式。通过合理选择压缩算法，网站可以显著提升性能，减少传输数据的大小，优化加载速度。常见的压缩算法如gzipdeflatebr和zstd各有特点，选择合适的算法可以根据具体需求来优化性能。随着Web技术的发展，br和zstd等新型压缩算法的出现，将为Web应用的性能提升提供更多的选择。
2025-01-25 23:33:48
1787
原创 Git 指令详解：版本控制的强大工具
Git是一个强大的版本控制工具，提供了丰富的指令和功能，帮助开发者高效地管理代码的版本和变更。从基础的gitinit到高级的gitrebase，掌握Git的常用指令不仅能提升开发效率，还能更好地进行团队协作。希望本文能帮助你更好地理解和使用Git，让你的开发工作更加顺利。
2025-01-20 01:22:38
653
原创 深入解析浏览器异步任务调度 API：让 Web 开发更高效
在现代Web开发中，浏览器提供了多种异步任务调度API，帮助开发者提升性能并优化用户体验。setTimeout和：适用于延迟执行任务和周期性任务。：用于高效的动画渲染，确保与浏览器的刷新同步。：在浏览器空闲时执行非紧急任务，避免阻塞主线程。：在后台线程中执行任务，避免影响主线程的性能。Promises和：用于处理异步操作，简化代码结构。：高效监听DOM变化，响应DOM结构的变动。选择合适的API，并根据实际需求调度任务，能显著提高Web应用的性能和用户体验。
2025-01-19 22:31:30
570
原创 前端性能优化：提升用户体验与加载速度
前端性能优化是每个开发者和产品经理都应关注的重点。随着用户对网页和应用加载速度的要求不断提高，如何提升前端性能，减少页面加载时间，成为了提高用户体验、降低跳失率和增强网站竞争力的重要手段。在前端开发中，优化的关键要素包括资源加载、代码优化、图片与视频优化、页面渲染优化、网络优化和前端架构优化。以下是针对这些优化领域的详细探讨。
2025-01-16 11:01:36
608
原创 Webpack 打包后生成哪些文件，如何配合渲染出网页
Webpack 的打包过程会生成多个文件，包括 JavaScript 文件、CSS 文件、HTML 文件和其他静态资源。
2025-01-15 11:31:49
674
原创 网页加载优化：普通脚本、defer 脚本、async 脚本及预解析线程的差异与影响
在现代网页开发中，优化页面的加载速度和渲染效率是至关重要的。而在处理网页中的 JavaScript 时，如何选择不同的脚本加载方式（普通脚本、defer脚本、async脚本）就成了优化页面性能的关键之一。每种脚本的下载、执行顺序，以及对 HTML 渲染的影响，都会直接决定页面的响应速度和用户体验。在本文中，我们将探讨普通脚本、defer脚本、async脚本的下载与执行顺序差异，以及它们对 HTML 渲染的阻塞影响。同时，还会结合浏览器中的。
2025-01-14 23:13:05
928
原创 Iframe 使用场景及通信技术介绍
iframe作为一种嵌入外部页面的方式，在现代 Web 开发中有着广泛的应用。无论是广告投放、支付集成、第三方应用嵌入，还是数据可视化等场景，iframe提供了良好的隔离性和灵活性。同时，通过等通信技术，iframe页面和父页面之间能够高效地进行信息传递和交互，确保用户体验的流畅与数据的及时更新。随着 Web 开发的不断发展，iframe的使用场景将会越来越广泛，跨域通信技术也会为实现更加复杂的业务需求提供更加稳定和安全的解决方案。
2025-01-14 17:28:43
894
原创 webpack代码分割： optimization.splitChunks 的使用
在现代的 Web 开发中，前端构建工具如 Webpack 扮演着重要角色。Webpack 通过将应用程序的代码分割成多个小文件，提升了网页的加载性能。而 作为 Webpack 的一项功能，能够自动将代码按需拆分，减少冗余，提升页面的加载速度。本文将深入探讨 的使用，帮助你更好地理解如何通过它优化 Web 应用的构建。 是 Webpack 中的一个配置选项，允许你将共享代码从多个模块中提取出来并分割成独立的文件。这样不仅可以避免重复的代码，还能加速浏览器缓存的利用，提高页面加载速度。在 Webpack 中
2025-01-14 09:19:41
779
原创 什么是 iframe？它在网页中的应用与实现
iframe是一个功能强大的 HTML 元素，允许我们在页面中嵌入外部网页内容、媒体文件、广告等。它的隔离性和便捷性使得网页开发更加灵活，但也需要注意跨域问题、SEO 影响和性能优化等挑战。通过合理使用iframe，可以有效提升网页的交互性和内容展示效果。
2025-01-12 20:17:52
2118
原创 锚点跳转与 scrollIntoView()：两种常用的页面滚动方法
锚点跳转和都是非常实用的页面滚动方法。锚点跳转简单直观，但缺乏灵活性，适合简单的页面跳转。而提供了更强大的功能和自定义选项，适用于需要动态滚动和复杂交互的场景。根据不同的需求和场景，你可以选择最合适的方法来提升页面的用户体验。
2025-01-11 13:20:17
753
原创 深入理解 Vue 的响应式原理
Vue 的响应式系统让你能声明式地绑定数据到 UI。当数据发生变化时，Vue 会自动更新 DOM，无需手动操作 DOM。响应式意味着，当你改变某个数据时，视图会自动更新，而这背后是 Vue 自动监听和管理数据的变化。数据劫持：当你定义数据时，Vue 会“劫持”这些数据，以便在数据变化时通知相关的组件进行更新。依赖收集：当组件使用某个数据时，Vue 会追踪这个组件对数据的依赖。更新视图：当数据发生变化时，Vue 会自动重新渲染视图，确保视图和数据保持同步。
2025-01-08 00:04:21
690
原创 深入理解 Vue 3 的 v-model 语法糖：表单与父子组件中的应用
表单中的v-model：在 Vue 3 中，v-model仍然用于表单控件与数据之间的双向绑定，使用ref来创建响应式数据，并通过v-model直接绑定。父子组件中的v-model：通过modelValue和，父子组件可以方便地实现双向绑定，子组件就好比第三方UI库的底层实现。同时，Vue 3 还支持多个v-model绑定，允许父组件绑定多个不同的 prop。通过setup()API，Vue 3 提供了更简洁和灵活的方式来处理组件的响应式数据和事件，v-model语法糖也变得更加易于使用和理解。
2025-01-07 23:39:10
788
原创 JavaScript 中的 Set：理解与应用
SetJavaScript 中的Set是一个非常有用的数据结构，它可以帮助我们高效地管理一组唯一的值，避免重复，并且提供了多种操作方法，如添加、删除、查找和遍历等。Set适用于处理去重、快速查找和集合运算等场景。
2025-01-07 14:52:43
1015
原创 Map 与 Object：JavaScript 中两大常用键值对存储结构的区别
虽然Object和Map都是用于存储键值对的容器，它们在多个方面存在重要的区别。Object更适合用于表示实体的属性，通常用于 JSON 数据的存储。而Map则在需要更高效的键值对操作、复杂数据类型作为键以及需要保持插入顺序的场景下表现更好。理解这些区别后，我们可以根据实际需求来选择使用Object还是Map，从而优化代码的性能和可读性。
2025-01-07 14:20:33
824
原创 JavaScript 变量声明的区别：var、let 和 const
var是函数作用域，无法限制在块级作用域内。变量声明会被提升，初始化不会提升。可以在同一作用域内重复声明变量。let是块级作用域，在{}块内部有效。变量声明会被提升，但无法在声明之前访问，存在暂时性死区。不允许在同一作用域内重复声明变量。const是块级作用域，与let相同。一旦赋值后，不可重新赋值。对于引用类型，确保引用不变，但内容可以修改。特性varletconst作用域函数作用域块级作用域块级作用域提升变量提升，初始化不会提升变量提升，但暂时性死区。
2025-01-07 11:22:20
978
原创 CommonJS 与 ESM 的区别与比较
CommonJS 是 Node.js 最早期的模块系统。它的设计目标是为 JavaScript 提供同步加载模块的机制，主要应用于服务器端开发。CommonJS 使用require()来导入模块，来导出模块。`);// app.js在这个示例中，greet.js模块通过导出一个函数，而app.js使用require()导入该模块并调用greet()函数。ESM 是JavaScript 官方引入的模块系统。
2025-01-07 00:31:44
1010
原创 深入解析 HTTP/3：未来网络通信的革命
HTTP/3 是一种新的超文本传输协议版本，它基于QUIC（Quick UDP Internet Connections）协议构建，QUIC 最早由 Google 提出。与之前的 HTTP/1.x 和 HTTP/2 协议不同，HTTP/3 并不基于 TCP（传输控制协议），而是基于 UDP（用户数据报协议）之上实现的 QUIC 协议。HTTP/3 是对 HTTP 协议的重塑，借助 QUIC 提供更低的延迟、更快的响应速度，并且改进了许多 HTTP/2 中的问题。
2025-01-06 17:56:26
883
原创 了解 TCP/IP：现代网络通信的基石
TCP/IP 是传输控制协议/互联网协议（Transmission Control Protocol / Internet Protocol）的缩写，它是一组定义了计算机网络上通信方式的协议。它确保了不同类型、不同平台的计算机之间能够进行有效的通信。TCP/IP 模型是基于分层架构的，每一层处理网络通信中的特定任务。
2025-01-06 17:31:28
692
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人