处理公共CDN突然失效的情况
公共CDN的使用
刚开始开发我的博客时，使用的bootcdn，发现他们被黑过，虽然想骂那些“黑客”，但是我们也没办法去防范，只能从自己的网站上入手解决。
那时我还没技术解决这个问题，网上搜过，大都只提问题不提解决。。。
如今尝试一番暂且解决了该问题。(一切建立在源站没被黑的前提下)
思考方案
浏览器加载js是顺序执行的，这里不提async和defer，只提onerror。
考虑以下HTML(chrome测试):
<head>
// ------ 方法1 -----
<script src="https://bootcdn.cn/jquery.min.js" onerror="this.src='mystatic/jquery.min.js'"></script>
// ------- END ------- // ------ 方法2 -----
<script>
function exchange(e, s){
let new_s = document.createElement('script');
new_s.src = s;
document.head.insertBefore(new_s, e);
e.remove();
}
</script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" onerror="exchange(this, 'mystatic/jquery.min.js')"></script>
// ------- END -------
</head>
<body>
<div id="main">something</div>
<script>
window.onload = ()=>{
$('#main').text('other thing');
}
</script>
</body>
- 方法一：萌新错误。浏览器仅请求bootcdn，失败后修改src，但js文件和img不同，浏览器不会下载`mystatic/jquery.min.js`而是继续向下执行，到`$`处报错。
- 方法二：浏览器请求bootcdn，失败后执行`exchange`函数创建一个新的`<script>`并替换bootcdn。观察到浏览器下载了`mystatic/jquery.min.js`，并且正确执行了onload函数，测试成功。
那么为什么不用第二种方法呢？ ---- 下面说处理无刷新加载。
改进优化
1. onload问题
如果从无刷新加载下进入某个页面page.html，而且有一个page.js文件需要监听`window.onload`以执行操作。显然无刷新加载时，onload之前就已经触发了，JQuery的$(document).ready()可以解决此问题，这里用原生js解决。
function domready(callback) {
if (document.readyState === 'complete') {
callback();
} else {
let c = function () {
callback();
window.removeEventListener('load', c);
};
window.addEventListener('load', c);
}
}
加载js时检查readyState，如果DOM已加载完毕。那么不必监听onload，直接执行。反之正常监听。
2. js依赖问题
如果page.js的初始化需要使用highlightjs，仅仅先添加highlightjs后添加page.js到`<head>`也无法保证page.js会在highlightjs执行后执行，解决方法详见[无刷新加载](https://blog.phyer.cn/article/8935)
我的个人博客：https://blog.phyer.cn。欢迎访问
处理公共CDN突然失效的情况的更多相关文章
- 推荐国内外优秀+免费CDN加速站点及公共cdn加速库
-----------------------------------------------------------------免费CDN加速站点 1.CloudFlare CloudFlare可能 ...
- 推荐两个国外公共CDN服务
最近这个国家信息安全问题舆论形势又见紧张,Google的访问又被强力堵截,谷歌的公共CDN也顺带被波及,像AngularJS这样的前卫js库,国内几大公共CDN服务都不提供支持.国外目前两大第三方公共 ...
- 公共cdn的js和css库
使用cdn的js和css公用库 为什么要使用cdn,用cdn资源有什么好处了,可以看看yahoo性能建议,中间有一条的http://developer.yahoo.com/performance/ru ...
- 国内网站常用的一些 CDN 公共库加速服务
CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...
- 盘点国内网站常用的一些 CDN 公共库加速服务
CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...
- CDN公共库、前端开发常用插件一览表(VendorPluginLib)
=======================================================================================前端CDN公共库===== ...
- 国内站点经常使用的一些 CDN 静态资源公共库加速服务
web开发人员们的福利来了..旨在为大家提供更快很多其它更好的静态资源库的CDN载入库方案! CDN公共库是指将经常使用的JS库存放在CDN节点,以方便广大开发人员直接调用. 与将JS库存放在serv ...
- 盘点国内网站常用的一些 CDN 公共库加速服务（转载）
百度CND jQuery 地址:<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></scri ...
- 前端CDN公共库
通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问.节省服务器流量.提升你的网站用户体验.本文将介绍国内比较常用的几种免费的CDN库,包括百度.新浪.360.又拍和七牛等. 百度CDN公共库 ...
随机推荐
- idea转eclipse快捷键
1.打开idea,点击上方菜单栏中的File, 2.在弹出的setting页面中左侧导航中选择Keymap:在keymaps下拉列表中选择Eclipse:如果想要使用这个快捷键风格,则点击右侧的cop ...
- Python常用的数据结构详解
数据结构:通俗点说,就是储存大量数据的容器.这里主要介绍Python的4种基本数据结构:列表.字典.元组.集合. 格式如下: 列表:list = [val1,val2,val3,val4],用中括号: ...
- spring mvc 设置@Scope("prototype")
spring中bean的scope属性,有如下5种类型: singleton 表示在spring容器中的单例,通过spring容器获得该bean时总是返回唯一的实例 prototype表示每次获得be ...
- LeetCode No.70,71,72
No.70 ClimbStairs 爬楼梯 题目 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. ...
- Angular开发者指南（六）作用域
什么是作用域? 作用域是引用应用程序模型的对象. 它是表达式的执行上下文. 作用域以层次结构排列,模仿应用程序的DOM结构,它可以观察表达式和传播事件. 作用域的特征 Scope提供API($watc ...
- SQL中的子查询
目录 WHERE子查询 HAVING子查询 FROM子查询 SELECT子查询 EXISIT子查询 查询薪资排名的员工信息(面试) z子查询就是将一个查询(子查询)的结果作为另一个查询(主查询)的数据 ...
- firefox上网慢
由于Chromium浏览器,打字的时候经常会跳字母,所以就换了firefox浏览器,但是FF上网的时候特别慢,而且大部分时间是花费在解析域名上.因此到网上找了许多资料,最终解决方法如下. 1.安装dn ...
- pycharm全局搜索快捷键无反应
原因:和搜狗输入法的快捷键冲突
- 接口测试-chap2-关于重定向
重定向: 301:资源永久转移 302:资源暂时转移到另一个地址了 1.如果请求接口时发生了重定向,python会自动跟随重定向,对重定向地址发起请求,最后只能得到重定向地址的响应结果.而看不到重定向 ...
- Win32 计时器
计时器精确吗? 计时器并不精确.有两个原因: 原因一:Windows计时器是硬件和ROM BIOS架构下之计时器一种相对简单的扩充.回到Windows以前的MS-DOS程序写作环境下,应用程式能够通过 ...