Windows 10 周年更新后的 Edge 14 的 HierarchyRequestError 报错

在升级到 Windows 10 周年更新后，使用系统自带的 Edge 浏览器浏览部分网站出现这种报错：

在网络上搜索 HierarchyRequestError 会找到同样的案例，大致都指向使用 appendChild 时报错，因此初步判定此报错是和节点操作相关。

翻看网络上的案例，发现大多是 appendChild 使用方法错误，而 Edge 的这个报错却是相同的代码在其他浏览器和之前版本的 Edge 下都没有出现的问题，所以应该不会是粗心造成的低级错误，可能是浏览器本身的问题。

但毕竟要解决不是。

既然看到 Avalon 1.5.5 报错，那么根据浏览器报错阅读源码，发现错误是出现在 ms-repeat 指令中：

while (elem.firstChild) {
    binding.template.appendChild(elem.firstChild)  // 这里报错
}

那么推断，这里的操作被最新的 Edge 认为是“将不合适的节点 append 到了另一个不合适的节点中”。

经过一番排查，发现问题是出在 avalonFragment 上。Avalon 中的所有 fragment 都是通过 avalonFragment.cloneNode(false) 创建的，那么把这些 fragment 都改为由 document.createDocumentFragment() 创建，错误果然消失。

那么做一个精简的报错案例：

<!-- Windows 10 周年更新后的 Edge 14 下会报 HierarchyRequestError 的用法 -->
<div id="test-div"></div>
        
<script>
    var fragment = document.createDocumentFragment();
    var newFragment = fragment.cloneNode(false);
    
    var newDIV = document.createElement("div");
    newDIV.innerHTML = "newDIV";
    newFragment.appendChild(newDIV);
    fragment.appendChild(newFragment);
    document.querySelector("#test-div").appendChild(fragment);
</script>

所以解决方法也很简单，暂时不要使用 cloneNode 的方式创建 Fragment 然后又将其 append 到另一个 clone 出来的 Fragment 中，用 document.createDocumentFragment() 代替。

有意思的是，如果是 cloneNode 一个 element 比如 div 则不会报错，因此很可能是 Edge 14 自己的 Bug。

皆大欢喜。_(:3」∠)_