🕌 🖐🏻 👩‍👧‍👦 カスタムレイアウトレンダリングの自動仮想化 👩🏻‍🚒 ⬜️ 🍟

こんにちは、私の名前はドミトリー・カルロフスキーです。私は...近い将来からあなたのところに来ました。すべてがすでにそこにあり、誰もが減速しているので、それほど遠くありません。筆記者はいつの間にか私たちに忍び寄りました。最初に、コンピューターの能力が伸びなくなり、次にネットワークの帯域幅が伸びなくなりました。そしてユーザー...彼らは自分自身ではないかのようにコンテンツを生成し続けました。その結果、数年のうちにインターフェースのUXが大幅に低下し、使用できなくなり、多くのユーザーが、企業所有のスーパーコンピューターで実行されるブラウザーのクラウドストリーミングに切り替えて、広告ブロッカーをインストールできないようにしました。したがって、私は今、問題がすでに目立っているこの瞬間にあなたのところに来ましたが、手遅れになる前にすべてを修正することができます。

- HolyJS'20 Moscow. , , … , , , ..

:

. , . , virtal scroll. . , .

:

, , 200 . , , UX .

, , - , - . .

: $mol

, , , . .. . .

mol.hyoo.ru

, , , , . , . , , , React .

- . , , , . . . .

:

timeline . 50 DOM, 5 , .

. . , , . .

:

"" , .

( ) 3 . . ..

:

, . , . , , . , , . 4 - .

:

, , , , , .

:

, , SSR.

SSR 10

https://nin-jin.github.io/habrcomment/#article=423889

: GitLab

- GitLab.

. 5 100 . - . , . 10 , . , , .

HTML

, .

HTML . . , HTML , , . . DOM, .

, . , 3 .

GitLab-

. ? ! , . , , , .

. , 3 . 10 . , , - !

, , , , .

" $mol , ?" , . , .

- DOM . - -, $mol.

$mol: 4

, 8 DOM 3.

<div class="amount">
    <h3 class="heading ...">
        <span>
            <span class="amount__major">1 233</span>
            <div class="amount__minor-container">
                <span class="amount__separator">,</span>
                <span class="amount__minor">43</span>
            </div>
            <span class="amount__currency"> ₽</span>
        </span>
    </h3>
</div>

<h3 class="amount">
    <span class="amount__major">1 233</span>
    <span class="amount__minor">,43 ₽</span>
</h3>

. 5 .

, DOM 2. …

, . 30 . , 10 . 3 30 . .

, , - .

- , . ..

:

, - .

- . …

- - . - : , . , - .

, . , , , . , - - . .

, .

, - , . .

, , , , .

❌
❌
❌
❌
❌
❌
❌
❌
, ✅

, . ..

:

, , .

https://nin-jin.github.io/my_gitlab/#collapse=true

. , . , , . , . , , . , , : , .

❌
❌
, ❌
❌
✅
✅

:

? , , , , .

.. . , , , 3 . , , DOM , . , , , .

:

- , , , . , .

https://bvaughn.github.io/react-virtualized/#/components/WindowScroller

DOM , . . - . , , , , .

:

, , , . ..

:

time slicing. Holy JS , 16 , - . , ..

. , . , , 16 , , . . javascript , , . , , , . , , $mol .

✅
❌
JS ❌

:

, DOM . . , , Catberry..

catberry.github.io

$mol , , , , , DOM .

✅
JS ❌
❌

:

, $mol . , , . , , , , DOM .

https://nin-jin.github.io/my_gitlab/#lazy=true

, , . . - . , DOM, . , DOM . .

:

- , . . , , , .

https://nin-jin.github.io/my_gitlab/

❌
, , ✅

:

: time slicing React, catberry $mol. , x ? .

:

. , .

	?
	❌
	❌
	✅

, , - , . , . ""..

content-visibility: auto;
contain-intrinsic-size: 1000px;

. , , layout , , . , , - , . - , - DOM. , . .

. . , . / DOM. , , , . .

, , . . , , . - , , . , , , , .

. , , , , . , . , , . , .

- . . , . , , . - . , , .

:

. .

, 2424, 24 .

:

, , , . , " " - , , , .

:

, . .

:

, , .

:

. . - , , . - . - , .

. , , .

, .

, . . , . , , . .

, , . , . . , .

:

, , - .

- . - .

:

, 4 , .

, , . JS, .

: onScroll

, DOM. - scroll

..

document.addEventListener( 'scroll', event => {
    // few times per frame
}, { capture: true } )

onScroll

2 . , - , 60 . , , . , - DOM. , , , .

❌
DOM ❌
❌
❌
❌

: IntersectionObserver

IntersectionObserver

, , . , . body

, .

const observer = new IntersectionObserver(

    event => {
        // calls on change of visibility percentage
        // doesn't call when visibility percentage doesn't changed
    },

    { root: document.body  }

)

observer.observe( watched_element )

IntersectionObserver

, , , . , , . , , , , 5 10, 10 15.

, ❌

: requestAnimationFrame

- requestAnimationFrame. 60 , , - .

, , DOM. - . , .

DOM. DOM, layout.

function tick() {

    requestAnimationFrame( tick )

    for( const element of watched_elements ) {
        element.getBoundingClientRect()
    }

    render()   
}

requestAnimationFrame

. - - . 5% , . requestAnimationFrame , . - , .

:

onScroll ❌
IntersectionObserver ❌
requestAnimationFrame ✅

