这是一个专门讨论 idea 的地方。
每个人的时间，资源是有限的，有的时候你或许能够想到很多 idea，但是由于现实的限制，却并不是所有的 idea 都能够成为现实。
那这个时候，不妨可以把那些 idea 分享出来，启发别人。
每个人的时间，资源是有限的，有的时候你或许能够想到很多 idea，但是由于现实的限制，却并不是所有的 idea 都能够成为现实。
那这个时候，不妨可以把那些 idea 分享出来，启发别人。
很多时候在引用前端库 cdn 的时候，会担心这个前端库什么时候挂掉。想做一个东西，监测并自动寻找最优的前端库。
Jackyxiaoc · 2019-11-15 11:09:19 +08:00 · 7835 次点击这是一个创建于 1822 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在做一个项目的时候发现，引用了不同的前端库对网页的速度影响很大。一个不小心前端库挂掉了，所有页面就废了还得冲上去换。
打算做一个原理是 A 域名—自动跳转—B/C/D……等等前端库地址的。
自动寻找速度最快的。保证了前端库的高可用和高速。
如果有这个东西，大家会用吗？
打算做一个原理是 A 域名—自动跳转—B/C/D……等等前端库地址的。
自动寻找速度最快的。保证了前端库的高可用和高速。
如果有这个东西，大家会用吗？
 |
1
jeremaihloo 2019-11-15 11:21:01 +08:00
首先，你要做一个什么？程序？如果是个程序，你这个程序的并发怎么解决？如果你这个程序挂了呢？你是不是要做一个程序监控你这个程序？那如果监控你这个程序的程序挂了呢?
前端库放在 CDN 上是最靠谱的了吧，CDN 都不靠谱的话，你其他的也更不靠谱了 |
 |
2
lxk11153 2019-11-15 11:21:01 +08:00  8
前端库挂掉了 和 你做的这个东西挂掉了 有什么区别？
|
 |
3
mcfog 2019-11-15 11:22:16 +08:00 1
这个东西除了天然会慢一次跳转（即使是第二次也不能缓存所以冷热情况下都慢）还有一个具备实用性的前提：你的 A 的基础设施的可用性高于 B/C/D……当中的最大值，地理分布也要优于 B/C/D 或者至少不能差太多，否则相当于为了 0.00 几的不稳定或者跑路的风险而让终端用户每次先绕地球跑过来找你 A 一圈再去 B 或者 C 的当地 CDN
不如做的简单一点就只做可用性检测、统计和警报就行了，比如订阅 B 这家服务中国大陆不可用超过 5 分钟 /C 这家全球任意地点 TTFB 超过 300 毫秒之类的告警（用于应急处理），以及周或者月频率的可用性和速度评测（用于选择） |
 |
4
Jackyxiaoc OP @jeremaihloo 感谢您的回复。cdn 库的速度也是不一样的 压力大了某个节点挂了很正常
这个小系统单纯作为转发，压力比 cdn 小得多。不容易挂。 @lxk11153 感谢您的回复。这个东西承受的压力单纯是一个转发，不承受流量。当然比 cdn 稳吧。 @mcfog 感谢您的回复。这个东西除了天然会慢一次跳转，确实是这样，但是有的前端库挂了的时候，不稳定的时候，甚至几秒的加载速度。单纯的告警容易出问题，一挂了就得上去改代码了。A 的可靠性确实要高，不然肯定还不如 cdn。 |
 |
5
wunonglin 2019-11-15 11:32:22 +08:00
没有
|
|
6
mcfog 2019-11-15 11:32:49 +08:00
@Jackyxiaoc 如果你的检测和告警质量高，别人足够信任你，就可以做自动化收到你的告警自动更换备用前端库，这样可以做到无性能损耗
|
 |
