日_升_个人页

2024年06月

• 06.07 15:07:54
  发表了文章 2024-06-07 15:07:54

  Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端 最近换了台新 Mac，所有的配置和软件就重新安装下，顺便写个文章。
• 06.07 15:06:26
  发表了文章 2024-06-07 15:06:26

  前端 PM（Project Manager） 分享

  前端 PM（Project Manager） 分享 一、什么情况下需要前端担任 PM？ 在我之前遇到的项目中，大多数项目的 PM 是由后端/产品经理担任，但也有不少项目的 PM 是由前端担任，一般是按照以下这几种情况划分 1. 后端担任(占大多数)： 一般是后端工作量大，项目以后端工作为主 后端任务复杂，逻辑复杂 改动的接口较多，涉及的项目较多 前端对整个系统不熟悉等 2. 产品经理担任： 跨部门的合作，产品去协调资源 项目周期较长，前后端人员可能会换 3. 前端担任： 前端开发为主的需求 插件项目 编辑器项目 项目重构 运营活动需求 偏用户体验的项目 动画 3D
• 06.07 15:04:02
  发表了文章 2024-06-07 15:04:02

  Chrome 插件打包发布

  Chrome 插件打包发布
• 06.07 15:02:56
  发表了文章 2024-06-07 15:02:56

  Chrome 插件各模块之间的消息传递

  Chrome 插件各模块之间的消息传递 一、消息传递 1. 消息传递分类 Chrome 插件的 Action、Background 和 content_script 三个模块之间的信息传输 插件和插件之间的信息传输 网页向插件进行信息传输 与原生应用进行消息传递
• 06.07 15:02:03
  发表了文章 2024-06-07 15:02:03

  使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件

  使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件
• 06.07 15:00:22
  发表了文章 2024-06-07 15:00:22

  JavaScript 计算颜色的相对亮度，并确定相应的文本颜色

  JavaScript 计算颜色的相对亮度，并确定相应的文本颜色
• 06.07 14:58:38
  发表了文章 2024-06-07 14:58:38

  四万字符数带你使用 Vitepress 构建博客并部署到 github 平台

  四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章，有十几二十篇，就想着构建个博客，用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了，而且是用 markdown 写文章，正好写插件文章的时候文章都是 md 格式，所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址：https://18055975947.github.io/extension/
• 06.07 14:57:16
  发表了文章 2024-06-07 14:57:16

  VitePress 构建的博客如何部署到 github 平台？

  VitePress 构建的博客如何部署到 github 平台？
• 06.07 14:54:07
  发表了文章 2024-06-07 14:54:07

  VitePress 构建的博客如何部署到 Netlify 平台？

  VitePress 构建的博客如何部署到 Netlify 平台？ 前言 之前写了篇文章【使用 Vitepress 构建博客并部署到 github 平台】，有个老哥说 github page 访问太慢了，希望放到 Netlify 平台上面。 咱也没部署过，就试了一下，发现比在 github 上部署简单多了... 一、注册账号 注册 netlify 账号 【Netlify】 地址：app.netlify.com/ 可以使用 github 账号注册，这样可以直接拉取 github 的内容进行部署，更简单
• 06.06 20:18:34
  发表了文章 2024-06-06 20:18:34

  80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印

  80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识： 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息，帮助用户更好地理解文档内容的属性。 2. 版权保护： 在文档中添加水印可以帮助保护内容的版权，防止他人未经授权地复制、转载或篡改内容。 3. 安全保护： 对于敏感信息或机密文档，添加水印可以帮助防止信息泄露，提高文档的安全性。 4. 提升专业性： 在一些场景下，如商业报告、合同文件等，添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝： 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。

  
• 06.06 20:16:08
  发表了文章 2024-06-06 20:16:08

  ECMAScript 2024 新特性

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

  JS 鼠标框选（页面选择）时返回对应的 HTML 或文案内容

  JS 鼠标框选（页面选择）时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。 分为以下几点： 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似   字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候，返回 html 结构，只有文本时返回文本内容
• 06.06 19:58:14
  发表了文章 2024-06-06 19:58:14

  JS 监听用户页面访问&页面关闭操作并进行数据上报

  JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时，触发页面关闭&页面访问 关闭页面时触发页面关闭
• 06.06 19:53:30
  发表了文章 2024-06-06 19:53:30

  JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据

  Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API，尤其适用于在页面即将卸载时发送数据，如日志记录、用户行为分析等。 与传统的 AJAX 请求不同，sendBeacon 方法的设计目标是确保数据在页面卸载（例如用户关闭标签页或导航到新页面）时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：XMLHttpRequest）发送分析数据的一些问题。
• 06.06 19:52:12
  发表了文章 2024-06-06 19:52:12

  Web 页面性能衡量指标-以用户为中心的性能指标

  Web 页面性能衡量指标-以用户为中心的性能指标 以用户为中心的性能指标是理解和改进站点体验的关键点 一、以用户为中心的性能指标 1. 指标是用来干啥的？ 指标是用来衡量性能和用户体验的 2. 指标类型 • 感知加载速度：网页可以多快地加载网页中的所有视觉元素并将其渲染到屏幕上 • 加载响应速度：页面加载和执行组件快速响应用户互动所需的 JavaScript 代码的速度 • 运行时响应速度：网页在加载后对用户互动的响应速度 • 视觉稳定性：页面上的元素是否会以用户意想不到的方式发生偏移，是否可能会干扰用户的互动？ • 流畅性：过渡和动画是否以一致的帧速率渲染，并在一种状态之间流畅地流动
• 06.06 16:45:30
  发表了文章 2024-06-06 16:45:30

  Web 网页性能及性能优化

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

2024年05月

• 05.23 15:07:24
  发表了文章 2024-05-23 15:07:24

  JavaScript 中的 Range 和 Selection 对象

  JavaScript 中的 `Range` 和 `Selection` 对象用于处理文本选择。`Range` 表示文档中选定的区域，而 `Selection` 表示用户选择的文本或光标位置。`Range` 可以创建并设置于任何元素或文本，具有多个属性（如 `startContainer`, `endContainer`, `collapsed`）和方法（如 `cloneContents`, `deleteContents`）。`Selection` 提供了获取和操作用户选择的方法，如 `anchorNode`, `focusNode` 和 `addRange`。两者在所有现代浏览器中基本兼容。

  
• 01.13 13:34:24
  发表了文章 2024-01-13 13:34:24

  Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型（Types）、方法（Methods）和事件（Events）的属性和参数解析

  Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型（Types）、方法（Methods）和事件（Events）的属性和参数解析