我有一个单页网站，它是一个包含全年图像的日历。页面加载有 344 个请求，总加载量为 20MB。这是一个简单的 PHP 页面，没有数据库。
请求包括一个 CSS 文件(15KB)、4 个 JS 文件(20KB)、两个字体(50KB)、一个视频(3MB)，其余为图像。最大图像尺寸为 400x200 (139KB)，但大多数为 200x400 (30KB)。图像当前作为 CSS 背景加载，但可以加载，就好像它有帮助一样。
这些文件将托管在基于云的 CDN 上。该页面已尽可能优化，不会阻止 DOM 加载。在我看来，图像是主要问题。
加载此页面图像的最佳方式是什么？
我尝试过延迟加载，但问题是它在重绘和回流时确实会杀死浏览器。由于重绘/回流问题，我还删除了一些花里胡哨的东西，比如 CSS3 样式、动画等。
我能想到的当前选项是无限滚动，每月在查看之前加载或将每月分解为自己的页面。如果可能的话，我宁愿不选择后者。
Stack 上有一些与此类似的问题，但没有一个与我的情况相关。预先感谢您的建议。
最佳答案
以下是我如何使用自己的实现来解决此问题，类似于无限滚动。此示例使用 january.php 作为登录页面，并且在用户滚动到当月月底后每个连续的月份都会加载。它附加在元素处。最终结果如下:
http://axcient.com/year-in-review-2014/
JS
var index = 1;
var sections = [
'january',
'february',
'march',
'april',
'may',
'june',
'july',
'august',
'september',
'october',
'november',
'december'
];
var fetchMore = function (){
if ( $(window).scrollTop() >= $(document).height() - $(window).height() - 300 ){
$(window).unbind('scroll',fetchMore);
if (index < sections.length) {
$.post('/load.php', {'section': sections[index] },
function(content) {
if (content.length > 0) {
$(content).insertAfter($('article:last'));
init_isotope();
init_waypoint(sections[index]);
$(window).bind('scroll',fetchMore);
index++;
}
}
);
}
}
}
$(window).bind('scroll', fetchMore);一月.php
<?php ?>
<html>
<head>
</head>
<body>
This is your landing page
<article class="january">
some content
</article>
</body>
</html>二月.php
<?php ?>
<article class="february">
some content
</article>load.php
<?php
$sections = array('january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december');
$section = $_POST['section'];
$template_path = substr($_SERVER['REQUEST_URI'], 0, strrpos($_SERVER['REQUEST_URI'], '/annual-report-2014/'));
if (!empty($section) && in_array($section, $sections) && file_exists($section . '.php')) {
include($section . '.php');
}
die();
?>关于javascript - 加载 20MB 以上网页的最有效方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27854033/