Question

有许多JavaScript框架允许您在页面完全加载之前使用DOM。通常，您会看到以某种方式操纵html或body标签，以确定用户的代理是否具有JavaScript支持。

例如，html标签将有一个'no-js'类，当DOM准备就绪时，该类名称将被更新为'js'，从而允许前端开发人员将页面样式设置为两个方式 - 一个支持JavaScript，另一个方式可以在不支持JavaScript时正确显示数据。

这样可以正常工作，但是总会有一些延迟，当你运行更新的类命名函数（从'no-js'到'js'）时，你会经常看到屏幕跳转样式应用于JS支持的站点版本。

这一直让我烦恼，如果页面上有很多基于JavaScript的交互性，它看起来真的很难看。

长话短说，我的目的是找到一个比ondomready事件更快的解决方案。我想出的解决方案是在打开的body标签后立即运行以下语句：

<script type="text/javascript">//<![CDATA[
var elBody = document.getElementsByTagName('body')[0];
elBody.className = elBody.className.replace(new RegExp('no-js\\b'), 'js');//]]></script>

这似乎很有效。没有更多的屏幕跳跃。这是一个好的方法吗？我不知道的任何缺点？

Answer 1

我也会在打开<body>标签后尽快运行脚本 - 它似乎是最好的地方。我只有一个建议。如果您不需要正则表达式，这个小脚本可能会运行得更快。也许简化为这样的事情：

<body> 
<script type="text/javascript">document.getElementsByTagName('body')[0].className='js';</script>

然后，您可以默认为非JavaScript情况设置页面样式，并使用js类进行增强。例如：

/* Base styles for signin form, displayed inline on page */
#signin-form{
background: #fff;
color: #333;
/* ...other pretty form styles... */
}

/* JS enhanced floating signin form */
.js #signin-form{
display: none;/* removes form from DOM and shown by JavaScript */
position: absolute;
top: 0;
right: 1em;
}

此处还有CSS渲染优势，因为选择器#signin-form的运行速度比.no-js #signin-form快。

希望这有帮助！

已启用JavaScript支持的替代解决方案

1 个答案: