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」∠)_