7
stevenkang 2019-11-15 11:35:45 +08:00 via iPhone
cdn x2 吗？
可以考虑给各大 cdn 库做镜像，然后公布检测的健康度，让使用者自行选择。 或者用 DNS 解析（如果可以的话），哪个库稳定你就解析到哪个库上去 |
|
8
Jackyxiaoc OP |
|
9
Jackyxiaoc OP @mcfog https://unpkg.com/[email protected]/lib/vant.min.js 这个链接为例子，有时候加载 500ms 有时候 1.3s 。每一次都不一样。
|
|
10
wunonglin 2019-11-15 11:47:07 +08:00
@Jackyxiaoc
#9 请问如何解决多运营商，多地域的不同性动态引用。。这得需要投资大量服务器吧，你这东西怎么盈利？还是纯公益？如果你这东西没盈利的话，我如何知道你的服务什么时候“挂”，那这样是不是又要所谓的 CDNx3，一套嵌一套，母猪带胸罩 |
|
11
Jackyxiaoc OP @wunonglin 其实原理有点像这个： https://www.superbed.cn/help 单纯的转发并不需要很多服务器...
|
 |
12
antscript 2019-11-15 12:12:06 +08:00 via iPhone
虽然这个问题应该是 CDN 供应商考虑的，但提供一个思路供发散，从 DNS 解析入手，域名只用一个，你负责将请求解析到符合要求的 CDN 地址即可，既不需要前端来处理这种情况，也没有缓存的问题。
|
|
13
wunonglin 2019-11-15 12:13:17 +08:00
@Jackyxiaoc #11 可是前段库用 cdn 的意义就是要快速呀，你自己 title 都说了“保证了前端库的高可用和高速”，按你这样转发的话，鱼和熊掌是不能兼得的
|
 |
14
ibegyourpardon 2019-11-15 12:13:20 +08:00
你这个更适合作为一个 npm 包，用于前端在构建打包的时候自动检测，并寻找到合适的替换上去。
而不是在上线之后再做个检测替换。 你现在的思路还是不对。 |
|
15
wunonglin 2019-11-15 12:14:42 +08:00
@Jackyxiaoc #11 所以说你想做一个高可用的还是要做一个快速的，或者是你有什么好办法可以两者都兼得的？
|
|
16
Jackyxiaoc OP @antscript 感谢，确实是个好办法。
@wunonglin 感谢回复。其实我个人目前测试的结果是头条的库质量最好，然后后台一个排名综合评分。一旦检测失败了就指过去下一个排名的库。 @ibegyourpardon 感谢回复。我学习一下。 |
|
17
wunonglin 2019-11-15 12:36:55 +08:00
@Jackyxiaoc #16 还有个问题不知道你想没想过，每个用户访问 cdn 的效率都是不太一样的，cdn 每个节点也有质量好坏的时候，你怎么解决这个问题？打比方 cloudflare，国外访问快的一批，国内成渣，如果按你排分系统来使用的话，你怎么判断区分用户 ip 的来源和匹配这个 ip 最快的 cdn 供应商
|
|
18
Jackyxiaoc OP @wunonglin 这个问题是想过的。网站引用的地址是 abc.com/[email protected]/lib/vant.min.js ——unpkg.com/[email protected]/lib/vant.min.js
我是可以拿到访问这个地址的用户的 ip 的，能区分出国内和国外就好。后台根据一个规则去匹配。当然这个是不能实时判断每个用户的网络情况选最好的 cdn 的，那样做监控的成本太高了。目前这套方案只能保证可用 100%，速度不至于太差。像 www.v2ex.com/t/536934 这种情况出现的时候，不需要满世界改引用。 |
|
19
wunonglin 2019-11-15 12:49:13 +08:00
@Jackyxiaoc #16
我做个假设，0-10 分，10 分最好，0 分最差 [a.com: 10, b.com: 9, ...] 返回 a.com ，用户 A 使用了 a.com ，用户的网络是长城，访问 a.com 质量很差，结论：用户 A 觉得评分不准 返回 a.com ，用户 B 使用了 a.com ，用户的网络是电信，访问 a.com 质量很快，结论：用户 B 觉得评分 ok 返回 a.com ，用户 C 使用了 a.com ，用户的网络是电信，但是 a.com 分配给用户 C 的 ip 拥挤，访问 a.com 质量很差，结论：用户 C 觉得评分不准 等等 如果遇到上面问题的话，你的评分系统如何处理这个状况？假设不能处理的话为什么不直接用 a.com |
 |
