无压缩。

  我是没想到还是有人会说,没有基础的人才会问html空格的问题,这些细节没有什么用,而我这里给大家简单的汇报一下。

没有技术的人才会问空格问题??? #web前端20240823更新

  首先第一个问题,标签和标签之间空格的问题。先看一下这个家伙,这个例子,这两种写法有什么区别?直接看这里的例子。第一种写法包含了一个奇怪的空格,但是第二种写法是不包含空格的。

  这个东西在html里面,它的解析,它的Dome节点中看是看不出来的,而我们看它们的表现完全一致的,要怎么去理解?毕竟写的代码不是所有的都会去挂工程画,这个地方是animate和note的区别,它们的内存结构是不一样的。

  比如第一个节点,它下面包含了5个字节点,有3个是文本节点。再看第二个节点,这个节点下面只有两个节点,只有两个span的标签。去看html的时候,它的表现是字符,标签是字符的一种结构,但是最终使用的时候是document,它是节点,中间是有转换的,这是理论。

  这里聊的就是text文本节点,而对于文本节点,那里面的东西就非常恶心了,东西就特别多了。比如现在就要这三个字,无压缩它的宽度,要怎么去计算?找一下无压缩节点,找的是无压缩里面文案的节点,它是没有宽度的,上面可以看到它的宽度是144,这是它渲染出来的,它的宽度是没有的,这个节点里面是不给提供它的宽高的,这是很恶心的一件事情。

  必须得基于容器,基于它外侧的容器,来去获取到它最终的宽度,计算中文的宽度是多少,大家有见过这样的需求吧。

  再说一个,现在要节点信息的位置,比如这里做了个例子,现在要定义文案的偏移量,要怎么去计算?当用第一种方式里面写的有SPA标签以后,直接获取标签,用行内的标签来去进行获取,里面包含了左边定位的信息,三百八十七。

  ·但现在要计算第二个节点,它的问题跟刚才的问题是一样的,如何去获取到text的节点?它的宽高获取不到的,没有偏移量的信息,得进行特殊的计算,这就是其中一个比较大的区别,这个东西就比较操蛋了。

  ·再来一个跨局跟行内元素的规则,规则包含哪些?标准的规则是所有的子元素,块菊元素当中所有的子元素要么都是块菊,要么都是内联的。看一下它们两个这种写法上有没有区别?这两种写法是没有任何区别的,因为它是跨极,它是内联的,而内联和跨极是不允许进行交叉使用的。

  它的写法相当于它的外层又包含了一个隐匿的跨句元素,直接看页面中表现的效果,它俩的表现效果是一致的,虽然标签不一样,但是最终展示的结果是一样的,它俩的表现形式是一样的。

  如果这个逻辑知道,再解释一下下面这种写法,这两种写法是一样的,解释一下为什么?已知div是跨距元素,跨距元素当中里面所有的节点全部都是跨距元素或者是行内元素,而又知道空格会转换成text的节点,而Tech的节点是行内元素,所以它的外层又会包成一行隐匿的节点,它是div,所以这里包含div,这里又包含div,有3个空格。

  块级:所有的子元素都是块,中间两偏差的两个一,这两个元素它俩的表现是一样的,可以看到它最终表现的效果。

  这里引出的额外的概念就是塌陷,没有内容,没有div它的content是0,它的高度必须得是0,否则这种实现就会跟理解是有差异的,而这种实现又会产生一些额外的其他的问题。

  举一个例子,往from表单里面,往table里面插入元素,恰巧那一行的数据它就是为空,后端返回这个空词无串,这个时候要不要进行特殊处理?比如图中这个table,这个table它就是没有数据,这两行就是没有数据,最终展示的时候可能就是第一行它是正常的,它的高度可能是40,第二行第三行它就是瘪了,发现了因为没有内容产生的原因。

  要怎么去解决这个问题?phone表格也是一样的,它也会有类似的问题。当然还会有一些其他的比较恶心的要求,现在是复文本,现在是编辑代码,而要求内容跟写的结构一样,现在要再怎么去处理第三类?使用PRE标签,刷新一下,空壳这个问题又得到了一个处理。

  这里就涉及到了具体的解析结构、规则,而这些问题聊完以后又可以回到上一个问题,HM中有哪些标签?关于如何分类的?标签的分类其实按功能分、按和模型去区分,没问题都没问题,但至少所有的类型得加上。

  比如hider meter,它们是行类的还是块儿级?包括直播的时候弹幕上已经提到过行内块级,有些内容是说错的,讲道理当时就是听个响,因为答案太普通了。可以按照另外的一种结构来去区分,可以基于转换后的元素进行区分,而它包含很多。

  ·第一种:空元素,没有内容的元素,它的核心是什么?现在写一个image标签,里面的标签内容不要那样写,非要这样去写,里面加一个奇怪的标签内容,肯定是标加不进去的,是没有办法放到image里面的。包括heart,包括这些里面的其他的标签全部都是这样的,最终会做一些特殊的操作来去处理里面的span或者里面文案的内容。

  ·第二个元素,模板元素。它是用来定义下面模板用的,是比较特殊的,里面的内容不会进行额外的解析。比如现在写了一个奇怪的标签,里面加了一个script,这个时候刷起甲会怎样?刷新一下标签会进行执行。当然是如果用time play就不会进行执行,它是一个元素的,是一个模板类的标签,刷新一下不会进行执行。

  ·第三类,原始文本元素。这类元素其实往下看,主要是看这两个元素包含可转移和不可转移,一般是两个,提示器写的也行,一般是两个。这两个会进行解析,需要其他的解析器来对里面的代码去进行解析。但是textl里边放的这些元素是不会进行解析的。

  比如现在把tablet改成taxl,大家注意里面的节点会怎么处理?会去执行吗?不会执行,并且会把里面的内容放到里面的内容,这个东西也是以前代替template的核心原因。去看一些比较老的实现的时候,比如百度中里面会用一些taxl代替template,因为以前没这个元素。

  ·第五个,这两原始文本算两个,第五个就是外来元素,这里写的又比较清楚,非HTML规范的一些元素。特殊的一些元素,外来的不是html里面规范的。

  最后就是普通元素,打鼓本身就是笔试题的平替,但是它的内容跟笔试是不一样的,笔试是有标准答案的,是要打分的,60分以后继续聊,没有超过60分就可以走了。

  但打鼓不是,抛出一个问题,永远是论述题,大家来相互的沟通,有可能面试官的这个点不会没关系,完全可以主动地去提。面试官我觉得这个点不重要,我更了解浏览器中编语原理的部分,了解浏览器中关于渲染引擎的这一部分,可以基于这个问题来探讨一下关于节点,关于刚才这些问题到底是有一个什么样的答案,这是没有问题的。

  反正一句话,我是不认可没有技术的人才会问hmr空格问题的,更不认可这些细节问题没有任何用的言论。