控制台会阻止页面渲染吗

Question

我用下面的代码写了一个 html 页面。

<html>
<header>
    <div class="logo"><a href="index.html" title="Coyle Appliance Repair"></a></div>
    <div class="phoneNumber"><h3 class="numberHeader">call today for an appointment - same day service is available</h3>
        <h1 class="number"><a href="tel:+1-555-555-5555">555-555-5555</a></h1></div>
    <div class="greyStrip"><h2 class="motto">Serving the Twin Cities and western Wisconsin since 1982</h2></div>
</header>

<script>
  ((function demo () {
    let a = 1
    while (a < 10000) {
      a++

      console.log(a)
    }
  })())
</script>

<div class="mainContent"><h2 class="missionStatement">Full service restaurant and commercial kitchen repair. We service all cooking, food prep, warewash/dishroom, and
    refrigeration equipment.</h2>
</div>
</html>

问题是，保留和删除console.log(a)

的代码有什么区别

当我删除它时，页面将显示流畅，没有块或闪烁。
但是当我添加这个控制台的时候，页面会卡一段时间或者闪一下。

Answer 1

是的，任何函数调用都会稍微降低性能。在您的代码中，您调用了 console.log 大约 10000 次，因此它会使页面的性能降低。

Answer 2

浏览器正在计算该循环的每次迭代和运行里面的所有代码。每个函数都使用某些东西，在这种情况下，您调用 console.log 10,000 次，这意味着浏览器必须至少进行 10,000 次计算.

console.log 不会阻止页面呈现，但它会影响页面呈现的性能，因此会出现闪烁效果。

console.log 如何影响性能：console.log is a lot slower than an empty function

Answer 3

还值得注意的是，console.log 可能会在旧版浏览器中导致更多致命问题（页面加载失败），因此如果您在生产中不需要它，请将其删除，因为它是不必要的渣滓。

控制台会阻止页面渲染吗

Will console block the page rendering

html

javascript

web-performance