angularjs – SPA初始加载时间

发布时间：2020-12-17 10:22:58 所属栏目：安全来源：网络整理

导读：SPA的缺点当然是初始加载时间. 例如,我用Durandal创建了AskACarPro.com. 它在加载时当前有一个“加载”屏幕.但我想也许这是一个坏主意.这让我想起了一个全闪存的网站 – 非常漂亮,但没有人想在他们第一次到达网站时观看加载微调器. 我随机发现的另一个例子是

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

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

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

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

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

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

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

除了缩小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也是如此

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!