代码之家 › 专栏 › 技术社区 › meandmycode

是否可以在就绪状态之前操作DOM?

domready progressive-enhancement dom javascript

meandmycode · 技术社区 · 15 年前

这通常是我如何在保持体验干净的同时管理渐进增强,但它有多安全?是否有可能出现比赛条件,但这不起作用?

想象一下简单的抽象场景,如果您有JavaScript支持,那么您希望显示不同的内容。这就是我最终要做的:

<div id="test">original</div>
<script type="text/javascript">
    var t = document.getElementById('test');
    t.innerHTML = 'changed';
</script>

许多人可能会声称您应该使用一个框架并等待一个domready事件,然后在那里进行更改。但是,如果“test”元素在文档结束之前已经被呈现,并且css已经就绪,并且domready触发器已经存在很大的延迟。从而引起“原始”的明显闪烁。

此代码是否可能导致比赛条件失败?或者,如果元素存在于脚本之前,我可以保证它是可发现和可修改的吗?

事先谢谢。

5 回复 | 直到 12 年前

Andrew Martinez 12 年前

你可以,但做这件事也有问题。

首先,在IE中,如果您试图操作一个尚未关闭的节点(例如,在其关闭标记之前的body应该在您的JS下面),那么您可能会遇到IE的“操作中止”错误,这将导致一个空白页。节点的操作包括附加节点、移动节点等。

在其他浏览器中,行为是未定义的,但是它们的行为通常如您所期望的那样。主要问题是,随着页面的发展,页面可能会以不同的方式加载/分析/运行。这可能会导致一些脚本在实际创建浏览器定义引用元素并使其可用于DOM操作之前运行。

如果您试图增强用户感知的性能(即快速性)。我强烈建议你不要走这条路,要把你的页面变亮。你可以使用雅虎的yslow/google的页面性能firebug来帮助你开始。

Google's Page Speed

Yahoo's YSlow

Rik Heywood 15 年前

您可以在DOM完全加载之前对其进行操作,但这样做有风险。显然,您不能保证您试图操作的DOM的位确实存在,因此您的代码可能会间歇性失败。

Christoph 15 年前

只要您只修改脚本块前面的节点(即节点的结束标记前面的脚本的开始标记),就不应该遇到任何问题。

如果要确保操作成功,请将代码包装在 try...catch 阻止并再次通过 setTimeout() 失败论。

Danita 15 年前

在viajeros.com上,我有一个加载指示器,从8-9个月开始工作,到目前为止我还没有遇到任何问题。看起来是这样的:

<body>

<script type="text/javascript">
    try {
        document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
        document.getElementById("cargando").style.display = "block";
    } catch(E) {};
</script>

-1

Kernel James 12 年前

过早地访问DOM会在IE 5和导航器4中引发异常。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前