公共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,直接执行。反之正常监听。

  1. js依赖问题

如果page.js的初始化需要使用highlightjs,仅仅先添加highlightjs后添加page.js到<head>也无法保证page.js会在highlightjs执行后执行,这就需要同步处理下载,解决方法详见无刷新加载

我的个人博客:https://blog.phyer.cn。欢迎访问😁


yunyuyuan
42 声望2 粉丝