Hallo, mein Name ist Dmitry Karlovsky und ich ... bin aus naher Zukunft zu Ihnen gekommen. Nicht weit weg, denn alles ist schon da und alle werden langsamer. Der Schreiber schlich sich unmerklich auf uns zu: Zuerst hörte die Leistung der Computer auf zu wachsen, dann die Bandbreite der Netzwerke. Und Benutzer ... sie generierten weiterhin Inhalte, als ob sie nicht in sich selbst wären. Infolgedessen verschlechterte sich die Benutzeroberfläche von Schnittstellen innerhalb weniger Jahre so sehr, dass es unmöglich wurde, sie zu verwenden, und viele Benutzer beeilten sich, auf Cloud-Streaming ihrer Browser umzusteigen, die auf Supercomputern von Unternehmen ausgeführt werden, die verhindern, dass Benutzer Werbeblocker auf ihnen installieren. Deshalb bin ich gerade zu Ihnen gekommen, in dem Moment, in dem das Problem bereits erkennbar ist, Sie aber noch alles beheben können, bevor es zu spät ist.
- HolyJS'20 Moscow. , , … , , , ..
:
. , . , virtal scroll. . , .
:
, , 200 . , , UX .
, , - , - . .
: $mol
, , , . .. . .
, , , , . , . , , , React .
:
.
.
.
.
.
- . , , , . . . .
:
:
timeline . 50 DOM, 5 , .
. . , , . .
:
"" , .
( ) 3 . . ..
:
, . , . , , . , , . 4 - .
- .
- .
.
:
, , , , , .
.
.
.
.
:
.
https://nin-jin.github.io/habrcomment/#article=423889
: GitLab
- GitLab.
. 5 100 . - . , . 10 , . , , .
HTML
, .
HTML . . , HTML , , . . DOM, .
, . , 3 .
GitLab-
. ? ! , . , , , .
. , 3 . 10 . , , - !
, , , , .
" $mol , ?" , . , .
- DOM . - -, $mol.
, 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..
✅
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
orheight
-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< 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 |
|
|---|---|---|
|
|
40 MB |
150 MB |
|
|
40 MB |
90 MB |
, $mol , , , , . DOM, , DOM . , .
: !
, , - 25 ..
. 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 - .
habhub.hyoo.ru - .
_jin_nin_
- .
nin-jin/my_gitlab - $mol.
nin-jin/habrcomment - $mol.
mol_news - $mol .
: 34%
, .
.
.
, . . : ( - ). ( , ), . , , "", . . , - . , ?
$mol , / . , - " " ( ) - - , . , . , - .
, , , , .
$mol )
: 42%
, , , ).
.
, . "".
: 18%
, .
, . , , . - GitLab.
: 6%
, , . , .
Die Bewertung wurde aufgrund der Diskrepanz zwischen meinen Erwartungen und der Realität vorgenommen =) Erwartungen: Ich werde in der Lage sein, das in meinem Projekt gewonnene Wissen anzuwenden. Realität: Demonstration Ihres Frameworks. Für Projekte in einem anderen Rahmen gelten die erhaltenen Informationen nicht. Wenn es aus dem Titel und der Beschreibung klar wäre, würde ich keine Zeit verschwenden und zu einem anderen Bericht gehen.