zan-cdn-fallback

v0.0.6

Published

2 years ago

### 原理

Downloads

0High
0Medium
0Low

jinphen

cdn fallback

原理

当js加载失败时会触发onerror事件，所以拿到加载失败的url，把host换成备用的，然后重新加载。

例如：目前我们使用的cdn域名有两个： b.yzcdn.cn、su.yzcdn.cn，当我们去请求 https://b.yzcdn.cn/v2/vendor/jquery.js 时，如果失败了，我们就把b.yzcdn.cn换成su.yzcdn.cn重新加载一个这个js文件。

这种方式虽然能保证资源的重新加载，但对js这种有严格的执行顺序的有的时候重新加载会出错。

使用方式

要保证每个文件都能回退重新加载，那就得把cdn-fallback代码放到head的第一个script标签里，并保证这段代码是inline进去的。这样在window下会有一个_cdnFallback方法，所有通过src加载的js都添加上onerror="_cdnFallback(this)"处理方法，如下：

<script onerror="_cdnFallback(this)" src="https://b.yzcdn.cn/v2/vendor/jquery.min.js"></script>

iron项目

在iron里已经存在一个压缩过的文件了，在 resource/static/cdn_fallback.min.js中，使用 $view->loadCSS、$view->loadJS 来创建link和script标签。

在base.html里要添加$view->loadStaticContent('cdn_fallback.min.js');来加载cdn-fallbackjs到head里。

<head>
    <script>
    	<?php $view->loadStaticContent('cdn_fallback.min.js'); ?>
    </script>
    ...
</head>

如果自己手动写script src，那只要添加上 onerror处理就ok了。

node项目

在 base.html head 标签里面添加下面一段代码

{% block head_script %}
 {{ inlineJs('/node_modules/@youzan/cdn-fallback/dist/index.js') }}
{% endblock %}

Zan 框架里面的 loadJs 方法默认已经加了 onerror="_cdnFallback(this)"，业务方无需再手动添加；如果自己手动写script src，那只要添加上 onerror处理就ok了。

其它项目

把cdn-fallback包安装到本地，再把cdn-fallback/dist/index.js放到 html的head里。

日志记录

默认情况下加载失败会打 5% 的日志到日志平台： log.qima-inc.com。当10分钟超过200值就会报警。由于网络抖动，偶而保一次警是正常的。如果持续报警，那就得报告冬瓜处理

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme