- 博客(198)
- 资源 (14)
- 收藏
- 关注
RSS订阅
原创 Web 网页性能优化
预加载扫描程序的角色是推测性，也就是说，它会检查原始标记，以便查找资源，以便在主要HTML解析器发现之前抓取相应资源预加载扫描程序是一种浏览器优化，采用辅助HTML解析器的形式，可扫描原始HTML响应，以找出并推测性地提取资源，然后主HTML解析器才会发现这些资源为了充分利用预加载扫描器，服务器发送的HTML标记中应包含关键资源。由CSS使用属性加载的图片。这些图片引用位于CSS中，预加载扫描器无法发现这些引用动态加载的脚本，采用元素标记（使用JavaScript注入DOM。
2024-06-04 20:31:56
1576
原创 Web 页面性能衡量指标-以用户为中心的效果指标
FCP：从网页开始加载到网页内容的任何部分呈现在屏幕上所用的时间。首次内容绘制 (FCP) 是一项以用户为中心的重要指标，用于衡量感知的加载速度。它标记了网页加载时间轴中用户可以看到屏幕上任何内容的第一个点。FCP衡量的是从用户首次导航到相应网页到该网页的任何部分呈现在屏幕上所用的时间。对于此指标，内容是指文本、图片（包括背景图片）、元素或非白色元素。LCP：从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间LCP。
2024-06-04 13:50:29
1164
原创 ES 2024 新特性
ECMAScript 2024，第 15 版，添加了用于调整 ArrayBuffer 和 SharedArrayBuffer 大小和传输的功能； 添加了一个新的 RegExp /v 标志，用于创建具有更高级功能的 RegExp，用于处理字符串集； 并介绍了用于构造 Promise 的 Promise.withResolvers 便捷方法、用于聚合数据的 Object.groupBy 和 Map.groupBy 方法等...
2024-05-13 14:26:19
984
原创 使用 Vitepress 构建博客并部署到 github 平台
VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
2024-04-28 10:18:43
3145
5
原创 使用 CRXJS、Vite、TypeScript、React、Zustand、Antd 开发 Chrome 浏览器插件——自带热加载，无需手动配置 vite.config.ts 文件
使用 CRXJS 结合 Vite 插件结合 React 开发 Chrome 浏览器插件到这就基本结束了使用 CRXJS 不需要自己在手动配置 vite.config.ts 文件了，方便了不少如果想自己配置的话可以看【两万字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome 浏览器 Manifest V3 版本插件】
2024-03-25 10:52:55
2609
原创 使用 CRXJS、Vite、TypeScript、Vue3、Pinia、Less、Naive-ui 开发 Chrome 浏览器插件——自带热加载，无需手动配置 vite.config.ts 文件
使用 CRXJS 结合 Vite 插件结合 Vue 开发 Chrome 浏览器插件到这就基本结束了使用 CRXJS 不需要自己在手动配置 vite.config.ts 文件了，方便了不少但是也有不方便的部分，比如此篇文章没有 contentPage 页面，如果加入这个的话，也得配置 vite.config.ts，而且还得需要改 manifest.json 配置，比较麻烦如果想自己配置的话可以看。
2024-02-01 15:10:46
2597
1
原创 两万字大章使用 React、Vite、TypeScript、Less、Zustand、Ant Design 开发 Chrome 浏览器 Manifest V3 版本插件
使用库、Less、状态管理zustandVite开发浏览器插件到这整个流程就已经走完了，插件涉及的页面也都包括在内了开发上线的时候只需要把换成插件需要的域名即可Vite配置和React项目都是我们手动修改的，可以很好的适配自己的项目写这个教程趟了不少坑，和V2版本很不一样完结 🎉🎉🎉。
2024-02-01 10:39:40
1318
原创 强推 20 款实用的 Chrome 插件
沉浸式网页双语翻译扩展，支持PDF翻译，双语Epub电子书制作，Youtube/Netflix/Udemy 等平台双语字幕，支持Deepl/Google等多个翻译服务，免费使用。Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台，定位 Postman + Swagger + Mock + JMeter。捕捉、标注、缩放、模糊、编辑视频等功能 - 无需登录，保护隐私。JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装！
2024-01-26 10:31:32
4463
原创 开发 Chrome 浏览器插件时进行 Vue3+Vite 多页面多入口配置
开发 Chrome 浏览器插件时进行 Vue3+Vite 多页面多入口配置
2024-01-25 16:47:18
1828
原创 两万字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome 浏览器 Manifest V3 版本插件
两万字大章带你使用 Vue3、TypeScript、Less、Pinia、Naive-ui 以及 Vite 开发 Chrome V3 插件
2024-01-25 16:09:57
2092
3
原创 两万+字数：从0到1带你开发 Chrome 浏览器 Manifest V3 版本插件
两万两千字，从 0 开始，一篇文章搞定 Chrome 浏览器 V3 版本插件
2024-01-17 15:53:10
4521
1
原创 一万六千字大章：Chrome 浏览器插件 V3 版本 Manifest.json 文件全字段解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件全字段解析，一万六千字大章全字段图文解析
2024-01-16 10:06:42
2794
原创 Chrome 浏览器插件 Manifest V3 版本中新增的 Service Worker 详细解析
Chrome 浏览器插件 manifest V3 版本新增的 Service Worker 字段，详细介绍了 Service Worker 以及解析
2024-01-12 15:27:18
2668
原创 金三银四-帮你改简历：助你有份好工作
最近不是所谓的金三银四了嘛，就有朋友找我帮忙改下简历，所以就整理了一下我对简历格式、排版、文案等方面的看法。【纯属个人看法】编辑器里面不好排版，所以就用了截图来代替。助你有份好工作！！！
2023-03-21 16:26:32
352
原创 Chrome 130 版本开发者工具（DevTools）更新内容
网络面板获新增了一些过滤条件，这些过滤条件是根据反馈重新设计的，特定于类型的过滤条件保持不变，即在简洁的多选栏中显示一组标记。可以通过 Cmd/Ctrl 键 + 点击来多选类型过滤条件。为了简化界面，我们将与隐藏、屏蔽和第三方相关的复选框移到了下拉列表下方。该列表包含一个数字，表示下拉菜单下已选中的过滤条件数量。
2024-11-04 10:53:09
640
原创 Chrome 130 版本新特性& Chrome 130 版本发行说明
Chrome 130 引入了一种新的 Toast 样式，用于在用户操作后提供视觉确认，或快速提供后续操作的途径。当用户执行某个操作时，Toast 会在屏幕上短暂弹出，确认操作成功或提供快捷链接。例如，当将某项内容添加到阅读列表时，Toast 会确认项目已添加，并提供一个快速链接以打开阅读列表侧边栏。Toast 以小型提示的形式显示，部分覆盖网页内容，部分覆盖浏览器顶部工具栏。
2024-11-04 10:52:20
1345
原创 使用 CRXJS 构建 Chrome 插件在 Chrome 浏览器升级到 130xxx 版本之后，出现 Content Security Policy 错误，定位原因并附带详细解决方案
此次报错是由于 chrome 浏览器升级之后，安全策略变更导致的；使用 CRX JS 打包 chrome 插件都会遇到这个报错，已经有老哥在 crxjs 的 github 上提交 issue 了；此次解决方案也是从这个 issue 上面找的；之前做过 chrome 浏览器版本发行说明，但是后面有事就耽搁了，现在觉得还是得提起来，这样能有效跟进版本迭代和一些坑，不至于出现问题手忙脚乱。
2024-10-16 14:35:25
876
原创 JavaScript 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆对象的区别
提供了更广泛的数据类型支持和对循环引用的处理能力，适用于复杂场景适合处理简单、JSON兼容的数据结构，但在处理复杂数据类型或循环引用时有局限性两者都有限制，克隆的时候需要关注下克隆对象的数据类型再做选择。
2024-09-06 10:35:52
1617
原创 Rust 操作符及示例
Rust 提供了丰富的操作符，以便开发者在不同的编程场景下使用。每个操作符都有其特定的功能和适用场景，理解它们的用法有助于编写更加高效和清晰的 Rust 代码。
2024-09-06 10:27:55
1017
原创 Chrome 浏览器插件获取网页 window 对象（方案三）
最近有个需求，是在浏览器插件中获取window对象下的某个数据，当时觉得很简单，和document一样，直接通过嵌入直接获取，然后使用发送数据到插件就行了，结果发现不是这样滴…在这里不推荐使用进行注入，很可能会报错：😗Chrome 浏览器插件获取网页 window 对象（方案一）Chrome 浏览器插件获取网页 window 对象（方案二）获取当前页面下的 window 对象和 document 对象不一样，需要另外的处理方式。
2024-09-05 10:08:15
1423
原创 Chrome 浏览器插件获取网页 window 对象（方案二）
最近有个需求，是在浏览器插件中获取window对象下的某个数据，当时觉得很简单，和document一样，直接通过嵌入直接获取，然后使用发送数据到插件就行了，结果发现不是这样滴…在这里不推荐使用进行注入，很可能会报错：Chrome 浏览器插件获取网页 window 对象（方案一）
2024-09-04 14:33:31
1367
原创 Chrome 浏览器插件获取网页 window 对象（方案一）
最近有个需求，是在浏览器插件中获取window对象下的某个数据，当时觉得很简单，和document一样，直接通过嵌入直接获取，然后使用发送数据到插件就行了，结果发现不是这样滴…
2024-09-04 13:49:43
1822
2
原创 Rust 中 *、&、mut、&mut、ref、ref mut 的用法和区别
*：解引用操作符，用于访问指针或引用指向的值的类型。&：借用操作符，用于创建不可变引用的类型，允许只读访问。mut：关键字，用于声明可变变量或参数的类型，允许其值被修改。&mut：借用操作符，用于创建可变引用的类型，允许读写访问。ref：模式匹配中的关键字，用于创建不可变引用的类型，避免所有权转移。ref mut：模式匹配中的关键字，用于创建可变引用的类型，允许修改引用的值。
2024-07-25 11:59:07
942
原创 Rust 版本升级：rustup update stable 报错
错误内容：系统无法连接到Rust语言官方的静态文件服务器，导致对应的文件没有下载到指定的文件夹中。
2024-07-11 11:37:45
1125
原创 JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
页面卸载时的日志记录：在用户离开页面时记录行为数据，如页面停留时间、点击行为等。分析和监控：发送用户行为数据到分析服务器，用于网站性能监控和用户行为分析。状态报告：向服务器报告应用程序状态或错误信息。是一个专为可靠性设计的API，特别适用于在页面卸载时发送少量数据。它具有简单、非阻塞、可靠等优点，特别适合日志记录和用户行为分析等场景。发出的是异步请求，并且是POST请求。只能判断出是否放入浏览器任务队列，不能判断是否发送成功。无需处理返回值。需要注意浏览器兼容问题。
2024-05-24 10:11:08
642
原创 JS 监听用户页面访问&页面关闭操作并进行数据上报
页面访问&页面关闭数据上报能清楚的掌握用户的使用数据，对营销活动或者画像分析很有帮助整体没有难点，就是不同项目不同分析如果你的项目是hash改变，那就可以针对hash进行监听主要就是使用进行可靠的数据传输。
2024-05-24 10:06:19
796
原创 JavaScript 中的 Range 和 Selection 对象
最近在做鼠标框选的需求，鼠标框选就需要用到Range和Selection对象。Range表示选择的区间范围，Selection表示选择的文档内容。下面就详细说下这两个对象。
2024-05-23 11:31:58
1161
原创 JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容
鼠标框选上报能监控用户在页面的行为，能为后续的数据分析等提供便利基于JS中的Selection和Range实现的，使用原生JS涉及到的操作比较多，包含键盘、鼠标右键、全选等能对框选的内容进行分类，区别html和text，更方便的看出用户选择了哪些内容。
2024-05-23 10:15:13
1616
2
原创 80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印
水印技术调研显示，水印在保护版权、信息标识和安全保护方面具有重要作用。通过CSS、JavaScript或第三方库，可以实现页面水印功能。过多或显眼的水印可能影响用户体验，而性能和兼容性也是考虑的因素。综合评估水印的利弊，可结合实际需求谨慎选择适合的实现方式。如果需求有更复杂的水印，可以按步骤去改即可。
2024-04-30 11:09:00
1364
1
原创 VitePress 构建的博客如何部署到 github 平台？
由于我们的项目名称为 ，所以我们把 设置为 ，需注意前后 2.2. 页面显示异常这个时候你发现本地页面显示异常是因为配置了 之后，导致路径不正确，点击上面的链接即可配置好 之后，你发现其他页面都没问题，图片也都能正常显示，但是 不能正常显示。只需要把 中配置的 路径改下即可，加上 前缀项目正常构建成功是构建之后 文件夹中的内容，不包括 文件夹等几分钟，一般一分钟以内不停的刷新当前页面也行然后就会发现当前页面多了个 模块点击之后，就跳转到对应的网站链接啦…我这边是
2024-04-28 10:37:28
1048
原创 JavaScript 计算颜色的相对亮度，并确定相应的文本颜色
需求点：给出一组颜色列表，渲染对应的颜色以及颜色值，但是要保证文本颜色和背景色不冲突，文本颜色保持 和 两种即可示例如下：每个模块背景色为当前颜色，文案内容为当前颜色值，文案颜色为当前颜色通过计算后的 ‘black’ 或 ‘white’四、案例效果展示案例图片展示
2024-04-23 17:09:12
371
原创 使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件
使用 crxjs vite vue 开发 Chrome 多页面插件
2024-03-29 15:51:58
2060
原创 Chrome 插件各模块使用 Fetch 进行接口请求
Chrome插件中的网络请求和普通web是一样的，只不过从常用的AJAX换成了Fetch进行跨域请求的时候一定要配置文件一般请求都需要和cookies进行配合，关于可以查看【Chrome 浏览器插件 cookies API 解析。
2024-03-26 10:54:41
2846
通过例子学习 Rust 中文版本
2024-07-11
使用flask和vue开发python web项目
2020-12-31
使用 vue3.x版本开发 chrome插件
2020-12-31
myPlugin.zip
2020-12-04
cssfont-family中英文对照.js
2020-08-18
小程序生成条形码插件 barcode.js
2020-07-14
小程序生成二维码qrcode.js
2020-07-14
小程序中使用的ThreeJs
2020-07-07
ascii对照表.pdf
2020-05-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人