简体繁体 English

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

[英]Pre-load external JavaScript library for later pages

原文 2012-12-15 14:42:23 5 2 javascript/ mathjax

I use an external JavaScript library that is hosted on a CDN. 我使用托管在CDN上的外部JavaScript库。

Some users report that when they first visit the pages that require this library, it takes a little while to load as well as to render stuff (the library renders LaTeX). 有些用户报告说，当他们第一次访问需要此库的页面时，加载和渲染内容需要一些时间（库呈现LaTeX）。

I wonder if I can optimize their experience by (pre-)loading this library on some other pages before they arrive at the pages that actually use it. 我想知道我是否可以通过（预先）将这个库加载到其他页面上来优化他们的体验，然后再到达实际使用它的页面。 This way, I hope the browser will cache the library early, so the rendering may happen faster later. 这样，我希望浏览器能够尽早缓存库，因此渲染可能会在以后更快地发生。

PS the library in question is MathJax. PS有问题的库是MathJax。

2 个解决方案

Since you're interested in MathJax specifically, simply loading it won't buy you that much performance. 既然你对MathJax特别感兴趣，那么只需加载它就不会给你带来太大的性能。 (Though MathJax will be cached and if you use the MathJax CDN your users might already have cached it while visiting some other site.) （虽然MathJax将被缓存，如果您使用MathJax CDN，您的用户可能已经在访问其他站点时缓存了它。）

There are two reasons for why you probably won't see much of a performance increase. 有两个原因导致您可能不会看到很多性能提升。

First, MathJax loads most of its components dynamically. 首先，MathJax动态加载其大部分组件。 For example, the MathJax webfonts will only be loaded if no compatible font is installed on a user's system and they are also broken up into several pieces, to be loaded only when MathJax actually encounters a character. 例如，只有在用户系统上没有安装兼容字体时才会加载MathJax webfonts，并且它们也会分成几个部分，仅在MathJax实际遇到字符时加载。 The same goes for other components. 其他组件也是如此。 This also means that on a page without any mathematics, loading MathJax will not help you cache much. 这也意味着在没有任何数学的页面上，加载MathJax不会帮助你缓存太多。

That being said, the actual download of MathJax components can be optimized a bit by using one of the combined configuration files ending on -full , see the MathJax documentation . 话虽如此，通过使用以-full结尾的组合配置文件之一，可以稍微优化MathJax组件的实际下载，请参阅MathJax文档。

However, it's the typesetting that's usually the real performance hit. 然而，排版通常是真正的性能影响。 MathJax output depends on your content as well as the user's combination of screen, browser, and OS. MathJax输出取决于您的内容以及用户的屏幕，浏览器和操作系统的组合。 Both calculating the best fit as well as inserting & reflowing the content is an issue that has some fundamental limits (IE8 does a particularly bad job in standards mode). 计算最佳拟合以及插入和回流内容都是一个具有一些基本限制的问题（IE8在标准模式下做得特别糟糕）。

PS: If you have hidden or dynamic content, you might want to look at the configuration option skipStartupTypeset: true ; PS：如果您有隐藏或动态内容，您可能需要查看配置选项skipStartupTypeset: true ; see the MathJax documentation . 请参阅MathJax文档。

[Disclaimer: I'm part of MathJax] [免责声明：我是MathJax的一部分]

If you add a script tag calling the library at the end of your page (just before the html closing tag), everything else will load prior to it and the user can start using the page while the library is still loading. 如果您在页面末尾添加一个调用库的脚本标记（就在html结束标记之前），则会在其之前加载其他所有内容，并且用户可以在库仍在加载时开始使用该页面。

EDIT: This allows you to "pre-load" the library on another page withtout slowing it down. 编辑：这允许您在另一个页面上“预加载”库而不会降低它的速度。