risheng

摘要： 最近有个需求，是在浏览器插件中获取 window 对象下的某个数据，当时觉得很简单，和 document 一样，直接通过嵌入 content_scripts 直接获取，然后使用 sendMessage 发送数据到插件就行了，结果发现不是这样滴... 获取当前页面下的 window 对象和 document 对象不一样，需要另外的处理方式 此次提供了三种方案，核心原理都是嵌入当前页面，通过消息派发和接收来获取数据 第一种通过 postMessage 的方式更为大家熟悉，自定义 Event 相对偏一点 三种方案的代码我都上传到 gitee/github 上了 阅读全文

摘要： 最近有个需求，是在浏览器插件中获取 window 对象下的某个数据，当时觉得很简单，和 document 一样，直接通过嵌入 content_scripts 直接获取，然后使用 sendMessage 发送数据到插件就行了，结果发现不是这样滴... 阅读全文

摘要： 最近有个需求，是在浏览器插件中获取 window 对象下的某个数据，当时觉得很简单，和 document 一样，直接通过嵌入 content_scripts 直接获取，然后使用 sendMessage 发送数据到插件就行了，结果发现不是这样滴... 阅读全文

摘要： *：解引用操作符，用于访问指针或引用指向的值的类型。 &：借用操作符，用于创建不可变引用的类型，允许只读访问。 mut：关键字，用于声明可变变量或参数的类型，允许其值被修改。 &mut：借用操作符，用于创建可变引用的类型，允许读写访问。 ref：模式匹配中的关键字，用于创建不可变引用的类型，避免所有权转移。 ref mut：模式匹配中的关键字，用于创建可变引用的类型，允许修改引用的值。 阅读全文

摘要： Web 性能是 Web 开发的一个重要方面，侧重于网页加载速度以及对用户输入的响应速度 通过优化网站来改善性能，可以在为用户提供更好的体验 网页性能既广泛又非常深入 1. 为什么性能这么重要？ 1. 性能关乎留住用户 性能对于任何在线业务都至关重要 与加载速度缓慢、让人感觉运行缓慢的网站相比，加载速度快并能及时响应用户输入的网站能更好地吸引并留住用户 2. 性能能提高转化次数 性能会对网站用户是否会浏览应用产生重大影响 3. 性能关乎用户体验 随着网页开始加载，用户会等待一段时间，等待内容显示。在此之前，就谈不上用户体验 快速连接会让这种体验一闪而过。而如果连接速度较慢，用户就不得不等待 阅读全文

摘要： 以用户为中心的性能指标是理解和改进站点体验的关键点 一、以用户为中心的性能指标 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） 阅读全文

摘要： 最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。 Range 表示选择的区间范围，Selection 表示选择的文档内容。 Range 接口表示一个包含节点与文本节点的一部分的文档片段。 不仅仅可以用于鼠标框选，页面上任何元素、文本都可以创建 Range。 Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。 阅读全文

摘要： Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API，尤其适用于在页面即将卸载时发送数据，如日志记录、用户行为分析等。 与传统的 AJAX 请求不同，sendBeacon 方法的设计目标是确保数据在页面卸载（例如用户关闭标签页或导航到新页面）时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器 阅读全文

摘要： 用户在页面访问时发送数据到后台，页面关闭时也发送数据到后台。 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时，触发页面关闭&页面访问 关闭页面时触发页面关闭 阅读全文

摘要： 当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。 分为以下几点： 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择input、textarea 标签内容时 选择类似   字符时 键盘全选时 鼠标右键选择 以上各模块结合时 阅读全文