惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 三生石上(FineUI控件)
G
Google Developers Blog
Vercel News
Vercel News
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
N
Netflix TechBlog - Medium
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Engineering at Meta
Engineering at Meta
B
Blog
博客园_首页
量子位
博客园 - 叶小钗
L
LangChain Blog
T
The Blog of Author Tim Ferriss
云风的 BLOG
云风的 BLOG
Blog — PlanetScale
Blog — PlanetScale
F
Fortinet All Blogs
S
SegmentFault 最新的问题
宝玉的分享
宝玉的分享
D
DataBreaches.Net
雷峰网
雷峰网
The Cloudflare Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Last Week in AI
Last Week in AI
P
Proofpoint News Feed
TaoSecurity Blog
TaoSecurity Blog
罗磊的独立博客
MongoDB | Blog
MongoDB | Blog
The GitHub Blog
The GitHub Blog
I
Intezer
H
Help Net Security
The Hacker News
The Hacker News
The Register - Security
The Register - Security
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
AWS News Blog
AWS News Blog
V
V2EX
Microsoft Security Blog
Microsoft Security Blog
T
Tenable Blog
Spread Privacy
Spread Privacy
A
Arctic Wolf
P
Proofpoint News Feed
T
Threat Research - Cisco Blogs
Schneier on Security
Schneier on Security
C
CERT Recently Published Vulnerability Notes
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
The Last Watchdog
The Last Watchdog
Latest news
Latest news
T
Troy Hunt's Blog
L
LINUX DO - 热门话题

kshao-blog-前端知识记录

