公共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. 谁能率先挖掘出5G金矿？

    现在,消费者已经习惯4G的存在,它好像另外的一个太阳,点亮了夜生活,也丰富了白天的生活:随时随地的直播.视频通话.移动支付.嘀嘀打车等等,这些都因4G网络和智能手机而快速发展,帮助消费者清理碎片时间之 ...

  2. android采用MVP漫画APP、适配刘海屏、小黄车主界面、录音波浪动画、综合APP等源码

    Android精选源码 一款采用MVP架构的仿完整漫画APP源码 Android适配刘海屏幕 基于Xmpp协议的即时通讯社交软件(客户端+服务端) Android小黄车(ofo)app主页菜单效果 一 ...

  3. every|each|the用于姓氏的复数形式|comrades-in-arms|clothes are|word|steel|affect|effect

    ________ man in the crowd raised his hand.  A. All  B. Each  C. Every  D. Both 题目解析 考查代词的用法.此句意思是:人群 ...

  4. 剖析String,StringBuffer,StringBuilder异同

    近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下,便 ...

  5. hadoop datanode 启动正常，但master无法识别（50030不显示datanode节点）

    start-all.sh 启动 坑爹 找不出错 试了各种办法,重新formaet 查看 集群ID是否相同.都无效 日志也没看到错 按官网方法手动一步步启,问题照旧 master节点,yarn name ...

  6. python-倒序循环

    有时候循环需要用到倒序,所以整理一下倒序循环的方法 方法1: 如果要倒序遍历访问序列中的元素,可以对该序列使用reversed() 函数,reversed函数会生成一份倒序列表的拷贝,但是不会改变原列 ...

  7. 事件和异常的传播 · 农场主的黑科技.

    inBound事件的传播 何为inBound事件以及ChannelInboundHandler ChannelRead事件的传播ChannelRead是典型的inbound事件,以他为例了解inbou ...

  8. spring security之Remember Me

    spring-security.xml配置 环境: spring版本:5.0.7.RELEASE spring-security.xml引入: http://www.springframework.o ...

  9. python Django请求生命周期

    首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串. 在Django中,当我们访问一个的url时,会通过路由匹配进入相应的html网页中. Django的请求生命周期是指当用户在浏览器上输 ...

  10. python的IO

    格式化输出 格式化输出是指通过print()等函数向指定的地方(比如屏幕)输出指定格式的内容 格式: age = 18 name = "xiaohua" print("我 ...