首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
这是一个专门讨论 idea 的地方。

每个人的时间,资源是有限的,有的时候你或许能够想到很多 idea,但是由于现实的限制,却并不是所有的 idea 都能够成为现实。

那这个时候,不妨可以把那些 idea 分享出来,启发别人。
Coding
V2EX  ›  奇思妙想

很多时候在引用前端库 cdn 的时候,会担心这个前端库什么时候挂掉。想做一个东西,监测并自动寻找最优的前端库。

  •  
  •   Jackyxiaoc · 30 天前 · 4053 次点击
    最近在做一个项目的时候发现,引用了不同的前端库对网页的速度影响很大。一个不小心前端库挂掉了,所有页面就废了还得冲上去换。

    打算做一个原理是 A 域名—自动跳转—B/C/D……等等前端库地址的。
    自动寻找速度最快的。保证了前端库的高可用和高速。
    如果有这个东西,大家会用吗?
    62 回复  |  直到 2019-11-18 17:54:52 +08:00
        1
    jeremaihloo   30 天前
    首先,你要做一个什么?程序?如果是个程序,你这个程序的并发怎么解决?如果你这个程序挂了呢?你是不是要做一个程序监控你这个程序?那如果监控你这个程序的程序挂了呢?

    前端库放在 CDN 上是最靠谱的了吧,CDN 都不靠谱的话,你其他的也更不靠谱了
        2
    lxk11153   30 天前   ♥ 8
    前端库挂掉了 和 你做的这个东西挂掉了 有什么区别?
        3
    mcfog   30 天前   ♥ 1
    这个东西除了天然会慢一次跳转(即使是第二次也不能缓存所以冷热情况下都慢)还有一个具备实用性的前提:你的 A 的基础设施的可用性高于 B/C/D……当中的最大值,地理分布也要优于 B/C/D 或者至少不能差太多,否则相当于为了 0.00 几的不稳定或者跑路的风险而让终端用户每次先绕地球跑过来找你 A 一圈再去 B 或者 C 的当地 CDN

    不如做的简单一点就只做可用性检测、统计和警报就行了,比如订阅 B 这家服务中国大陆不可用超过 5 分钟 /C 这家全球任意地点 TTFB 超过 300 毫秒之类的告警(用于应急处理),以及周或者月频率的可用性和速度评测(用于选择)
        4
    Jackyxiaoc   30 天前
    @jeremaihloo 感谢您的回复。cdn 库的速度也是不一样的 压力大了某个节点挂了很正常
    这个小系统单纯作为转发,压力比 cdn 小得多。不容易挂。


    @lxk11153 感谢您的回复。这个东西承受的压力单纯是一个转发,不承受流量。当然比 cdn 稳吧。

    @mcfog 感谢您的回复。这个东西除了天然会慢一次跳转,确实是这样,但是有的前端库挂了的时候,不稳定的时候,甚至几秒的加载速度。单纯的告警容易出问题,一挂了就得上去改代码了。A 的可靠性确实要高,不然肯定还不如 cdn。
        5
    wunonglin   30 天前
    没有
        6
    mcfog   30 天前
    @Jackyxiaoc 如果你的检测和告警质量高,别人足够信任你,就可以做自动化收到你的告警自动更换备用前端库,这样可以做到无性能损耗
        7
    stevenkang   30 天前 via iPhone
    cdn x2 吗?

    可以考虑给各大 cdn 库做镜像,然后公布检测的健康度,让使用者自行选择。

    或者用 DNS 解析(如果可以的话),哪个库稳定你就解析到哪个库上去
        8
    Jackyxiaoc   30 天前
    @mcfog 确实应该从监控一步一步做起。


    @stevenkang 不是,只是一个单纯的跳转。如果 A 公共库挂了,就自动引用 B 公共库。
        9
    Jackyxiaoc   30 天前
    @mcfog https://unpkg.com/[email protected]/lib/vant.min.js 这个链接为例子,有时候加载 500ms 有时候 1.3s 。每一次都不一样。
        10
    wunonglin   30 天前
    @Jackyxiaoc

    #9 请问如何解决多运营商,多地域的不同性动态引用。。这得需要投资大量服务器吧,你这东西怎么盈利?还是纯公益?如果你这东西没盈利的话,我如何知道你的服务什么时候“挂”,那这样是不是又要所谓的 CDNx3,一套嵌一套,母猪带胸罩
        11
    Jackyxiaoc   30 天前
    @wunonglin 其实原理有点像这个: https://www.superbed.cn/help 单纯的转发并不需要很多服务器...
        12
    antscript   30 天前 via iPhone
    虽然这个问题应该是 CDN 供应商考虑的,但提供一个思路供发散,从 DNS 解析入手,域名只用一个,你负责将请求解析到符合要求的 CDN 地址即可,既不需要前端来处理这种情况,也没有缓存的问题。
        13
    wunonglin   30 天前
    @Jackyxiaoc #11 可是前段库用 cdn 的意义就是要快速呀,你自己 title 都说了“保证了前端库的高可用和高速”,按你这样转发的话,鱼和熊掌是不能兼得的
        14
    ibegyourpardon   30 天前
    你这个更适合作为一个 npm 包,用于前端在构建打包的时候自动检测,并寻找到合适的替换上去。

    而不是在上线之后再做个检测替换。

    你现在的思路还是不对。
        15
    wunonglin   30 天前
    @Jackyxiaoc #11 所以说你想做一个高可用的还是要做一个快速的,或者是你有什么好办法可以两者都兼得的?
        16
    Jackyxiaoc   30 天前
    @antscript 感谢,确实是个好办法。

    @wunonglin 感谢回复。其实我个人目前测试的结果是头条的库质量最好,然后后台一个排名综合评分。一旦检测失败了就指过去下一个排名的库。

    @ibegyourpardon 感谢回复。我学习一下。
        17
    wunonglin   30 天前
    @Jackyxiaoc #16 还有个问题不知道你想没想过,每个用户访问 cdn 的效率都是不太一样的,cdn 每个节点也有质量好坏的时候,你怎么解决这个问题?打比方 cloudflare,国外访问快的一批,国内成渣,如果按你排分系统来使用的话,你怎么判断区分用户 ip 的来源和匹配这个 ip 最快的 cdn 供应商
        18
    Jackyxiaoc   30 天前
    @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   30 天前
    @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   30 天前
    为什么要用 cdn 方式引入前端库。。?
    难道不是自己把库打入自己的 bundle 么?
        21
    wunonglin   30 天前
    @Jackyxiaoc #18 所以我一开始就说这个东西肯定需要一定的成本的,不是单单做个跳转就能解决,当然,如果这个东西是自己用的话倒是无所谓,一旦群体大了,你的项目负面情况就暴露出来了
        22
    optional   30 天前
    script onerror 替换另一个公共 cdn 就好了,,,如果碰到 2 个公共 cdn 挂了,那就是命
        23
    momocraft   30 天前
    作为设施很难做到比正牌 CDN 更稳,比如 cdnjs 是 cloudflare 赞助的。

    国内访问不稳是另一个问题,甚至不是设施稳就能解决。
        24
    jaynos   30 天前
    用一台服务器来检查多个 CDN 的可用性有点不靠谱吧?服务器有自己的线路, 这和用户的线路是不一样的呀.

    服务器在杭州, 用户在深圳. 服务器告诉深圳的用户地址 A 很好, 但是实际上地址 A 在深圳可能已经完全访问不了了.
        25
    hyy1995   30 天前   ♥ 1
    用 cdn 本来就有风险,这种优化方式并不可控,所以项目中我从不引入 cdn,没感觉项目到了非要用 cdn 来优化加载速度的地步。不过我也没开发过大型项目,可能认知有偏差吧。
        26
    lhx2008   30 天前 via Android
    最简单的,做一个网站,输入你的用公共 CDN 和邮箱或者手机,然后我自动监控,挂了马上打电话或者发邮件,不就行了,个人开发者又不讲什么 SLA
        27
    fengbjhqs   30 天前
    我觉得这个东西比较困难,适用价值也不大,

    现在前端基本较少用 cdn 了, 基本是 webpack 打包全部丢上去,

    ui 库或者其他基础库,会有按需分割的需求,

    而且成本较高,
        28
    fengbjhqs   30 天前
    以前用 jq 的时候,我这样处理过,

    放 3+多 jq cdn 地址,每个加载 0.5s ,成功停止,否则继续加载,如果都失败,那基本是用户网络问题

    但 react+webpack 后,没有更好的方案,
        29
    Jackyxiaoc   30 天前
    @wunonglin 其实这个跳转就是为了解决 cdn 直接挂了。您提到的评分的问题,确实不能针对每个用户去调整,除非投入比较多的监测节点。或者在用户端引入一段 js,监测用户的网络质量。再返回合适的公共库。
    @jin5354 可以节约流量,降低成本。
    @optional script onerror 应该是加载到完全加载不出来才引入第二个吧,要某个公共库是真挂了,用户打开的时间估计也要挺久的。
    @momocraft cdn 本身挂的可能是比较大的,但是多了一个稳定的跳转的话,应该稳定一些。
    @jaynos 确实。所以如果是简单的跳转只能解决某个公共库挂掉的问题。
    @hyy1995 是的,确实有风险。但是如果全部用本地的,或者是自己的 cdn,流量成本应该挺高的。
    @lhx2008 对,还是这样比较简单。
        30
    rioshikelong121   30 天前
    那就打到自己的 bundle 里面吧。。这个挂了也就意味你的网站挂了。
        31
    optional   30 天前
    @Jackyxiaoc 那你把两个 script 都写上,再来个 defer/async,反正大多数 js 加载两次问题不大,
        32
    wysnylc   30 天前
    哈啊哈最近刚好找到个类似需求的,不过是 dns 最优解
        33
    Jackyxiaoc   30 天前
    @rioshikelong121 emmm 这样自己的服务器压力小大。
    @optional 好办法,下午试试。
    @wysnylc 哈哈具体的解决方案是?
        34
    momocraft   30 天前
    说得直白一点

    CDN 用多少机器多少监视才达到的 uptime 在你嘴里叫 "挂的可能比较大”,用户凭什么觉得你,一个恐怕没有认识到这个难度的人,自己做的东西更 "稳定" ?
        35
    Jackyxiaoc   30 天前
    @momocraft www.v2ex.com/t/494314 这种算不算挂了?避免的就是这种。
        36
    wysnylc   30 天前
    @Jackyxiaoc #33 叫 dns chooser,我有发帖介绍
        37
    Jackyxiaoc   30 天前
    @wysnylc 感谢。
        38
    watzds   30 天前 via Android
    嗯,有时候 CDN 是访问不通,虽然可能不是 CDN 本身问题,页面能打开,部分 js 资源出不来也挺难受的
        39
    myqoo   30 天前
    可以看看这个思路,去中心化 CDN https://github.com/EtherDream/decent-cdn
        40
    liuzhiyong   30 天前 via Android
    我觉得不要“自动跳转”,搞个监控检查就很不错。
        41
    exip   30 天前 via Android
    service worker 完美解决楼主的问题!
    service worker 能在请求到达浏览器后呈现给用户前,修改响应内容
        42
    exip   30 天前 via Android
    参考 /t/331086
        43
    lxk11153   30 天前
    @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   30 天前 via Android
    现在问题来了,是 CDN 更可靠还是你这个软件更可靠?
    我比较信赖 CDN 的可靠性哈哈。
    楼上说的很对,靠智能 DNS 才是解决之道。不同的来源(移动 /联通 /电信 /海外)可以解析到不同的 cdn 上,这样可以解决所有问题。
        45
    Jackyxiaoc   30 天前   ♥ 1
    @watzds 对啊 特别是前端的库经常出问题...
    @myqoo 谢谢
    @myqoo 谢谢
    @liuzhiyong 监控确实没什么问题
    @exip 貌似不行...库挂了和这个没啥关系吧,首次加载还是不行。
    @lxk11153 蹭前端公共库又想稳定...只能这样了...速度只要不比原来的慢,其实就没什么大问题。
    @KENNHI 蹭前端公共库...怎么知道节点的地址...cdn 确实稳定,但前端公共库炸鸡的事情时有发生。这个小玩意的作用是蹭前端公共库的时候,想白吃白喝又能稳定的折中办法...避免类似事故的发生 /t/494314
        46
    exip   30 天前 via Android
    @Jackyxiaoc 库挂了,可以在 serverworker 里拦截请求失败信息,然后重新请求一个能用的地址再呈现给用户.
        47
    Jackyxiaoc   30 天前
    @exip 哦哦,明白了。
        48
    exip   30 天前 via Android
    @Jackyxiaoc 用户能可能会感觉到这次加载有点慢,但不会知道你已经更换地址了,也不会出现加载不出来的情况.
        49
    Jackyxiaoc   30 天前
    @exip 微信浏览器还不支持 service worker 的离线访问...
        50
    luoway   30 天前
    相当于代理掉客户端请求,那么 service worker 和服务端统一处理都是可以实现。
    问题是,这样的统一代理对服务器压力大。别看处理逻辑简单,每秒处理请求数上去后,排队都能卡一会。
        51
    watzds   30 天前 via Android
    不知前端能不能检查到 cdn 不通,不通自动切换,或者刷新页面时切换就行
        52
    blackmirror   30 天前
    这是个伪需求
        53
    chcx   30 天前
    伪需求
    静态资源,CDN 做的是缓存拷贝,只要你源站能提供正确的资源则无问题。
    另外 CDN 架构方面:会做动态健康检查,节点间及同节点资源的负载均衡健康检查,全局的 isp 级别及基于实时服务质量的智能调度。
    当然,CDN 也会出现一些节点及调度问题,这个高可用架构能规避 99%吧,问题存在发生的可能。
        54
    mytsing520   30 天前
    不同地区 CDN 效果都不同。
    这个“需求”甚至不能称得上是一种需求
        55
    muzuiget   30 天前
    不就是再加一次 CDN 吗?还是觉得大厂的 CDN 稳定得多了。
        56
    Jackyxiaoc   30 天前
    @blackmirror 我这里说的 cdn 是前端的公共库,还是挂挺多的。
    @chcx 如果是付费的 cdn,那毫无疑问,可靠性很高。我这里说的 cdn 是前端的公共库,还是挂挺多的。
    @mytsing520 如果是付费的 cdn,那毫无疑问,可靠性很高。我这里说的 cdn 是前端的公共库,还是挂挺多的。这个东西是保证挂了以后能切换去能用的。t/536934
        57
    Jackyxiaoc   30 天前
    @blackmirror 我这里说的 cdn 是前端的公共库,还是有挂的概率的。
    @chcx 如果是付费的 cdn,那毫无疑问,可靠性很高。我这里说的 cdn 是前端的公共库,还是有挂的概率的。
    @mytsing520 如果是付费的 cdn,那毫无疑问,可靠性很高。我这里说的 cdn 是前端的公共库,还是有挂的概率的。这个东西是保证挂了以后能切换去能用的。t/536934
        58
    tonylau   30 天前 via Android
    套路云有个叫“全局流量管理”的产品,集成了健康度检查、容灾自动切换方案、流量负载均摊等,跟楼主说的需求有些类似,可以了解下。
        59
    dorothyREN   29 天前
    cdn 你是不用担心了,但是你该担心你这个小东西啥时候挂了
        60
    Foxkeh   29 天前
    前段时间一个周六 BootCDN 挂了之后,
    前端工程师给出的对策是同时配置多个 CDN 前端库.
    当时很惊讶,但没问实现原理.
        61
    KENNHI   29 天前 via Android
    @Jackyxiaoc 说实话每次遇到这种能打开网站结果 css/js 没法加载的情况的时候,我都在想干脆直接把这些东西放在源服务器完事了。反正这样一来,能打开网站,js 之类的自然能加载;打不开网站能加载也没用。
    我说智能解析是指你可以把这些库放在不同的(自己的) CDN 上,不同的线路访问不同的 CDN。听说有的 CDN 对移动好,有的对电信好之类的 hhh。其实有了任播或者 BGP,完全不需要依赖 CDN 之类的也可以,直接放源服务器省事了。
        62
    Jackyxiaoc   27 天前
    @dorothyREN 付费的 cdn 是不用担心,公共的前端库还是会挂的。

    @Foxkeh 求大神给点方向。

    @KENNHI 嗯嗯,谢谢。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1258 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 30ms · UTC 17:22 · PVG 01:22 · LAX 09:22 · JFK 12:22
    ♥ Do have faith in what you're doing.