Code Monkey home page Code Monkey logo

jsdelivr-auto-fallback's Introduction

jsdelivr-auto-fallback NPM Version jsdelivr-auto-fallback

修复 cdn.jsdelivr.net 无法访问的问题

由于一些原因,cdn.jsdelivr.net 在一些地区无法访问 (如 issue)。在网站里添加上 jsdelivr-auto-fallback 代码,可以自动检测 cdn.jsdelivr.net 是否可用, 如果不可用时,会自动把所有 js, css, image 的地址切换到其他可用的域名。

比如

  • fastly.jsdelivr.net
  • gcore.jsdelivr.net
  • 更多

你也可以自己准备一个静态资源服务器,只把网站用到的 js, css, img 文件放进去,和 cdn.jsdelivr.net 保持同样的文件目录结构,相当于 cdn.jsdelivr.net 的一个部分镜像。或者建一个 cdn.jsdelivr.net 的 proxy 服务器。然后把静态资源服务器网址放到列表里。这样的话,在 jsdelivr.net 可用的地区或时候,用 jsdelivr.net,不可用时,用自己的静态资源服务器。

ex.

  const DEST_LIST = [
    'cdn.jsdelivr.net',
    'fastly.jsdelivr.net',
    'gcore.jsdelivr.net',
+   'static.mysite.xxx',
  ];

适用场景

如果可以切换到其他 CDN,建议尽量切换。如果是以下几种情况,可以考虑使用本项目。

  • 网站的大部分用户在**大陆以外,使用 cdn.jsdelivr.net 会更快
  • 相信(希望)有一天**大陆还能正常访问 cdn.jsdelivr.net
  • 网站切换到其他 CDN 工作量很大,或无法切换
  • 网站的图片在 cdn.jsdelivr.net 上面

添加方法

  1. 直接复制 index.jsindex.min.js 里的内容,加到网站里。强烈建议添加到 head 标签最上面。
  2. 所有 script 标签加上 defer 属性。如果原来有 async 属性,可以跳过。这个可以避免 pending 状态带来的等待时间,大大提升性能。

如果是 hexo 生成的网站,可以安装 hexo-filter-jsdelivr-auto-fallback 插件,自动添加。

用户脚本

作为用户,你也可以使用本油猴脚本来将网站中的 cdn.jsdelivr.net 替换为可以访问的域名。

  1. 安装 Tampermonkey (自行百度)
  2. 前往此处安装脚本: greasyfork

感谢 DreamOfIce 贡献油猴脚本。

Release Note

v0.2.3 (2023/7/10)

  • 修改 Greasemonkey 兼容性问题

v0.2.2 (2022/5/30)

  • 添加一个 TamperMonkey 脚本,使用户可以替换网站中无法访问的域名

v0.2.0 (2022/5/24)

  • 检测结果保存到 localStorage,下一次加载时,无需检测,直接使用检测结果中的 fallback domain,缩短等待切换时间
  • 考虑网络慢的环境,检测连接 timeout 从 1 秒改回到 2 秒,由于保存检测结果,第二次加载时,比之前版本还快