, . . - .

https://nin-jin.github.io/my_gitlab/#anchoring=false

. , . - . , . .

:

https://codepen.io/chriscoyier/embed/oWgENp?theme-id=dark&default-tab=result

. , . , - . , .

, . , , .

:

, DOM , . . . . . ..

1

, . 2

, . 2.2

, 2.3

, . 2.2.2

, , . .

:

- , . . , overflow-anchor

, , css .

overflow-anchor: none
top

, left

, right

, bottom
margin

, padding
Any width

or height

-related properties
transform

:

, , - , . , , , . , . , .

:

. , . 3, 4 5, - .

- . , . 1 .

- requestAnimationFrame DOM: . , , .

- , 4 -. .

:

. , , DOM, .

:

, .

, , , .

:

: . , DOM . - DOM - . DOM .

:

, . , , . , . - , .

, , , . , . . , .

, , , - , .

https://nin-jin.github.io/my_gitlab/

:

, , .

	overflow-anchor
Chrome	✅
Firefox	✅
Safari	❌

:

, , , DOM , .

const anchoring_support = CSS.supports( 'overflow-anchor:auto' )


if( anchoring_support ) {
    virtual render
} else {
    lazy render
}

:

CSS , , - . .

https://nin-jin.github.io/habrcomment/#article=423889

DOM , , , . CSS ..

[mol_scroll] {
    contain: content;
}

, . .

, , , . , , . , . ..

[mol_scroll] > * {
    transform: translateZ(0);
}

: , , , , .

( )

https://nin-jin.github.io/habrcomment/#article=423889

.. . , , . , , , . , .

- , , , ? , DOM, . - Ctrl+F

, . , , , .

*find_path(
    check: ( view : View )=> boolean,
    path = [] as View[],
): Generator&lt; View[] > {

    path = [ ... path, this ]

    if( check( view ) ) return yield path

    for( const item of this.kids ) {
        yield* item.find_path( check, path )
    }

}

, , . , , , DOM, API .

scroll_to_view( view: View ) {

    const path = this.find_path( v => v === view ).next().value

    this.force_render( new Set( path ) )

    view.dom_node.scrollIntoView()

}

. , : , , , .

force_render( path : Set< View > ): number {

    const items = this.rows

    const index = items.findIndex( item => path.has( item ) )

    if( index >= 0 ) {
        this.visible_range = [ index, index + 1 ]
        items[ index ].force_render( path )
    }

    return index
}

, , .

https://nin-jin.github.io/habrcomment/#article=423889/search=vin

. $mol_dimmer, , .

, . , . . . ? , , . , , , , . .

https://nin-jin.github.io/my_gitlab/

, NVDA .

, ..

.
Scroll Anchoring .
.

:

, . , . , - - 170 " 170". , DOM VueJS , , .

$mol . , , , , : , . DOM , .

: 4 .

:

- . , dbmon.

https://mol.js.org/perf/dbmon/-/

20 , $mol 60.

:

. VueJS 170 40 JS. , 3 , . $mol, , , 40 JS . , - DOM .

	JS
VueJS: 170	40 MB	150 MB
$mol: + 2500	40 MB	90 MB

, $mol , , , , . DOM, , DOM . , .

: !

, , - 25 ..

https://showcase.hyoo.ru/

. material design . . 6 . , 3 . , , , , , , , , .

, - . , . ..

: - .
: - .

Angular : - . React - - .

, , , ..

, .

. - - . ", ?" .

Column
    Row
        Search
        Icon
    Scroll
        Column
            Task
            Task
            Task

- - HTML . , html . - , , , , . .

<main class="panel">
    <div class="header">
        <input class="search">
        <img src="..." class="icon">
    </div>
    <div class="scroll">
        <div class="card">
        <div class="card">
        <div class="card">
    </div>
</main>

, , React, - . , . .

React Native, HTML . html .

Angular, Vue, Svelte , - . , , , .

$mol , .


React	❌	❌
React Native	❌	✅
Vue	✅	❌
Angular	✅	❌
Svelte	✅	❌
$mol	✅	✅

$mol. , , "" - - . .

- , . , , , .

nin-jin/slides/virt - .
nin-jin/slides - .
habhub.hyoo.ru - .
_jin_nin_

- .
nin-jin/my_gitlab - $mol.
nin-jin/habrcomment - $mol.
mol_news - $mol .

: 34%

, .
.
.
, . . : ( - ). ( , ), . , , "", . . , - . , ?
$mol , / . , - " " ( ) - - , . , . , - .
, , , , .
$mol )

: 42%

, , , ).
.
, . "".

: 18%

, .
, . , , . - GitLab.

: 6%

, , . , .
私の期待と現実の不一致のために評価が与えられました=）期待：得られた知識を私のプロジェクトに適用することができます。現実：フレームワークのデモンストレーション。他のフレームワークのプロジェクトの場合、取得した情報は適用されません。タイトルと説明から明らかであれば、時間を無駄にすることなく、別のレポートに行きました。

カスタムレイアウトレンダリングの自動仮想化

:

:

: $mol

:

:

:

:

:

: GitLab

HTML

GitLab-

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

: onScroll

onScroll

: IntersectionObserver

IntersectionObserver

: requestAnimationFrame

requestAnimationFrame

:

:

:

:

:

:

:

:

:

:

:

:

:

( )

:

:

:

: !

: 34%

: 42%

: 18%

: 6%

More articles: