[笔记] HTML里的注释原来真的是一个Node…

发布于 2023-06-08  169 次阅读


AI 摘要

文章摘要:在这篇文章中,作者探讨了在HTML中注释的作用以及它们到底是怎样的一个实体。作者注意到在一些使用Vue构建的网站中,经常会在元素面板中看到大量的注释行。作者一直将这些注释视为一种形式的插槽,但是通过对注释进行进一步研究,作者发现了一些新的发现。作者发现注释实际上是一个Node,而不仅仅是一段文本。这个发现引发了作者对注释作为一个实体的疑问,以及它们如何被创建和使用的问题。作者还解释了Comment是如何被视为一个Node,并且可以像其他元素一样被初始化和替换的。最后,作者提出了可能是Vue在使用注释作为插槽的原因,并指出了这种方法能够提升性能的优势。

在看文章 连尤大都要借鉴的开源项目也会有一些迷惑行为 的“迷之叹号❗️”一节时,我看到文章提到这么一段描述:

关于!标签的描述

确实呀,有时候用F12看vue构建的网站经常会在元素面板里看到大量这样的“注释”行,我一直只把它们当作某种形式的“插槽”,因为一旦那里有元素生成,它们就会被替换掉。但是,虽然认为它们是“插槽”,但是我仍然以为它们是文本的,毕竟连元素面板都给它显示成灰色和绿色嘛...

但是仔细一想又不对了,虽然这篇文章说的是SolidJS,<!>的用法也和Vue不同,但是这是不是代表这个注释也是一个实体元素呢?毕竟,Python的多段注释""" xxx """也是多段文本,只不过执行时会被跳过去罢了。

如果是一个正确的元素,那它一定能通过某种方式被创建。比如我想要创建div,那么可以这样:

const div = document.createElement("div");

其中div是标签名,所以可以通过createElement来创建。

如果是<!>或者<!---->,那能用来创建的名字就只能是!了。但是经过尝试,这个标签名被认为不合规:

叹号不能用于创建元素

不过我想到另一个情况,createElement就像它的名字那样,只能创建元素,可是网页里面并不只有元素,或者说HTML Document中并非是HTMLElement组成的,而是Node,比如这种Node:

Text Node

这是一种文本Node,甚至可以用来给style标签插入css。或者说,某种意义上讲,所有HTML元素里面的字都是TextNode。

而查询moz文档看得到,HTMLElement的基类是Element,而Element也是实现了Node的接口。

Element的描述

所以,会不会其实Comment也是一种Node呢?

这个时候我才发现一个以前一直被忽略的问题。

在Chrome开发者窗口的元素面板中有一个功能,你可以选中任何元素,然后在控制台使用$0代指它,被选中的元素会有一个标记:

被选中的标记

而注释,是可以被选中的:

被选中的注释

这样基本上就可以确认这是一个实体,但是具体是什么呢?既然拿到了,就很好办了:

尝试

可以看到,Comment确实是Node,并且还可以被直接初始化。

而Node,是有一个replaceWith方法的。

补全提示replaceWith

或许这就是为什么Vue使用Comment来当作插槽的原因吧,Comment作为Node不渲染任何内容也不影响内容,但是可以在需要的时候快速替换,这样就能提升一些性能了。