您好，我叫Dmitry Karlovsky，我……那还是有毒的辣椒。我最近将我的Alpha振动倒入了Alfa Bank。作为回应，这些家伙表现得很庄重，没有个人解释我错了多少，而是在github上引发了一个问题。他们甚至修复了一些问题，使我的某些主张难以成立。但不是SSR混乱的部分。

时间已经过去，尘埃落定，然后故事继续：最近，Habr内容工作室的制作人向我提出了打磨他们Cake的建议。好吧，让我们发现风扇！

复杂情况

例如，此页面包含2500条评论。这是一个很大的页面，如果您在Chrome中打开它，它将截断1400条注释。要阅读其余内容，您必须将其打开，例如在Ognelis中。让我们将这些原因留在开发人员的良心上。让我们更好地考虑如何防止这种情况。但首先，让我们进行测量：

• — HTML JSON . , " ". , .
• — , .
• — (, — ), F5 ( " ") . .
• — , , , , .
• DOM — document.getElementsByTagName('*').length , .
• — . .
• — . .
• — , (shift+esc) .

. - — .

: . HTML. : HTML, "" JSON VueJS . , HTML. HTML , , .

, JSON 4 HTML. Tree , , JSON . , , , — 30%.

HTML , :

1. , 8 , . loading="lazy", .
2. HTML , , . DOM, HTML . — HTML.

, DOM . , . VueJS , .

100K DOM . 40 . .

DOM . , , , 700. , . — 2 . DOM . DevTools , .

— DOM . , . :

:

1. .
2. , .

— $mol, , , $mol .

JSON. , , , . $mol_data:

const Person = Rec({
    alias: Str,
    id: Str,
    login: Str,
    fullname: Maybe( Str ),
    avatarUrl: Maybe( Str ),
    speciality: Maybe( Str ),
})

const Comment =  Rec({
    id: Int,
    author: Maybe( Person ),
    children: List( Int ),
    isAuthor: Maybe( Bool ),
    isPostAuthor: Maybe( Bool ),
    message: Str,
    parentId: Int,
    score: Maybe( Int ),
    timeChanged: Maybe( Moment ),
    timePublished: Maybe( Moment ),
})

const Comments_response = Rec({
    comments: Dict( Comment ),
    threads: List( Int ),
})

— null , .

, . , :

@ $mol_mem
comments_data() {
    const uri = `https://m.habr.com/kek/v2/articles/${ this.article_id() }/comments/`
    const data = Comments_response( this.$.$mol_fetch.json( uri ) )
    return data
}

, , . , HTML. $mol_html_view:

<= Article $mol_html_view
    html <= article_content \
    highlight <= search
    image_uri!node <= image_uri!node \

( view.tree, , .)

HTML, $mol_view , . , $mol_html_view , .

image_uri, IMG , . , src , data-src. :

image_uri( node : HTMLImageElement ) {
    return node.dataset.src || node.src || 'about:blank'
}

. / .

@ $mol_mem_key
comments_visible( id : number ) : readonly number[] {

    if( this.comment_expanded( id ) ) {
        return this.comments_all( id )
    } else {
        return this.comments_filtered( id )
    }

}

, . , $mol . , , - — .

, , , , . . — . :

Ctrl+F , $mol_hotkey :

plugins /
    <= Search_key $mol_hotkey
        mod_ctrl true
        key * F?event <=> search_focus?event null
    <= Theme $mol_theme_auto

:

search_focus( event : Event ) {
    this.Search().Suggest().Filter().focused( true )
    event.preventDefault()
}

, $mol_theme_auto, .

, , $mol_lights_toggle:

tools /
    <= Lights $mol_lights_toggle
    <= Sources $mol_link_source
        uri \https://github.com/nin-jin/habrcomment
    <= Search $mol_search
        query?val <=> search?val \

, .

, , $mol_style, , :

$mol_style_define( $my_habrcomment , {

    Orig: {
        flex: {
            grow: 1,
            shrink: 0,
            basis: per(50),
        },
    },

    Article: {
        maxWidth: rem(60),
    },

    Comments: {
        flex: {
            shrink: 0,
            grow: 1,
        },
    },

    Comments_empty: {
        padding: rem(1.5),
    },

} )

:

include \/mol/offline/install

Service Worker, .

, , , .

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

, :

javascript: document.location = document.location.href.replace( /\D+/ , 'https://nin-jin.github.io/habrcomment/#article=' )

400 , . :

• /
• /
• /

5 . 6 ( 2 , ). , . .

. , HTML . , - , :

<= Message $mol_html_view
    minimal_height 60
    highlight <= search \
    html <= message \
    image_uri!node <= image_uri!node \

HTML . , , , .

5 . 10 .

API, — , , . . , — . :

@ $mol_mem
comments_data() {
    const search = encodeURIComponent( this.search() )
    const uri = `https://m.habr.com/kek/v2/articles/${ this.article_id() }/comments/?search=${search}`
    const data = Comments_response( this.$.$mol_fetch.json( uri ) )
    return data
}

, , . . , . - — . API. — .

, — , HTML, , - : , , , BR, . , - , - .

$mol_html_view HTML- — , . , , .

, :

1. — - $mol_list. , . - .
2. , overflow-anchor, , . , , , 100K , .

— , . , , . , , .

1. SSR PWA.
2. , , .
3. , — .
4. VueJS — , $mol — .
5. , .
6. 优先选择不会导致房屋中元素数量不受控制地增加的解决方案。

链接

1. 读者资源-您会注意到代码中根本没有任何内容。
2. $ mol框架的页面-害怕我们在那里有多少。
3. 有关$ mol和MAM的新闻频道-订阅以了解它们发生的所有重要事件。
4. $ Mol视频频道-有一天视频教程会在这里出现。