gqkmiss-CSDN博客

原创 Web 网页性能优化

预加载扫描程序的角色是推测性，也就是说，它会检查原始标记，以便查找资源，以便在主要HTML解析器发现之前抓取相应资源预加载扫描程序是一种浏览器优化，采用辅助HTML解析器的形式，可扫描原始HTML响应，以找出并推测性地提取资源，然后主HTML解析器才会发现这些资源为了充分利用预加载扫描器，服务器发送的HTML标记中应包含关键资源。由CSS使用属性加载的图片。这些图片引用位于CSS中，预加载扫描器无法发现这些引用动态加载的脚本，采用元素标记（使用JavaScript注入DOM。

2024-06-04 20:31:56 1865

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

FCP：从网页开始加载到网页内容的任何部分呈现在屏幕上所用的时间。首次内容绘制 (FCP) 是一项以用户为中心的重要指标，用于衡量感知的加载速度。它标记了网页加载时间轴中用户可以看到屏幕上任何内容的第一个点。FCP衡量的是从用户首次导航到相应网页到该网页的任何部分呈现在屏幕上所用的时间。对于此指标，内容是指文本、图片（包括背景图片）、元素或非白色元素。LCP：从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间LCP。

2024-06-04 13:50:29 1408

原创 ES 2024 新特性

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

2024-05-13 14:26:19 1124

原创使用 Vitepress 构建博客并部署到 github 平台

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。

2024-04-28 10:18:43 3858 6

原创使用 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 3026

原创使用 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 3074 3

原创两万字大章使用 React、Vite、TypeScript、Less、Zustand、Ant Design 开发 Chrome 浏览器 Manifest V3 版本插件

使用库、Less、状态管理zustandVite开发浏览器插件到这整个流程就已经走完了，插件涉及的页面也都包括在内了开发上线的时候只需要把换成插件需要的域名即可Vite配置和React项目都是我们手动修改的，可以很好的适配自己的项目写这个教程趟了不少坑，和V2版本很不一样完结 🎉🎉🎉。

2024-02-01 10:39:40 1513

原创强推 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 6180

原创开发 Chrome 浏览器插件时进行 Vue3+Vite 多页面多入口配置

开发 Chrome 浏览器插件时进行 Vue3+Vite 多页面多入口配置

2024-01-25 16:47:18 2178

原创两万字大章带你使用 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 2469 9

原创两万+字数：从0到1带你开发 Chrome 浏览器 Manifest V3 版本插件

两万两千字，从 0 开始，一篇文章搞定 Chrome 浏览器 V3 版本插件

2024-01-17 15:53:10 5697 4

原创一万六千字大章：Chrome 浏览器插件 V3 版本 Manifest.json 文件全字段解析

Chrome 浏览器插件 V3 版本 Manifest.json 文件全字段解析，一万六千字大章全字段图文解析

2024-01-16 10:06:42 3620

原创 Chrome 浏览器插件 Manifest V3 版本中新增的 Service Worker 详细解析

Chrome 浏览器插件 manifest V3 版本新增的 Service Worker 字段，详细介绍了 Service Worker 以及解析

2024-01-12 15:27:18 3607

原创前端 PM（Project Manager）分享

PMPMPM。

2024-01-08 13:39:05 1765 1

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

最近换了台新Mac，所有的配置和软件就重新安装下，顺便写个文章。主要涉及

2023-11-14 10:59:50 6191 1

原创金三银四-帮你改简历：助你有份好工作

最近不是所谓的金三银四了嘛，就有朋友找我帮忙改下简历，所以就整理了一下我对简历格式、排版、文案等方面的看法。【纯属个人看法】编辑器里面不好排版，所以就用了截图来代替。助你有份好工作！！！

2023-03-21 16:26:32 410

原创 NPM、Yarn、PNPM：三大包管理器全方位对比

在前端和 Node.js 项目的开发中，包管理器一直扮演着举足轻重的角色。它能帮助我们轻松管理依赖、安装并维护版本，为项目开发提供良好的生态支持。当前主流的包管理器主要有和。

2025-04-14 17:26:25 757

原创 AbortController：让异步操作随时说停就停