20
jin5354 2019-11-15 12:51:15 +08:00
为什么要用 cdn 方式引入前端库。。？
难道不是自己把库打入自己的 bundle 么？ |
|
21
wunonglin 2019-11-15 12:51:28 +08:00
@Jackyxiaoc #18 所以我一开始就说这个东西肯定需要一定的成本的，不是单单做个跳转就能解决，当然，如果这个东西是自己用的话倒是无所谓，一旦群体大了，你的项目负面情况就暴露出来了
|
 |
22
optional 2019-11-15 12:53:18 +08:00
script onerror 替换另一个公共 cdn 就好了，，，如果碰到 2 个公共 cdn 挂了，那就是命
|
 |
23
momocraft 2019-11-15 12:58:13 +08:00
作为设施很难做到比正牌 CDN 更稳，比如 cdnjs 是 cloudflare 赞助的。
国内访问不稳是另一个问题，甚至不是设施稳就能解决。 |
 |
24
jaynos 2019-11-15 13:02:41 +08:00
用一台服务器来检查多个 CDN 的可用性有点不靠谱吧?服务器有自己的线路, 这和用户的线路是不一样的呀.
服务器在杭州, 用户在深圳. 服务器告诉深圳的用户地址 A 很好, 但是实际上地址 A 在深圳可能已经完全访问不了了. |
 |
25
hyy1995 2019-11-15 13:03:49 +08:00 1
用 cdn 本来就有风险，这种优化方式并不可控，所以项目中我从不引入 cdn，没感觉项目到了非要用 cdn 来优化加载速度的地步。不过我也没开发过大型项目，可能认知有偏差吧。
|
 |
26
lhx2008 2019-11-15 13:05:39 +08:00 via Android
最简单的，做一个网站，输入你的用公共 CDN 和邮箱或者手机，然后我自动监控，挂了马上打电话或者发邮件，不就行了，个人开发者又不讲什么 SLA
|
 |
27
fengbjhqs 2019-11-15 14:13:14 +08:00
我觉得这个东西比较困难，适用价值也不大，
现在前端基本较少用 cdn 了， 基本是 webpack 打包全部丢上去， ui 库或者其他基础库，会有按需分割的需求， 而且成本较高， |
|
28
fengbjhqs 2019-11-15 14:16:39 +08:00
以前用 jq 的时候，我这样处理过，
放 3+多 jq cdn 地址，每个加载 0.5s ，成功停止，否则继续加载，如果都失败，那基本是用户网络问题 但 react+webpack 后，没有更好的方案， |
|
29
Jackyxiaoc OP @wunonglin 其实这个跳转就是为了解决 cdn 直接挂了。您提到的评分的问题，确实不能针对每个用户去调整，除非投入比较多的监测节点。或者在用户端引入一段 js，监测用户的网络质量。再返回合适的公共库。
@jin5354 可以节约流量，降低成本。 @optional script onerror 应该是加载到完全加载不出来才引入第二个吧，要某个公共库是真挂了，用户打开的时间估计也要挺久的。 @momocraft cdn 本身挂的可能是比较大的，但是多了一个稳定的跳转的话，应该稳定一些。 @jaynos 确实。所以如果是简单的跳转只能解决某个公共库挂掉的问题。 @hyy1995 是的，确实有风险。但是如果全部用本地的，或者是自己的 cdn，流量成本应该挺高的。 @lhx2008 对，还是这样比较简单。 |
 |
