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

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

异步加载js文件方法:

1、等待DOM完全加载

等待HTML文档解析完成,即所有的DOM元素都已经被浏览器读取并构建。

实现这一点可以通过监听DOMContentLoaded事件,这个事件会在文档被完全加载和解析后触发,而无需等待样式表、图像和子框架完成加载。

代码:

javascript 复制代码
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
});

2、动态创建script元素

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

代码:

javascript 复制代码
var script = document.createElement('script');
script.src = 'your-script.js';
document.head.appendChild(script);

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

最终代码:

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

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

javascript 复制代码
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萨满:

javascript 复制代码
https://www.jshaman.com/

JS加密在线:

javascript 复制代码
https://www.jsjiami.online/

原文链接:怎样在html中异步加载js文件,以避免js文件太大而影响页面打开速度?

相关推荐
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_37:(深入掌握 CustomEvent 自定义事件接口)
前端·javascript·ui·html·音视频
whinc8 小时前
JavaScript技术周刊 2026年第18周
javascript
码海扬帆:前端探索之旅8 小时前
深度定制 uni-combox:新增功能详解与实战指南
前端·vue.js·uni-app
谷雨不太卷8 小时前
进程的状态码
java·前端·算法
打小就很皮...8 小时前
基于 Python + LangChain + RAG 的知识检索系统实战
前端·langchain·embedding·rag
whinc8 小时前
JavaScript技术周刊 2026年第17周
javascript
BJ-Giser8 小时前
Cesium 烟雾粒子特效
前端·可视化·cesium
空中海8 小时前
02 ArkTS 语言与工程规范
java·前端·spring