YianNotes

MIME 类型 笔记MIME（Multipurpose Internet Mail Extensions）类型是用来标识文件的格式或数据类型的一种标准。最初设计用于电子邮件，但后来被广泛应用于 HTTP、FTP 等协议中，以帮助客户端（如浏览器）和服务器理解数据的类型及如何处理它们。 MIME 类型的结构MIME 类型的格式由两部分组成： 1<主类型>/<子类型> 主类型：表示数据的主要类别，通常是 text、image、audio、application 等。 子类型：进一步描述数据的具体格式，例如 text/plain、image/jpeg、application/json 等。 常见的 MIME 类型1. 文本类型（text/*）用于表示文本数据，通常可以由普通文本编辑器读取。 text/plain：普通文本，通常用于 .txt 文件。 text/html：HTML 文件，用于网页内容。 text/css：CSS 样式表，用于网页样式。 text/javascript 或 application/javascript：JavaScript ...

这个是浏览器渲染工作流程的第二篇文档，请预先查看 浏览器 渲染工作流程一文，当前简单描述 浏览器渲染流程总结笔记 1. 浏览器渲染过程概述浏览器渲染一个页面的过程分为多个阶段，从解析 HTML、CSS 到绘制最终的页面。关键流程如下： 解析阶段 解析 HTML 和 CSS： HTML 解析：浏览器解析 HTML 文档，生成 DOM（文档对象模型） 树，描述页面的结构和内容。 CSS 解析：浏览器解析 CSS 文件，生成 CSSOM（CSS 对象模型） 树，描述页面的样式信息。 合成渲染树： DOM 和 CSSOM 合并，生成 渲染树（Render Tree），其中包含所有可见元素的信息（包括样式、位置、尺寸等）。 渲染树是浏览器进行 布局（Reflow） 和 绘制（Repaint） 的基础。 在这里执行 domContentLoaded 后面就是渲染过程了 如果需要渲染就执行下面的渲染阶段 渲染阶段 布局和绘制： 布局（Reflow）：浏览器计算每个元素的实际位置和尺寸。 绘制（Repaint）：浏览器绘制页面元素，包括颜色、边框、背景等样式...

解析流程1. 解析 DOM（初始宏任务） 这是页面加载的第一个宏任务 2. 遇到同步脚本1234567解析DOM → 遇到同步<script> → 暂停解析 → 执行同步代码 ↓同步代码产生微任务/宏任务 → 加入相应队列 ↓同步代码执行完成 → 立即清空微任务队列 ↓恢复DOM解析 3. 遇到 defer/module 脚本123456789解析DOM → 遇到defer/module<script> → 继续解析，异步下载 ↓DOM解析完成 → 等待所有defer/module下载完成 ↓按文档顺序执行defer/module脚本 ↓每个脚本执行后清空微任务队列 ↓所有脚本执行完成 → 触发DOMContentLoaded 4. 遇到 async 脚本1234567解析DOM → 遇到async<script> → 继续解析，异步下载 ↓脚本下载完成（无论DOM是否解析完） ↓立即作为新宏任务执行 ↓执行后清空微任务队列 5. DOM 解析完成后123456789...

概述Intersection Observer API 允许代码注册一个回调函数，该函数会在特定元素进入或离开与其他元素（或视口）的交点，或者两个元素之间的交点变化达到指定值时执行 用法1234// callback 回调函数// options 选项 {root: 监测的祖先元素 , rootMargin: 监测的祖先元素的边距(相当于css的margin区域) ,scrollMargin: 监测的祖先元素的滚动边距(相当于css的scroll-margin区域), threshold: 元素进入监测祖先元素的交点}const observer = new IntersectionObserver(callback, options);observer.observe(document.querySelector(".element"));

plugin 开发使用 yo 开发 下面是 package.json 中比较重要的两个字段 1. activationEvents 字段： 事件注册：activationEvents 就像是 事件监听器，它定义了插件 何时启动，即 何时满足某个条件时，启动插件。 它是一个 激活条件的注册，当符合某个条件时（例如打开特定类型的文件、执行特定的命令等），插件才会 被激活 和 加载。 总结：它控制 插件的加载时机，就像在事件驱动编程中注册事件一样。只有当事件发生时，插件才会被启动。 例子： 1234"activationEvents": [ "onLanguage:python", // 只有当打开 Python 文件时，插件才会激活 "onCommand:extension.sayHello" // 只有当执行某个命令时，插件才会激活] 2. contributes 字段： 提供功能：contributes 定义了 插件提供的功能，它声明了插件会向 VSCode 编辑器 贡献哪些服务，例如命令、快捷键、视图、语...

23种设计模式是《设计模式：可复用面向对象软件的基础》一书中总结的经典设计模式，按其用途和结构大致分为三类：创建型、结构型、行为型。下面是每种模式的简介： 创建型（Creational Patterns） 单例模式 (Singleton)保证一个类只有一个实例，并提供全局访问点。 工厂方法模式 (Factory Method)定义一个创建对象的接口，但由子类决定要实例化哪个类。 抽象工厂模式 (Abstract Factory)提供一个创建一系列相关或相互依赖对象的接口，而无需指定具体类。 建造者模式 (Builder)使用多个简单的对象一步步构建一个复杂的对象。 原型模式 (Prototype)通过复制现有的实例来创建新的对象，而不是通过构造函数实例化。 结构型（Structural Patterns） 适配器模式 (Adapter)将一个类的接口转换成客户希望的另一种接口。 桥接模式 (Bridge)将抽象部分与实现部分分离，使它们可以独立地变化。 组合模式 (Composite)将对象组合成树形结构来表示“部分-整体”的层次结构。 装饰器模式 (Decor...

CSS 动画transitiontransition: 动画属性 动画持续时间 动画函数 动画延迟;要求连续 animation用@keyframes定义动画animation: 动画名称 动画持续时间 动画函数 动画延迟 动画次数 每轮播放方向 动画开始前 / 结束后元素状态 播放或者暂停;“名、时、速、延、次、向、样、态”

一、核心概念1. 拖放三要素 拖动的元素：被拖拽的物品 待传输的数据：通过 DataTransfer 传递 放置目标：可放置的区域 2. 重要特性 拖拽过程中，原始元素保持原位不动 浏览器创建半透明幽灵图像跟随鼠标 所有业务逻辑都需要手动实现 二、事件系统事件流程1dragstart → drag → dragenter → dragover → dragleave → drop → dragend 事件详解 事件 触发元素 作用 dragstart 可拖动元素 设置拖拽数据和权限 drag 可拖动元素 拖拽过程中连续触发 dragenter 目标元素 第一次进入目标边界 dragover 目标元素 在目标边界内移动 dragleave 目标元素 离开目标边界 drop 目标元素 在目标上释放 dragend 可拖动元素 拖拽操作结束 三、DataTransfer 对象1. 数据操作123456789// 设置数据event.dataTransfer.setData("text/plain", "数据内容&...