vue中ref与reactive
Vue 3 的 与 ：区别、实现，以及为什么更推荐 1\. 一句话结论 ：适合 原始类型 或 独立、细粒度 的状态单元；类型推断明确、解构安全、追踪粒度更小， 默认首选 。 ：适合管理 对象/集合 这类结构化状态；但 解构会丢失响应性 ， 默认 非深度 ，需要正确的使用姿势配合。 2\. 用法与语义差异 2.1 基本示例 2.2 模板中的解包（unwrapping） 在 模板 里， 会 自动解包 ，可直接写 ，不必 。 在响应式对象中...
开始性能优化之旅
事件循环机制 一、JavaScript 引擎的本质 核心职责 ： 解析 JavaScript 语法 管理变量和内存 执行代码逻辑 不涉及 ： 线程管理（Worker除外） I/O 操作 定时器控制 网络请求 常见引擎：V8（Chrome）、SpiderMonkey（Firefox）、JavaScriptCore（Safari） 二、宿主环境的扩展能力 宿主提供的多线程能力 ： | 线程类型 | 功能 | 对应 API | | | | |...
前端首屏优化
话说，我在面试的时候，80%的情况下，都会被问到首屏优化问题，烦，恨 TCP Slow Start（慢启动）概念 咱先不说标题的数字哪里来的，先说一个概念，就是TCP的慢启动。 你们想哈，在浏览器和服务器开始建立连接的时候，服务器是并不知道浏览端网络的带宽、拥塞状况。假设你本地的带宽是1M，如果一开始服务器就发送2M的文件，那浏览器压根就不是人类，忍忍或者挤挤就能接收到的，这样就可能会引发丢包和重传。 想想，这个该有什么办法解决这个问题...
Function.prototype和Object.prototype
一道面试题引发的原型链血案，彻底搞懂 Function.prototype 和 Object.prototype 前言 有这样一道题： 目录 问题分析与答案揭晓 让我们先公布正确答案，然后深入分析原因： 为什么 是 而不是 ？ 这是因为函数和实例的原型链路径完全不同！ 原型链的本质机制 JavaScript中的两条原型链 在JavaScript中，存在两条不同的原型链： 关键理解：F.proto...
彻底讲透as const + keyof typeof
一、为什么要 “as const” 1、默认情况下，TS把字面量推断成”宽类型“ 于是你写 ‘foo’ | ‘bar’ 时， 一旦拼错成 ’fooo‘, TS不会拦你。 2、加上 as const ，TS会把它当成”不可变的精确字面量” 数组、对象同理： 二、keyof typeof： 把值世界映射到类型世界 typeof：能把运行时的值变成类型； keyof：能把对象类型变成联合类型 合起来就是：给我一个对象，我立刻推出它所有建的字面...
Vue3 中computed属性依赖总结
Vue3 属性依赖总结 1. 依赖收集机制 的 getter 内部 读取 到哪些响应式变量 ( / )，就会把这些变量收集为依赖。 当这些依赖发生变化时， 会重新计算。 2. 如果只返回常量 始终是 。 修改 或 不会触发 重新计算，因为 getter 内没有访问它们。 3. 如果访问了响应式变量但仍返回常量 初始化时会打印一次。 当 或 改变时，getter 会重新执行（再次打印），因为它们被收集为依赖。 但 依旧始终是 。 4. 总...
JavaScript 的多线程能力：Worker
如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript，又要负责渲染页面、响应用户操作，一旦它被繁重的计算任务占满，就无暇顾及其他，用户体验便直线下降。 这个问题的根源，正是“主线程是单线程的”。那么，如何解决呢？ 答案很简单：把这...
Vue 中的scoped样式是如何实现样式隔离的
Vue 中的 样式是如何实现样式隔离 结论先行： Vue 的 不是 Shadow DOM 。它通过 编译期选择器改写 + 运行时为 DOM 打上唯一属性 （如 ）来约束样式“只作用于本组件的 DOM 子树”。 1\. 一句话总结 每个带 的单文件组件（SFC）会被分配一个 作用域 ID （scopeId）。 编译器把你写的选择器 改写 ，在每个简单选择器上 追加 。 运行时渲染该组件时，会把同一个 添加到组件生成的每一个真实 DOM 元...
🕹 Robots.txt 与 🗺 Sitemap.xml 在 SEO 中的作用与实现
🕹 Robots.txt 与 🗺 Sitemap.xml 在 SEO 中的作用与实现 一、Robots.txt 1\. 作用 告诉搜索引擎爬虫哪些页面可以访问，哪些不能访问 如屏蔽 、 等后台路径。 节省爬虫抓取预算（Crawl Budget） 搜索引擎每天给网站的抓取资源有限，避免浪费在无关页面上。 防止隐私或重复页面被收录 避免收录测试页面、动态参数页、重复内容。 ⚠️ 注意： Robots.txt 不是安全工具 ，只是给搜索引...