Olá, meu nome é Dmitry Karlovsky e eu ... vim para você de um futuro próximo. Não muito longe, porque tudo já está aí e todos estão desacelerando. O escriba se aproximou de nós imperceptivelmente: primeiro, o poder dos computadores parou de crescer, depois a largura de banda das redes. E os usuários ... eles continuaram a gerar conteúdo como se não fossem eles mesmos. Como resultado, em questão de anos, a UX das interfaces degradou-se tanto que se tornou impossível usá-las, e muitos usuários correram para mudar para o streaming em nuvem de seus navegadores, que funcionam em supercomputadores de propriedade de empresas que impedem as pessoas de instalarem bloqueadores de anúncios neles. Portanto, vim até você agora, neste momento, quando o problema já é perceptível, mas você ainda pode consertar tudo antes que seja tarde demais.
- 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%
, , . , .
A nota foi dada pela discrepância entre minhas expectativas e a realidade =) Expectativas: Serei capaz de aplicar os conhecimentos adquiridos ao meu projeto. Realidade: demonstração de seu framework. Para projetos em qualquer outra estrutura, as informações obtidas não são aplicáveis. Se estivesse claro pelo título e pela descrição, eu não perderia tempo e fui para outro relatório.