控制台会阻止页面渲染答案

【问题标题】：Will console block the page rendering控制台会阻止页面渲染
【发布时间】：2021-02-23 00:29:39
【问题描述】：

我写了一个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)的代码保留和删除有什么区别

当我删除它时，页面将流畅地显示，没有阻塞或闪烁。
但是当我添加这个控制台时，页面会阻塞一段时间或闪现。

【问题讨论】：

标签： javascript html web-performance

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

@d_30 如果这是您正在寻找的答案，请不要忘记将其标记为已接受。它对我和社区都有很大帮助。

【解决方案3】：

是的，任何函数调用都会略微降低性能。而在你的代码中，你调用了console.log大约10000次，所以它会降低页面的性能。

【讨论】：