javascript - JavaScript 可以用来预取外部 CSS 和 JS 文件，为同一网站的下一页做好准备吗？

Question

我正在优化一个网站，主要目的是提高网页的整体下载时间。我一直在应用 Yahoo Developer Network 的 "Best Practices for Speeding Up Your Web Site" 推荐的技术。 .

现在，统计数据显示我们有很多访问者首先通过以下方式访问该网站:

独立的搜索引擎页面HTTP 错误处理程序——即我们自定义的“404 Not Found”页面其他杂项独立页面

请注意，这些所谓的“独立页面”独立于负责网站页面布局和结构的模板系统而存在。它们有自己的样式表和脚本(因此也独立于模板系统的 CSS 和 JS 文件而存在。

现在，这些页面类型更多的是中间页面而不是内容页面。它们的一般用途的一个很好的例子是 reference landing page。 .我认为使用类似post-onload 的技术来“准备好”用户的缓存，为他们的下一步行动做好准备是个好主意(这几乎总是是一部分主模板系统)。

Steve Sounders 的脚本是:

post-onload.php :

<script>
function doOnload() {
    // Do the downloading awhile AFTER the onload.
    setTimeout("downloadComponents()", 1000);
}

window.onload = doOnload;

// Download external components dynamically using JavaScript.
function downloadComponents() {
    downloadCSS("http://stevesouders.com/hpws/testsm.css?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsma.js?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsmb.js?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsmc.js?t=1388138263");
}

// Download a stylesheet dynamically.
function downloadCSS(url) {
    var elem = document.createElement("link");
    elem.rel = "stylesheet";
    elem.type = "text/css";
    elem.href = url;
    document.body.appendChild(elem);
}

// Download a script dynamically.
function downloadJS(url) {
    var elem = document.createElement("script");
    elem.src = url;
    document.body.appendChild(elem);
}
</script>

我想知道的是:

是否可以重写这两个函数，它们的功能与 downloadCSS(url) 和 downloadJS(url) 基本相同，__without__ 实际上被应用于包含的网页？

实际上，我正在寻找作为下一个网页的外部 CSS/JS 预加载的 downloadCSS(url)/downloadJS(url) 函数文件，这将表现很像 HTML5 规范打算实现 @prefetch 属性的方式)。我基本上希望通过 post-onload 下载的文件在缓存中准备就绪。

如果没有，关于如何执行相同任务的任何其他建议都会很棒!

提前致谢!

Answer 1

如果你使用 ?t=1388138263 你根本不能预加载，因为每次你都会加载一个新版本..

使用 jquery 你可以做这样的事情:

$.ajax('script.js',{cache: true, dataType:'script'});
//or
$.getScript('script.js')
$.ajax('styles.css',{cache: true});

或者您可以创建不可见的 iframe 并加载到其中加载所有 js 和 css 文件的 html 页面

希望对你有帮助