guoqkmiss的博客

让我们可以更优雅地中止异步操作，不再依赖过时的回调或繁琐的清理逻辑。避免占用资源或等待无效请求，提升性能和用户体验。

nanoid 由开发者Ai发起，是一个小巧、快速且使用安全随机数来生成唯一 ID 的库初衷是替代体积更大、可读性较弱或性能不佳的其他 ID 生成方案uuid（Universally Unique Identifier）是遵循RFC4122标准的唯一标识符，常用作分布式系统、数据库主键、跨系统交互等场景如果你想要一款小而快的库，并且对传统 UUID 格式无强制要求，nanoid 是一个理想选择如果你需要标准化、高度兼容且广为人知的唯一标识，uuid 是更稳妥的方案。

在浏览器中定位 DOM 元素是前端开发、测试和调试过程的核心环节。常见的方式包括 XPath、CSS Selector 和 JavaScript Path（JS Path）。它们各有优缺点，适用于不同的业务需求。接下来，我们将分别介绍三种方式的特点、适用场景，并进行对比分析

Electron 项目开机自启动综合稳定性和易用性考虑，推荐使用 auto-launch，特别是：1. 如果你的应用需要支持Linux2. 如果你重视更好的错误处理和用户反馈3. 如果你的应用在Windows平台有较多用户（Windows更新可能影响原生API）app.setLoginItemSettings 更适合简单场景，或者你特别关注减少依赖项的情况。但整体而言，auto-launch 提供了更可靠和一致的开发体验。

node-cron 是一个基于 Cron 表达式的任务调度库，允许你根据 cron 表达式设置任务的执行频率。它轻量、易用，适用于大多数简单的定时任务需求。Rxjs 是一个响应式编程库，主要用途是处理异步事件流。提供了强大的操作符，用于处理事件、异步任务、定时任务等场景。Rxjs 并非专门用于任务调度，但它可以非常高效地管理定时任务和流式数据bull 是一个基于 Redis 的任务队列库，适合处理大量异步任务。它不仅支持定时任务，还支持任务的重试、延迟执行、优先级队列等。

Cron 表达式0 0 L * *表示任务每个月的最后一天执行。Cron 表达式是一种强大的定时任务调度工具，适用于各种需要定时执行的场景。它灵活、高效，尤其适用于基于时间的任务调度。通过结合不同的特殊字符，您可以创建非常复杂的定时任务。它广泛用于 Linux 系统的 cron 命令中，并在许多 Node.js 库中得到了支持，如 node-cron。

提供了更广泛的数据类型支持和对循环引用的处理能力，适用于复杂场景适合处理简单、JSON兼容的数据结构，但在处理复杂数据类型或循环引用时有局限性两者都有限制，克隆的时候需要关注下克隆对象的数据类型再做选择。

预加载扫描程序的角色是推测性，也就是说，它会检查原始标记，以便查找资源，以便在主要HTML解析器发现之前抓取相应资源预加载扫描程序是一种浏览器优化，采用辅助HTML解析器的形式，可扫描原始HTML响应，以找出并推测性地提取资源，然后主HTML解析器才会发现这些资源为了充分利用预加载扫描器，服务器发送的HTML标记中应包含关键资源。由CSS使用属性加载的图片。这些图片引用位于CSS中，预加载扫描器无法发现这些引用动态加载的脚本，采用元素标记（使用JavaScript注入DOM。

FCP：从网页开始加载到网页内容的任何部分呈现在屏幕上所用的时间。首次内容绘制 (FCP) 是一项以用户为中心的重要指标，用于衡量感知的加载速度。它标记了网页加载时间轴中用户可以看到屏幕上任何内容的第一个点。FCP衡量的是从用户首次导航到相应网页到该网页的任何部分呈现在屏幕上所用的时间。对于此指标，内容是指文本、图片（包括背景图片）、元素或非白色元素。LCP：从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间LCP。

