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

同样值得注意的是，new project可能在较旧的浏览器中引起更多致命问题（页面加载失败），因此，如果您在生产中不需要它，则将其取出来，因为它是不必要的渣dro。

Answer 2

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

Answer 3

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

console.log不会阻止渲染页面，但是会阻碍页面渲染的性能，因此为什么要获得闪烁效果。

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

控制台将阻止页面渲染

3 个答案: