SAP Spartacus 的 Above-the-Fold Loading 加载机制-阿里云开发者社区

开发者社区> jerrywangsap> 正文

SAP Spartacus 的 Above-the-Fold Loading 加载机制

简介: SAP Spartacus 的 Above-the-Fold Loading 加载机制
+关注继续查看

https://sap.github.io/spartacus-docs/above-the-fold/


Above-the-fold loading is a technique that prioritizes the creation of components that are “above the fold”. The term “above the fold” is traditionally known as the upper-half of a newspaper, where the most important stories are located. When this concept is transferred to the web, it refers to all the components that are placed at the top of the page, where the experience starts.


简而言之,页面上部分最重要的内容最先加载。


Above-the-fold loading要想工作,需要以下三个基础设施的支撑:


Deferred loading, which is a technique that postpones the creation of components that are “below the fold”. For more information, see Deferred Loading.

对below the fold的组件进行延迟加载。


The notion of the “page fold”. The page fold is not static, and differs from device to device, from screen to screen, and even changes depending on the size of the browser.

Page fold的定义。该定义不是一成不变的,随着设备和屏幕的不同,甚至浏览器尺寸的改变而变化。


A couple of CSS rules that initially move components below the page fold.

The page fold is configurable for each page template and breakpoint.


Page fold基于每个页面模板和breakpoint来配置。


The page fold configuration is only an indication to speed up the initial creation of page slots that are above the fold. All page slots are eventually rendered if they happen to be above the fold. You designate the page fold by assigning a page slot to the pageFold parameter. This page slot, and all previous, sibling page slots, are “above the fold”. These page slots are prioritized ahead of page slots that are “below the fold”.


The page fold is part of the LayoutConfig configuration. The page fold indicates the last page slot that should be rendered above the fold.


Page fold是LayoutConfig的一部分,page fold是一个基点,所有page fold之前的Component,都会优先被渲染。


一个例子:


LandingPage2Template: {

   pageFold: 'Section2B',

   slots: [

       'Section1',

       'Section2A',

       'Section2B',

       [...]

   ]

}

1

2

3

4

5

6

7

8

9

Section2B和之前的Component,Section1和Section2A都会得到优先渲染的机会。


还可以基于每个breakpoint定义page fold:


ProductDetailsPageTemplate: {

   md: {

       pageFold: 'UpSelling'

   },

   xs: {

       pageFold: 'Summary'

   },

   slots: [

       'Summary',

       'UpSelling',

       [...]

   ]

}

1

2

3

4

5

6

7

8

9

10

11

12

13

Page fold和CSS相关的设置


By default, when page slots are loaded on the page, there is no minimum height available for the page slots or components.


默认情况下,当页面page slot内的Component加载时,没有所谓的minimum height设置。


The actual height is only added when components are loaded, and the associated CSS rules are applied to the components.


只有当Component真正被加载时,才能确定真实的高度是多少。


The page slots adjust their height automatically when components are loaded. Therefore, page slots do not have an initial height, which is why they initially end up in the viewport. This prevents the deferred loading technique from working, because it depends on content not being in the viewport.


Given that content can be added at runtime, it is not possible to implement a (hard-coded) minimum height for page slots or components – it all depends on what the business will add at runtime.


所谓的ghost design:


While this lack of minimum height could be filled up by so-called “ghost design” CSS rules, there will always be a gap between the ghost design and the actual content. Furthermore, ghost design rules require an implementation effort that might not be available.


To make it possible to defer the loading of below-the-fold content, Spartacus marks page slots that are below the page fold while page slots above the fold are being loaded. All page slots are marked with an is-pending class as long as all the inner components are not loaded.


below-the-fold Component被标记成is-pending class和page-fold class.


Additionally, the page fold slot has a page-fold class. With these two classes, Spartacus can apply various CSS rules to control deferred loading of below-the-fold content.


The following CSS shows all pending page slots after the pending page-fold, and moves them below the fold with a margin-top.


下列css使用margin-top, 将below-the-fold的Component移动到page-fold之下:


cx-page-slot.cx-pending.page-fold ~ cx-page-slot.cx-pending {

   margin-top: 100vh;

}


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

相关文章
使用webpack loader加载器
了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeescript或者j...
763 0
Assembly.LoadFrom加载程序集类型转换失败解决方法
为了让我的wcf模块框架支持自定义通道上下文,对代码又进行了一次小型的重构,测试时发现类型转换的错误,最后发现是loadfrom引起的。如果向 loadfrom 上下文中加载了一个程序集,则将激活 loadfromcontext 托管调试助手 (mda)。
1008 0
未能正确加载“VSTS for Database Professionals Sql Server Data-tier Application”包。
        今天费了九牛二虎之力,重转好了vs2010之后,打开解决方案,报出下面的错误: --------------------------- Microsoft Visual Studio --------------------------- 未能正确加载“VSTS for Database Professionals Sql Server Data-tier Applica
1245 0
SAP Spartacus加载delivery国家列表的处理逻辑
SAP Spartacus加载delivery国家列表的处理逻辑
7 0
CV:基于Keras利用cv2+自定义(加载人脸识别xml文件)+keras的load_model(加载表情hdf5、性别hdf5)实现标注脸部表情和性别label
CV:基于Keras利用cv2+自定义(加载人脸识别xml文件)+keras的load_model(加载表情hdf5、性别hdf5)实现标注脸部表情和性别label
50 0
SAP Spartacus 的 Above-the-Fold Loading 加载机制
SAP Spartacus 的 Above-the-Fold Loading 加载机制
11 0
前端如何实现图片懒加载(lazyload) 提高用户体验
定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。
844 0
[Cocos2d-x] loading加载动画
相信大家在玩游戏的过程中都会遇到一个loading的界面,loading界面的作用主要是为了加载游戏中需要用到的资源。在比较大型的游戏中,资源通常会占用很大的空间,如果不做一个预加载,在切换界面的过程中很容易造成卡屏的现象。
904 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载