Question

我有一个网站，其导航全部通过ajax（使用jquery）完成;每个页面都动态加载到页面上的元素中。虽然我有一个通用的样式表和JS脚本，但每个页面还有一个页面规范的样式表和JS脚本。加载这些页面特定脚本和样式表的最有效/最有效的方法是什么？在页面加载时，将不需要大多数页面特定的脚本/样式表。只有当用户加载（通过ajax）特定页面时，才需要页面的脚本/样式表。我应该在页面加载时加载每个脚本和样式表吗？

另一种选择是在动态加载页面时简单地将适当的<link>和<script>元素附加到头部;然而，他们会被称为？另外，当调用不同的页面时（通过ajax），我是否需要删除<link>和<script>元素？对于脚本，我可以使用jQuery的.getScript()函数。在效率和跨浏览器支持方面，最佳方法是什么？

谢谢！

Answer 1

Js和CSS是一次性加载，并且是浏览器缓存的（取决于您的服务器配置）

所以如果你有一个ajax，只包含1个JS。你可以

将此JS插入主页的页脚（延迟加载;先发制人的思考......更快的第2页）
将include JS标记与ajax响应一起使用。（这里没什么复杂的。浏览器会进行新的JS调用）
将所有JS / CSS合并为一个组合JS，将其推送到主页头标记（提示性能和缓存）
准备好文档后，按照建议使用getScript（）执行与＃1类似的操作

Answer 2

我知道可以做到的一种方法是使用RequireJS，但缺点是你需要将所有JS定义为AMD。

不知道你是否对RequireJS有任何了解，但它是一个非常整洁的库，您可以将其想象为依赖注入器并以异步方式加载文件。如果您有兴趣，可以查看他们的文档：

Intro
CSS

Answer 3

在我评论你可以用CSS做什么之前。

这是你如何使用js：

var script = document.createElement('script');
script.src = "path to your src";
// load event
script.onload = function () {
    //some staff
};
document.head.appendChild(script);

此外，对于您，我建议您阅读此gist。

另一件好事information。

即时导入样式表和JavaScript

3 个答案: