问题：

你为什么这么做--在浏览器上导致DOM树中断？

万俟穆冉

2023-03-14

当我看到解决http://escape.alf.nu第15级的答案时，我注意到

<!DOCTYPE HTML>
<html>
    <body>
        <script>
            var a = '<!--<script>';
        </script>
        <p>Test</p>
    </body>
</html>

但这两个脚本将显示“Test”：

<!DOCTYPE HTML>
<html>
    <body>
        <script>
            var a = '<!--';
        </script>
        <p>Test</p>
    </body>
</html>

和

<!DOCTYPE HTML>
<html>
    <body>
        <script>
            var a = '<script>';
        </script>
        <p>Test</p>
    </body>
</html>

我不明白，为什么会这样？

共有2个答案

双元魁

2023-03-14

这将是内部机制中违反的一些假设。

试图合理化这些东西没有多大意义。

你写了无效的超文本标记语言，所以任何事情都可能发生。

西门胜涝

2023-03-14

这就提出了一个重要的观点，

这段代码不是有效的HTML5语法，所以在HTML5规范中没有任何东西可以给我们关于这里发生了什么的线索。具体来说，有两个问题：

这两个问题都会使浏览器的HTML解析器进入错误解析模式，这意味着它们试图理解无效语法。浏览器在试图理解无效语法时所做的是未定义的行为，这在技术上意味着任何事情都可能发生（比如鼻魔）。这里事实上的行为似乎是浏览器同意如何处理这种未定义的行为，但这仍然是未定义的行为。

无论出于什么原因，这种语法问题的组合会导致浏览器忽略文档中稍后的文本。

编辑：我已经确定了解析错误是如何通过遍历HTML5规范的这一部分产生的。

脚本的文本内容（不包括空格）为

var a = '<!--<script>';

这必须符合以下语法规则：

data1 *( escape [ script-start data3 ] "-->" data1 ) [ escape ]

我们可以通过匹配data1开始解析文本内容，这有以下规则：

data1         = < any string that doesn't contain a substring that matches not-data1 >
not-data1     = "<!--"

也就是说，字符串var a='与data1产品匹配。因为下一部分是

如果脚本后面有任何文本，它必须与转义产品相匹配，如下所示：

escape        = "<!--" data2 *( script-start data3 script-end data2 )

让我们把课文的下一部分配对。到目前为止，我们已经

data1    var a = '
escape   <!--
  data2  ???

现在，data2中不能包含任何内容，因为data2生产禁止子字符串

data2         = < any string that doesn't contain a substring that matches not-data2 >
not-data2     = script-start / "-->"

lexer无法根据语法执行有效步骤，因此浏览器现在必须进入错误处理。

共有2个答案