v0.1.0 (2022/5/24)

  • 从几个可用的域名中,自动选择连接最快的域名 (#5)
  • 检测连接 timeout 从 2 秒改为 1 秒,缩短等待切换时间

v0.0.3 (2022/5/22)

  • 替换内联样式 style 中 url() 中的内容
  • 优化代码,缩小代码量

v0.0.2 (2022/5/20)

  • 为了提升性能,检测方式由 img 标签改成 link 标签 (css)
  • 建议 script 标签都加上 defer 属性,可以大大提升性能
  • timeout 时间由 3 秒改成 2 秒

问题反馈

https://github.com/PipecraftNet/jsdelivr-auto-fallback/issues

Related

License

Copyright (c) 2022 Pipecraft. Licensed under the MIT license.

>_

Pipecraft PZWD BestXTools

jsdelivr-auto-fallback's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

jsdelivr-auto-fallback's Issues

The userscript won't work on firefox with greasemonkey.

Due to how firefox handle document-start,the test facility of the script won't work.
See greasemonkey/greasemonkey#2515

Here my own modified one that currently works.

// ==UserScript==
// @name Jsdelivr Auto Fallback
// @namespace https://github.com/PipecraftNet/jsdelivr-auto-fallback
// @version 0.2.2
// @author PipecraftNet&DreamOfIce
// @description 修复 cdn.jsdelivr.net 无法访问的问题
// @homepage https://github.com/PipecraftNet/jsdelivr-auto-fallback
// @supportURL https://github.com/PipecraftNet/jsdelivr-auto-fallback/issues
// @license MIT
// @match *://*/*
// @run-at document-start
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==

function act() {
  'use strict';
  let fastNode;
  let failed;
  let isRunning;
  const DEST_LIST = [
    'cdn.jsdelivr.net',
    'unpkg.com',
    'testingcf.jsdelivr.net',
    'test1.jsdelivr.net',
    'fastly.jsdelivr.net',
    'gcore.jsdelivr.net',
  ];
  const PREFIX = '//';
  const SOURCE = DEST_LIST[0];
  const starTime = Date.now();
  const TIMEOUT = 800;
  const STORE_KEY = 'jsdelivr-auto-fallback';
  const TEST_PATH = '/[email protected]/object.js?';
  const shouldReplace = (text) => text && text.includes(PREFIX + SOURCE);
  const replace = (text) => text.replace(PREFIX + SOURCE, PREFIX + fastNode);
  const setTimeout = window.setTimeout;
  const $ = document.querySelectorAll.bind(document);

  const replaceElementSrc = () => {
    let element;
    let value;
    for (element of $('link[rel="stylesheet"]')) {
      value = element.href;
      if (shouldReplace(value) && !value.includes(TEST_PATH)) {
        element.href = replace(value);
      }
    }

    for (element of $('script')) {
      value = element.src;
      if (shouldReplace(value)) {
        const newNode = document.createElement('script');
        newNode.src = replace(value);
        element.defer = true;
        element.src = '';
        element.before(newNode);
        element.remove();
      }
    }

    for (element of $('img')) {
      value = element.src;
      if (shouldReplace(value)) {
        // Used to cancel loading. Without this line it will remain pending status.
        element.src = '';
        element.src = replace(value);
      }
    }

    // All elements that have a style attribute
    for (element of $('*[style]')) {
      value = element.getAttribute('style');
      if (shouldReplace(value)) {
        element.setAttribute('style', replace(value));
      }
    }

    for (element of $('style')) {
      value = element.innerHTML;
      if (shouldReplace(value)) {
        element.innerHTML = replace(value);
      }
    }
  };

  const tryReplace = () => {
    if (!isRunning && failed && fastNode) {
      console.warn(SOURCE + ' is not available. Use ' + fastNode);
      isRunning = true;
      setTimeout(replaceElementSrc, 0);
      // Some need to wait for a while
      setTimeout(replaceElementSrc, 20);
      // Replace dynamically added elements
      setInterval(replaceElementSrc, 500);
    }else{
      console.log("Use original target.");
    }
  };

  const checkAvailable = (url, callback) => {
    let timeoutId;
    const newNode = document.createElement('link');
    const handleResult = (isSuccess) => {
      if (!timeoutId) {
        return;
      }

      clearTimeout(timeoutId);
      timeoutId = 0;
      // Used to cancel loading. Without this line it will remain pending status.
      if (!isSuccess) newNode.href = 'data:text/plain;base64,';
      newNode.remove();
      callback(isSuccess);
      console.log(url + " is Ok..");
    };

    timeoutId = setTimeout(handleResult, TIMEOUT);

    newNode.addEventListener('error', () => handleResult(false));
    newNode.addEventListener('load', () => handleResult(true));
    newNode.rel = 'prefetch';
    newNode.text = 'text/javascript';
    newNode.href = url + TEST_PATH + starTime;
    console.log("Testing .. " + url);
    if(document.head !== null) {
    document.head.insertAdjacentElement('afterbegin', newNode);
    }else{
      console.log("DOM not fully ready!");
    }
  };

  const cached = (() => {
    try {
      // eslint-disable-next-line new-cap
      return Object.assign({}, GM_getValue(STORE_KEY));
    } catch {
      return {};
    }
  })();

  const main = () => {
    cached.time = starTime;
    cached.failed = false;
    cached.fastNode = null;

    for (const url of DEST_LIST) {
      checkAvailable('https://' + url, (isAvailable) => {
        // console.log(url, Date.now() - starTime, Boolean(isAvailable));
        if (!isAvailable && url === SOURCE) {
          failed = true;
          cached.failed = true;
        }

        if (isAvailable && !fastNode) {
          fastNode = url;
        }

        if (isAvailable && !cached.fastNode) {
          cached.fastNode = url;
        }

        tryReplace();
      });
    }

    setTimeout(() => {
      // If all domains are timeout
      if (failed && !fastNode) {
        fastNode = DEST_LIST[1];
        tryReplace();
      }

      // eslint-disable-next-line new-cap
      GM_setValue(STORE_KEY, cached);
    }, TIMEOUT + 200);
  };

  if (
    cached.time &&
    starTime - cached.time < 60 * 60 * 1000 &&
    cached.failed &&
    cached.fastNode
  ) {
    failed = true;
    fastNode = cached.fastNode;
    tryReplace();
    setTimeout(main, 1000);
  } else {
    main();
  }
}
const observer = new MutationObserver(() => {
  if(document.head !== null) {
    observer.disconnect();
    act();
    console.log("Head is OK now");
  }
});
const observerOptions = {
  childList: true,
  subtree: true,
};
observer.observe(document,observerOptions);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.