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