为以后的页面预加载外部JavaScript库

Question

我使用托管在CDN上的外部JavaScript库。

有些用户报告说，当他们第一次访问需要此库的页面时，加载和渲染内容需要一些时间（库呈现LaTeX）。

我想知道我是否可以通过（预先）将这个库加载到其他页面上来优化他们的体验，然后再到达实际使用它的页面。 这样，我希望浏览器能够尽早缓存库，因此渲染可能会在以后更快地发生。

PS有问题的库是MathJax。

Answer 1

既然你对MathJax特别感兴趣，那么只需加载它就不会给你带来太大的性能。 （虽然MathJax将被缓存，如果您使用MathJax CDN，您的用户可能已经在访问其他站点时缓存了它。）

有两个原因导致您可能不会看到很多性能提升。

首先，MathJax动态加载其大部分组件。 例如，只有在用户系统上没有安装兼容字体时才会加载MathJax webfonts，并且它们也会分成几个部分，仅在MathJax实际遇到字符时加载。 其他组件也是如此。 这也意味着在没有任何数学的页面上，加载MathJax不会帮助你缓存太多。

话虽如此，通过使用以-full结尾的组合配置文件之一，可以稍微优化MathJax组件的实际下载，请参阅MathJax文档 。

然而，排版通常是真正的性能影响。 MathJax输出取决于您的内容以及用户的屏幕，浏览器和操作系统的组合。 计算最佳拟合以及插入和回流内容都是一个具有一些基本限制的问题（IE8在标准模式下做得特别糟糕）。

PS：如果您有隐藏或动态内容，您可能需要查看配置选项skipStartupTypeset: true ; 请参阅MathJax文档 。

[免责声明：我是MathJax的一部分]

Answer 2

如果您在页面末尾添加一个调用库的脚本标记（就在html结束标记之前），则会在其之前加载其他所有内容，并且用户可以在库仍在加载时开始使用该页面。

编辑：这允许您在另一个页面上“预加载”库而不会降低它的速度。