SAP Spartacus的延迟加载Deferred Loading-阿里云开发者社区

开发者社区> jerrywangsap> 正文

SAP Spartacus的延迟加载Deferred Loading

简介: SAP Spartacus的延迟加载Deferred Loading
+关注继续查看

https://sap.github.io/spartacus-docs/deferred-loading/


Deferred loading is a technique that is used to postpone the rendering of CMS components. Any component that is outside the viewport (that is, the area that is visible to the user) is not rendered in advance. This improves the initial rendering of the complete page. Deferred loading not only defers the creation of components, it also defers the loading of any component-specific data, such as media or back end calls.


viewport之外的任何Component,即用户肉眼看不见的Component,都不会提前被渲染。延迟loading不仅仅延迟了Component实例的创建,而且延迟了Component相关的数据加载,比如media文件或者Commerce Cloud后台的API调用。


一些典型的延迟加载的应用场合:


The components used in the hamburger menu are deferred on mobile devices, since they are not inside the viewport when the menu is collapsed. This defers the creation of those components, as well as loading languages, currencies, navigation, and CMS links.


Product reviews are loaded in the product review component. As long as the user has not tabbed or scrolled into the review component, those reviews are not loaded.


Carousel slides outside the viewport are deferred until the user “scrolls” to them. This not only reduces back end calls for additional carousel data (such as products), but it also defers the loading of images.


延迟加载的实现基于page slot. 一旦page slot进入viewport,page slot里所有的Component均会被加载。


延迟加载默认是禁止状态,需要显式开启:


image.png

延迟加载对Server side渲染无效——爬虫总是能获取到完整的DOM.


和延迟加载相关的一些技术

Lazy loading of JS chunks: Deferred loading does not lazy-load the component JS bundles. Deferred loading is only concerned with the creation or rendering of components.

Component延迟加载和js bundle的延迟加载无关,只涉及到Component实例创建和渲染的延迟进行。


Above-the-fold loading: Deferred loading is tightly coupled to so-called “above-the-fold loading”.


Native lazy loading of images: Deferred loading is not related to the native lazy loading of images that has recently been implemented in some browsers. This new API is not yet fully supported, but could be used in combination with deferred loading for CMS components.


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10055 0
SAP 电商云 Spartacus UI 支持延迟加载的新功能的入口设计
假设我们要为 Spartacus UI 开发一个新功能,首先,这个新功能,应该放到 feature library 文件夹里:
7 0
SAP Spartacus的延迟加载Deferred Loading
SAP Spartacus的延迟加载Deferred Loading
12 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13869 0
SAP Spartacus CMS 页面加载逻辑和性能的优化
https://github.com/SAP/spartacus/issues/3649 SAP Commerce Cloud CMS 页面加载的一些优化点: Payload of the CMS page structure - 待加载CMS 页面结构的负载 Splitting the CMS page structure in both page and page template CMS improve cache-ability of the CMS page structure CMS page structure payload (#3668)
18 0
.Net 以报表的形式加载SAP里面的数据
最近真是累,杂七杂八的事情一大堆,还好明天就放假了,终于可以好好的放松一下了,祝大家国庆中秋愉快! 感觉园子里面搞SAP的貌似不多,很少看到有新的SAP方面的文章出现... 这帮文章写的是在VS里面设计水晶报表,以报表的形式加载SAP里面的数据,涉及到以下几点知识: 1.通过“数据库专家”给水晶报表设置数据源以及各个字段。
716 0
SAP Commerce Cloud (电商云) UI 的懒加载功能
SAP Commerce Cloud (电商云) UI 的懒加载功能
7 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载