我有一个页面末尾有一个 javascript 文件。该文件放在末尾，以便我可以访问所有 dom 元素。 让我们假设标记看起来像这样
<html>
<head></head>
<body>
//lot of markup here
<script src="my-js.js"></script>
<body>
示例标记只是为了显示我的 js 文件的位置。
js文件(my-js.js)中的第一个like是
document.body.style.visibility = 'hidden';
代码运行后，我将可见性设置回隐藏
根据我的理解(来自很多与此相关的文章，包括 stackoverflow 的文章)，浏览器到达 js，然后执行它，然后继续渲染，然后绘制。 如果那是真的，那么我描述的代码应该可以正常工作。
但是，现在发生的情况是，页面按代码执行前的状态显示(少于 500 毫秒)，然后迅速隐藏，然后在代码执行后再次显示。
简而言之，我想要的是: 页面隐藏 > 代码执行 > 页面显示 相反我得到的是 页面显示 > 页面隐藏 > 代码执行 > 页面显示
我的问题是为什么页面会在那一瞬间显示？我在这里做错了什么？
PS:请注意，我不能更改 js 的位置，也不能添加另一个。因此，请勿发布任何建议相同的解决方案。 更重要的是，我想知道为什么我的代码是错误的。
最佳答案
您可能对使用 defer 感兴趣方法。
defer means “wait for the parser to finish to execute this”. It’s roughly equivalent to binding your script to the DOMContentLoaded event, or using jQuery.ready. When the code does run, everything in the DOM will be available for you to use. Unlike async, defer’d code will run in the order it appears in the HTML of the page, it is just deferred until after the HTML is fully parsed.
例如:
<script src="my-js.js" defer></script>
查看更多here
关于javascript - HTML/JavaScript : prevent paint before code executes，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51328490/