【面向JS--DOM加载过程】-白红宇

【面向JS--DOM加载过程】

阅读量：477 次

发布时间：2019-03-06

本文共 649 字，大约阅读时间需要 2 分钟。

DOM加载过程中布局优化

DOM(文档对象模型)加载过程的布局优化是前端性能优化中的重要环节. DOM树的修改会导致布局重建，这一过程往往消耗不少资源. 减少布局触发次数是提升应用性能的关键.

传统的DOM操作会导致频繁的布局重建. 首次想到的解决方案是提前在内存中构建一个完整的DOM子树，然后一次性将其挂载到页面 DOM树中. 这种方法可以避免在添加多个平级元素时触发多次布局.

现今的主流前端框架如Vue和React正是基于这种原则开发的. 它们使用虚拟DOM的思想，将所有需要更新的部分先在内存中构建成一个完整的片段(以DocumentFragment为核心), 最后再将整个片段挂载到实例 DOM树中.

文档片段的使用场景主要是有效管理内存中的 DOM子树. 通过在片段内构建完整的 DOM结构，可以避免为每个子元素单独触发布局. 这对于同时添加多个平级元素的场景尤为有效.

如何操作

创建一个文档片段对象: var frag = document.createDocumentFragment();

将需要添加的子元素依次追加到文档片段中: frag.appendChild(elem);

将构建好的文档片段挂载到目标父节点中: parent.appendChild(frag);

通过上述方法，布局触发次数可以从 n 次减少到仅一次，从而大幅度提升性能表现.

这种优化策略特别适用于需要一次性添加多个平级节点的场景. addTo DOM树时仅触发一次布局，减少了重绘操作对性能的消耗.

转载地址：http://xmxdz.baihongyu.com/

你可能感兴趣的文章