个人中心
gpt4 book ai didi

javascript - 为什么脚本在浏览器显示页面之前完成

转载 作者：数据小太阳 更新时间：2023-10-29 05:56:37 24 4
gpt4 key购买 nike

在下面的代码中，为什么 console.log 的循环在任何 HTML 元素显示之前就结束了？我已将 JavaScript 代码放在 HTML 文件的末尾。

<!DOCTYPE html>
<html lang="en">

<body>

    <p id="counter"> no clicks yet </p>
    <script>
        for (i = 0; i < 99999; ++i) {
            console.log(i);
        }
        console.log("ready to react to your clicks");
    </script>
</body>

</html>

更新:

基于我试过的一个答案，只有在控制台日志循环完全执行后，HTML 文档才会显示:

<html lang="en">

<body onload="onLoad()">
    <button onclick="clickHandler()">Click me</button>
    <p id="counter"> no clicks yet </p>
    <script>
        var counter = 0;
        function clickHandler() {
            counter++;
            document.getElementById("counter").innerHTML = "number of clicks:" + counter;
        }
        function onLoad() {
            for (i = 0; i < 99999; ++i) {
                console.log(i);
            }
            console.log("ready to react to your clicks");
        }

    </script>
</body>

</html>

最佳答案

您在问不同的问题。您的标题要求:

Why console.log gets executed before DOM model being generated?

我对“生成 DOM 模型之前”的理解是“在创建 p 元素之前”。 p 元素是在您的 script 元素运行之前创建的，并且可以从中访问它。如果您在脚本中执行 document.getElementById("counter")，您将获得您的段落。

然后你问:

why does the loop of console.log finish before any HTML element is displayed?

这是一个不同的问题。这里的问题不是 parsing 已经停止(与 Simeon Stoykov suggested 相反)。确实是解析停止了，但是并不能解释为什么没有显示该段落。浏览器可以在执行脚本 时显示段落。 (实际上，如果您在 script 元素内放置一个断点，Chrome 会在遇到断点时立即显示该段落。)

发生的事情是浏览器正在应用优化。浏览器尽可能地延迟回流(计算页面上元素的位置和几何形状)和渲染。可能的元素。目标是减少花在回流和渲染上的总时间。假设您没有将数字转储到控制台的脚本，而是更改段落样式的脚本，这反过来会导致段落更改位置或大小。一个天真的浏览器可能会这样做:

  1. 立即回流并渲染p#counter。
  2. 执行脚本，更新样式，使 p#counter 的旧位置和大小发生变化。
  3. 回流并呈现 p#counter 以反射(reflect)更改。

像 FF 或 Chrome 这样的真实浏览器会跳过上面的第一步，只会重排和渲染p#counter一次而不是两次.

在像您这样的简单示例中，优化不是很好，但可以想象一个包含一堆表格和一个启动脚本的复杂页面，该脚本会立即用数据行、图像、链接等填充表格。能够减少 X回流渲染操作的数量，仅一个回流渲染会产生巨大差异。

在您给出的示例中，浏览器知道在您的脚本执行期间用户无法对页面执行任何操作，因此在您的脚本完成之前浏览器渲染页面毫无意义。

此时问题出现了:

If the browser is delaying computing element position and size, then why can I do things like document.getElementById("counter").getBoundingClientRect() in my script and get coordinates??

浏览器可以尽可能地延迟它。当 JavaScript 代码查询元素的位置或大小时，就不再可能延迟。浏览器必须在那里进行回流，然后给出答案。 (在我上面的讨论中，我已经谈到了回流和渲染一起来简化一点。但是回流不一定紧接着渲染。所以渲染可能仍然会延迟到脚本执行完之后。)

如果您的示例旨在表示阻塞渲染并阻止您的用户获得任何反馈的长时间计算，那么解决这个问题的方法是将冗长的工作分成 block :执行一大块工作，然后使用 setTimeout 安排下一个 block ，依此类推，直到完成整个工作。例如:

const p = document.getElementById("counter");
let i = 0;
const limit = 100;
const chunkSize = 10;
function doWork() {
  for (let thisChunk = 0; thisChunk < chunkSize && i < limit; thisChunk++) {
    console.log(i++);
    p.textContent = i;
  }
  if (i < limit) {
    setTimeout(doWork, 0);
  }
}
doWork();

在上面的示例中，执行了一个包含 10 个数字的 block ，然后 setTimeout 安排下一个 block ，脚本将控制权返回给 JavaScript 事件循环，后者执行所需的任务。这包括响应用户交互，从而将页面呈现给用户。

在某些情况下，将整个工作卸载到 WebWorker 中可能是有意义的。

关于javascript - 为什么脚本在浏览器显示页面之前完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52558455/

24 4 0
文章推荐： javascript - 函数和无状态组件之间的区别？
文章推荐： c# - StackExchange.Redis的正确使用方法
文章推荐： php - 如何使用 Redis 在 NodeJs 和 PHP 之间共享 session ？
文章推荐： javascript - 十六进制格式可以用于 JSON 文件吗？如果是这样，如何？
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com