javascript - 如何首先加载/呈现 HTML/CSS，然后再加载 Javascript(仅在必要时)？

Question

如何先加载/渲染 HTML/CSS，然后再加载 Javascript？在网站/网络应用程序的页面上？

所以页面加载不应该因为 javascript 而显得缓慢。我阅读了有关 defer 和 async 的内容，但对这个主题不是很清楚。将 javascript 放在底部就够了吗？

我想先加载 html/css，因为我添加的 javascript 是为了进一步的交互。

例如，我有一个使用 javascript 执行某些操作的按钮。仅当用户单击/按下该按钮时，我才想关联 javascript 文件，否则不关联。

我不想预加载 JavaScript，因为它不是必需的，直到需要时才会使用它

Answer 1

取决于你在说什么。如果您在页面本身中谈论 javascript，请将其放在页面底部。如果您指的是加载外部库，您可以使用 javascript 动态执行此操作。

<script type="text/javascript">
   var hed = document.getElementsByTagName('HEAD').item(0);
    var scrpt = document.createElement("script");

    scrpt.type = "text/javascript";
    scrpt.src = "scriptsource.js";

    hed.appendChild(scrpt);
</script>

可在此处找到更多相关信息:http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html

编辑

您可以将您的 JS 放在 onload 事件中 Javascript that executes after page load