页面卸载时的日志记录：在用户离开页面时记录行为数据，如页面停留时间、点击行为等。分析和监控：发送用户行为数据到分析服务器，用于网站性能监控和用户行为分析。状态报告：向服务器报告应用程序状态或错误信息。是一个专为可靠性设计的API，特别适用于在页面卸载时发送少量数据。它具有简单、非阻塞、可靠等优点，特别适合日志记录和用户行为分析等场景。发出的是异步请求，并且是POST请求。只能判断出是否放入浏览器任务队列，不能判断是否发送成功。无需处理返回值。需要注意浏览器兼容问题。

页面访问&页面关闭数据上报能清楚的掌握用户的使用数据，对营销活动或者画像分析很有帮助整体没有难点，就是不同项目不同分析如果你的项目是hash改变，那就可以针对hash进行监听主要就是使用进行可靠的数据传输。

最近在做鼠标框选的需求，鼠标框选就需要用到Range和Selection对象。Range表示选择的区间范围，Selection表示选择的文档内容。下面就详细说下这两个对象。

鼠标框选上报能监控用户在页面的行为，能为后续的数据分析等提供便利基于JS中的Selection和Range实现的，使用原生JS涉及到的操作比较多，包含键盘、鼠标右键、全选等能对框选的内容进行分类，区别html和text，更方便的看出用户选择了哪些内容。

ECMAScript 2024，第 15 版，添加了用于调整 ArrayBuffer 和 SharedArrayBuffer 大小和传输的功能； 添加了一个新的 RegExp /v 标志，用于创建具有更高级功能的 RegExp，用于处理字符串集； 并介绍了用于构造 Promise 的 Promise.withResolvers 便捷方法、用于聚合数据的 Object.groupBy 和 Map.groupBy 方法等...

水印技术调研显示，水印在保护版权、信息标识和安全保护方面具有重要作用。通过CSS、JavaScript或第三方库，可以实现页面水印功能。过多或显眼的水印可能影响用户体验，而性能和兼容性也是考虑的因素。综合评估水印的利弊，可结合实际需求谨慎选择适合的实现方式。如果需求有更复杂的水印，可以按步骤去改即可。

需求点：给出一组颜色列表，渲染对应的颜色以及颜色值，但是要保证文本颜色和背景色不冲突，文本颜色保持 和 两种即可示例如下：每个模块背景色为当前颜色，文案内容为当前颜色值，文案颜色为当前颜色通过计算后的 ‘black’ 或 ‘white’四、案例效果展示案例图片展示

Axios.post。

使用原生 Canvas 画网格，可拖动、放大缩小、并带有坐标系辅助线

V8 release v9.1 04 May 2021 releaseV8 release v9.1Chrome V8 于 5 月 4 号发布 v9.1 版本，带来几个新特性一、Top-level await (顶层 await)Top-level await is enabled by default in V8 starting with v9.1 and is available without --harmony-top-level-await.一句话就是：我们可以在模块顶级中使用.

Web Worker1、什么是 web worker？有哪些好处？有哪些问题？Web Worker 就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。好处：好处就是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。问题：Worker 线程一旦新建

标签中 dns-prefetch、prefetch、preload、defer、async 的区别1、dns-prefetch域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 dns 预取。<link rel="dns-prefetch" href="//m.baidu.com">2、prefetchprefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时

