HTML/JS：如何在脚本执行前阻止渲染？

问题描述 投票：0回答：1

我刚刚注意到在执行脚本之前渲染的奇怪行为。我一直认为，浏览器没有机会将任务从渲染队列中出列并在脚本标记之前执行它，因为这是单个线程。正如您将看到的，这不是真的。下面是一个简单的代码示例：

console.log('SCRIPT EXECUTED')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>HTML</title>

    <script>
        requestAnimationFrame(function animate(time) {
            console.log('RAF', performance.now());
        });
    </script>
</head>

<body>
<h1>Hello world</h1>

<script src="./script.js"></script>
</body>
</html>

人们可能会在控制台中看到不一致的输出。有时渲染出现在脚本之前，反之亦然。例如，它可能会导致 UI 闪烁。

有人能对此给出有意义的解释吗？

javascript html browser render repaint
1个回答
0
投票

无论是外部脚本还是内联脚本都没有关系 - 它们按照在页面中遇到的顺序执行。

输出不一致的最大罪魁祸首是方法

requestAnimationFrame()
。根据其文档，即使该脚本始终在
script.js
之前运行，输出时间也将取决于许多其他因素，例如：

  • 浏览器响应您的请求需要一定时间
  • 您的显示器刷新率
  • 用于提高性能和电池寿命的其他浏览器特定参数。

因此，这意味着即使您的脚本在后台以正确的顺序运行，渲染时间也会关闭，具体取决于浏览器对您的反应速度 

requestAnimationFrame()
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.