SPA初始加载时间

Question

SPA的缺点当然是初始加载时间.

例如,我用Durandal创建了AskACarPro.com.

它在加载时当前有一个"加载"屏幕.但我想也许这是一个坏主意.这让我想起了一个全闪存的网站 - 非常漂亮,但没有人想在他们第一次到达网站时观看加载微调器.

我随机发现的另一个例子是MyBestEgg.com它是一个Angular网站.没什么特别的,但是我的机器上的冷加载时间差不多是6秒.

但它没有飞溅,所以屏幕在加载时会跳跃一下.我不知道这比闪屏更好.

处理不可避免的SPA加载时间是否有最佳实践？显然应该尽可能捆绑和缩小应用程序,但应用程序启动时总是会有延迟.

这可能更像是设计师类型的问题,而不是编程问题.然而,重要的是因为负载因素是不使用SPA的原因.

Answer 1

除了 minify css 和 html、gzip 等之外，由于问题具有 Angular 标签，我建议您查看ocLazyLoad提供的模块/css 的延迟加载。

为了让你的 js 尽可能小，你可以使用JSInspect尽可能 DRY

PurifyCSS将帮助您删除未使用的 CSS，并可以检测动态添加的规则，例如使用ng-class

使用Head.JS或LABjs等库或类似的脚本可以帮助您以消除页面加载期间渲染阻塞的方式加载 js 文件

  <script>
    [
      '@@Angular',
      '@@Angular-UI',
      '@@YourAPP',
    ].forEach(function(src) {
      var script = document.createElement('script');
      script.src = src;
      script.async = false;
      document.head.appendChild(script);
    });
  </script>

像imagemin这样的东西可以帮助你最小化图像的大小，对于SVG也是如此