让我们可以更优雅地中止异步操作，不再依赖过时的回调或繁琐的清理逻辑。避免占用资源或等待无效请求，提升性能和用户体验。

2025-04-12 11:26:51 1101

原创 ChromeOS 135 版本更新

为了延长 Chromebook 的使用寿命，ChromeOS 135 引入了一项全新的电池充电限制策略 —— DevicePowerBatteryChargingOptimization，可提供更多充电优化选项，从而有效降低电池老化风险并提升长期可靠性。

2025-04-12 11:25:28 1168

原创 nanoid & uuid 差异解析：从体积、性能到应用场景

nanoid 由开发者Ai发起，是一个小巧、快速且使用安全随机数来生成唯一 ID 的库初衷是替代体积更大、可读性较弱或性能不佳的其他 ID 生成方案uuid（Universally Unique Identifier）是遵循RFC4122标准的唯一标识符，常用作分布式系统、数据库主键、跨系统交互等场景如果你想要一款小而快的库，并且对传统 UUID 格式无强制要求，nanoid 是一个理想选择如果你需要标准化、高度兼容且广为人知的唯一标识，uuid 是更稳妥的方案。

2025-04-11 10:41:31 764

原创一文看懂 XPath、CSS Selector 与 JS Path：三种 DOM 定位方式的全面对比

在浏览器中定位 DOM 元素是前端开发、测试和调试过程的核心环节。常见的方式包括 XPath、CSS Selector 和 JavaScript Path（JS Path）。它们各有优缺点，适用于不同的业务需求。接下来，我们将分别介绍三种方式的特点、适用场景，并进行对比分析

2025-04-11 10:40:38 1002

原创 Git 常用命令集与实际使用 Demo

Git 命令大全

2025-04-10 10:03:03 1154

原创 Git 分支整合策略：Cherry-pick、Merge、Rebase 三者之间对比

Merge Rebase都是将分支的改动带到另一分支的方法，区别在于“迁移范围”、“历史显示方式”以及“对后续工作的影响”。选择策略主要看目标：若你只想复制几个提交且不干扰其他内容，是好帮手；若要合并完整分支并保留多人协作痕迹，Merge更简单可靠；若追求最简洁线性历史或需要交互式编辑提交，Rebase是首选，但需关注团队协作中的冲突与历史重写问题。团队协作开发要形成统一规范哪些分支只能使用 merge；哪些分支可以 rebase；何时可以 cherry-pick；

2025-04-10 10:01:13 507

原创 Git Cherry-pick：核心命令、实践详解

在多分支协作开发中，我们常常只想把某个分支上的单个或若干次提交，合并到另一个分支，而不需要合并整个分支。Git 提供的 cherry-pick 命令，正是为此而生的利器。掌握 cherry-pick 如同获得代码移植手术刀，合理使用能让你的版本控制更加优雅高效！

2025-04-09 16:26:52 1373

原创手把手带你掌握Zustand：轻量级React状态管理利器

Zustand 以其“极简却不失灵活”的特性，成为了许多开发者在 React 项目中管理状态的首选。它的用法和原理都相当直观，并且拥有良好的性能表现。对于想快速开发、并希望在未来随时可扩展的项目而言，Zustand 不失为一种优秀的选择。

2025-04-09 14:36:16 1030

原创 Chrome 135 版本开发者工具（DevTools）更新内容

Performance 面板现在支持将鼠标悬停在 Call tree（调用树）或 Bottom-up > Heaviest stack（自底向上 > 最重调用栈）侧边栏中的项时，在 Main 轨道中高亮显示对应内容，并自动淡化其他内容。启用字段数据后，Performance > Insights > LCP by phase（按阶段划分的最大内容绘制）洞察项现在会在额外的表格中显示来自 Chrome 用户体验报告的第 75 百分位图像加载时间，可以直接在该洞察中对比各阶段的加载时间。

2025-04-08 14:28:30 1254

原创时区转换工具+PWA离线网页

本项目对比并选用 Luxon 实现多时区转换，支持各时区时间互转。提供 NodeJS 与 Python 脚本、网页小工具及 PWA 应用，功能完整、结构清晰。适用于快速使用、系统集成或离线访问，具备良好扩展性。

2025-04-08 10:18:51 567

原创 Chrome 135 版本新特性