win or mac clash 无 TUN 让 Antigravity、Chrome 强制 proxy(解决 Antigravity 无法加载选择 model、自动更新无法登录、跳转) 【大杂烩】在 pnpm 中直接修改 node_modules(.pnpm) 中的依赖项,项目中持久化 - pnpm 中的依赖处理、幽灵依赖、寻址规则等 在 html 中直接使用 Esm、Jsx 脚本快速调试和使用 React@19 和 Vue@3 源码,解决 React19 UMD 构建等问题 一键在本地批量检测并升级更新 package.json 中的模块依赖,ncu(npm-check-updates)在 npm、pnpm 或 workspace 项目中的使用教程 解决 Mac Docker Desktop 中启动出现的问题合集 通过阿里云、腾讯云无服务器搭建自定义的企业域名邮箱,实现在 QQ邮箱 收发等功能(附腾讯 SMTP 和 IMAP) 解决使用代理(clash 等)进行 SSH 连接(如 Github ssh key clone/push)出现 kex_exchange_identification 错误 pnpm monorepo 中管理依赖的最佳实践,与 Catalogs(目录)协议的使用(monorepo 中统一版本管理) Web 安全中的 Secure Contexts(安全上下文)- 解决在本地中使用 clipboard 或 Crypto 等 API 限制或关闭上下文限制 使用 serve 配合 openssl 或 mkcert 创建本地自签名可信任的证书 - 创建本地 TLS\SSL https 协议服务 利用 Github Actions 和 Acme 自动申请、更新和部署至阿里云、腾讯云 CDN Lets Encrypt SSl\TLS ECC RSA 双证书 【CSS】解决在 flex 容器中使用 align-content 或 justify-content 属性 center 居中时的溢出滚动和截断问题 - 理解 safe 关键字 在线工具 - 一键获取下载抖音无水印视频、抖音去水印解析工具、下载抖音无水印高清图集【2025 最新】 【React Router】v6 data router 在非组件(或工具方法)中如何优雅的跳转路由 【React】为什么路由跳转时页面滚动高度不会被重置(保留上个页面高度)?理解 history scrollRestoration 的场景与使用,以及如何使用 React Router 重置和跳转前保留滚动高度 【React】在本地 Html 中快速 debug(调试)React 源码 【React】结合源码和 EventLoop 分析 - 为什么 useLayoutEffect 会阻止 DOM 重绘(而 useEffect 闪烁)?为什么其内部 useState 会“同步”执行? React Compiler - 解放在函数中编程时的性能焦虑(React Conf 2024)附 Next 在线演示 在 github actions 中获取时间,并转换为中国标准时间(中国时区) 【npm】npm ci - npm clean install,在 CI、CD 中保持构建的一致性和可重复性 eslint 9.x 升级或使用指南,eslint.config.js 配置,包含 react、typescript、prettier 等常用配置升级迁移 使用 Spicetify 自定义 Spotify - 歌词翻译、全屏展示、主题替换 在 node 中快速代理请求(Proxy),解决跨域或请求转发问题 - http-proxy-middleware 修改请求体和返回 在 Hexo 中使用 AI(Gemini、deepseek、Azure)生成文章摘要,支持自定义模板。hexo-ai-summaries 插件文档(默认适配主题 Butterfly) 解决在 webstorm 或 idea 等 jetbrains 工具中遇到 Git 无法 force push,或 force push 灰色禁用无法点击(protected branches) hexo-seo-submit,Hexo 博客 SEO 优化插件 - 每日定时自动或手动提交链接至百度、Bing、Google,支持 Github Actions 和 Coding Jenkins 等CI(Hexo 插件编写) 一文吃透 pnpm 如何使用 workspace 构建 monorepo,与 npm、yarn 的用法对比(pnpm 9.x 内部安装依赖问题 link-workspace-packages) 【Node】Corepack - 解决 pnpm 或 yarn 的多版本管理、解决本地版本与 packageManager 中的版本一致性问题 解决 npm、cnpm 或 pnpm install 遇到 certificate has expired (证书已过期) npm、yarn、pnpm 设置最新国内镜像源(附官方镜像源和最新阿里源),以及 nrm 的使用教程【2025】 解决从 docker desktop 内镜像 linux 创建的容器,启动就停止、无法启动等问题(无进程容器) docker(docker desktop)中设置国内镜像源加速(阿里云、中科大),以及代理和容器代理设置,解决桌面端无法登陆就退出问题 【CSS】解决外边距重叠(重合)引起的 margin 垂直方向(top、bottom)不生效,无作用的问题 【CSS】CSS-Nesting:CSS 嵌套写法 —— 有望替代 less sass 的原生嵌套 【CSS】解决移动端(高清方案)下在谷歌浏览器中出现 字体大小布局异常,和设置的 font-size 不符(Text Autosizer、Font Boosting) 【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has 【windows 11】使用 wePe 纯净 制作pe启动盘 安装\重装\升级 windows 11(windows 10)详细教程,附 windows 11 跳过联网、分区等教程 【webpack】Externals(外部扩展)浅析 - webpack 5 【Windows】一句话(一键、一分钟、一段代码)清除 Windows 11(10) 快捷方式角标(小箭头) 【Git】cherry-pick 使用场景介绍,如何在 WebStorm 中使用 cherry-pick;(从分支中提取 commit 功能) 【message-channel】了解频繁出现在框架的 Message Channel,及在事件循环(Event Loop)中的表现 【web-worker】浅析 useWorker 库如何只需函数方法即可在 worker 内运行;如何区分 Web Socket、Web Worker和Service Worker? 【React】理解学习 React 17中的批处理 与 18 批处理 为何用谷歌(Chrome)浏览器下载PDF时有时预览有时下载? 【less】Parent Selectors & 和 &&(多个父选择器的用法及回顾) 【React Router】在非组件(或工具方法)中如何优雅的跳转路由 - 理解 HashHistory 和 BrowserHistory 处理谷歌浏览器(google Chrome)https 站点将 http 资源自动转成 https - 附全站资源强制转 https vscode 国内直链接下载,提升(加速)下载速度 【css-tricks】从 flex 子元素超出父级(容器)宽度,探其原理 flex:1 时 width 的作用 linux,mac 终端(Terminal)上使用代理(http/https/socks5)提升速度,给 git 一键设置代理提升速度 修复 Win 11或10 Xbox Game Bar 录屏截屏打不开灰色等 ios,Windows 网页皆可平滑、惯性滚动(Smooth-scroll.js)- 博客、网站、web、JavaScript 【2022年】apple 苹果(ios)注册美服区(日区)ID教程(附免税地区及身份信息生成器)-时效:2022年2月 javaScript 文件上传 - input 上传 和 webAPi 上传(解决上传对 input 的依赖) Git 解决 pull 操作出现:不建议在没有为偏离分支指定合并策略时执行pull操作 一行代码解决谷歌浏览器出现:"您的连接不是私密连接" Nginx 中使用 cookie 灰度或分流 css 指定方向模糊 - 鸿蒙开机效果(animation 事件) PE 升级 windows11 解决不满足限制(绕开 TPM),顺带 surface pro 一键升级 windows11(无需 PE) 在 Hexo 中一键部署 github page 并同步 push 变更文件到指定分支(hexo-deployer-git) z390 + i79700 + rx560(讯景转蓝宝石) 双显卡双系统 - openCore 0.6x 黑苹果 BigSur 11.4(20F71) Progressive JPEG - Web 前端 渐进(模糊)加载图片 z390+英伟达1060+i7 9700 安装黑苹果教程(避坑)- MAC OS 10.13.6 饿了么外卖红包-百亿补贴(每天都可免费领),来自内部的优惠! Google AdSense 添加付款方式-使用银行外汇(招行外汇) ECMAScript2021 可用新特性 客户端或服务端 cookie 的设置、读取、携带问题 css 文字渐入效果,css 变量的进一步使用 setProperty Css 模拟赛博朋克 故障风格 按钮 Fetch、Ajax 请求遇到301或302时 记录前后端不同域名 携带 cookie,及如何处理 Chrome SameSite Mac下 Nginx、openssl,配置本地 Localhost Https 测试环境 在线生成短链接,新浪短链接 t.cn webStorm 开发,配置 ts(TypeScript)的 FileWatchers 微信小程序 - typeScript 的配置与热加载 win10 重装系统,电脑出现:"由于最近更改电脑硬件而无法正常启动",或重装卡在:"海内存知己"等问题解决方法 算法- js 二叉树,二叉查找树的基本实现及递归与循环的版本 异或运算符 ^ 理解与应用 面试 - js 在指定数组中找出不重复的两数之和为 target
静态文件资源 cdnjs, jsdelivr 抖音字节国内快速 CDN 镜像推荐【2025】- 仍在使用 bootcdn 和 staticfile CDN 请注意验证资源的完整性(SRI)
kshao · 2024-09-18 · via kshao-blog-前端知识记录