30
rioshikelong121 2019-11-15 14:25:54 +08:00
那就打到自己的 bundle 里面吧。。这个挂了也就意味你的网站挂了。
|
|
31
optional 2019-11-15 14:26:39 +08:00
@Jackyxiaoc 那你把两个 script 都写上，再来个 defer/async，反正大多数 js 加载两次问题不大，
|
 |
32
wysnylc 2019-11-15 14:30:27 +08:00
哈啊哈最近刚好找到个类似需求的,不过是 dns 最优解
|
|
33
Jackyxiaoc OP |
|
34
momocraft 2019-11-15 14:46:15 +08:00
说得直白一点
CDN 用多少机器多少监视才达到的 uptime 在你嘴里叫 "挂的可能比较大”，用户凭什么觉得你，一个恐怕没有认识到这个难度的人，自己做的东西更 "稳定" ? |
|
35
Jackyxiaoc OP @momocraft www.v2ex.com/t/494314 这种算不算挂了？避免的就是这种。
|
|
36
wysnylc 2019-11-15 14:52:19 +08:00
@Jackyxiaoc #33 叫 dns chooser,我有发帖介绍
|
|
37
Jackyxiaoc OP @wysnylc 感谢。
|
 |
38
watzds 2019-11-15 14:56:44 +08:00 via Android
嗯，有时候 CDN 是访问不通，虽然可能不是 CDN 本身问题，页面能打开，部分 js 资源出不来也挺难受的
|
 |
39
myqoo 2019-11-15 15:43:42 +08:00
可以看看这个思路，去中心化 CDN https://github.com/EtherDream/decent-cdn
|
 |
40
liuzhiyong 2019-11-15 15:46:58 +08:00 via Android
我觉得不要“自动跳转”，搞个监控检查就很不错。
|
 |
41
exip 2019-11-15 16:18:32 +08:00 via Android
service worker 完美解决楼主的问题!
service worker 能在请求到达浏览器后呈现给用户前，修改响应内容 |
|
43
lxk11153 2019-11-15 16:32:40 +08:00
@Jackyxiaoc #11
1. 试了下 superbed `curl -I https 蟹://pic.superbed.cn/item/5b7153f79dc6d696149d96cb.jpg` ```text HTTP/2 302 server: JSP3/2.0.14 date: Fri, 15 Nov 2019 07:53:05 GMT content-type: text/html; charset=UTF-8 content-length: 0 location: https 蟹://ae01.alicdn.com/kf/HTB1zHXaXQH0gK0jSZPiq6yvapXa4.jpg ``` 2.1 你说的“高可用”可以解决，小范围用用的话你的程序也不会挂 2.2 “高速”好像不那么容易吧，分两个 2.2.1 用户访问你的程序的高速 2.2.2 location 到哪个 cdn 是用户访问起来最快的 ---- 然后好像感觉丢失了 cdn 的本意了~ |
 |
44
KENNHI 2019-11-15 18:30:32 +08:00 via Android
现在问题来了，是 CDN 更可靠还是你这个软件更可靠？
我比较信赖 CDN 的可靠性哈哈。 楼上说的很对，靠智能 DNS 才是解决之道。不同的来源（移动 /联通 /电信 /海外）可以解析到不同的 cdn 上，这样可以解决所有问题。 |
|
45
Jackyxiaoc OP 1
|
|
46
exip 2019-11-15 19:10:40 +08:00 via Android
@Jackyxiaoc 库挂了,可以在 serverworker 里拦截请求失败信息,然后重新请求一个能用的地址再呈现给用户.
|
|
47
Jackyxiaoc OP @exip 哦哦，明白了。
|
|
48
exip 2019-11-15 19:13:01 +08:00 via Android
@Jackyxiaoc 用户能可能会感觉到这次加载有点慢,但不会知道你已经更换地址了,也不会出现加载不出来的情况.
|
|
49
Jackyxiaoc OP @exip 微信浏览器还不支持 service worker 的离线访问...
|
 |