Chrome 135 将账户注册的登录页面从营销网站迁移到动态网站，同时也将的隐式流程迁移到授权码流程。这样做的目的是进一步提升第三方托管账户的安全性和用户体验。iOS 版 Chrome 浏览器的用户现在可以选择按照预设时间自动删除下载内容。此功能有助于提升与存储容量相关的设备性能，并通过自动删除用户可能遗忘的下载文件来增强隐私保护。Chrome 135 引入了一个全新的客户端模型，以更好地解析网页上的密码表单，从而提高检测和自动填充的准确性。你可以通过策略来控制此功能。

2025-04-07 10:48:50 484

原创 Browser-use：基于 Python 的智能浏览器自动化 AI 工具调研与实战

Browser-use 让 AI 与浏览器的结合变得更便捷，能够快速构建出“会浏览网页、抓取信息、进行动态交互”的智能体。只需简单的配置与几行代码，就能让 LLM 自动处理网页操作，为项目带来更多可能性。使用 Python >= 3.11；安装并配置好 Playwright；在主代码中初始化 Agent 并提供 LLM；在 .env 中存放 API Keys；

2025-04-07 10:46:39 1616

原创 Electron 开发：获取当前客户端 IP

客户端会自启动一个服务，Web/后端服务通过 IP + port 请求以操作客户端接口。

2025-03-28 10:13:22 492

原创 Vite CVE-2025-30208 安全漏洞

CVE-2025-30208 是 Vite（一个前端开发工具提供商）在特定版本中存在的安全漏洞。此漏洞允许攻击者通过特殊的 URL 参数绕过对文件系统的访问限制，从而获取任意文件内容（包括非 Vite 服务目录范围外的文件）。

2025-03-27 10:07:39 623

原创 Browser-use 详细介绍 & 使用文档

让 AI 与浏览器的结合变得更便捷，能够快速构建出“会浏览网页、抓取信息、进行动态交互”的智能体。只需简单的配置与几行代码，就能让 LLM 自动处理网页操作，为项目带来更多可能性。使用 Python >= 3.11；安装并配置好 Playwright；在主代码中初始化 Agent 并提供 LLM；在 .env 中存放 API Keys；

2025-03-26 10:03:37 1194

原创 Electron 项目开机自启动

Electron 项目开机自启动综合稳定性和易用性考虑，推荐使用 auto-launch，特别是：1. 如果你的应用需要支持Linux2. 如果你重视更好的错误处理和用户反馈3. 如果你的应用在Windows平台有较多用户（Windows更新可能影响原生API）app.setLoginItemSettings 更适合简单场景，或者你特别关注减少依赖项的情况。但整体而言，auto-launch 提供了更可靠和一致的开发体验。

2025-03-25 11:35:03 574

原创 NextJS CVE-2025-29927 安全漏洞

Next.js 在内部通过一个名为 x-middleware-subrequest 的请求头，来防止自身中间件的递归调用或无限循环。但研究者发现，攻击者可以在外部请求中人为加上此请求头，并使用特定格式，使Next.js 中间件以为这是一个“子请求”，从而跳过原本应执行的认证或安全检查。Next.js 早在 2016 年就开始发布安全通告；随着使用者增多，官方也不断完善漏洞收集、补丁发布及社区通知流程。关键安全逻辑不要只依赖前置中间件，需多层校验；更要及时跟进框架升级和安全通报，避免类似漏洞造成严重影响。

2025-03-25 09:05:30 933

原创 Chrome 134 版本开发者工具（DevTools）更新内容

Chrome 134 Devtools 更新

2025-03-24 09:50:29 571

原创 Chrome 133 版本开发者工具（DevTools）更新内容

AI 助手面板会在本地持久化聊天记录，即使重新加载 DevTools 或 Chrome，也可以查看之前与 Gemini 的对话内容。此版本为 Performance 面板带来了多项改进。Performance > Insights 选项卡可以突出显示文件大小可进一步优化的图像。单击洞察中的图像，即可在 Network track 中查看它的高亮显示。要选择偏好风格，在面板右上角点击帮助按钮，然后选择或。该快捷键对话框还提供了一张可用快捷键的速查表。

2025-03-24 09:49:36 460