rem1、定义rem（font size of the root element）是指相对于根元素的字体大小的单位。1rem 等于根元素 htm 的 font-size，即只需要设置根元素的 font-size，其它元素使用 rem 单位时，设置成相应的百分比即可。2、如何实现rem(倍数） = width / （html的font-size）=> width = (html的font-size) * rem(倍数)只要 html 的 font-size 的大小变了，width 就

Map、WeakMap 和 Set、WeakSetWeakMap 和 WeakSet 都是弱引用1、什么是弱引用弱引用是指不能确保其引用的对象不会被垃圾回收器回收的引用，换句话说就是可能在任意时间被回收。弱引用随时都会消失，遍历机制无法保证成员的存在2、Set遍历顺序：插入顺序没有键只有值，可认为键和值两值相等添加多个 NaN 时，只会存在一个 NaN添加相同的对象时，会认为是不同的对象添加值时不会发生类型转换(5 !== "5")keys() 和 values() 的行为完全一

JavaScript 中你需要知道的有关于数组的详细知识点1、ES6 新增数组方法Array.from()、Array.of()、copyWithin()、find()、findIndex()、fill()、entries()、keys()、values()、includes()。2、ES5 新增数组方法forEach()、map()、filter()、some()、every()、indexOf()、lastIndexOf()、reduce()、reduceRight()。3、数组的这些方法，哪

JavaScript 中 你需要知道的 Promise 详细知识点1、如何实现一个 sleep 函数(延迟函数)通过 promise 和 setTimeout 来简单实现/** * 延迟函数 * @param {Number} time 时间 */function sleep (time = 1500) { return new Promise((resolve) => { setTimeout(() => { resolve(tru

XSS 攻击和 CSRF 攻击1、XSS 攻击1. 概念XSS（Cross Site Scripting）：跨域脚本攻击。2. 原理不需要你做任何的登录认证，它会通过合法的操作（比如在 url 中输入、在评论框中输入），向你的页面注入脚本（可能是 js、hmtl 代码块等）。3. 防范编码；对于用户输入进行编码。过滤；移除用户输入和事件相关的属性。(过滤 script、style、iframe 等节点)校正；使用 DOM Parse 转换，校正不配对的 DOM 标签。HttpOnly。

函数&自执行函数&函数类型1、自执行函数特点函数表达式与函数声明不同，函数名只在该函数内部有效，并且此绑定是常量绑定。对于一个常量进行赋值，在 strict 模式下会报错，非 strict 模式下静默失败。IIFE 中的函数是函数表达式，而不是函数声明。2、函数类型函数声明函数表达式函数构造器创建1. 函数声明（FD）有一个特定的名称在源码中的位置：要么处于程序级（Program level），要么处于其它函数的主体（FunctionBody）中在进入上下文

浏览器跨域问题1、什么是浏览器同源策略？同源策略是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互，它能帮助阻隔恶意文档，减少可能被攻击的媒介。所谓同源策略，是指只有在地址的：协议名域名端口名均一样的情况下，才允许访问相同的 cookie、localStorage，以及访问页面的 DOM 或是发送 Ajax 请求。2、没有同源策略限制有哪些危险场景？ajxa 请求Dom 的查询同源策略确实能规避一些危险，不是说有了同源策略就安

cookie、sessionStorage 和localStorage1、三者区别cookie 用来保存登录信息，大小限制为 4KB 左右localStorage 是 Html5 新增的，用于本地数据存储，保存的数据没有过期时间，一般浏览器大小限制在 5MBsessionStorage 接口方法和 localStorage 类似，但保存的数据的只会在当前会话中保存下来，页面关闭后会被清空。名称生命期大小限制与服务器通信是否可以跨域cookie一般由服务器生成，可设置

==、=== 和 Object.is()1、区别== 两边值类型不同的时候，先进行类型转换，在比较=== 不进行类型转换，直接值比较Object.is(val1, val2) 判断两个值是否为同一值2、== 类型转换是怎么转换的？如果类型不同，进行类型转换判断比较的是否是 null 或者是 undefined，如果是，返回 true判断类型是否为 string 或者 number，如果是，将 string 转换为 number判断其中一方是否为 boolean，如果是，将其中一方转

for in 和 for of 的异同点比较for infor of不同点可以遍历普通对象 遍历出数组的原型对象 可以遍历出数组自身属性 遍历出来的值是 key 不可以遍历 map/set 不可以迭代 generators IE 支持不能遍历普通对象 不会遍历出原型对象 不会遍历自身属性 遍历出来的值是 value 可以遍历 map/set 可以迭代generators IE 不支持相同点可以遍历数组 可以 break 中断遍历可以遍历数组 可以 brea

JS 中的 let、const、var1、JS 中有几种定义变量的方法？letconstvarclassimportfunction2、let、const、var 有什么区别？varletconst没有块级作用域有块级作用域有块级作用域声明全局变量在 window 下(全局属性下) 全局变量不在全局属性下全局变量不在全局属性下重定义变量不会报错会报错会报错声明变量声明变量声明一个常量存在变量提升不存在变量提升不存在变量提

null 和 undefined 的区别1、Nullnull 表示一个"无"的对象，转为数值为 0；作为函数的参数，表示该函数的参数不是对象；作为对象原型链的终点；Number(null) 为 0；5 + null 为 5；JSON.stringify(null) 为 'null' (字符串)；JSON.parse(null) 为 null (null 基本类型)。2、Undefined变量被声明了，但是没有赋值，就等于 undefined；调用函数时，应该提供的参数没有提供，该

JS 模块化1、模块化发展历程IIFE 自执行函数AMD 使用 requireJS 来编写模块化（依赖必须提前声明好。）CMD 使用 seaJS 来编写模块化（支持动态引入依赖文件。）CommonJS nodeJs 中自带的模块化UMD 兼容 AMD、CommonJS 语法webpack(require.ensure)：webpack 2.x 版本中的代码分割ES Modules： ES6 引入的模块化，支持 import 来引入另一个 jsscript 标签 type="module"

逛论坛发现这个问题，所以写了一下 实现[["a", "b"], ["n", "m"], ["0", "1"]] => ["am0", "am1", "an0", "an1", "bm0", "bm1", "bn0", "bn1"]1. 问题由 [["a", "b"], ["n", "m"], ["0", "1"]] 转为 ["am0", "am1", "an0", "an1", "bm0", "bm1", "bn0", "bn1"]2. 解法function changeArr (arr).

一、什么是编译型语言？什么是解释型语言？JS 是什么类型的语言？1、编译型语言1. 解释程序在执行之前需要一个专门的编译过程，把程序编译成 为机器语言的文件，运行时不需要重新翻译，直接使用编译的结果就行了。2. 优缺点程序执行效率高，依赖编译器，跨平台性差些。3. 举例C、C++ 都是编译型语言。2、解释型语言1. 解释程序不需要编译，程序在运行时才翻译成机器语言，每执 行一次都要翻译一次。2. 优缺点解释型语言执行效率较低，且不能脱离解释器运行，但它的跨平台型比较容易，只需提供特定

一、什么是编译型语言？什么是解释型语言？JS 是什么类型的语言？1、编译型语言1. 解释程序在执行之前需要一个专门的编译过程，把程序编译成 为机器语言的文件，运行时不需要重新翻译，直接使用编译的结果就行了。2. 优缺点程序执行效率高，依赖编译器，跨平台性差些。3. 举例C、C++ 都是编译型语言。2、解释型语言1. 解释程序不需要编译，程序在运行时才翻译成机器语言，每执 行一次都要翻译一次。2. 优缺点解释型语言执行效率较低，且不能脱离解释器运行，但它的跨平台型比较容易，只需提供特定

面试题系列阿里面试题中有一问：input 输入框频繁请求接口，怎么正确的显示最后一次接口返回的数据？1. 后端返回请求值（最简单）前端请求接口的时候会把 input 输入框中的值传给后端，此时后端返回接口数据时把前端传入的值返回回去，页面渲染时只需要进行判断即可。2. 终止上一次请求当再次请求的时候把上次的请求终止掉：ajax：abort()axios: CancelTokenfetch：AbortController百度用的就是这种取消请求的方式js：https://ss1.b

前端学习思维导图最近整理了前端学习大纲，理了一份思维导图，使用 GitMind官网 (打钱)，包含了三种格式下载地址：github码云优快云

video/audio标签倍速播放在现在浏览器中，各种播放器都支持 倍速播放，1.5倍，2.0倍等。playbackRate 属性html元素“audio”和“video”的playbackRate 属性允许我们改变一段正在播放的网页音频或者视频的速度，或速率。当为1.0的时候为正常播放示例<video id="video" controls src="**.mp4" type="video/mp4"></video>选择倍速播放：<select id=