处理公共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。欢迎访问