- 博客(850)
- 收藏
- 关注
RSS订阅原创 Day 2：WXML、WXSS、数据绑定与列表渲染
通常等于屏幕宽度，适合移动端设计稿换算。WXSS 类似 CSS，但小程序中常用。会把数据从逻辑层同步到视图层。能帮助小程序更高效更新列表。小程序中更新界面不要直接改。
2026-08-21 10:38:42
161
原创 Day 1：小程序心智模型、开发工具与项目结构
微信小程序是在微信生态内运行的轻量应用。用户不需要下载安装独立 App，就可以通过微信搜索、扫码、分享入口打开使用。小程序开发不是直接操作 DOM，而是通过数据驱动视图。创建后点击“编译”，能看到默认首页，说明环境跑通。数组里，否则小程序无法识别这个页面。注意：页面必须注册到。
2026-08-20 11:16:18
165
原创 7天从入门到精通微信小程序：用20%的核心概念启动80%的小程序开发能力
专栏定位：面向有 HTML、CSS、JavaScript 基础的初学者，用 7 天掌握微信小程序项目开发中最高频、最能立刻产出的核心知识。
2026-08-11 13:37:24
150
原创 状态码301和302的区别
在深入讲解之前，我们先来理解什么是重定向（Redirect）。简单来说，重定向就是当浏览器请求某个 URL 时，服务器告诉浏览器：“你要找的资源不在这里，请去另一个地方找”。浏览器收到这个指令后，会自动向新的 URL 发起请求。这个过程对用户来说通常是透明的，用户可能只会看到地址栏的 URL 发生了变化。301 状态码表示请求的资源已被永久移动到了新的 URL。这是一个永久性的改变，搜索引擎会更新索引，将旧 URL 的权重转移到新 URL。302 状态码表示请求的资源暂时位于另一个 URL。
2026-07-09 09:38:53
396
原创 httpOnly 是什么，又有什么用？
在 Web 开发中，Cookie 是我们经常使用的一种客户端存储机制。但你是否知道，Cookie 有一个重要的安全属性叫做httpOnly？今天我们就来深入了解一下它的作用和重要性。httpOnly是 Cookie 的一个标志位（flag），当设置这个标志后，浏览器将禁止 JavaScript 通过API 访问该 Cookie。✅ 服务器可以读取和写入带有httpOnly标志的 Cookie✅ 浏览器会在每次 HTTP 请求中自动携带该 Cookie。
2026-07-08 10:43:17
195
原创 小程序生命周期详解
生命周期是指一个对象从创建到销毁的整个过程。应用生命周期：整个小程序的运行周期页面生命周期：单个页面的显示和隐藏过程组件生命周期：自定义组件的创建和销毁过程✅ 在合适的时机执行代码✅ 避免内存泄漏✅ 优化性能✅ 提升用户体验方法触发时机触发次数onLaunch小程序初始化完成全局一次onShow小程序启动或从后台进入前台多次onHide小程序从前台进入后台多次onError小程序发生错误多次页面不存在多次。
2026-07-07 22:22:37
396
原创 new Map 详解
Map是 ES6（ECMAScript 2015）引入的一种新的数据结构，它类似于对象（Object），也是键值对的集合。但与传统对象不同，Map 的键可以是任何类型的值，包括对象、函数、基本类型等。WeakMapMap 是什么：ES6 引入的键值对数据结构，键可以是任意类型为什么用 Map：相比 Object，Map 在键类型、顺序、性能等方面更有优势核心方法setgethasdeleteclearsize遍历方式forEachfor...ofkeys()values()entries()应用场景。
2026-07-06 23:16:12
283
原创 call、apply、bind 详解
在 JavaScript 中，this的指向是一个让很多开发者头疼的问题。而callapplybind正是用来显式控制this指向的三个重要方法。🎯面试必考：这是 JavaScript 基础中的高频考点🛠️实战常用：在封装工具函数、继承、借调方法时经常用到💡理解核心：深入理解 JavaScript 的执行上下文和 this 机制在介绍这三个方法之前，先简单回顾一下this全局上下文this指向全局对象（浏览器中是window函数调用this指向全局对象（严格模式下为undefined对象方法调用。
2026-07-05 08:00:00
295
原创 this 指向详解
this 不是静态的：它在函数执行时确定，而不是定义时四种绑定规则：new > 显式 > 隐式 > 默认箭头函数特殊：没有自己的 this，继承外层作用域常见陷阱：回调函数、定时器、解构赋值容易导致 this 丢失。
2026-07-05 08:00:00
470
原创 前端中断接口请求详解
中断接口请求是指在网络请求发出后，由于某些原因（如用户操作、页面跳转、超时等）需要主动取消正在进行的 HTTP 请求。中断接口请求的核心要点：✅核心技术✅适用场景：搜索、路由切换、组件销毁、防重复提交✅最佳实践：及时清理引用、正确处理错误、统一管理请求✅注意事项：区分取消和失败、避免内存泄漏、合理选择取消时机技术优点缺点兼容性好API 老旧，不支持 Promise简单易用已废弃，不推荐现代标准，功能强大需要 IE polyfill。
2026-07-04 08:00:00
241
原创 浏览器渲染原理
DOM 是 HTML 文档的对象表示，它将 HTML 标签转换为树形结构，每个标签都是树上的一个节点。CSSOM 是 CSS 规则的对象表示，类似于 DOM，但专门用于样式。渲染树是 DOM 树和 CSSOM 树的结合体，它只包含可见的节点。布局阶段计算每个节点在屏幕上的确切位置和大小。绘制阶段将渲染树的每个节点转换为屏幕上的实际像素。现代浏览器会将页面分成多个图层（Layer），然后在 GPU 上将这些图层合成为最终图像。减少 DOM 操作：使用 DocumentFragment 批量插入。
2026-07-04 08:00:00
477
原创 讲讲原型链、原型继承，项目哪里用到过？
在 JavaScript 中，每个函数都有一个prototype属性，它指向一个对象，这个对象就是原型对象。// {}__proto__当访问一个对象的属性或方法时，如果对象本身没有，JavaScript 会沿着__proto__向上查找，直到找到或到达null。这条查找路径就是原型链。✅ 写出高效的代码✅ 理解框架源码（Vue、React 等）✅ 设计优雅的架构✅ 应对技术面试都至关重要。记住三个关键点每个函数都有prototype每个对象都有__proto__
2026-07-04 08:00:00
364
原创 前端 Cookie 详解
Cookie是服务器发送到用户浏览器并保存在本地的一小块数据。它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Cookie 是什么：服务器存储在浏览器的小段数据，会自动携带到服务器如何使用：通过或封装工具类操作重要属性expiresdomainpathsecurehttpOnlysameSite安全第一：敏感数据设置HttpOnly和Secure合理选择：根据场景选择 Cookie、localStorage 或 sessionStorage。
2026-07-03 08:00:00
311
原创 前端断点续传详解
断点续传是一种文件上传技术，它将大文件分割成多个小块（切片），分别上传到服务器。即使上传过程中网络中断或页面刷新，也可以从上次中断的位置继续上传，而不需要重新上传整个文件。断点续传的核心要点：✅三大步骤：切片 → 上传 → 合并✅关键参数✅性能优化：并行上传、合理切片大小、失败重试✅用户体验：进度显示、暂停恢复、断点续传📹 视频上传（最常见）📦 大文件传输（> 100MB）📸 图片批量上传📄 文档管理系统前端：Vue/React + Axios + FormData。
2026-07-03 08:00:00
346
原创 JavaScript 新纪元：深入理解 Symbol 与 BigInt
特性SymbolBigInt引入版本ES6 (2015)ES2020主要用途唯一标识符、对象属性键、元编程高精度整数运算数据类型symbolbigint是否可枚举否 (默认)N/A (它是值，不是键)常见陷阱无法被常规方法遍历，需专用 API不能与 Number 混用，无 Math 支持当你需要避免对象属性冲突，或者想要隐藏对象内部状态时，请想起 Symbol。当你处理超过 15 位的整数（如雪花算法 ID、高精度金融计算）时，请毫不犹豫地使用 BigInt。
2026-07-02 08:00:00
554
原创 什么是Generator 函数
特性普通函数Generator 函数执行方式一气呵成可暂停、可恢复返回值return的值遍历器对象 (Iterator)关键字functionfunction*yield主要用途常规逻辑封装异步流程控制、惰性加载、状态机一句话记忆：Generator 是一个可以多次进出、保持状态的“智能函数”，它是 JavaScript 异步编程进化史上的重要基石。希望这篇文档能帮助你彻底掌握 Generator 函数！如果有疑问，欢迎在评论区留言。
2026-07-02 08:00:00
768
原创 Codex vs. Claude Code：谁才是你的编程最佳拍档？
如果你追求速度和流畅度，处理大量常规代码，Codex 模式（如 Copilot）是你的首选。如果你追求解决复杂问题的能力，希望 AI 帮你分担思考和执行的重担，是更强大的伙伴。未来的趋势是两者融合：编辑器里既有实时的智能补全，又有随时待命的智能代理。作为开发者，学会如何向 AI 提问（Prompt Engineering）和如何审查 AI 的代码，比选择哪个工具更重要。互动话题：你在日常开发中更依赖自动补全还是 AI 代理？欢迎在评论区分享你的工作流！👇。
2026-07-01 08:00:00
887
原创 JavaScript 中 call、apply、bind 详解：彻底搞懂 this 指向
想象一下，你有一个工具箱（对象 A），里面有一把锤子（方法）。现在你想用这把锤子去敲钉子，但你不想把整个工具箱搬过来，或者你当前所在的场景（对象 B）没有锤子。callapply：就像是把锤子借过来，立刻敲一下钉子。用完就还回去。bind：就像是把锤子绑定在你的腰带上。以后每次你需要敲钉子时，拿出来的都是这把特定的锤子，而且可以稍后再使用。call 和 apply 的区别？接收参数的方式不同。call是逐个参数，apply是数组参数。除此之外，功能完全一致。bind 和 call/apply 的区别。
2026-07-01 08:00:00
567
原创 视频首屏加载慢、卡顿？前端优化全攻略
是否添加了poster封面图？preload属性是否设置合理？MP4 文件是否经过faststart处理？是否启用了 CDN 加速？是否实现了懒加载？是否提供了多种清晰度适配（HLS/DASH）？是否有完善的错误处理机制？结语：视频优化是一个系统工程，需要从资源、网络、代码三个层面协同作战。希望本文能帮助你打造出流畅、极速的视频体验！🌟。
2026-06-30 08:00:00
876
原创 跨域视频播放报错？手把手教你排查与解决
前端<video>标签是否添加了？网络：Network 面板中，视频响应头是否有？后端/CDN：服务器或 CDN 是否配置了正确的 CORS 规则？缓存：修改配置后，是否清除了 CDN 或浏览器缓存？协议：是否混合了 HTTP 和 HTTPS（Mixed Content）？结语：跨域问题看似复杂，实则核心在于“服务器是否同意”。掌握 Network 面板的分析技巧，配合正确的后端配置，90% 的视频跨域问题都能迎刃而解。希望这篇指南能帮你快速定位问题！
2026-06-30 08:00:00
252
原创 getUserMedia vs [特殊字符]️ getDisplayMedia：摄像头与屏幕的抉择
UserMedia 采硬件，摄像头里拍人像。麦克风里收声音，视频通话靠它强。DisplayMedia 抓屏幕，窗口标签任选样。隐私保护第一位，用户必须手动选。音频处理有差异，屏幕无声需另装。合并音轨莫忘记，手势触发才正常。移动端上需谨慎，iOS 支持尚有限。分清场景选对 API，开发顺畅不迷茫。希望这篇文档能帮你彻底理清和的区别！
2026-06-29 08:00:00
669
原创 从零打造：如何封装一个优雅的自定义视频播放器？
在写代码之前，先明确我们需要管理哪些状态（State）和暴露哪些方法（Methods）。原生 Video 做内核，自定义 UI 盖上层。状态同步靠事件，TimeUpdate 刷进度。React Hook 抽逻辑，Vue Ref 绑 DOM 树。节流防抖不能少，性能优化是关键。全屏快捷键配好，用户体验翻倍升。卸载清理内存漏，优雅封装显功底。希望这篇文档能帮你理清自定义播放器的封装思路！
2026-06-29 08:00:00
383
原创 WebRTC 一对一通话：从陌生到连线的完整旅程
Peer A (Caller/发起方)：主动发起通话的人（比如你）。Peer B (Callee/接收方)：接受通话的人（比如你的朋友）。Signaling Server (信令服务器)中间人。它不传输音视频数据，只负责帮 A 和 B 传递“元数据”（SDP 和 ICE Candidate）。通常使用 WebSocket 实现。⚠️ 重要概念WebRTC 是的，但建立 P2P 连接的过程需要辅助。一旦连接建立，信令服务器就可以“退场”了，音视频数据直接在 A 和 B 之间流动。
2026-06-28 08:00:00
175
原创 STUN vs TURN：WebRTC 的“导航仪”与“中转站”
NAT 阻挡难直连，STUN TURN 来帮忙。STUN 只是查号码，告知公网 IP 址。直连成功成本低，延迟最小体验佳。若遇防火墙上锁，直连失败莫慌张。TURN 服务器做中转，数据 relay 保通畅。带宽虽贵连通稳，兜底方案不能忘。ICE 策略智能选，先试直连后中继。两者搭配最完美，WebRTC 里显神威。希望这篇文档能帮你彻底理清 STUN 和 TURN 的作用与区别！
2026-06-28 08:00:00
672
原创 flv.js & hls.js：浏览器的“视频翻译官”
特性flv.jshls.js目标格式HTTP-FLV核心技术主要用途低延迟直播通用直播/点播iOS 支持❌不支持(iOS 无 MSE)✅不需要(iOS 原生支持 HLS)Android 支持✅ 支持✅ 支持PC 浏览器支持✅ 支持 (Chrome/Firefox/Edge)✅ 支持 (Chrome/Firefox/Edge)典型延迟1 - 3 秒10 - 30 秒 (普通 HLS)本质动作TS -> fMP4浏览器原生懂 MP4，FLV HLS 它不理。
2026-06-27 08:00:00
505
原创 WebRTC：浏览器间的“直连电话”
WebRTC 实时通，浏览器里建奇功。无需插件原生带，毫秒延迟似面对面。P2P 直连省带宽，NAT 穿透靠 STUN。若遇防火墙阻挡，TURN 服务器来中转。直播广播选 HLS，互动通话 WebRTC。云游戏里显身手，数据通道传文件。信令交换是关键，SDP 里定乾坤。希望这篇文档能帮你建立起对 WebRTC 的宏观认知！
2026-06-27 08:00:00
266
原创 HTTP-FLV vs HLS (m3u8)：直播流协议大比拼
FLV 延迟低又快，PC 安卓首选派。HLS 兼容性好无敌，iOS 原生最省力。FLV 要靠 flv.js，MSE 技术来助力。HLS 切片 m3u8，hls.js 来补差距。iOS 不支持 FLV，判断 UA 换地址。跨域 HTTPS 要配好，直播流畅没脾气。希望这篇文档能帮你理清 HTTP-FLV 和 HLS 的区别，并顺利实现前端播放！
2026-06-26 08:00:00
906
原创 深度解析：为什么 HTTP-FLV 比 HLS 延迟更低？
FLV 像水流，源源不断不回头。无需切片凑整数，长连传输少握手。缓冲设小延迟低，即时渲染最风流。HLS 像快递，打包成段再发送。切片时长定下限，下载缓冲层层重。兼容性好是优势，延迟偏高莫强求。若要低延迟选 FLV，若要兼容选 HLS。LL-HLS 是新秀，兼顾两者有前途。希望这篇文档能帮你从原理层面理解视频直播延迟的秘密！
2026-06-26 08:00:00
458
原创 video/audio 的 preload 属性：预加载的艺术
不预加载：用户点了菜（点击播放），厨师才开始买菜、洗菜、炒菜。（等待时间长）预加载元数据：用户还没点菜，厨师先把菜单和菜品图片准备好。（知道有多久、多大，但没开始做）预加载全部：用户还没点菜，厨师已经把菜全炒好放在窗口了。（等待时间最短，但浪费食材/带宽）preload属性就是用来控制浏览器这个“厨师”的行为。取值预加载内容带宽消耗起播速度适用场景none无⭐ (最低)🐢 (慢)移动端、长列表、非核心视频metadata仅元数据 (时长、尺寸)⭐⭐ (低)🐇 (中)通用推荐。
2026-06-25 08:00:00
257
原创 移动端视频播放：避坑指南与最佳实践c
移动端播放坑不少，iOS 全屏最烦恼。Playsinline 加上去，内联播放才牢靠。自动播放必静音，用户交互解禁令。微信 X5 需同层，H5 类型要声明。层级遮挡用 Transform，Object-fit 控尺寸。兼容属性全加上，多端测试不能少。希望这篇文档能帮你扫清移动端视频开发的障碍！
2026-06-25 08:00:00
356
原创 HTML5 Video 标签全攻略：属性、事件与 API
光说不练假把式。让我们结合属性、事件和 API，实现一个最简单的“播放/暂停”切换功能。Video 标签功能强，属性事件 API 忙。自动播放需静音，Promise 捕获防报错。LoadedMetadata 取时长，TimeUpdate 刷进度。Play Pause 控启停，Ended 之后做跳转。移动端加 PlaysInline，预加载策略省流量。自定义控件灵活配，用户体验最至上。希望这篇文档能帮你彻底理清 HTML5 Video 标签的使用！
2026-06-24 08:00:00
575
原创 浏览器自动播放策略：为什么你的视频不自动播放？
默认静音：如果需要自动播放，务必加上muted。移动端适配：务必加上。捕获错误：始终处理play()返回的 Promise 的catch。提供 fallback：自动播放失败时，显示一个清晰的“播放”按钮。避免滥用：不要为了炫技而自动播放有声视频，这会严重损害用户体验，导致用户关闭标签页。自动播放有策略，静音才能随便播。有声必须等交互，用户点击才解锁。移动端加 PlaysInline，防止全屏乱折腾。Play 返回 Promise，Catch 错误做降级。展示按钮最稳妥，用户体验记心间。
2026-06-24 08:00:00
830
原创 CSS 盒模型：网页布局的“积木”法则
特性标准盒模型 (IE/怪异盒模型 (border-boxwidth 包含仅 Content增加 Padding/Border盒子变大盒子不变，内容区域变小默认行为现代浏览器默认需手动设置box-sizing适用场景较少使用，除非需要精确控制内容区推荐！布局更可控，不易崩盘盒模型，四件套，内容内边外边框。Content 是核心，Padding 透背景。Border 定边界，Margin 透明空。标准模型 content-box，宽高只算内容区，加了内边盒子涨，布局容易出难题。
2026-06-23 08:00:00
936
原创 CSS 选择器优先级：谁说了算？
优先级，看权重，四位数字记心中。行内一千是第一，ID 一百紧随其后。类伪属性一十分，标签伪元一分够。通配组合零分算，重要声明凌驾众。同级相比看先后，后来居上定胜负。少用 ID 少嵌套，重要声明莫乱用。类名平铺最优雅，维护轻松不头痛。希望这篇文档能帮你彻底理清 CSS 选择器的优先级！
2026-06-23 08:00:00
463
原创 Socket 和 WebSocket 的关系
Socket 是网络通信的基础设施，可以理解为"网络通信的端点"。WebSocket 是一种应用层协议，建立在 HTTP 之上，专门为浏览器和服务端提供全双工通信。Socket 是基础设施（像公路）↓WebSocket 是在此基础上建立的协议（像在公路上跑的汽车）↓你的应用使用 WebSocket 进行通信（像你开车出行）✅ Socket 是底层通信接口，WebSocket 是上层协议✅ WebSocket 专为 Web 浏览器设计，解决了 HTTP 无法实时推送的问题。
2026-06-22 08:10:05
508
原创 什么是 WebSocket？告别“轮询”，拥抱实时通信
HTTP 像短信，一问一答慢半拍。WS 像电话，打通之后随便聊。握手借 HTTP，升级协议换通道。双向通信低延迟，聊天游戏少不了。记得心跳保连接，断线重连不能少。希望这篇文档能帮你彻底理解 WebSocket！
2026-06-22 08:02:06
510
原创 什么是 XSS 攻击？如何像铁桶一样防御它？
中文叫跨站脚本攻击。注意：因为 CSS 已经被层叠样式表占用了，所以缩写为 XSS。XSS 攻击花样多，注入脚本惹祸端。反射诱骗点链接，存储埋雷害众人。DOM 型里前端错，自导自演最难防。防御之道有四招：一转义，输出要把特殊符变样；二HttpOnly，Cookie 不让 JS 碰；三CSP，白名单里才放行；四过滤，输入清洗保平安。
2026-06-21 08:00:00
325
原创 什么是 CSRF 攻击？如何识破“伪装者”？
中文叫跨站请求伪造。（一键攻击）或（会话骑乘）。CSRF 很狡猾，借你 Cookie 办坏事。不用脚本不用黑，一张图片就能欺。防御大招有三式：一加 Token，随机字符串来验真身；二查 Referer，看看请求从哪来；三设 SameSite，Cookie 跨站不让带。重要操作再验证，密码短信保平安。
2026-06-21 08:00:00
348
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人