原创 ChromeOS 134 版本更新

ChromeOS 134 版本更新

2025-03-13 10:31:06 1441

原创 ChromeOS 133 版本更新

Chrome OS 133 版本更新

2025-03-13 10:30:06 829

原创 Chrome 浏览器 134 版本新特性

Chrome 推出了。

2025-03-11 09:59:19 587

原创 Chrome 浏览器 133 版本新特性

的。

2025-03-11 09:58:45 781

通过例子学习 Rust 中文版本

通过例子学习 Rust 中文版本中文翻译注（Chinese translation of the Rust By Example）《通过例子学 Rust》（Rust By Example, RBE）内容由一系列可运行的实例组成，通过这些例子阐明了各种 Rust 的概念和基本库。 Rust 是一门注重安全（safety）、速度（speed）和并发（concurrency）的现代系统编程语言。Rust 通过内存安全来实现以上目标，但不使用垃圾回收机制（garbage collection, GC）。

2024-07-11

Rust 程序设计语言中文版

Rust 程序设计语言中文版本更新时间 2023-02-09 Rust 1.67.1

2024-01-15

Cargo 手册中文版 PDF 版本

1. Cargo 手册中文版本 2. PDF 版本 3. rust cargo

2024-01-12

前端学习思维导图（全）

web前端学习思维导图包含 .png、.pdf、.gmind 三种格式

2021-03-25

EventLoop执行顺序.zip

EventLoop执行顺序： EventLoop执行顺序的流程图 EventLoop执行顺序的PDF文档

2021-02-03

浏览器HTTP缓存运行机制流程图.zip

浏览器HTTP缓存运行机制的流程图强缓存和协商缓存

2021-01-23

使用flask和vue开发python web项目

使用flask和vue开发python版本的 web项目，一整个文件，使用pycharm创建的项目，包含vevn 文件和 __pycache__ 文件，所以内容比较大，可以直接使用。或者：https://github.com/18055975947/python-flask-vue-web 码云：https://gitee.com/guoqiankun/python-flask-vue-web CSDN：https://guoqiankun.blog.csdn.net/article/details/111633993

2020-12-31

使用 vue3.x版本开发 chrome插件

使用vue开发chrome浏览器插件，可以方便前端人员开发插件页面，不管是popup页面，content页面等都可以使用vue开发模式很方便的开发需求码云地址：https://gitee.com/guoqiankun/my-vue3-plugin github地址：https://github.com/18055975947/my-vue3-plugin CSDN地址：https://guoqiankun.blog.csdn.net/article/details/112007833

2020-12-31

myPlugin.zip

浏览器插件开发demo，从0 到1 带你进行浏览器插件的开发，可以和 https://guoqiankun.blog.csdn.net/article/details/110649155 这篇文章一起进行，效果更好

2020-12-04

cssfont-family中英文对照.js

CSS font-family常见中文字体对应的英文名称，这个是收集的css中的font-family中的中英文对照，可以方便使用。

2020-08-18

小程序生成条形码插件 barcode.js

在小程序中生成条形码的插件，先在*.js文件中引入，再在html页面中写入canvas元素，通过 barcode.code128(my.createCanvasContext('myCanvas'), url, 600, 200); 来渲染条形码

2020-07-14

小程序生成二维码qrcode.js

小程序生成二维码的插件，现在小程序中引入qrcode.js，然后在页面里面创建一个canvas的html，通过 qrcode.api.draw(url, { ctx: my.createCanvasContext('myCanvas'), width: 200, height: 200 }) 来渲染二维码。

2020-07-14

小程序中使用的ThreeJs

本资源仅为借鉴，在淘宝小程序中使用，建议使用白鹭引擎、LayaAir、pixi 等。淘宝小程序文档连接：https://miniapp.open.taobao.com/docV3.htm?docId=119178&docType=1&tag=dev 本资源是专门为淘宝小程序所开发的一个Threejs，可以在小程序里面使用，使用方法，直接在文件根目录创建一个util文件夹，在你的canvas页面引入即可，通过my.createCanvas的方式来获取canvas对象，引入本文件获得createScopedThreejs方法，然后通过THREE=createScopedThreejs(canvass);来后去THREE对象即可。

2020-07-07

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人