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

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

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

---

它还没有那么大（性能方面，它可能会在页面中添加十几个js文件，但不会有太大的影响

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

如果您想了解各种方法，请参阅本文：

---

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

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

• 并非所有用户都可以加载所有文件（但请记住，

  媒体

  可以在

  链接

  上使用），而且它们足够大，因此节省带宽比延迟更重要
• 您已经测量并发现浏览器没有按合理的顺序加载这些资源（一些不重要的资源正在阻止加载关键资源）。在某些情况下，您可能仍然不需要JS，例如，不重要的样式可以在
  中的
  （现在是有效的HTML），还有“
  ”等

---

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

我建议使用已存在的框架，如RequireJS或SystemJS。^^^这是因为除其他外，您可以使用它们来构建预绑定的生产脚本（单数）.和/或，看看jQuery的构建链：克隆该项目并启动和运行它非常容易，因此您可以将其作为您的工具的灵感。我认为有现成的解决方案，但这不会产生更多开销吗？我编写的函数满足我的需要。我将研究您提出的框架，bu我的目的是写我自己的框架。框架中的框架听起来很可笑。你的功能现在很简单，但随着框架的增长会变得更复杂。现在你遇到了问题，例如，当一个模块需要另一个模块工作时。你实现的脚本加载是异步的，没有（像样的）调用方模块知道这一过程何时完成的方法。另一个框架已经解决了这些问题。关于“框架中的框架”-看看angular，它还包括一个处理DOM操作的jQuery lite。好的，带宽和延迟对我很重要，所以我将研究RequireJS，看看他们的方法是什么。Thanks@RobbieVercammen使用require.sure签出网页包（分块）功能。它允许你在一块巨石和数千个文件之间找到一个中间地带。这种技术在过去是可以的，现在在http2中，所有这些做法都是有害的，会使你的站点变慢而不是变快。资源：--

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");