- 博客(98)
- 收藏
- 关注
RSS订阅原创 深入理解进程、线程、JavaScript引擎与事件循环
你是否曾经好奇过，为什么浏览器能够同时处理多个网页标签页？为什么 JavaScript 代码能够“异步”执行而不阻塞页面？为什么点击按钮后，页面能够立即响应而不需要等待网络请求完成？这一切的背后，都离不开进程线程JavaScript 引擎和事件循环这些核心概念。本文将用通俗易懂的方式，带你深入理解这些概念的本质和它们之间的关系。想象一下，进程就像一个工厂独立的空间：每个工厂都有自己的厂房、设备、原材料仓库独立的管理：每个工厂都有自己的厂长、管理制度独立的资源：工厂之间的资源不共享，互不干扰。
2026-05-06 03:59:02
354
原创 JavaScript 模块化完整进化史
define：注册模块信息，不发请求。require：动态创建<script>发请求，加载依赖，执行回调。对比项CommonJS (requireimport导出值的本质值的拷贝（浅拷贝）实时绑定（活连接）基本类型拿到旧值副本，后续修改不影响导入变量实时更新对象/数组拷贝引用，修改属性会反映，整体替换不会完全实时，任何修改都反映能否修改导入变量可以（但不推荐）不可以（只读）比喻照片视频通话CommonJS 给“复印件”，ES Modules 给“实时窗口”。// a.js。
2026-05-04 05:33:29
517
1
原创 浏览器 Location API、History API、路由记录与支付跳转完全指南
它表示当前浏览器地址栏对应的 URL 信息，以及基于 URL 发起页面导航的能力。场景上下文在哪结果获取方式SDK 支付当前页面回调二维码支付外部设备主动查（轮询/WS）href跳转无（已销毁）回来查open新窗口新页面主页面查支付方式的选择，本质不是技术选型问题，而是“页面上下文是否还存在”页面在 → 可以被动接收结果（回调 / WebSocket）页面不在 → 只能主动确认结果（return_url+ 查询）
2026-04-29 20:26:07
420
原创 Content-Type与浏览器资源处理完整指南
Content-Type是HTTP协议中的一个重要头部字段，它告诉浏览器服务器发送的数据是什么类型的。简单理解：就像快递包裹上的标签，告诉你里面装的是什么，这样你才知道怎么处理它。Content-Type是Web开发中非常重要的概念，它决定了浏览器如何处理服务器返回的数据。正确设置Content-Type：确保服务器返回正确的Content-Type头理解浏览器行为：知道不同资源类型会触发什么浏览器行为处理字符编码：特别是中文内容的编码问题安全考虑：验证文件类型，防止恶意文件上传错误处理。
2026-04-24 03:23:29
370
原创 CSS布局（六）：Grid —— 像围棋一样布局
Flex 的一维：它只关心一条线上的排列。即使换行产生了多条线，它也不认为这些线组成了一个平面，每条线依然各行其是。Grid 的二维：它一上来就声明这是一个平面。先有行和列的网格框架，再把项目放进去。Flex 可以模拟出二维的效果（通过换行和固定宽度），但它缺乏控制二维结构的能力（对齐行与行、控制特定行高、元素跨行跨列）。而 Grid 天生就为二维设计，这些能力是内置的。“以前用 Flex 绞尽脑汁凑出来的复杂布局，用 Grid 简直是降维打击。
2026-04-23 23:43:26
466
原创 CSS布局（五）：Flex——让布局更灵活
对比维度主轴交叉轴方向由决定永远垂直于主轴作用排列顺序 + 空间分配单行或多行的整体对齐核心属性flex-growalign-self记忆关键词主方向、排队十字交叉、垂直对齐一个简单的判断方法先看决定主轴是水平还是垂直主轴方向确定了，交叉轴就是剩下的那个方向沿着主轴的方向用justify系列属性控制沿着交叉轴的方向用align系列属性控制flex-basis决定“试站位时我要多大”试完发现不够 → 换行换行后，这一行内部再用flex-grow重新分容器变窄。
2026-04-20 23:47:55
337
原创 CSS布局（四）：BFC—— 布局的“独立结界”
BFC 是什么？—— 一张独立的“横格纸”（便利贴），内外布局互不干扰。怎么触发？——或，看表格速查。能解决什么？—— 浮动塌陷（父容器加 BFC）、边距折叠（包一层 BFC）、浮动覆盖（被盖元素加 BFC）。记忆口诀：“BFC 就是便利贴，里面外面不打架。父塌加父，边距包层，被盖加己。“我是不是该给它发一张新横格纸了？加上对应的触发属性，问题往往迎刃而解。
2026-04-20 19:45:47
321
原创 CSS布局 （三）：浮动——从文字环绕到多列布局
支持不理想（尤其在 IE6/7 上存在严重 bug），而且它会带来烦人的“空白间隙”问题——元素之间的换行符会被渲染成空格，导致布局多出几像素。浮动做并排是历史遗留问题，如今 Flex 和 Grid 已经成熟，浮动终于可以回归它的本职工作了。早期的网页设计经常需要一种效果：图片在左边，文字像流水一样环绕在它周围，就像报纸排版那样。——因为浮动元素脱离了文档流，父元素在计算高度时会忽略它们，导致父元素高度为 0，这就是。：元素像“浮”在文档流表面，不占垂直空间，但它的存在依然影响着周围内容的排列。
2026-04-20 19:44:27
384
原创 CSS布局核心（二）：定位——当默认规则不够用时
当你滚动时，当前章节的标题会一直保持在屏幕顶部，直到下一章节的标题把它顶下去。有些时候，我们想要元素完全脱离文档流——它原来的位置被填平，其他元素会顶上来，就像它从未存在过。默认情况下，这个标记可能和文字底部对齐，显得有点低，你希望它往上提一点，但又不想影响后面文字的排版。进行偏移，但偏移后，原来的位置依然被保留（就像座位还给你留着），其他元素不会挤上来。笔记里插入了小图标（比如📌），你觉得它和旁边的文字没对齐，想微调几个像素。一样“粘”在屏幕上。，它也会带来类似的副作用，但也能解决一些特定的布局需求。
2026-04-20 19:37:19
364
原创 CSS布局核心（一）：文档流——浏览器的“出厂设置”
线在哪？（随手打个字母xxx，看它坐哪，横格线就在哪）。谁在找线？（是有图案的“字”在找线，还是贴纸的“底边”在找线？如果你需要绝对的、不讲情面的机械整齐，请直接放弃这种“手写感”，开启 Flex 布局。
2026-04-20 19:35:54
377
原创 你的广告费去哪了？—— 算清ROI，理解跨站追踪、ID、归因和前端实现
Facebook 广告花费 5 万元，带来 200 双鞋的销售，收入 16 万元ROI = (16万 - 5万) / 5万 = 220%你说：“很好，下个月加到 10 万预算。标准事件：Facebook 预先定义好的事件名称（如PageViewAddToCartPurchase这些事件有固定的含义，Facebook 会自动识别并用于广告优化和归因。自定义事件：你可以随便起名（如），Facebook 不会用它做自动优化，只能自己看报表。使用标准事件的好处Facebook 知道AddToCart。
2026-04-07 13:33:18
394
原创 一张便利贴，彻底搞懂 CSS 的 `overflow`
overflow超出的内容流。让超出的内容露在外面visible还是剪掉hidden还是加个滚动条scrollauto容器占多大地方，和溢出怎么处理没有关系。就像便利贴占的位置，不会因为你剪掉多余的字就变小。理解了这一点，你就再也不会被overflow搞混了。
2026-04-06 08:14:23
1271
原创 为什么 padding 会撑大盒子？margin 却不会？一篇笔记讲清楚
概念属于谁是否撑大盒子是否带背景/边框能否为负设计理由内边距（padding）元素内部✅ 会✅ 会❌ 不能内部空间必须属于元素，因此扩大自身，背景延伸。边框（border）元素边界✅ 会边框本身可见❌ 不能可见装饰线，算作元素尺寸的一部分。外边距（margin）元素之间❌ 不会❌ 不会✅ 能（负值）外部关系，不影响自身尺寸；可推可拉，可以合并。关于box-sizing的选择：宽度只定义内容区，内边距和边框向外扩。适合需要精确控制内容区域尺寸的场景（如打印、图文混排）。
2026-04-04 06:39:21
367
原创 移动端适配：如何让用户摸得准，看得全？——触摸目标与安全区详解
问题根源概念解决方案点不准手指粗，视觉≠可点击触摸目标min-size/padding 撑大到 44×44看不见屏幕有禁区（刘海/Home条/圆角）安全区viewport-fit=cover + env() 留白。
2026-02-25 08:37:30
852
原创 响应式断点与布局约束：从「量准」到「不断点、不挤爆」
rem/vw 负责量准；布局约束（clamp、max-width、min-width）负责不断点、不挤爆；断点（@media min-width）负责在某个宽度换布局。先约束、再断点，和设计定好一套断点数值，全项目统一。✅为什么光有 rem/vw 不够：窄屏会挤爆、宽屏会散架，需要上下限。✅布局约束是什么：给尺寸设 min/max 或 clamp，连续生效；解决「不断点、不挤爆」。✅断点是什么：在某个视口宽度用媒体查询切换布局或样式，离散生效；解决「单栏/多栏、显隐」。✅断点设多少。
2026-02-23 08:10:06
938
原创 布局单位与设计稿换算：从「看清」到「量准」
如果你做的是…推荐方案普通 H5 活动页（简单、干净）需要支持用户调字体的网站（如新闻、政府、老年产品）rem（保留可访问性）大屏适配（PC + 移动）vw + 媒体查询想兼顾两者布局用 vw，字体用 rem一句话记住整条链「设计稿宽度（如750）和视口宽度（如375）存在固定比例（如2倍）；使用rem（通过动态根字体桥接）或vw（直接百分比）让尺寸能按此比例缩放；设计稿量到的px值，按约定公式换算即可。✅为什么设计稿常是750：对应高倍屏物理像素，与CSS逻辑像素视口成比例关系。✅。
2026-02-20 00:44:40
1080
原创 视口进阶：移动端键盘弹出与遮挡处理实战
键盘适配的本质，是处理“画布”与“遮挡物”的动态关系。安卓帮你“缩画布”，虽然省事但容易压扁布局。iOS帮你“保布局”，虽然稳定但需要你手动处理遮挡。作为开发者，我们要做的不是改变系统的哲学，而是利用这个**“真实现场监控”**，给用户提供一个永远可见、永远可用的操作界面。
2026-02-19 06:12:56
1010
原创 浏览器缩放、视口逻辑与理想适配全指南
适配就是为了解决“画布变小”后的尴尬。固定布局是“无视尴尬”，所以有了滚动条。等比缩放是“大家一起变小来化解尴尬”。响应式适配是“扔掉包袱（隐藏元素）来化解尴尬”。PC 端缩放：走的是“适配逻辑”（改变布局视口，逼你做响应式）。移动端缩放：走的是“阅读逻辑”（改变视觉视口，不准乱动我的布局）。如果你想做一个“精致”的网站用媒体查询。当用户在 PC 端放大页面时，导航栏自动收起，这会让用户觉得你的网站非常智能，像一个原生 APP。如果你想做一个“省事”的网站用固定宽度 + 最小宽度限制。
2026-02-19 06:09:03
640
原创 Web 数据交互选型指南：为什么不都用 WebSocket？——电话版
技术选型不是选“最强的”，是选“总电话费最低的”。“说完就挂”的电话不酷，但它不占线、不占槽位，撑起整个互联网的日常通信。SSE 单向专线不显眼，但它刚刚好解决了“服务器主动喊浏览器”的需求，长期占一条线，但成本可控。WebSocket 双向专线很酷，但它的代价是为每个用户长期占着一条电话线、一个插槽——只有双向高频、半秒生死的业务，才真的值。把对的通话模式，用在对的地方，才是真本事。别再纠结“为什么不都用 WebSocket 专线”了。我的业务，真的需要为每个用户打一通永不挂断的电话吗？
2026-02-13 00:58:52
336
原创 物理像素、逻辑像素与 DPR：从「看全」到「看清」
物理像素是屏幕发光点，逻辑像素是我们写的 px，DPR 是二者之间的换算比例；图要清晰就满足 逻辑尺寸×DPR ≤ 图物理尺寸（多倍图）；字不糊因为字是矢量/轮廓在目标分辨率下重新光栅化；线要极细就做成 1/DPR 逻辑像素（scale）。✅为什么有两套像素：多端视觉大小一致 → 逻辑像素 + 浏览器换算。✅为什么有 DPR：高分屏上 1 逻辑 = 多物理 → 需要明确比例才能切图、画线。✅为什么图会糊：逻辑区域×DPR = 需要的物理像素，图不够就被拉伸 → 多倍图。✅为什么文字不会糊。
2026-02-08 04:12:19
790
原创 数的诞生：人类如何学会“算计”世界
想象你是远古部落的一员。太阳升起时，你看着山洞外：问题来了：如果你只能说“有很多鹿”和“很少老虎”，你如何告诉同伴：“老虎比鹿少，但孩子们的数量比鹿多”？这就是“数”诞生的最原始冲动——我们需要一种方式，来精确把握世界的“多少”。最初的人类，用手指对应眼前的物体：一只鹿 → 一根手指。这就是最原始的一一对应，也是数学的第一个伟大发明：把具体的事物，抽象成可以操作的符号。数的本质，不是写在纸上的“1，2，3”，而是一种“抽象化的测量工具”。就像你作为前端开发者，用代表一个容器，用封装一段操作——数，就是人类
2026-02-02 04:00:11
726
原创 浏览器视口完全图解：用 Viewport 重构移动浏览体验
Viewport 标签就是告诉浏览器：请按我设备的真实宽度来排版，别再自作主张地缩放网页了！✅响应式生效：媒体查询（Media Queries）终于能感知到真实的屏幕宽度。✅内容 1:1 呈现：文字和按钮按设计大小显示，不再是“缩微模型”。✅自然的交互：用户只需上下滚动阅读，告别了繁琐的双指缩放和左右滑动。
2026-02-02 00:24:31
654
原创 【图文讲解】JavaScript二进制数据处理：从内存到类型化视图
假设数字0x12345678（16进制）要存入内存：地址: 00 01 02 03数据: 12 34 56 78地址: 00 01 02 03数据: 78 56 34 12ArrayBuffer是原始内存，不能直接操作TypedArray是"类型化视图"，创建时固定数据类型DataView是"灵活视图"，访问时指定数据类型字节序决定了多字节数据的存储顺序内存共享：多个视图可以操作同一ArrayBuffer性能关键：连续访问、对齐访问、选择合适类型你需要操作二进制数据吗？↓。
2026-01-24 22:46:00
709
原创 万物皆 0/1：图解文本文件与二进制文件的本质区别
层面文本文件二进制文件哲学内容为王，面向人类阅读。格式为王，面向机器处理。关键使用字符编码，内容被解释为字符流。使用文件格式，内容被解释为特定数据结构。一句话一种人类可读的、有通用编码规则的特殊二进制文件。一切皆二进制，文本文件只是它的一个子集。当你用记事本打开一个文件，能看懂且不奇怪，那它大概率是文本文件；如果看到一堆乱码或直接崩溃，那它肯定是二进制文件。
2026-01-18 22:25:38
731
原创 图解数据持久化：从文件、SQL 到 NoSQL 的本质对决
很多人觉得数据库就是写 SQL，或者认为存储只是后端的事。但如果你仔细观察数据的演进，会发现它其实是一场**“思维方式”**的迁徙。从最原始、毫无章法的 **txt 文件存储**，到严谨、讲究契约精神的 **SQL 关系型数据库**（如 MySQL），我们解决了数据的一致性与安全性。但当互联网进入海量并发、结构多变的时代，传统的“表格思维”开始遇到瓶颈。于是，**“非表格”存储**应运而生：* 在**前端**，为了摆脱 5MB 的限制，浏览器提供了 **IndexedDB** 这种无需 SQL
2026-01-15 21:00:48
774
原创 【图文读懂 Cookie】深度拆解 Cookie 的安全防线与业务实战
> 在浏览器的世界里，Cookie如同网站的记忆卡片，记录着登录状态、购物车物品和界面偏好。从点击“记住密码”到广告“精准推荐”，都离不开Cookie的默默工作。然而，这份便利也有代价：* **XSS 攻击**：试图窃取令牌的“黑手”。* **CSRF 攻击**：冒充身份的“隐形陷阱”。* **中间人攻击**：窥视明文传输的“窃听者”。本文将带你通过图文演示，从**浏览器底层机制**出发，深度剖析**HttpOnly、SameSite**等安全属性，并结合真实业务场景，教你构筑Cookie
2026-01-07 08:00:10
1113
原创 彻底讲透：Web 登录鉴权的进化史
从无状态到有状态：通过登录凭证标记身份。从Session到Token：为减轻服务器压力，从“查仓库”变为“验防伪卡”。从单Token到双Token：用“短效卡+长效证”平衡安全与体验。从被动过期到主动吊销：通过黑名单让已丢失的Token立即失效。整个体系在保证用户体验的同时，构建了多层次的安全防线。
2026-01-06 07:54:11
327
原创 HTTP/1 VS HTTP/2
HTTP协议从1.0到2.0不断演进，主要解决性能瓶颈问题。HTTP/1.0存在连接无法复用和队头阻塞两大缺陷，导致加载网页时频繁握手、资源被阻塞。HTTP/1.1引入持久连接、管道化、分块传输等优化，但仍存在TCP队头阻塞和头部冗余问题。HTTP/2采用二进制分帧、多路复用、头部压缩等革命性改进，实现真正的并行传输，大幅提升性能。然而协议演进仍需平衡应用需求增长与底层限制，持续优化网络传输效率。
2025-12-26 02:18:31
1063
原创 浏览器网络请求 Timing 全链路解析与优化指南
在前端性能优化中，Chrome DevTools 的 Network Timing 是衡量用户体验最真实的数据来源。理解从请求发起到数据下载的每一个毫秒，是精准定位性能瓶颈的前提。
2025-12-22 06:59:21
603
原创 主播墙状态同步架构设计方案：分层信令与按需订阅
信令必须极致精简。我们不传长字符串，而是使用枚举数字。远好于。单次信令控制在 50 字节以内，万次推送也仅约 0.5MB。对后端友好：不再被海量轮询骚扰，也不必盲目广播。对前端友好：全局 Map 结构，O(1)更新，UI 自动响应。对业务友好：解决了“拨打冲突”这一顽疾，提升了产品的专业感。对未来友好：系统架构不随业务规模崩塌。
2025-12-20 04:44:28
1049
原创 流媒体与物联网：车载监控系统完整指南
想象一下，你是一家物流公司的调度员，需要实时监控所有车辆的位置和状态。📹摄像头：实时拍摄车内外的画面📍GPS定位：实时上报位置⚡传感器：监控速度、温度、油耗等数据在地图上看到所有车辆的位置实时观看任意车辆的监控画面接收车辆的报警信息（如超速、偏离路线等）这就是车载监控系统！今天，我们就通过这个完整的实战案例，从物理层到应用层，理解整个网络协议栈是如何协同工作的。数据类型协议传输层原因视频推流RTMPTCP低延迟、稳定视频播放HLSHTTP浏览器支持、自适应数据传输。
2025-12-17 20:18:00
1241
1
原创 网络基础与传输层协议完全指南（前端视角）
想象一下，你在微信上给朋友发了一条消息"你好"，这条消息是怎么从你的手机传到朋友的手机上的？打包（应用层：把你的文字变成数据包）选择快递公司（传输层：选择TCP还是UDP）填写地址（网络层：写上IP地址）交给快递员（数据链路层：通过MAC地址找到下一站）物理运输（物理层：通过网线、Wi-Fi、4G/5G传输）今天，我们就从最底层开始，一层一层地理解整个网络通信过程。场景MAC地址是否有效说明同一个Wi-Fi下✅ 有效可以直接用MAC地址找到设备跨路由器❌ 无效。
2025-12-17 20:16:58
720
原创 前端像素与图片视频完全指南：从零开始理解视觉渲染的所有秘密
想象你在用彩色笔画画，最小的一个点就是一个"像素"。屏幕上的所有内容，都是由无数个这样的小点组成的。举个例子：这个图案由25个"像素点"组成（5x5的方格），每个方格就是一个像素。在前端开发中，"像素"这个词其实有三个不同的意思，这是让很多人困惑的根源：让我们一个一个搞清楚！物理像素就是屏幕上真实存在的发光点。比喻理解：🎯 关键理解记住： 物理像素 = 屏幕的"硬件规格"，是真实存在的发光点！CSS像素是我们写代码时使用的抽象单位，它不直接等于物理像素。代码示例：🤔 为什么要有CSS像素？
2025-11-29 23:04:19
1068
原创 视频技术完全入门指南：从小白到精通
│ 视频三大核心参数的关系 ││ ││ 分辨率 (Resolution) 帧率 (FPS) ││ ↓ ↓ ││ 画面清晰度 画面流畅度 ││ ↓ ↓ ││ ↓ ││ 需要的码率 (Bitrate) ││ ↓ ││ 需要的网络带宽 ││ ││ 公式：合理码率 = f(分辨率, 帧率, 画面复杂度) ││ ││ 例子： ││ 720p + 30fps + 普通场景 = 2000 Kbps ││ 720p + 60fps + 游戏场景 = 5000 Kbps │。
2025-11-28 04:33:14
8887
原创 前端图形渲染技术完整指南
不知道选哪个？看这里！→ 选 SVG→ 选 Canvas（或 ECharts 等库）→ 看情况→ 选 Canvas→ 选 SVG（或 Mermaid 库）→ 选图片格式（WebP/AVIF）图形渲染是指将数据或代码转换成可视化图像的过程。在前端开发中，我们主要通过以下几种方式来实现图形渲染：想象一下：不同的业务场景对图形有不同的需求：2. SVG 详解2.1 SVG 是什么？SVG（Scalable Vector Graphics） 是一种基于 XML 的矢量图形格式。把 SVG 想象成：类比：坐
2025-11-27 02:28:40
976
原创 Promise从零到精通：全面掌握JavaScript异步编程核心
/ ✅ 1. 总是返回 Promise// 返回 Promise// ✅ 2. 使用链式调用，避免嵌套getData()// ✅ 3. 总是添加错误处理promise// ✅ 4. 优先使用 async/awaittry {cleanup();// ✅ 5. 并行执行独立的异步操作]);// ✅ 6. 使用有意义的变量名// 不好// 好// ✅ 7. 避免过长的 Promise 链// 不好fetch()// 好：拆分成多个函数。
2025-11-14 01:21:57
970
原创 PC端与移动端完整兼容方案
本方案采用统一域名 + 两套独立界面 + 服务端智能分发的架构，兼顾开发效率与用户体验。为了让团队快速把握整体方向，可以先记住以下关键节奏：接下来各章节会围绕这条主线展开，帮助你把每一步做细、做稳。整体思路是在后端最早的入口（CDN、网关或 BFF）就把用户划分到 PC 或移动端，从而保证首屏不会闪现错误界面。还可以在这一层结合埋点、灰度等策略，对不同设备执行差异化的缓存与降级：2. 方案对比：服务端分流 vs. 单入口前端路由维度服务端分流（双入口、多 HTML）单入口前端路由控制（同一
2025-11-12 18:03:26
1047
原创 this 关键字在 React 中的实战应用指南
/ ❌ 错误理解：this 在定义时就确定了// 这里的 this 还不知道指向谁// ✅ 正确理解：this 在调用时才确定// 这时 this 才指向 obj，输出 "Alice"fn();// 这时 this 指向 window（非严格模式），输出 undefined记忆口诀：定义时不知道，运行时才知道方式代码量性能推荐度适用场景构造函数 bind多⭐⭐⭐⭐⭐⭐⭐⭐传统项目JSX 中 bind少⭐⭐❌不推荐箭头函数类属性少⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐推荐。
2025-11-12 00:58:56
964
原创 this 关键字
this在定义时不知道指向什么，只有调用瞬间才决定。判断this指向时，照着“四步走”顺序来。被回调、延迟执行的函数最容易丢失this，用bind或箭头函数锁定它。理解了this，就能写出更多复用的函数，也能看懂别人代码里的applybind、事件回调等写法。自己写几个对象方法，尝试不同调用方式；把方法赋值给变量、作为回调传递，观察this的变化；使用bind或箭头函数解决问题，加深印象。只要多试几次，this不再可怕！
2025-11-11 16:41:51
560
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人