Question

我问这个的原因是因为我想从头开始编写自己的javascript框架。但是，随着我的代码的扩展，我的代码量也会如此。

为了保持清晰的概述，我认为将代码拆分为单独的文件并让框架通过将文件添加到文档的标题来加载文件是明智的。

它不是那么大（<50kb），但考虑到它可能会变得更大;这样做有很大的性能损失，还是有更好的方法来做到这一点？

更新 @Antony

捆绑和缩小绝对是我的待办事项清单。我确实希望这样做可以减速。仍然，在解析过程中不会动态地向头部添加文件会导致浏览器重新考虑它的解析和绘制过程吗？这里有罚款吗？

功能

如果您来到这里寻找通过javascript加载外部文件的方法

var loadExternalFile = function (id, filename, filetype, target, callback) {
    if (typeof target === "undefined") {
        target = "head";
    }
    if (filetype === "js") { //if filename is an external JavaScript file
        var fileref = document.createElement('script');
        fileref.type = "text/javascript";
        fileref.src = filename;
        fileref.id = id;
        if (typeof callback === "function") {
            fileref.onload = callback;
        }
    }
    else if (filetype === "css") { //if filename is an external CSS file
        var fileref = document.createElement("link");
        fileref.rel = "stylesheet";
        fileref.type = "text/css";
        fileref.href = filename;
        fileref.id = id;
        if (typeof callback === "function") {
            fileref.onload = callback;
        }
    }
    if (typeof fileref !== "undefined") {
        document.getElementsByTagName(target)[0].appendChild(fileref);
    }
};

// Example
loadExternalFile("example_id", "js/examplefile.js", "js", "document.body");

Answer 1

使用JS加载任何内容都会从浏览器的预加载扫描程序中隐藏这些资源。预装扫描程序在任何JS运行之前很早就运行，甚至在构建真正的DOM之前运行，并以浏览器认为最佳的方式安排资源加载。

在某些情况下，使用JS加载资源可能是合理的，例如

并非为所有用户都加载了所有文件（但请记住，media可以使用link），并且它们足够大，以至于带宽节省比延迟更重要。
您已经测量并发现浏览器没有以合理的顺序加载这些资源（并且一些不重要的资源阻止了对关键资源的加载）。在某些情况下，您可能仍然不需要JS，例如不重要的样式可以在<link> <body>中（现在是有效的HTML），theres'<link rel=preload as=…>等。

在较旧的浏览器（IE，Android）中，处理脚本和CSS的加载事件存在错误，因此请使用已处理边缘情况的现有加载程序。

Answer 2

在性能方面，它会在页面中添加大约十几个js文件，但不会产生巨大影响。

我建议在进行开发时使用这种方法，然后将整个库编译成一个缩小的文件，然后再将其用于生产。

如果您想了解各种方法，请参阅这篇文章：
How do I include a JavaScript file in another JavaScript file?

加载动态javascript和CSS文件是个坏主意吗？

2 个答案: