加载 20MB 以上网页的最有效方式

Question

我有一个单页网站，它是一个包含全年图片的日历。页面加载有 344 个请求和 20MB 的总加载量。这是一个没有数据库的简单 PHP 页面。

请求包括一个CSS文件（15KB），4个JS文件（20KB），两种字体（50KB），一个视频（3MB），其余为图片。最大图像大小为 400x200 (139KB)，但大多数为 200x400 (30KB)。图片当前加载为 CSS 背景，但可以加载，好像它有帮助。

这些文件将托管在基于云的 CDN 上。该页面已尽可能优化，不会阻止 DOM 的加载。图片是主要问题，IMO。

加载此页面图像的最佳方式是什么？

我试过延迟加载，但问题是它在重绘和回流时真的会杀死浏览器。由于 redraw/reflow 问题，我删除了一些花里胡哨的东西，例如 CSS3 样式、动画和其他。

我目前能想到的选项是无限滚动，每个月在查看之前加载，或者每个月分解到自己的页面中。如果可能的话，我宁愿不选择后者。

Stack 上有几个与此类似的问题，但没有一个与我的情况有关。预先感谢您的建议。

Answer 1

以下是我使用自己的实现解决此问题的方法，类似于无限滚动。此示例使用 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);

january.php

    <?php ?>
    <html>
      <head>
      </head>
      <body>
        This is your landing page
        <article class="january">
          some content
        </article>
      </body>
    </html>

february.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();

?>

加载 20MB 以上网页的最有效方式

Most efficient way to load a 20MB+ webpage

html

javascript

php

jquery

image