YianNotes

浏览器渲染与事件循环（今日沟通总结笔记）1. 从 URL 到页面：资源加载的基本链路 网络阶段：HTML/CSS/JS 等资源由浏览器网络层下载（常见是独立网络线程/进程）。 HTML 是流式的：HTML 响应体是分段到达的，浏览器可以边下载边解析，不必等整个 index.html 全部下载完才开始构建 DOM。 2. DOM / CSSOM：两套解析对象 HTML → DOM HTML 解析器负责把 HTML token 化并构建 DOM 树（容错强）。 CSS → CSSOM CSS 解析器负责把 CSS 文本解析为 CSSOM（规则树）。 关键纠正 遇到 <link rel="stylesheet"> 时： 浏览器会发起 CSS 下载（网络层并行） HTML 解析通常继续进行（DOM 继续增长） CSS 常见的“阻塞”是： 阻塞首次渲染/绘制（paint）（为了避免无样式闪烁） 以及在某些情况下间接阻塞同步 JS（当 JS 需要样式信息时） 3. <script...

概述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...

一、核心概念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", "数据内容&...

CSS 的 pointer-events 属性pointer-events 属性 决定了某个图形元素（如 HTML 元素、SVG 图形等）是否能够成为鼠标事件（比如点击、悬停等）的目标（target），以及在什么情况下它会成为目标 鼠标事件（如点击、悬停等）是有目标的，目标就是接收到该事件的元素。例如，点击一个按钮时，按钮就是鼠标事件的目标。 简单来说，pointer-events 用来控制哪些元素可以响应鼠标事件，哪些元素会忽略这些事件。当你点击页面上的某个元素时，浏览器会根据 pointer-events 属性来判断是否将鼠标事件传递给该元素 pointer-events 属性的常用值 auto：默认值，元素可以成为鼠标事件的目标。 none：元素不能成为鼠标事件的目标，鼠标事件会穿透该元素，继续传递给元素后面的元素。 …

问题描述1. 版本兼容问题 项目多，迭代快，版本更新时，老版本不兼容。 2. 数据一致性差 新旧版本数据处理不一致，导致数据不一致。 3. 环境变量管理混乱 环境配置复杂，跨环境管理困难。 4. 平滑部署 部署新版本时，如何不影响旧版本。

在传统的单体应用中，服务和它们的依赖通常是静态的，地址和端口是固定的，因此配置文件里可以硬编码这些信息。而在微服务架构中，服务是动态变化的，服务的实例数量、地址、端口等都会随时变化。因此，如果依赖于硬编码的服务地址，维护起来将变得非常复杂，尤其是在面对横向扩展、服务实例崩溃或升级时，如何动态地更新服务地址变得至关重要。 服务注册和服务发现的核心目标是： 自动化管理服务实例的地址和端口： 微服务架构中的服务通常会不断增加或减少，且它们可能会随时在不同的机器或容器中启动或停止。手动更新这些服务的地址在配置文件中是非常繁琐的。 服务注册：当一个服务启动时，它会自动将自己的信息（如服务名、IP 地址、端口等）注册到服务注册中心。 服务发现：当其他服务需要调用该服务时，它们可以从服务注册中心动态查询到目标服务的地址，而不需要事先在配置文件中硬编码这些地址。 动态发现服务而不依赖固定的配置文件： 在服务注册和服务发现机制下，服务之间的调用不需要依赖固定的 IP 地址或端口。相反，服务会注册到一个中央服务注册中心，其他服务可以通过注册中心查询到该服务的最新地址。 例如，在一个微服务系统...

1. 核心定义 浏览器会话历史记录：指在一个浏览器标签页中，从打开到关闭期间访问的所有网页形成的有序序列。 生命周期：与标签页绑定，关闭标签页即销毁。 核心功能：实现「前进」、「后退」导航。 2. 关键区分 概念 会话历史记录 浏览器历史记录 范围 当前标签页的单次会话 所有会话的长期记录 持久性 临时，关闭标签页即消失 永久，直到手动删除 查看方式 通过「前进/后退」按钮 通过 Ctrl+H (历史记录页) 数据性质 导航栈，存储在浏览器内核 URL 集合，存储在硬盘 3. 技术实现：History APIwindow.history 是操作会话历史记录的接口 核心方法：12345678// 导航history.back(); // 后退 ←history.forward(); // 前进 →history.go(-2); // 跳转指定步数// 添加/修改记录history.pushState(state, title, url); // 添加新记录history.replaceState(state, title, url); // 替...