アイデアを簡単に紹介します。
オブジェクトに ajax を適用し、次に 子から親へ オブジェクトを順番に作成し、スタイルを設定し、レベルを追加します。
コードは次のようになります:
こんなことばかり。 。 。最適化するにはどうすればよいですか?
ES6 のフロントエンドのサポートが理想的ではないため、文字列テンプレートが使用できず、フレームワークの追加も困難です。ハードウェアの場合はどうすればよいですか?
文字列を連結してから直接 innerHTML を使用する場合と比較して、このように記述する場合の欠点は何ですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
首先，JS 人肉维护 DOM 的【过程式编程】在可维护性上是劣于模板风格的【声明式编程】的。考虑一行简单的
<p>xxx</p>和一大坨document.createElement('p')...，它们在可维护性上有天壤之别。那么，怎样在没有 ES6 或各种框架语法糖的情况下，采用类似字符串模板的方式，将数据绑定到 HTML 呢？这里有一种 jQuery 作者曾经推荐的方案：
首先可以在 HTML 里搞个猥琐的
<script>标签装模板，注意这个模板本身对 JS 并没有任何依赖，也可以把模板放在<body>外面。渲染数据时，直接取出模板中的 HTML 文本，用 JS 做正则替换即可：
参考我的这篇博客：
http://ewind.us/2016/js-rende...
当然，全量重置 innerHTML 是有性能风险的。但如果数据全量更新，那么即便是原生 JS 编写的代码，最后的 DOM 操作次数和直接重置 innerHTML 实际上是一样的。这时有几种思路：
React 就是为了这类问题而生的。把 React 当做你的 innerHTML，随便全量重置，React 帮你 diff 然后按需更新 DOM，岂不美哉？
Vue 通过依赖收集，直接能够找到变动的 DOM 所在位置并按需更新，连 diff 都不用，更是不知道高到哪里去了。
自己维护符合业务需求的 diff 算法（如只插入末尾）和 DOM 操作。也许是一个新轮子诞生的前奏呢（
结构太复杂，不优雅，纯粹是 肉抗，而且debug简直就是噩梦，以后代码维护量太大！
建议使用 前端 JS模板引擎，eg：artTemplate，就引入一个 JS 文件而已。
最简单的优势：比innerHTML快。
当你一次性添加几百个这种结构的时候，你就能体会到明显的速度差异