当前位置：首页 > article >正文

怎样在html中异步加载js文件，以避免js文件太大而影响页面打开速度？

article 2024/12/23 18:58:25

在HTML中异步加载JS文件可以防止因JS文件过大而阻塞页面渲染。

异步加载js文件方法：

1、等待DOM完全加载

等待HTML文档解析完成，即所有的DOM元素都已经被浏览器读取并构建。
实现这一点可以通过监听DOMContentLoaded事件，这个事件会在文档被完全加载和解析后触发，而无需等待样式表、图像和子框架完成加载。

代码：

document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
});

2、动态创建script元素

通过动态创建script元素可以加载一个JS文件。这种方法可以控制脚本的加载时机。

代码：

var script = document.createElement('script');
script.src = 'your-script.js';
document.head.appendChild(script);

结合上述两个技术方案：等待DOM完全加载后，动态创建script元素，就实现了异步加载JS文件而不影响HTML加载和页面渲染。

最终代码：

document.addEventListener("DOMContentLoaded", function() {
var script = document.createElement('script');
script.src = 'your-script.js';
document.head.appendChild(script);
});

如果不想让他人知道实现原理，可以进行JS代码加密混淆，比如用JShaman、JsJiaMi.online混淆加密上述JS代码后，代码会变成下面的加密形式：

var _0x52c4c = ["|", "", "", "|", "", "", "", ""];
function _0x7d7ac(_c) {
  var _0x87f92d = "2|1|0|3|4".split(_0x52c4c[0]),
      _0x3b15aa = 0;
  while (!![]) {
    switch (+_0x87f92d[_0x3b15aa++]) {
      case 0:
        var _3 = -1;
        continue;
      case 1:
        var _2 = [];
        continue;
      case 2:
        var _ = {
          push: 32,
          add: 33,
          sub: 34,
          mul: 35,
          div: 36,
          pop: 37,
          xor: 38
        };
        continue;
      case 3:
        var _4 = -1;
        continue;
      case 4:
        while (eval(String.fromCharCode(95, 51, 32, 60, 32, 95, 99, 46, 108, 101, 110, 103, 116, 104))) {
          eval(String.fromCharCode(95, 51, 43, 43));
          switch (_c[_3]) {
            case _.push:
              {
                eval(String.fromCharCode(95, 51, 43, 43));

                _2.push(_c[_3]);
                eval(String.fromCharCode(95, 52, 43, 43));
                break;
              }
            case _.add:
              {
                var op_1 = _2[eval(String.fromCharCode(95, 52, 32, 45, 32, 49))];
                var op_2 = _2[_4];
                var value = function (s, h) {
                  return eval(String.fromCharCode(115, 32, 43, 32, 104));
                }(op_1, op_2);
                _2.push(value);
                eval(String.fromCharCode(95, 52, 43, 43));
                break;
              }
            case _.sub:
              {
                var op_1 = _2[eval(String.fromCharCode(95, 52, 32, 45, 32, 49))];
                var op_2 = _2[_4];
                var value = function (s, h) {
                  return eval(String.fromCharCode(115, 32, 45, 32, 104));
                }(op_1, op_2);
                _2.push(value);
                eval(String.fromCharCode(95, 52, 43, 43));
                break;
              }
            case _.mul:
              {
                var op_1 = _2[eval(String.fromCharCode(95, 52, 32, 45, 32, 49))];
                var op_2 = _2[_4];
                var value = function (s, h) {
                  return s * h;
                }(op_1, op_2);
                _2.push(value);
                eval(String.fromCharCode(95, 52, 43, 43));
                break;
              }
            case _.div:
              {
                var op_1 = _2[eval(String.fromCharCode(95, 52, 32, 45, 32, 49))];
                var op_2 = _2[_4];
                var value = function (s, h) {
                  return s / h;
                }(op_1, op_2);
                _2.push(value);
                eval(String.fromCharCode(95, 52, 43, 43));
                break;
              }
            case _.xor:
              {
                var op_1 = _2[_4 - 1];
                var op_2 = _2[_4];
                var value = function (s, h) {
                  return s ^ h;
                }(op_1, op_2);
                _2.push(value);
                _4++;
                break;
              }
            case _.pop:
              {
                return _2[_4];
              }
          }
        }
        continue;
    }
    break;
  }
}

window['\x64\x6f\x63\x75\x6d\x65\x6e\x74']['\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72']("dedaoLtnetnoCMOD"['\x73\x70\x6c\x69\x74'](_0x52c4c[1])['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](_0x52c4c[2]), function () {
  var _0x26egfe = "4|0|1|2|3".split(_0x52c4c[3]),
      _0x74gdc = 0;
  while (!![]) {
    switch (+_0x26egfe[_0x74gdc++]) {
      case 0:
        var _0xa4f = document['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']("tpircs"['\x73\x70\x6c\x69\x74'](_0x52c4c[4])['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](_0x52c4c[5]));
        continue;
      case 1:
        _0x6b5cb = eval(String.fromCharCode(95, 48, 120, 55, 100, 55, 97, 99, 40, 91, 51, 50, 44, 32, 54, 51, 54, 53, 50, 54, 44, 32, 51, 50, 44, 32, 54, 51, 54, 53, 49, 56, 44, 32, 51, 56, 44, 32, 51, 55, 93, 41, 32, 43, 32, 95, 48, 120, 55, 100, 55, 97, 99, 40, 91, 51, 50, 44, 32, 50, 56, 53, 54, 54, 50, 44, 32, 51, 50, 44, 32, 50, 56, 53, 54, 54, 48, 44, 32, 51, 56, 44, 32, 51, 55, 93, 41));
        continue;
      case 2:
        _0xa4f['\x73\x72\x63'] = "sj.tpircs-ruoy"['\x73\x70\x6c\x69\x74'](_0x52c4c[6])['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](_0x52c4c[7]);
        continue;
      case 3:
        document['\x68\x65\x61\x64']['\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64'](_0xa4f);
        continue;
      case 4:
        var _0x6b5cb;
        continue;
    }
    break;
  }
});

J萨满：