v0.0.2. Improve performance.

README.md

@@ -2,7 +2,7 @@
 
 > 修复 cdn.jsdelivr.net 无法访问的问题
 
-由于一些原因，`cdn.jsdelivr.net` 在一些地区无法访问。在网站里添加上 `jsdelivr-auto-fallback` 代码，可以自动检查 `cdn.jsdelivr.net` 是否可用，
+由于一些原因，`cdn.jsdelivr.net` 在一些地区无法访问。在网站里添加上 `jsdelivr-auto-fallback` 代码，可以自动检测 `cdn.jsdelivr.net` 是否可用，
 如果不可用时，会自动把所有 **js, css, image** 的地址切换到其他可用的域名。
 
 比如
@@ -12,8 +12,16 @@
 
 ## 添加方法
 
-1. 直接复制 [index.js](index.js) 或 [index.min.js](index.min.js) 里的内容，加到网站里
-2. 网站加载这个 js 文件 <https://gcore.jsdelivr.net/gh/PipecraftNet/jsdelivr-auto-fallback@main/index.min.js>
+1. 直接复制 [index.js](index.js) 或 [index.min.js](index.min.js) 里的内容，加到网站里。强烈建议添加到 head 标签最上面。
+1. 所有 `script` 标签加上 `defer` 属性。如果原来有 `async` 属性，可以跳过。这个可以避免 `pending` 状态带来的等待时间，大大提升性能。
+
+## Release Note
+
+### v0.0.2 (2022/5/20)
+
+- 为了提升性能，检测方式由 `img` 标签改成 `link` 标签 (css)
+- 建议 `script` 标签都加上 `defer` 属性，可以大大提升性能
+- `timeout` 时间由 3 秒改成 2 秒
 
 ## 问题反馈
 

index.js

@@ -1,27 +1,40 @@
-(function () {
+(function (document) {
   const SOURCE = 'https://cdn.jsdelivr.net';
   const DEST = 'https://gcore.jsdelivr.net';
   const $ = document.querySelectorAll.bind(document);
   const checkAvailable = (callback) => {
-    const img = new Image();
-    const timeoutId = setTimeout(function () {
+    let timeoutId;
+    const newNode = document.createElement('link');
+    newNode.rel = 'stylesheet';
+    newNode.text = 'text/css';
+    const onError = () => {
+      if (!timeoutId) {
+        return;
+      }
+
+      clearTimeout(timeoutId);
+      timeoutId = 0;
+      newNode.href = 'about:blank';
+      newNode.remove();
       callback(false);
-    }, 3000);
-    img.addEventListener('load', function () {
+    };
+
+    timeoutId = setTimeout(onError, 2000);
+    newNode.addEventListener('error', onError);
+    newNode.addEventListener('load', function () {
+      newNode.remove();
       clearTimeout(timeoutId);
       callback(true);
     });
 
-    img.src = SOURCE + '/favicon.ico';
+    newNode.href =
+      SOURCE +
+      '/gh/PipecraftNet/jsdelivr-auto-fallback@main/empty.css?' +
+      Date.now();
+    document.head.insertAdjacentElement('afterbegin', newNode);
   };
 
   const replaceElementSrc = () => {
-    for (const element of $('img')) {
-      if (element.src && element.src.includes(SOURCE)) {
-        element.src = element.src.replace(SOURCE, DEST);
-      }
-    }
-
     for (const element of $('link[rel="stylesheet"]')) {
       if (element.href && element.href.includes(SOURCE)) {
         element.href = element.href.replace(SOURCE, DEST);
@@ -32,10 +45,21 @@
       if (element.src && element.src.includes(SOURCE)) {
         const newNode = document.createElement('script');
         newNode.src = element.src.replace(SOURCE, DEST);
-        element.after(newNode);
+        element.defer = true;
+        element.src = '';
+        element.before(newNode);
         element.remove();
       }
     }
+
+    for (const element of $('img')) {
+      if (element.src && element.src.includes(SOURCE)) {
+        const source = element.src;
+        // Used to cancel loading. Without this line it will remain pending status.
+        element.src = '';
+        element.src = source.replace(SOURCE, DEST);
+      }
+    }
   };
 
   checkAvailable(function (isAvailable) {
@@ -47,6 +71,6 @@
 
     replaceElementSrc();
     // Replace dynamically added elements
-    setInterval(replaceElementSrc, 2000);
+    setInterval(replaceElementSrc, 500);
   });
-})();
+})(document);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsdelivr-auto-fallback",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "修复 cdn.jsdelivr.net 无法访问的问题",
   "main": "index.js",
   "scripts": {