Android 原生浏览器中的 dom 处理时间太长

Posted 2023-03-06

【中文标题】Android 原生浏览器中的 dom 处理时间太长

【英文标题】：Too high dom processing time in Android native browsers

【发布时间】：2013-12-16 09:09:07

【问题描述】：

我目前正在尝试减少我网站的前端加载时间。我遵循了各种步骤，例如延迟加载 javascript、使用 sprite、合并和缩小 css/js 文件。我已经看到主要浏览器的页面加载时间显着减少。但是，我可以看到所有与 android 相关的本机浏览器的 DOM 处理时间大约为 6-7 秒，从而将页面加载时间提高到 9 秒，与其他浏览器的加载时间（大约 5 秒）相比，这太高了。

我知道上面提供的信息没有代码而且非常模糊。谁能指出我正确的方向来减少 Android 本机浏览器中的 DOM 处理时间？

【问题讨论】：

可能是你在 document.ready 事件的巨大 DOM 树上做一些选择器。blog.newrelic.com/2012/05/10/…

【参考方案1】：

前段时间，我做了很多IE6优化。我学到的是尽可能具体地使用选择器。假设您有一个巨大的 DOM 树，并尝试使用 jQuery 选择三个类为 find_me 的节点：

...
<div class="find_me">...</div>
<div class="find_me">...</div>
<div class="find_me">...</div>
...

$('.find_me') 将它们全部返回，但浏览器必须检查整个 DOM 树以查找此类名称。

让我们总结一下：

...
<div id="unique_wrapper">
  <div class="find_me">...</div>
  <div class="find_me">...</div>
  <div class="find_me">...</div>
</div>
...

$('#unique_wrapper .find_me') 也会返回它们，但速度要快得多，因为浏览器几乎会立即选择 id 为 unique_wrapper 的元素，而忽略 DOM 树的其余部分。

我真的不知道与旧的 IE6 相比，Android 浏览器优化了多少这种行为。但我敢打赌，如果你优化你的选择器，你可以加快速度——假设你完全使用了选择器。

【讨论】：

谢谢！！，但这对页面加载时间有何影响。我敢肯定，我不会在文档加载时进行任何 DOM 查找

嗯，我不知道你的应用程序是做什么的；）对于 IE6，我看到一个空白的视口大约一分钟（！），直到 DOM 被渲染。优化后是一秒钟。在加载具有巨大 DOM 树的页面时，某些元素会动态显示或隐藏。你说 DOM 处理需要很长时间......但是如果你不做任何 DOM 查询，那将是出于其他一些原因......