Search code examples
javascripthtmlweb-performance

Will console block the page rendering

I wrote a html page with code below。

<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>

Question is，what the difference between keep and remove the code of console.log(a)

  1. When i remove it, the page will display fluently with no block or a flash.
  2. But when i add this console, the page will block a period of time or with a flash.
Solution

  • The browser is calculating each iteration of that loop and running all the code inside. Every function uses something, in this case you are calling that console.log 10,000 times which means the browser has to do at least 10,000 calculations.

    The console.log will not block the page from rendering but it can hinder the performance of the page rendering, hence why you are getting that flickering effect.

    How console.log affects performance: console.log is a lot slower than an empty function