将脚本放在HTML的底部是否总是好的?

时间:2017-11-26 21:31:25

标签: javascript jquery html css

我被教导使用它,现在有一点问题:

<html>
    <body>
        <div id="mytext">text</div>
        <script type="text/javascript" src="my.js"></script>
        <script type="text/javascript">hideMyText();</script>
    </body>
</html>

我的Js:

function hideMyText()
{
    $('#mytext').hide();
}

所以我按照我的说法做了,但文字现在闪烁了。它可见一会儿,然后消失。如何让它立即运行?我知道我应该用CSS隐藏它 - 但它可能有不同的任务要做(比如这里,突出显示文字:http://jsfiddle.net/UPs3V/291/

1 个答案:

答案 0 :(得分:3)

您所看到的有时被称为 FOUC “Flash of Unstyled Content”

这是因为您的脚本位于页面末尾。浏览器将呈现它到目前为止所拥有的内容,然后暂停以从服务器获取脚本。但在这个差距期间,您将在任何脚本运行之前看到“原始”页面。

现在,理论上你应该有一个干净且可呈现的页面,以防JavaScript由于某种原因无法加载(或者有人仍使用NoScript ...)

防止此FOUC的一种方法是将脚本放在<head>中。这可能会导致加载页面时出现轻微延迟,特别是如果您有大脚本,但它允许您为DOMContentLoaded事件注册事件处理程序,这允许您在浏览器获得机会之前立即操作页面实际呈现它。