将动态加载的JavaScript和CSS插入页面的最有效方法是什么？

Question

3

我有一个网站，需要通过 AJAX 动态加载 JavaScript 和 CSS 文件。我已经成功实现了这一点，但是问题在于将此内容加载到 DOM 中，特别是速度方面。

在桌面浏览器中，没有性能问题。但是在移动浏览器上（该网站针对手机/平板电脑），脚本/样式下载和处理之间会有大约一两秒钟的延迟。

最初，我创建了一个新的脚本/样式元素，将检索到的数据附加到其中，并将该元素附加到 DOM 中（'head' 节点）。然后，我尝试使用 'document.write' 将带有内容的脚本/样式标记写入页面（这是 Bing/Google 在其移动站点上的做法）。但这两种方法都太慢了。

这可能是由于需要处理的脚本大小（70KB 的 JavaScript，65KB 的 CSS）？还是由于我将其插入到页面中的方式？

我没有看到任何关于此的教程/博客文章提到速度问题，但我也没有看到任何专门针对移动设备的文章。

- user1003623

为什么必须通过ajax检索它？为什么不直接动态响应脚本/样式表请求呢？ - T.J. Crowder

1

有一个非常快速的解决方案，现代浏览器依赖它（http://yepnopejs.com/）。它可以有条件地加载资源（JS/CSS）。也许如果您检查代码，就有可能得到正确的解决方案。 - yunzen

TJ，这个网站更像是一个Web应用程序而不是一个简单的网页。通过AJAX检索到的数据存储在本地存储中，并从那里检索，而不是在后续页面加载时进行AJAX检索。 - user1003623

云岑，谢谢你。我会研究一下Modernizr是如何做的。 - user1003623

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Bélanger · Answer 1

我认为尺寸是一个问题。你试过压缩吗: http://closure-compiler.appspot.com/home

这个延迟发生一次还是多次？