YianNotes

🎯 核心概念同源策略是浏览器的安全基石，像小区的围墙，默认隔离不同来源的资源，保护用户数据不被恶意网站窃取。 什么是“同源”？三要素必须完全一致： 协议（http / https） 域名（www.example.com） 端口（80 / 443） ⚡ 关键机制判断时机：实时检查同源判断发生在敏感操作执行的瞬间，不是预先分类： 12345678// 示例1：网络请求fetch("https://api.other-site.com/data"); // ⚠️ 在此刻判断！// 示例2：DOM访问iframe.contentDocument; // ⚠️ 在此刻判断！// 示例3：存储访问localStorage.getItem("key"); // 自动关联当前源 重要特性：脚本继承源12<!-- 在 https://my-site.com 中 --><script src="https://cdn.other-site.com/library.js"></scri...

iframe 简介 HTML 元素 <iframe> 表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中 嵌套的浏览器上下文都有自己的 Document，在嵌套的浏览器上下文中，允许 URL 导航 每个嵌入的浏览器上下文中的导航的动作 都会线性的插入顶级浏览器上下文的 历史会话记录中。 包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。 内联框架，比如 <iframe> ，会被包含在 window.frames 伪数组中,每个元素都是 window 对象 使用 dom 获取到 iframe 的 dom 元素对象后，可以使用 contentWindow 属性访问内联框架的 window 对象。 使用 dom 获取到 iframe 的 dom 元素对象后，可以使用 contentDocument 属性访问内联框架的 document 对象。 在 iframe 内部，脚本可以通过 window.parent 获取父窗口的引用。（父窗口就是包含 iframe 的窗口） 脚本访问框架...

📚 核心概念1. 什么是 Promise？123456789101112131415161718// Promise 三种状态const states = { PENDING: "pending", // 初始状态 FULFILLED: "fulfilled", // 操作成功完成 REJECTED: "rejected", // 操作失败};// 创建 Promiseconst promise = new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { if (Math.random() > 0.5) { resolve("成功数据"); // 状态变为 fulfilled } else { reject("失败原因"); // 状态变为 rejected } &#...

引言await 是 ES2017 引入的语法糖，用于简化 Promise 的使用。 在学习 await 之前，我们先来看一段生成器（Generator）的代码： 123456function* generator() { yield 1; yield 2; yield 3; return 4;} 如果想获取这个迭代器对象的最终返回值，我们需要手动调用 next() 方法： 12345const iterator = generator();console.log(iterator.next()); // { value: 1, done: false }console.log(iterator.next()); // { value: 2, done: false }console.log(iterator.next()); // { value: 3, done: false }console.log(iterator.next()); // { value: 4, done: ...

第一章：计算机系统概述主要需要学习的内容是： 计算机软件 硬件的概念； 计算机的层次结构； 高级语言 运行在虚拟机器 M3 上，经过翻译器翻译成汇编语言后运行在虚拟机器 M2 上 对汇编语言进行抽象得到高级语言 汇编语言 运行在虚拟机器 M2 上，经过翻译成机器语言后运行在真是的机器 M1 上 在汇编和机器语言中，其实还是有一层 操作系统 操作系统是一个虚拟机器，是对机器语言进行了抽象 在机器语言上进行抽象 机器语言 运行在真实的机器 M1 上 就是 0101 的代码 微指令系统运行在微指令机器 M0 上 ‼️ 计算机系统结构和计算机组成 两个术语 计算机系统结构定义软硬件交界面与功能划分（如是否支持硬件乘法指令），计算机组成则研究硬件实现细节（如乘法器的具体电路设计）。 计算机组成就是具体硬件怎么实现的系统结构 相当于一个是类，一个是实例 计算机的基本组成（冯诺伊曼结构） 计算机由五大部件组成 指令和数据以同等地位保存在计算机中，按照地址寻访 指令和数据都用二进制表示 指令由操作码和操作数地址码组成 存储程序 以运算器为中心 ‼️ 简单描述计算机的硬件R...

:has() 是 CSS 的 父选择器，能够让父元素根据子元素的状态（如 hover）来改变自身样式。 基本用法123.parent:has(.child:hover) { background-color: gold; /* 父元素的背景变为金色 */} .parent：父元素类名； .child：子元素类名； 当 .child 被 hover 时，.parent 会变为金色。 特点 CSS 父选择器：这是一个让父元素根据子元素状态变化的原生方法。 简洁：相比 JavaScript，纯 CSS 代码实现，易于理解和维护。 链式选择：不仅支持 hover，还可以配合其他状态（如 :focus、:checked 等）。 支持情况 Chrome：从 105 版本开始支持； Safari：从 15.4 版本开始支持； Edge：从 105 版本开始支持； Firefox：暂时不支持，计划未来支持。 优点 简洁：用 CSS 解决问题，无需 JavaScript。 性能：CSS 性能优于 JavaScript，且无需额外的事件监听。 语义清晰：代码更简洁、...

🔧 核心技术关键词前端/浏览器技术123456789101112// 代码编辑和执行- CodeMirror- Monaco Editor (VS Code 内核)- Ace Editor- Prism.js (代码高亮)// 执行环境- IFrame sandbox- Web Workers- Service Workers- WebAssembly (WASM)- Shadow DOM 代码执行引擎123456- Code Sandbox- Code Execution Engine- REPL (Read-Eval-Print Loop)- Jupyter Kernel- Node.js VM module- Pyodide (Python in Browser) 🛡️ 安全隔离关键词1234567- Sandboxed Execution- Code Isolation- Capability-based Security- Resource Quotas- Docker Containerization- Kubernetes Pods- Firecr...

Web Storage API 提供了在浏览器端存储数据的功能，分为两种存储方式：localStorage 和 sessionStorage。它们各自有不同的特点和应用场景，下面是详细总结： 1. localStorage：持久化存储 持久性：数据会永久存储，直到显式删除。即使浏览器关闭，数据依然存在。 作用范围：同源（同协议、同域名、同端口）的多个页面之间都能访问。 存储大小：通常约 5MB，具体大小依赖于浏览器。 API 操作： 存储数据：localStorage.setItem('key', 'value') 读取数据：localStorage.getItem('key') 删除数据：localStorage.removeItem('key') 清空所有数据：localStorage.clear() 适用场景： 用户偏好设置（如语言、主题、布局等） 存储长期的用户数据（如用户名、登录信息等） 避免重复请求数据，减少网络开销 示例：123456789// 存储数据localStorage.setI...

wget下载网络数据 示例用法 下载整个网站 1wget -r -np -k -p https://example.com 该命令将递归下载网站并保留页面中所有的资源（图片、样式表、脚本等），确保你能够离线查看该网站。 Let’s Encrypt ｜ Certbot 生成 ssl 证书 Consul 服务注册 服务发现 Corepack JavaScript 包管理器的管理器 管理项目中的包管理器的版本

Concept list 获取Selection Selection 对象 Document execCommand 已废弃 Range 对象 Lib Slate tiptap prosemirror Quill lexical Selecion 和 Range 1️⃣ 基本概念 概念 说明 Selection 表示用户当前“选中了什么”的对象，是浏览器提供的接口。通过 window.getSelection() 获取。 Range 描述“从哪到哪”的精确范围对象，是底层数据结构。用于实际操作 DOM。 2️⃣ 核心关系 🔗 Selection 持有 Range，Range 定义选区内容 Selection 是“容器”或“视图” → 用户看到的高亮 Range 是“数据”或“工具” → 程序用来操作的内容 一个 Selection 可以包含多个 Range（但大多数浏览器只支持一个） 💡 不是 Selection 创建 Range，而是： 用户操作 → 浏览器创建 Range → 放入 Selection 程序创建 Range → ...