javascript - 预加载图像和样式表最有效的方法是什么？

Question

如果可能的话，我希望能够预加载图像、样式表和脚本，以加快整个网站的加载时间，并且不让用户在他们之前看到图像加载。我想知道最有效的方法是什么？

在每个页面上放置用于预加载图像和样式表的代码是否有意义？换句话说，我复制了预加载代码。

预加载代码的位置(页面顶部、底部)重要吗？

任何见解肯定会受到赞赏。这是我的代码:

<script type="text/javascript">
window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/pages.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/slider.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/responsive.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/footer-home.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/footer-main.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/contact.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/3eblog.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/index.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/submit.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'submit.html');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/bootstrap.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/jquery.cslider.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/one.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/two.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/three.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/four.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/five.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/modernizr.custom.28468.js');
        xhr.send('');
        // preload image
        new Image().src = "images/3elements-issue-1-fall-2013.png";
        new Image().src = "images/3elements-issue-1-fall-2013-current.png";
        new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013.swf";
        new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013.pdf";
        new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013-mobile.pdf";
        new Image().src = "images/mikaela.jpg";
        new Image().src = "images/carol.jpg";
        new Image().src = "images/parker.jpg";
        new Image().src = "images/kids.jpg";
        new Image().src = "images/kids2.jpg";
        new Image().src = "images/kids3.jpg";
        new Image().src = "images/kids4.jpg";
        new Image().src = "images/kids5.jpg";
        new Image().src = "images/kids6.jpg";
        new Image().src = "images/kids7.jpg";
        new Image().src = "images/kids8.jpg";
        new Image().src = "images/kids9.jpg";
        new Image().src = "images/alert.svg";
        new Image().src = "images/3elm.svg";
        new Image().src = "images/drop-down-selector.svg";
        new Image().src = "images/arrow-selector.svg";
        new Image().src = "images/book.svg";
        new Image().src = "images/facebook.svg";
        new Image().src = "images/light-bulb.svg";
        new Image().src = "images/logo.svg";
        new Image().src = "images/logo-2.svg";
        new Image().src = "images/logo-2-denied-page.png";
        new Image().src = "images/mug.svg";
        new Image().src = "images/notepad.svg";
        new Image().src = "images/stumble.svg";
        new Image().src = "images/twitter.svg";
        new Image().src = "images/google-plus.svg";
        new Image().src = "images/favi.ico";
        new Image().src = "fonts/gotham-light.ttf";
        new Image().src = "fonts/gotham-light.otf";
        new Image().src = "fonts/gotham-medium.ttf";
        new Image().src = "fonts/gotham-medium.otf";
        new Image().src = "fonts/gotham-book.ttf";
        new Image().src = "fonts/gotham-book.otf";
        new Image().src = "fonts/gotham-bold.ttf";
        new Image().src = "fonts/gotham-bold.ttf";
        new Image().src = "fonts/pts.ttf";
        new Image().src = "fonts/pts.otf";
        new Image().src = "fonts/pts.woff";
    }, 1000);
};
</script>

Answer 1

“..为了加快整个网站的加载时间，除了不让用户在他们之前看到图像加载”

这些要求相互矛盾。用户会看到在他之前加载的图像，因为页面是在图像加载之前显示的。

预加载不会加快加载速度。如果您在初始页面查看之前预加载所有图像，则初始页面查看速度会变慢。预加载对于您想要稍后显示的图像特别有用，例如悬停时的(不同的)背景图像。尽管 Sprite 通常是更好的选择。预加载 css 对我来说似乎没什么用。

如果您想加快初始页面加载速度，请使用 CDN。您甚至可以为同一服务器创建多个域或子域。这允许浏览器一次下载更多文件。大多数浏览器都有一个限制，即只能从同一服务器同时下载 2 个文件。通过设置多个域或子域，您可以欺骗浏览器认为有多个服务器。当然，你的服务器必须足够强大，有足够的带宽来支持额外的请求，否则无济于事。

除此之外，如果您希望代码正常工作，那么您现在拥有的代码需要在每个页面上可用。您现在永远无法知道哪个页面将成为入口页面。如果您想预加载完全相同的文件，可以将此代码放入单独的脚本文件中，以便对其进行缓存，从而节省随后访问的每个页面的加载时间。

如果您愿意，您可以在预加载所有图像时设置 cookie，这样每个 session 只需执行一次。

代码本身最好放置在页面底部。这允许在该脚本本身仍在运行时显示页面，尽管这并不重要，因为它会非常快(它只设置一个计时器)。