合集-JavaScript
摘要：ECMAScript 2024 新特性 ECMAScript 2024, the 15th edition, added facilities for resizing and transferring ArrayBuffers and SharedArrayBuffers; added a new
阅读全文
摘要：
当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。
分为以下几点：
选择文案时
选择图片、svg、iframe、video、audio 等标签时
选择 input、select、textarea 等标签时
选择input、textarea 标签内容时
选择类似 字符时
键盘全选时
鼠标右键选择
以上各模块结合时
阅读全文
当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。
分为以下几点：
选择文案时
选择图片、svg、iframe、video、audio 等标签时
选择 input、select、textarea 等标签时
选择input、textarea 标签内容时
选择类似 字符时
键盘全选时
鼠标右键选择
以上各模块结合时
阅读全文
摘要：
JS 实现鼠标框选（页面选择）时返回对应的代码或文案内容 一、需求背景 1、项目需求 当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。 2、需求解析 虽然这需求就一句话的事，但是很显然，没那么简单... 因为鼠标框选说起来简单，就是选择的内容，但是这包含很多中情况，比如：只选择文案、选
阅读全文
JS 实现鼠标框选（页面选择）时返回对应的代码或文案内容 一、需求背景 1、项目需求 当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。 2、需求解析 虽然这需求就一句话的事，但是很显然，没那么简单... 因为鼠标框选说起来简单，就是选择的内容，但是这包含很多中情况，比如：只选择文案、选
阅读全文
摘要：
最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。
Range 表示选择的区间范围，Selection 表示选择的文档内容。
Range 接口表示一个包含节点与文本节点的一部分的文档片段。
不仅仅可以用于鼠标框选，页面上任何元素、文本都可以创建 Range。
Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
阅读全文
最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。
Range 表示选择的区间范围，Selection 表示选择的文档内容。
Range 接口表示一个包含节点与文本节点的一部分的文档片段。
不仅仅可以用于鼠标框选，页面上任何元素、文本都可以创建 Range。
Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
阅读全文
摘要：
JavaScript 中的 Range 和 Selection 对象 前言 最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。 Range 表示选择的区间范围，Selection 表示选择的文档内容。 下面就详细说下这两个对象 一、Range Range 接口表示
阅读全文
JavaScript 中的 Range 和 Selection 对象 前言 最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。 Range 表示选择的区间范围，Selection 表示选择的文档内容。 下面就详细说下这两个对象 一、Range Range 接口表示
阅读全文
摘要：
以用户为中心的性能指标是理解和改进站点体验的关键点
一、以用户为中心的性能指标
1. 指标是用来干啥的？
指标是用来衡量性能和用户体验的
2. 指标类型
感知加载速度：网页可以多快地加载网页中的所有视觉元素并将其渲染到屏幕上
加载响应速度：页面加载和执行组件快速响应用户互动所需的 JavaScript 代码的速度
运行时响应速度：网页在加载后对用户互动的响应速度
视觉稳定性：页面上的元素是否会以用户意想不到的方式发生偏移，是否可能会干扰用户的互动？
流畅性：过渡和动画是否以一致的帧速率渲染，并在一种状态之间流畅地流动？
3.1. FCP（First Contentful Paint）
3.2. LCP（Largest Contentful Paint）
3.3. INP（Interaction to Next Paint）
3.4. TBT（Total Blocking Time）
3.5. CLS（Cumulative Layout Shift）
3.6. TTFB（Time to First Byte）
3.7. FID（First Input Delay）
阅读全文
以用户为中心的性能指标是理解和改进站点体验的关键点
一、以用户为中心的性能指标
1. 指标是用来干啥的？
指标是用来衡量性能和用户体验的
2. 指标类型
感知加载速度：网页可以多快地加载网页中的所有视觉元素并将其渲染到屏幕上
加载响应速度：页面加载和执行组件快速响应用户互动所需的 JavaScript 代码的速度
运行时响应速度：网页在加载后对用户互动的响应速度
视觉稳定性：页面上的元素是否会以用户意想不到的方式发生偏移，是否可能会干扰用户的互动？
流畅性：过渡和动画是否以一致的帧速率渲染，并在一种状态之间流畅地流动？
3.1. FCP（First Contentful Paint）
3.2. LCP（Largest Contentful Paint）
3.3. INP（Interaction to Next Paint）
3.4. TBT（Total Blocking Time）
3.5. CLS（Cumulative Layout Shift）
3.6. TTFB（Time to First Byte）
3.7. FID（First Input Delay）
阅读全文
摘要：
Web 性能是 Web 开发的一个重要方面，侧重于网页加载速度以及对用户输入的响应速度
通过优化网站来改善性能，可以在为用户提供更好的体验
网页性能既广泛又非常深入
1. 为什么性能这么重要？
1. 性能关乎留住用户
性能对于任何在线业务都至关重要
与加载速度缓慢、让人感觉运行缓慢的网站相比，加载速度快并能及时响应用户输入的网站能更好地吸引并留住用户
2. 性能能提高转化次数
性能会对网站用户是否会浏览应用产生重大影响
3. 性能关乎用户体验
随着网页开始加载，用户会等待一段时间，等待内容显示。在此之前，就谈不上用户体验
快速连接会让这种体验一闪而过。而如果连接速度较慢，用户就不得不等待
阅读全文
Web 性能是 Web 开发的一个重要方面，侧重于网页加载速度以及对用户输入的响应速度
通过优化网站来改善性能，可以在为用户提供更好的体验
网页性能既广泛又非常深入
1. 为什么性能这么重要？
1. 性能关乎留住用户
性能对于任何在线业务都至关重要
与加载速度缓慢、让人感觉运行缓慢的网站相比，加载速度快并能及时响应用户输入的网站能更好地吸引并留住用户
2. 性能能提高转化次数
性能会对网站用户是否会浏览应用产生重大影响
3. 性能关乎用户体验
随着网页开始加载，用户会等待一段时间，等待内容显示。在此之前，就谈不上用户体验
快速连接会让这种体验一闪而过。而如果连接速度较慢，用户就不得不等待
阅读全文
摘要：
最近有个需求，是在浏览器插件中获取 window 对象下的某个数据，当时觉得很简单，和 document 一样，直接通过嵌入 content_scripts 直接获取，然后使用 sendMessage 发送数据到插件就行了，结果发现不是这样滴...
阅读全文
最近有个需求，是在浏览器插件中获取 window 对象下的某个数据，当时觉得很简单，和 document 一样，直接通过嵌入 content_scripts 直接获取，然后使用 sendMessage 发送数据到插件就行了，结果发现不是这样滴...
阅读全文
摘要：
Chrome 130 版本新特性& Chrome 130 版本发行说明 一、Chrome 130 版本浏览器更新 1. 新的桌面提示 Chrome 130 引入了一种新的 Toast 样式，用于在用户操作后提供视觉确认，或快速提供后续操作的途径。 当用户执行某个操作时，Toast 会在屏幕上短暂弹出
阅读全文
Chrome 130 版本新特性& Chrome 130 版本发行说明 一、Chrome 130 版本浏览器更新 1. 新的桌面提示 Chrome 130 引入了一种新的 Toast 样式，用于在用户操作后提供视觉确认，或快速提供后续操作的途径。 当用户执行某个操作时，Toast 会在屏幕上短暂弹出
阅读全文
