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',[...]]
}
Section2B和之前的Component，Section1和Section2A都会得到优先渲染的机会。
还可以基于每个breakpoint定义page fold：
ProductDetailsPageTemplate: {md: {pageFold: 'UpSelling'},xs: {pageFold: 'Summary'},slots: ['Summary','UpSelling',[...]]
}
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;
}
SAP Spartacus 的 Above-the-Fold Loading 加载机制相关推荐
- SAP Spartacus Unit List树形数据的加载
如下图所示: 加载成功后(Load Tree Success),loading由true变为false: kristest没有children: Rustic retail有153个节点: HTTP请 ...
- SAP Spartacus Unit List树形数据的加载触发时机
数据加载的url: https://spartacus-dev0.eastus.cloudapp.azure.com:9002/occ/v2/powertools-spa/users/current/ ...
- SAP Spartacus language和currency Component data加载
ComponentWrapperDirective: 首先给components字典分配一个uid entry: 如果pageContext为undefined,进入this.createCompon ...
- APP的六种loading加载样式，全在这
今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据, ...
- 深入学习SAP UI5框架代码系列之一：UI5 Module的懒加载机制
本文是深入学习SAP UI5框架代码系列的第二篇文章. 系列目录 SAP UI5应用开发人员了解UI5框架代码的意义 UI5 module懒加载机制 UI5 控件渲染机制 HTML原生事件 VS SA ...
- webbrowser控件 加载为空白_深入学习SAP UI5框架代码系列之一：UI5 Module的懒加载机制...
本文是深入学习SAP UI5框架代码系列的第二篇文章. 系列目录 SAP UI5应用开发人员了解UI5框架代码的意义 UI5 module懒加载机制 UI5 控件渲染机制 HTML原生事件 VS SA ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2. ...
- axios请求拦截 做Loading加载
axios请求拦截 做Loading加载 首先安装element-ui ,我们是按需引入 从element-ui 引入我们所需: import {Loading,Message} from " ...
最新文章
- linux没有交换分区会怎样,linux – 服务器拒绝使用交换分区
- 深度学习解决多视图非线性数据特征融合问题
- The 'microsoft.jet.oledb.4.0' provider is not registered on the local machin
- Windows 10 内测版：你有Edge了，不需要别的浏览器！
- 在JupyterNotebook中使用多个Python环境
- mysql抽屉图标_React Native自定义组件实现抽屉菜单控件效果
- 处理java多线程时线程安全问题 - ThreadLocal和Synchronized
- 浅谈最短路径的几个方法（Dijkstra，Bellman-Ford，SPFA，Floyd算法）
- BZOJ1283 序列（费用流）
- pycharm安装scrapy失败_python爬虫框架scrapy
- 科创板已开板 区块链离科创板还远吗？
- java hashset retain_Java HashSet retainAll()用法及代码示例
- Libevent 源码文件结构分析
- python爬取链家_Python爬取链家北京二手房数据
- 对注册表项“HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Run”的访问被拒绝。
- 学员管理系统（面向对象版）
- python热搜排行功能_手把手教你用Python+Pyecharts让微博热搜榜动起来
- 编译原理 | 实验四 | 逆波兰式
- 调用后台接口返回报错前端隐藏提示_腾讯社交联盟广告
- Google Play 封杀第三方支付