50
luoway 2019-11-15 19:26:34 +08:00
相当于代理掉客户端请求，那么 service worker 和服务端统一处理都是可以实现。
问题是，这样的统一代理对服务器压力大。别看处理逻辑简单，每秒处理请求数上去后，排队都能卡一会。 |
|
51
watzds 2019-11-15 19:33:21 +08:00 via Android
不知前端能不能检查到 cdn 不通，不通自动切换，或者刷新页面时切换就行
|
 |
52
blackmirror 2019-11-15 19:45:13 +08:00
这是个伪需求
|
 |
53
chcx 2019-11-15 22:19:34 +08:00
伪需求
静态资源，CDN 做的是缓存拷贝，只要你源站能提供正确的资源则无问题。 另外 CDN 架构方面：会做动态健康检查，节点间及同节点资源的负载均衡健康检查，全局的 isp 级别及基于实时服务质量的智能调度。 当然，CDN 也会出现一些节点及调度问题，这个高可用架构能规避 99%吧，问题存在发生的可能。 |
 |
54
mytsing520 2019-11-15 22:58:32 +08:00
不同地区 CDN 效果都不同。
这个“需求”甚至不能称得上是一种需求 |
 |
55
muzuiget 2019-11-15 23:03:13 +08:00
不就是再加一次 CDN 吗？还是觉得大厂的 CDN 稳定得多了。
|
|
56
Jackyxiaoc OP @blackmirror 我这里说的 cdn 是前端的公共库，还是挂挺多的。
@chcx 如果是付费的 cdn，那毫无疑问，可靠性很高。我这里说的 cdn 是前端的公共库，还是挂挺多的。 @mytsing520 如果是付费的 cdn，那毫无疑问，可靠性很高。我这里说的 cdn 是前端的公共库，还是挂挺多的。这个东西是保证挂了以后能切换去能用的。t/536934 |
|
57
Jackyxiaoc OP @blackmirror 我这里说的 cdn 是前端的公共库，还是有挂的概率的。
@chcx 如果是付费的 cdn，那毫无疑问，可靠性很高。我这里说的 cdn 是前端的公共库，还是有挂的概率的。 @mytsing520 如果是付费的 cdn，那毫无疑问，可靠性很高。我这里说的 cdn 是前端的公共库，还是有挂的概率的。这个东西是保证挂了以后能切换去能用的。t/536934 |
 |
58
tonylau 2019-11-15 23:58:15 +08:00 via Android
套路云有个叫“全局流量管理”的产品，集成了健康度检查、容灾自动切换方案、流量负载均摊等，跟楼主说的需求有些类似，可以了解下。
|
 |
59
dorothyREN 2019-11-16 16:48:22 +08:00
cdn 你是不用担心了，但是你该担心你这个小东西啥时候挂了
|
 |
60
Foxkeh 2019-11-16 20:31:58 +08:00
前段时间一个周六 BootCDN 挂了之后,
前端工程师给出的对策是同时配置多个 CDN 前端库. 当时很惊讶,但没问实现原理. |
|
61
KENNHI 2019-11-17 00:11:06 +08:00 via Android
@Jackyxiaoc 说实话每次遇到这种能打开网站结果 css/js 没法加载的情况的时候，我都在想干脆直接把这些东西放在源服务器完事了。反正这样一来，能打开网站，js 之类的自然能加载；打不开网站能加载也没用。
我说智能解析是指你可以把这些库放在不同的（自己的） CDN 上，不同的线路访问不同的 CDN。听说有的 CDN 对移动好，有的对电信好之类的 hhh。其实有了任播或者 BGP，完全不需要依赖 CDN 之类的也可以，直接放源服务器省事了。 |
|
62
Jackyxiaoc OP |
Select Language