risheng

摘要： 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 标签内容时 选择类似   字符时 键盘全选时 鼠标右键选择 以上各模块结合时 阅读全文

摘要： ECMAScript 2024，第 15 版，添加了用于调整 ArrayBuffer 和 SharedArrayBuffer 大小和传输的功能； 添加了一个新的 RegExp /v 标志，用于创建具有更高级功能的 RegExp，用于处理字符串集； 并介绍了用于构造 Promise 的 Promise.withResolvers 便捷方法、用于聚合数据的 Object.groupBy 和 Map.groupBy 方法、用于异步等待共享内存更改的 Atomics.waitAsync 方法以及 String.prototype.isWellFormed 和 String.prototype.toWellFormed 方法，用于检查并确保字符串仅包含格式正确的 Unicode 阅读全文

摘要： 个人经验分享 PM PM( Project Manager ) PM( Product Manager ) 一、什么情况下需要前端担任 PM？ 在我之前遇到的项目中，大多数项目的 PM 是由后端/产品经理担任，但也有不少项目的 PM 是由前端担任，一般是按照以下这几种情况划分 1. 后端担任(占大多 阅读全文

摘要： 一、权限（Permissions） 再使用拓展程序的 API 时，大多数的时候，需要在 manifest.json 文件中声明 permissions 字段。 一、权限类型 在 V3 版本中可以声明以下类别的权限： permissions： 包含下面 permissions 权限列表中的项； opt 阅读全文

摘要： 内容脚本（Content Scripts） 指定在用户打开某些网页时要使用的 JavaScript 或 CSS 文件。 内容脚本是在网页环境中运行的文件。通过使用标准文档对象模型 (DOM)，开发者能够读取浏览器所访问网页的详情、更改这些网页，并将信息传递给其父级扩展程序。 一、内容脚本功能 内容脚 阅读全文