近期发现正在使用的 CDN 每次加载都异常缓慢,不仅 JS 资源都未被缓存,协议还是 http 1.1,严重影响体验。打算更换 CDN 服务时,发现正在使用的服务提供商被列为被攻击名单中,资源可能会出现投毒等情况。没想到使用了大厂的 CDN 服务也会出现这种问题(说明还不够大~~~)

国外

虽然推荐的都是大厂稳定的服务,但是仍建议做好资源完整性的验证,在资源引入时填写 SRI 哈希

访问较慢,稳定安全优先

测速来源:https://www.itdog.cn/tcping/Tcping,均使用 443 端口。测速时间:2024/09/27

组织 域名 协议 平均速度(https 注意事项
cloudflare.com cdnjs.cloudflare.com h2 国内: 528 ms
国外:4 ms
1. 同步 cdnjs,进入复制即可
2. 默认缓存时间 1
3. 资源并非完全同步 npm,对资源有要求。
若资源未被收录可在该项目提 PR cdnjs/packages
⭐️ jsdelivr cdn.jsdelivr.net h2 国内: 274 ms
国外:15 ms
同步 npm js,默认缓存一年,支持 esm
语法:https://cdn.jsdelivr.net/npm/package@version/file
示例:https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js
Michael Jackson unpkg.com h2 国内:346 ms
国外:3 ms
同步 npm js,默认缓存一年(建议通过语法来获取包内容)
语法:https://unpkg.com/:package@:version/:file
示例:https://unpkg.com/react@latest/umd/react.production.min.js
通过 /any/file?meta 可获取元数据,例如文件 integritysize 等信息,示例:react@18.0.3
通过 ?module 获取 ES 版本

国内 - 大厂

虽有大厂背书,生产仍需谨慎使用,做好完整性的验证。

组织 域名 协议 平均速度(https 注意事项
又拍云 s4.zstatic.net h2 国内: 22 ms
国外:27 ms
同步 cdnjs(又拍云赞助,相当于国内 cdn js,访问站点搜索资源)
使用又拍云提供的 SRI Hash 生成器
知乎 unpkg.zhihu.com
unpkg.zhimg.com
h3 国内: 6 ms
国外:21 ms
理论同步 unpkg.com,可能会有资源同步问题(维护未知),腾讯云 CDN 服务
使用同 unpkg 替换域名即可:https://unpkg.zhimg.com/react@latest/umd/react.production.min.js

不稳定,且有风险的 CDN,资源无缓存,不建议使用,仍在使用的建议更换

相关文章:

Polyfill supply chain attack hits 100K+ sites > https://web.archive.org/web/20240229113710/https://github.com/polyfillpolyfill/polyfill-service/issues/2834 > https://www.v2ex.com/t/1053497

  • bootcdn
  • staticfile CDN

三方自建

稳定性未知,不建议生产项目中使用,注意验证资源的完整性

组织 域名 协议 平均速度(https 注意事项
⭐️7ED Services use.sevencdn.com h2 国内: 5 ms
国外:281 ms
同步 cdnjs,将域名替换 use.sevencdn.com 即可
示例:https://use.sevencdn.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js
jsdelivr 镜像站 cdn.jsdmirror.com h2 国内: 31 ms
国外:83 ms
jsdelivr 的国内镜像站,将域名 cdn.jsdelivr.net 替换为 cdn.jsdmirror.com
境内 腾讯云 Edgeone,境外 CF
webcache cdnjs.webstatic.cn h2 国内: 22 ms
国外:186 ms
支持 cdnjsunpkg.com,使用 阿里云 CDN
cdn jshttps://cdnjs.webstatic.cn/ajax/libs/:package/:version/:file
unpkghttps://npm.webcache.cn/:package@:version/:file
渺软CDN https://jsd.onmicrosoft.cn (jsDelivr)
https://npm.onmicrosoft.cn (UNPKG)
https://cdnjs.onmicrosoft.cn (cdnjs)
h1.1 国内: 43 ms
国外:130 ms
根据不同的域名选择不同的服务,使用 cloudflare CDN

Subresource Integrity

通过在资源引用标签(如 <script><link>)中添加 integrity 属性,来确保加载的外部资源(如脚本或样式表)在传输过程中未被篡改

可在 SRI Hash Generator 中生成相应的 Hash

script 中使用

对于跨源资源共享(CORS)的资源需要配置 crossoriginanonymoususe-credentials空值,推荐 anonymous。 同源资源可无需配置

<script
  crossorigin="anonymous"
  src="https://s4.zstatic.net/ajax/libs/react/18.3.1/umd/react.development.js"
  integrity="sha512-YFI6ChaPQ5hH9o8Q4n5ZzDHrhrwZ3dhgZSQ2JC/pgmYuD0QtG0iwQgfFa1J+o4jvklsKBupcHz5Tx1yqa25FFQ=="
></script>

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录

赞助

  • 微信

    微信

  • 支付宝

    支付宝


avatar

kshao

免费服务器,kshao-blog,seo,面试题,前端,vue,react,JavaScript,js,html,css,less

Follow Me