公共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突然失效的情况的更多相关文章

  1. 推荐国内外优秀+免费CDN加速站点及公共cdn加速库

    -----------------------------------------------------------------免费CDN加速站点 1.CloudFlare CloudFlare可能 ...

  2. 推荐两个国外公共CDN服务

    最近这个国家信息安全问题舆论形势又见紧张,Google的访问又被强力堵截,谷歌的公共CDN也顺带被波及,像AngularJS这样的前卫js库,国内几大公共CDN服务都不提供支持.国外目前两大第三方公共 ...

  3. 公共cdn的js和css库

    使用cdn的js和css公用库 为什么要使用cdn,用cdn资源有什么好处了,可以看看yahoo性能建议,中间有一条的http://developer.yahoo.com/performance/ru ...

  4. 国内网站常用的一些 CDN 公共库加速服务

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...

  5. 盘点国内网站常用的一些 CDN 公共库加速服务

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...

  6. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  7. 国内站点经常使用的一些 CDN 静态资源公共库加速服务

    web开发人员们的福利来了..旨在为大家提供更快很多其它更好的静态资源库的CDN载入库方案! CDN公共库是指将经常使用的JS库存放在CDN节点,以方便广大开发人员直接调用. 与将JS库存放在serv ...

  8. 盘点国内网站常用的一些 CDN 公共库加速服务(转载)

    百度CND jQuery 地址:<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></scri ...

  9. 前端CDN公共库

    通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问.节省服务器流量.提升你的网站用户体验.本文将介绍国内比较常用的几种免费的CDN库,包括百度.新浪.360.又拍和七牛等. 百度CDN公共库 ...

随机推荐

  1. kubernetes flannel 网卡绑定错误,故障排查

    kubernetes 新加了个node,状态Ready,但调度过去的任务,都执行异常 查看异常节点日志 `Error adding net work: open run/flannel/subnet. ...

  2. QTP基本循环异常遍历(代码方式实现)

    0 环境 系统环境:win7 1 前言 在正常循环的基础下 添加异常处理遍历 一些基本操作 请看正常循环 https://www.cnblogs.com/my-ordinary/p/11739180. ...

  3. 吴裕雄--天生自然python学习笔记:python爬虫PM2.5 实时监测显示器

    PM2.5 对人体的健康影响很大,所以空气中的 PM2.5 实时信息受到越来越多的关注. Python 的 Pandas 套件不但可以自动读取网页中的表格 数据 , 还可对数据进行修改.排序等处理,也 ...

  4. Cow Routing(最短路spfa)

    题:https://www.luogu.org/problem/P3115 题意:给出起点A,终点B,N条路线,下面没俩行一个路线,第一行是俩个数,第一个为这条路线的花费,第二个为这条路线经过的点数n ...

  5. C#常用到的命令及常用控件的属性

    Application.Exit()应用程序退退出 this.Close()当前窗口退出 int h = DateTime.Now.Hour;      //获取当前时间的小时部分 int m = D ...

  6. python3下scrapy爬虫(第七卷:编辑器内执行scrapy)

    之前我们都是在终端切入到scrapy的路境内执行爬虫的,你要多敲多少行的字节,所以这次我们谈谈如何在编辑器里执行,这个你可以用在爬虫中,当你使用PYTHONWEB开发时尽量不要在编辑器内启动端口服务那 ...

  7. Qt5 提示:无法启动此程序,计算机丢失Qt5Widgetsd.dll的解决方法

    Qt5工程编译生成可执行的exe文件之后,运行提示无法启动此程序,计算机丢失Qt5Widgetsd.dll… 原因是没有设置好Qt5的环境变量,解决方法如下: 1.打开[环境变量],(不同的系统会有不 ...

  8. 蛋白质修饰|phosphors|mascot+X|

    生物医学大数据 重点:蛋白质定量 新蛋白可以是全新的蛋白质,也可以是知结构但未知功能的蛋白质,也可以是知道结构有新功能的蛋白质. 新蛋白鉴定可以使用以下方法. 基于基因组,可以基因组中的coding区 ...

  9. SpringMVC学习笔记三:Controller的返回值

    springMVC的返回值有ModelAndView,String,void,Object类型 项目目录树: 该项目是在前面项目的基础上修改的,这里的pom.xml文件需要加入使用到的包,应为@Res ...

  10. 双股同时上市!小米IPO是想要玩场大的?

    ​近日,据相关媒体报道,有相关人士称小米IPO最终可能敲定A+H股两地发行.但目前还未得到小米官方证实.此前关于小米要上市的消息已经流传已久了,从雷军刚开始的矢口否认到后来的默认,再到后来相关消息愈来 ...