🕹️ 👨🏼‍🔧 👚 Virtualisasi otomatis dari perenderan tata letak khusus 📍 🙏🏽 🚃

Halo, nama saya Dmitry Karlovsky dan saya ... datang kepada Anda dari waktu dekat. Tidak jauh, karena semuanya sudah ada dan semua orang melambat. Juru tulis merayap ke arah kami tanpa terasa: pertama, kekuatan komputer berhenti berkembang, kemudian bandwidth jaringan. Dan pengguna ... mereka terus membuat konten seolah-olah mereka bukan diri mereka sendiri. Akibatnya, dalam hitungan tahun, UX antarmuka terdegradasi sedemikian rupa sehingga menjadi tidak mungkin untuk menggunakannya, dan banyak pengguna bergegas beralih ke cloud streaming browser mereka, yang berjalan di superkomputer milik perusahaan yang mencegah orang memasang pemblokir iklan di sana. Oleh karena itu, saya datang kepada Anda sekarang, pada saat ini, ketika masalahnya sudah terlihat, tetapi Anda masih dapat memperbaiki semuanya sebelum terlambat.

- 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%

, , . , .
Nilai diberikan karena perbedaan antara harapan saya dan kenyataan =) Harapan: Saya akan dapat menerapkan pengetahuan yang diperoleh untuk proyek saya. Realitas: demonstrasi kerangka kerja Anda. Untuk proyek dengan kerangka kerja lainnya, informasi yang diperoleh tidak dapat diterapkan. Jika sudah jelas dari judul dan uraiannya, saya tidak akan membuang waktu dan lanjut ke laporan lain.

Virtualisasi otomatis dari perenderan tata letak khusus

:

:

: $mol

:

:

:

:

:

: GitLab

HTML

GitLab-

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

:

: onScroll

onScroll

: IntersectionObserver

IntersectionObserver

: requestAnimationFrame

requestAnimationFrame

:

:

:

:

:

:

:

:

:

:

:

:

:

( )

:

:

:

: !

: 34%

: 42%

: 18%

: 6%

More articles: