Question

我有一个页面的末尾带有一个javascript文件。该文件放在末尾，以便我可以访问所有dom元素。让我们说标记看起来像这样

<html>
<head></head>
<body>
//lot of markup here
<script src="my-js.js"></script>
<body>

示例标记只是为了显示我的js文件的位置。

js文件（my-js.js）中的第一个赞是

document.body.style.visibility = 'hidden';

代码运行后，我将可见性设置回隐藏

据我了解（很多与此相关的文章，包括关于stackoverflow的文章）是浏览器到达js，然后执行它，然后继续进行渲染，然后绘制。如果是这样，我所描述的代码应该可以正常工作。

但是，现在发生的是，在执行代码之前，页面显示（少于500ms），然后迅速隐藏，然后在执行代码后再次显示。

简而言之，我想要的是：隐藏页面>代码执行>显示页面相反，我得到的是显示页面>隐藏页面>代码执行>显示页面

我的问题是，为什么瞬间显示该页面？我在这里做什么错了？

PS：请注意，我无法更改js的位置，也无法添加其他位置。因此，请勿发布任何建议相同的解决方案。更重要的是，我想知道为什么我的代码是错误的。

Answer 1

您可能对使用defer方法感兴趣。

defer表示“等待解析器完成执行”。大致相当于将脚本绑定到DOMContentLoaded事件，或使用jQuery.ready。当代码运行时，DOM中的所有内容将可供您使用。与异步不同，延迟的代码将按照在页面HTML中显示的顺序运行，只是延迟到HTML完全解析之后。

例如： <script src="my-js.js" defer></script>

查看更多here

Answer 2

将script标记放在body的开头，这样就可以在渲染body时对其进行几乎完全准确的评估。

<html>
<head></head>
<body>
<script>
document.body.style.visibility = 'hidden';
</script>
<p>Sample text</p>
</body>
</html>

您还可以添加一个style标签，以将身体的可见性设置为隐藏。

body{
  visibility: hidden;
}

 <html>
    <head></head>
    <body>
    <p>Sample text</p>
    </body>
 </html>