- 博客(26)
- 收藏
- 关注
RSS订阅原创 Vue 中 Computed 和 Watch 的深入解析与底层实现
在 项目开发中，我们经常需要处理数据的动态变化性能问题：某个数据需要经过复杂计算，直接在methods中调用，每次都会重复执行，导致性能下降。副作用控制：想要在数据变化时执行异步请求，但又发现某些不必要的调用导致接口请求过多，影响用户体验。数据依赖管理：某些变量需要依赖其他多个数据源，但逻辑复杂，不容易维护。在这些场景下，Vue 提供了Computed（计算属性）和Watch（侦听器）作为响应式解决方案。为什么computed不会重复计算，而watch却会反复触发？computed和watch。
2025-03-12 11:45:38
664
原创 setTimeout 和 setInterval 做倒计时不精准，以及替代方案
对于简单的 UI 倒计时，基于时间戳的校正方法通常足够。对于需要高精度的场景，可以考虑或 Web Worker。对于关键业务，应该结合服务器时间同步来确保准确性。技术沟通交流。
2025-03-03 10:32:54
652
原创 JavaScript 事件循环机制：宏任务与微任务的深度剖析
JavaScript 的事件循环机制通过精细的任务调度，确保了单线程环境下高效的异步处理。宏任务和微任务队列的优先级、执行顺序，以及事件循环的细致调度机制，我们可以更好地设计异步代码，避免不必要的延迟和性能瓶颈。技术沟通交流。
2025-02-26 10:52:22
913
原创 深入解析：短轮询、长轮询、长连接与WebSocket（原理到实现）
技术延迟实时性适用场景优缺点短轮询高中数据更新不频繁的应用，低实时性需求实现简单，但浪费带宽和服务器资源长轮询中较高需要较高实时性、但不需要常时连接的应用更高效，但服务器负担重，连接管理复杂长连接中中高频请求，减少连接开销的应用长时间保持连接占用资源，需要超时管理WebSocket低极高需要低延迟、实时双向通信的应用（如即时通讯）高实时性，双向通信，但兼容性较差短轮询适用于对实时性要求不高的小规模应用，能够快速实现，但会浪费大量带宽。长轮询。
2025-02-20 10:22:38
1233
原创 深入解析 Webpack 的构建流程：一场高级技术冒险
Webpack 就像一座强大的工厂，将代码、资源和各种插件协调工作，生成最终的构建产物。
2025-02-17 10:40:04
1293
原创 TCP 有超时重传，为什么还需要快速重传机制？
TCP 发送数据时，每个数据包都会设置一个超时时间（RTO, Retransmission Timeout），如果在该时间内没有收到接收方的 ACK（确认应答），则认为数据包丢失，触发重传。TCP 采用累计确认（Cumulative Acknowledgment）机制，即接收方只会确认最后一个按序到达的数据包，如果某个数据包丢失，后续数据包仍然可能被接收，并导致 ACK 反复确认最后一个正确接收的包。快速重传（Fast Retransmit）机制就是基于重复 ACK发送方如果连续收到 3 个重复 ACK。
2025-02-12 10:42:22
1158
原创 POST 请求的 Content-Type：五大主角，谁能打败谁？
这个选手是老兵，是传统 Web 表单的“开路先锋”。虽然没什么花哨的技能，但你总能在需要它的地方见到它。它总是默默无闻地站在你背后，完成最基础但最重要的任务。它是一个全能选手，一到上传文件的场合，它就闪亮登场。无论是图片、视频还是文档，所有的“重活”都交给它来做。它背后有着强大的战斗力，能够把复杂的数据都拆分成小块，然后逐一传送给服务器。说到现代 Web 开发，它就是你手中的“瑞士军刀”。如果你正在开发一个前后端分离的项目，或者做，它就是你的忠实伙伴！
2025-02-10 14:15:57
929
原创 HTTP2中，多路复用的原理是什么？
HTTP2的多路复用特性通过将多个请求和响应并发传输在一个TCP连接中，极大地提高了Web应用的性能。它消除了HTTP1.1中的头部阻塞问题，减少了TCP连接的建立和关闭带来的延迟，同时提供了流的优先级控制，进一步优化了页面加载速度。
2025-02-06 11:24:15
496
原创 https是如何保证安全的，又是如何保证不被中间人攻击的？
HTTPS通过加密、数据完整性校验和身份认证等技术，极大地提高了互联网通信的安全性。它有效防止了中间人攻击，确保了数据在传输过程中的安全性和隐私性。然而，HTTPS并不是万能的，仍然需要配合其他安全措施（如合理的证书管理、强密码策略等）共同保障网络安全。
2025-02-05 10:56:14
2700
6
原创 为什么推荐将静态资源放在CDN上？
其主要功能是将静态资源缓存到各地的边缘服务器上，从而将内容更快地传递给用户。当用户请求资源时，CDN 会自动选择离用户最近的服务器节点进行响应，从而降低延迟。将静态资源托管到 CDN 上是提升网站性能和用户体验的重要手段。通过减少延迟、降低服务器压力、提升稳定性和可用性，CDN 已成为现代 Web 开发的核心工具之一。然而，我们也需要结合实际需求和预算，合理选择和配置 CDN 服务，以最大化其价值。通过配置缓存策略（如 Cache-Control 或 ETag），开发者可以精细化地控制资源的缓存时间。
2025-01-31 21:45:56
1300
原创 TCP是怎么判断丢包的？
TCP通过超时重传和重复ACK两种主要机制判断丢包，并结合拥塞控制策略，确保数据传输的可靠性和高效性。这些机制的设计使得TCP能够在各种复杂的网络条件下提供稳定的传输服务。
2025-01-28 22:31:59
1864
原创 为什么 TCP 挥手需要有 TIME_WAIT 状态？
第一次挥手：主动关闭方（通常为客户端）发送 FIN（Finish）报文，表明自身无数据发送。第二次挥手：被动关闭方（通常为服务器）确认收到 FIN 报文，发送 ACK（确认）报文，同意关闭连接。第三次挥手：被动关闭方发送 FIN 报文，表明自身也无数据发送。第四次挥手：主动关闭方确认收到 FIN 报文，发送 ACK 报文，完成连接关闭。完成四次挥手后，主动关闭方会进入 TIME_WAIT 状态。
2025-01-23 11:31:23
1086
原创 前端缓存策略：强缓存与协商缓存深度剖析
强缓存是指在浏览器发起请求之前，直接从本地缓存中读取资源，而不需要再向服务器发送请求。如果资源在缓存中存在且没有过期，浏览器会直接加载缓存数据，不与服务器进行任何交互。这种方式可以极大减少请求时间，提高加载速度。：用来设置缓存策略的标准 HTTP 头部字段。常见的指令有max-ageno-cacheno-store等。Expires：指定缓存的过期时间，过期后会重新请求资源。
2025-01-21 10:30:42
1584
原创 深度解析请求头和响应头
请求头和响应头在 HTTP 协议中不仅传递基本的信息，还在性能优化、安全控制、身份验证等方面扮演着关键角色。理解它们的工作原理和常见字段，有助于开发者更好地设计和调试 Web 应用程序，确保客户端与服务器之间的高效、安全通信。
2025-01-17 10:09:12
1146
原创 如何解决Webview和H5缓存问题，确保每次加载最新版本的资源
动态添加参数（如时间戳或随机数），使得每次 URL 都发生变化，避免缓存。通过 Nginx 配置 Cache-Control 头，控制哪些资源需要缓存，哪些不需要缓存，精确控制缓存策略。使用哈希文件名，确保每次资源更新时，文件名发生变化，浏览器能够加载最新的资源。强制清理缓存，虽然这种方法确保了加载最新版本的资源，但需要谨慎考虑流量消耗和性能问题。合理使用缓存机制，既能提高用户体验，也能避免缓存导致的版本更新问题。
2025-01-13 13:39:04
1944
1
原创 深度解析 Git 的使用：版本控制的核心工具
版本控制系统（Version Control System, VCS）是一种用于记录文件内容变更历史的工具。多人开发者可以在不同的时间编辑同一个文件，而不必担心覆盖或丢失他人的修改。Git作为一种分布式版本控制系统，允许开发者在本地操作代码的同时，确保所有更改都可以被追踪和协同。Git支持通过钩子（hooks）来自动执行某些操作。例如，你可以在每次提交前进行代码检查，或者在推送前运行测试。Git的钩子文件位于项目的.git/hooks目录中，可以根据需要进行编辑和启用。
2025-01-07 14:10:29
1306
原创 深入解析 JS 中的 this、call、apply 和 bind
call、apply 和 bind都可以改变函数的this对象指向call、apply 和 bind第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局windowcall、apply 和 bind都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入bind是返回绑定this之后的函数，applycall则是立即执行。
2025-01-03 10:11:04
805
原创 带你了解，垃圾回收机制
垃圾回收器会根据需要周期性地运行，自动进行垃圾回收，释放不再使用的内存空间。需要注意的是，垃圾回收器并非实时回收垃圾，而是在特定的时机触发回收操作。这是因为垃圾回收过程会占用一定的计算资源，如果频繁触发垃圾回收，可能会导致程序性能下降。因此，垃圾回收的时机通常由浏览器或 JS 引擎决定，以平衡性能和内存占用。
2024-12-23 15:40:35
1185
原创 如何理解 防抖和节流？
防抖是一种控制函数执行频率的函数，它的主要目的是延迟函数的执行，直到事件停止触发一段时间后才执行。防抖通常应用于那些用户快速频繁操作的场景中，例如搜索框的输入，防止用户每输入一个字符就触发一次请求。节流是控制函数执行频率的另一种方式，它的目的是限定函数的执行频率，保证在一定时间内函数最多只执行一次。节流技术适用于那些频繁触发，但又不要求每次都执行的场景。防抖：适用于需要等待事件完成后执行一次的场景。节流：适用于需要限制执行频率的场景。
2024-12-19 14:02:36
1658
原创 深入理解 Promise：原理、实现与事件循环中的角色，看这篇就够了
方法功能概述成功返回失败返回创建一个 Fulfilled 状态的 Promisevalue创建一个 Rejected 状态的 Promisereason所有 Promise 成功时返回结果数组，任意一个失败则直接返回该失败的 Promise结果数组第一个失败的 Promise等待所有 Promise 完成，无论成功或失败包含状态和值/原因的结果对象数组永远不会失败返回第一个完成（成功或失败）的 Promise第一个完成的结果第一个完成的错误。
2024-12-17 16:04:30
941
原创 深入理解 Vue 的 Diff 算法：从原理到实现的完整剖析
Vue 的 Diff 算法通过一系列优化（如双端比较、静态标记、Block Tree）将复杂度降低到接近O(n)，并结合实际场景进一步优化性能。核心思路是去除头尾重复的节点。其次便是采用了最长递增子序列来复用相对位置没有发生变化的节点，这些节点是不需要移动的，便能最快的复用和更新。
2024-12-09 17:00:39
1519
原创 什么是泛型，泛型在实际项目中如何高度使用？
guest: [],递归泛型适合处理树形结构或动态嵌套的数据类型。泛型提供了灵活的类型参数化能力，适配不同的数据场景。内置辅助类型为复杂的类型操作提供了便捷。高阶泛型在结合辅助类型后，能够动态推断、转换或生成类型结构，解决复杂的业务需求。
2024-12-05 17:34:22
1172
原创 为什么 VUE 组件中的 DATA 是一个函数？
data: {count: 0,},// 创建两个组件实例// 修改 comp1 的 count// comp2 的 count 也变为 10（数据被共享）datadata。
2024-12-03 10:38:30
1046
原创 什么是变量提升？什么是临时死区？
变量提升（Hoisting）是指 JS在运行代码前，会将变量和函数的声明提升到当前作用域的顶部。这一特性源于 JS 的编译机制，在编译阶段就会为变量和函数分配内存。var的提升：变量声明被提升到作用域顶部，并初始化为undefined。函数声明的提升：函数声明被完整提升到作用域顶部，可以在声明前调用。let和const的提升：声明会被提升，但不会初始化，在初始化之前的访问会触发临时死区（TDZ）。代码示例var a = 10;// 10var a;// 提升。
2024-12-02 10:16:32
1125
原创 inject/provide 是否具备响应式能力？
inject和provide它们只是用来传递依赖，是否具备响应式能力取决于提供的值。如果提供的是响应式对象，后代组件也能享受响应式能力。如果提供的是普通值，后代组件将无法响应变化。始终通过ref或reactive提供数据，避免在后代组件中处理复杂的逻辑。
2024-11-30 22:48:47
957
原创 为什么 Vue 不建议用 index 或随机数作为 key？
Vue 里，key 是用来唯一标识列表每一项的，就像身份证号码那样，它的作用主要有两个：定位更新：当数据发生变化时，Vue 会通过 key 来对比新旧节点，快速找到改动的地方。如果没有 key，Vue 就只能从头开始一个个比，效率会很低。状态正确：key 能让 Vue 知道每个节点对应的是什么数据，确保在数据变化时，节点的状态不乱套。一句话总结：key 就是告诉 Vue，“这个节点是谁，和哪个数据绑定”。
2024-11-29 13:50:43
833
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人