全部文章
共 1299 篇文章
按下回车后网页是怎么出来的
当你在浏览器中输入一个网址，比如 ，然后按下回车键，几秒钟后页面就完整地呈现在你眼前。这个看似简单的操作，背后其实是一整套精密协作的网络机制在起作用。本文将带你从基础讲起，理解 Web 开发中最重要的网络知识，帮助你搞清楚： 数据是如何从服务器传到你的电脑，并最终变成网页的？ 一、互联网通信的分层模型：OSI 七层模型 为了管理复杂的网络通信，工程师们提出了一个通用的参考模型—— OSI 七层模型 。它把整个通信过程划分为七个层次，每一...
打字机效果是如何实现的
分析效果 使用 AI 对话的时候，文字是一个字一个字蹦出来的？它不是等所有内容生成完毕后一次性展示，而是以一种流畅、实时的“打字机”效果呈现，这种体验的背后，隐藏着一种高效的Web技术。它就是 服务器推送事件（Server Sent Events，简称 SSE） 什么是 SSE 从根本上说，SSE 是一种允许服务器 单向 、 持续 地向客户端（浏览器）推送数据的Web技术。 可以把它想象成一个 电台广播 ： 服务器 是广播电台，持续不断...
Promise 从原理到实现
前言 是 异步编程的核心概念之一，它为我们提供了一种更优雅的方式来处理异步操作。 本文将全面剖析 的工作原理，并逐步实现一个符合 规范的 。 正文 一、Promise 基础概念 代表一个异步操作的最终完成（或失败）及其结果值。它有 种状态： 1. pending ： ，既不是成功，也不是失败状态 2. fulfilled ：意味着操作 完成 3. rejected ：意味着操作 状态一旦改变就不能再变，只能从 变为 ，或从 变为 。 二...
前端大数据渲染性能优化 - 分时函数的封装
背景 在一次性需要处理大量dom渲染操作时，直接渲染页面会非常耗费性能，从而阻塞js渲染进程，造成页面卡顿，比如在页面上一次性插入50万个dom操作，代码如下： 优化 在某些情况下，我们可以使用 虚拟节点来减少频繁的dom操作 这段代码大大减少了频繁操作dom，只在最后一次性将dom挂载到页面，但最终一次性挂载50万个节点的dom还是会非常耗费性能，页面依然卡顿，但不否认它确实有一定的优化效果，只是在这里优化效果并不明显，所以我们需要将...
ES6到HTTPS全链路
⚡Promise：异步的“承诺书”如何兑现？ 📌 Promise 有 3 个状态 ： 1. ：初始态，等待结果 2. ：成功态，被 3. ：失败态，被 状态 单向流动 ： 或 ，不可逆 ❗ ⚠️ 状态一旦改变，永不回头？ 「Q1: Promise 状态变了，then 还能监听到吗？」 A1: 能！即使 resolve 在 then 之前，Promise 会“记住”结果，后续 then 依然执行（微任务队列机制）👉继续看？💡 「Q2...
Web Worker：让前端飞起来的隐形引擎
在现代 Web 开发中，前端性能优化是一个至关重要的课题，尤其是对于计算密集型的应用，如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈，导致应用变得迟缓。 Web Worker ，作为一种强大的技术，使得前端能够在后台进行并行计算，从而实现高效的任务处理，不影响主线程的运行和用户的交互体验。 本文将深入探讨 Web Worker 的概念、工作原理、使用方法以及实际应用场景，帮助你更好地理解...
前端PerformanceObserver
是 Web Performance API 的一部分，它提供了一种异步、高效地收集浏览器性能指标的方式。与传统的 或 方法不同， 允许你订阅特定类型的性能事件，并在这些事件发生时获得通知，而不是在某个时间点一次性获取所有已发生的事件。这对于实时监控和报告性能数据非常有用，尤其是在单页应用 (SPA) 中，因为页面加载后的用户交互也会产生新的性能事件。 的作用 主要用于： 1. 监控页面加载性能： 获取导航时间、资源加载时间等。 2. 跟...
前端性能优化实战：从页面加载到交互响应的全链路优化
性能优化的核心指标 在开始优化之前，我们先要明确几个核心指标： 1\. FP (First Paint) 首次绘制 用户看到第一个像素的时间。 2\. FCP (First Contentful Paint) 首次内容绘制 用户看到第一个有意义内容的时间。 3\. LCP (Largest Contentful Paint) 最大内容绘制 页面最大内容元素渲染完成的时间。 4\. FID (First Input Delay) 首次输入...
在 React 中实现倒计时功能会有什么坑
倒计时 倒计时是一个非常常见的业务场景，但是在 React 中实现起来，却不算简单。 首先我们来看这段倒计时代码，它能否正常执行？ 来看看实际表现效果 可以看到计时器在不断执行，但是 的值却没有变。 这是一个很经典的问题：React 闭包陷阱 。 我们来详细分析下： 的依赖数组 是空的，这意味着 effect 只会在组件挂载时执行一次，而不会在 状态更新时重新执行。所以 回调函数中捕获的 值始终是初始值 。 这个问题解决起来也很简单，有...