gqkmiss-优快云博客

原创 Web 网页性能优化

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

2024-06-04 20:31:56 1816

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

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

2024-06-04 13:50:29 1359

原创 ES 2024 新特性

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

2024-05-13 14:26:19 1109

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

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

2024-04-28 10:18:43 3709 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 2923

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

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

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

2024-02-01 10:39:40 1459

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

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

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

2024-01-25 16:47:18 2089

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

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

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

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

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

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

2024-01-16 10:06:42 3388

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

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

2024-01-12 15:27:18 3416

原创前端 PM（Project Manager）分享

PMPMPM。

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

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

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

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

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

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

2023-03-21 16:26:32 402

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

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

2025-03-28 10:13:22 456

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

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

2025-03-27 10:07:39 411

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

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

2025-03-26 10:03:37 903

原创 Electron 项目开机自启动

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

2025-03-25 11:35:03 446

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

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

2025-03-25 09:05:30 852

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

Chrome 134 Devtools 更新

2025-03-24 09:50:29 525

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

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

2025-03-24 09:49:36 381

原创 ChromeOS 134 版本更新

ChromeOS 134 版本更新

2025-03-13 10:31:06 1335

原创 ChromeOS 133 版本更新

Chrome OS 133 版本更新

2025-03-13 10:30:06 808

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

Chrome 推出了。

2025-03-11 09:59:19 469

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

的。

2025-03-11 09:58:45 599

原创 Electron 客户端心跳定时任务调度库调研文档 - Node.js 任务调度库技术调研文档

node-cron 是一个基于 Cron 表达式的任务调度库，允许你根据 cron 表达式设置任务的执行频率。它轻量、易用，适用于大多数简单的定时任务需求。Rxjs 是一个响应式编程库，主要用途是处理异步事件流。提供了强大的操作符，用于处理事件、异步任务、定时任务等场景。Rxjs 并非专门用于任务调度，但它可以非常高效地管理定时任务和流式数据bull 是一个基于 Redis 的任务队列库，适合处理大量异步任务。它不仅支持定时任务，还支持任务的重试、延迟执行、优先级队列等。

2025-02-14 10:47:21 1186

原创 Cron 表达式用法

Cron 表达式0 0 L * *表示任务每个月的最后一天执行。Cron 表达式是一种强大的定时任务调度工具，适用于各种需要定时执行的场景。它灵活、高效，尤其适用于基于时间的任务调度。通过结合不同的特殊字符，您可以创建非常复杂的定时任务。它广泛用于 Linux 系统的 cron 命令中，并在许多 Node.js 库中得到了支持，如 node-cron。

2025-02-14 10:46:05 330

原创 Electron 主进程和渲染进程通信方法总结

Electron 进行间通信总结：单向通知：使用 ipcRenderer.send（主进程通过 ipcMain.on 监听）；适合简单指令，不需要立即反馈。同步调用：使用 sendSync（阻塞渲染进程，不推荐用于耗时任务）。RPC 请求：使用 invoke（返回 Promise），由主进程 handle 或 handleOnce 处理，适合需要异步返回结果的场景。特殊场景：postMessage 和 sendToHost 针对嵌入式内容与宿主的跨上下文通信设计。

2025-02-12 10:14:08 1164

原创 CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层

CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层

2025-02-11 11:16:56 386

原创 CSS 小技巧 —— CSS 实现 ... 的 loading 加载中动画

需求中想做出个这种效果，这个页面又是一个单独的 html 页面，没必要再单独引入其他模块了就想着用 CSS 动画来实现。

2025-02-11 11:15:40 470

原创 Vue Vite 项目增加 eslint 和 prettier

我们是 vue，选择第二个。选择第一个 ESM 规范。项目中建议使用 TS。我这边选择的是 JS。

2025-02-10 10:52:35 493

原创 React Vite 项目增加 eslint 和 prettier

vscode/extensions.json 文件。.vscode/settings.json 文件。.prettierrc.json 文件。.prettierignore 文件。.prettierrc.js 文件。我们是 React，选择第一个。把默认生成的替换为以下内容。选择第一个 ESM 规范。根据项目自己添加过滤文件。项目中建议使用 TS。我这边选择的是 JS。

2025-02-10 10:51:47 747

原创 ChromeOS 132 版本更新

企业定制化ChromeWebStore管理员现在可以使用新设置定制ChromeWebStore以适应他们管理的用户，包括以下功能：添加公司标志添加首页横幅和自定义公告策划扩展集合实施基于类别的控制这些设置可以通过管理员控制台进行配置，并且对所有已登录的管理用户（使用受管Google帐户登录到ChromeWebStore的用户）可用。

2025-01-20 10:07:39 1263

原创 Chrome 132 版本新特性

在iOS上使用GoogleLens搜索在Chrome132版本中，开始在所有平台上推出这一功能。

2025-01-20 10:06:47 1574

原创 Chrome 浏览器插件获取网页 iframe 中的 window 对象

获取逻辑和《Chrome 浏览器插件获取网页 window 对象》中的方案一一样，有兴趣的可以试下其他方案我这是本地 iframe URL，如果你的 URL 是网页链接，可以在 index.js 中嵌入 lucky.js 做延迟处理如果你的 iframe URL 是动态的，比如，点击 tab，切换 URL，则可以在 index.js 中进行 MutationObserver 监听。

2024-12-23 10:32:05 943

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

使用 Gemini 调试 Network、Source 和 PerformanceChrome 131 可以使用 Gemini 调试 CSS，现在可以调试更多模块了与元素面板中的右键菜单类似，要打开 AI 辅助面板并开始与 Gemini 的聊天，可以通过以下方式操作：在 Network 面板中，右键点击一个网络请求并选择“Ask AI”，或点击该请求旁边的“Ask AI”按钮。在 Sources > Page 选项卡中，右键点击一个文件并选择“Ask AI”，或点击该文件旁边的“Ask AI”按钮。

2024-12-18 14:08:53 911

原创 ChromeOS 131 版本更新

ChromeOS Flex 自动注册在 ChromeOS 131 中，ChromeOS Flex 的自动注册功能现已允许大规模部署 ChromeOS Flex 设备。与 ChromeOS 零接触注册类似，自动注册将通过组织管理员创建的注册令牌嵌入到 ChromeOS Flex 镜像中。这将决定设备在初次设置时将注册到哪个客户组织和组织单位。

2024-12-18 14:04:18 672

原创 Chrome 浏览器 131 版本开发者工具（DevTools）更新内容

使用 Gemini 调试 CSSChrome DevTools 现在推出了一个新的实验性 AI 辅助面板，可以与 Gemini 聊天并获得帮助来调试 CSS。在 Elements 面板中，右键点击一个元素并选择Ask AI，或者点击该元素旁边的对应按钮，DevTools 会打开新的 AI 辅助面板。

2024-11-19 10:33:18 1120

通过例子学习 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 优快云：https://guoqiankun.blog.youkuaiyun.com/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 优快云地址：https://guoqiankun.blog.youkuaiyun.com/article/details/112007833

2020-12-31

myPlugin.zip

浏览器插件开发demo，从0 到1 带你进行浏览器插件的开发，可以和 https://guoqiankun.blog.youkuaiyun.com/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关注的人