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.

簡而言之，頁面上部分最重要的內(nèi)容最先加載。

Above-the-fold loading要想工作，需要以下三個基礎(chǔ)設(shè)施的支撐：

• 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的組件進(jìn)行延遲加載。

• 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的定義。該定義不是一成不變的，隨著設(shè)備和屏幕的不同，甚至瀏覽器尺寸的改變而變化。

• 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是一個基點(diǎn)，所有page fold之前的Component，都會優(yōu)先被渲染。

一個例子：

LandingPage2Template: {pageFold: 'Section2B',slots: ['Section1','Section2A','Section2B',[...]] }

Section2B和之前的Component，Section1和Section2A都會得到優(yōu)先渲染的機(jī)會。

還可以基于每個breakpoint定義page fold：

ProductDetailsPageTemplate: {md: {pageFold: 'UpSelling'},xs: {pageFold: 'Summary'},slots: ['Summary','UpSelling',[...]] }

Page fold和CSS相關(guān)的設(shè)置

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

默認(rèn)情況下，當(dāng)頁面page slot內(nèi)的Component加載時，沒有所謂的minimum height設(shè)置。

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

只有當(dāng)Component真正被加載時，才能確定真實(shí)的高度是多少。

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被標(biāo)記成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; }

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus 的 Above-the-Fold Loading 加载机制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。