CODEWITHSUNDEEP
javascripthtmlweb-performance
d_30
d_30

Reputation: 13

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.

Upvotes: 1

Views: 300

Answers (3)

rjbathgate
rjbathgate

Reputation: 319

Also worth noting, console.log can cause more fatal issues (failed page loads) in older browsers, so if you don't need it in production, take it out as it's unnecessary dross regardless.

Upvotes: 1

Liam Pillay
Liam Pillay

Reputation: 816

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

Upvotes: 1

James Dinh
James Dinh

Reputation: 181

Yes, any function call will slightly reduce the performance. And in your code, you call console.log about 10000 times, so it'll make the page's performance reduced.

Upvotes: 0

Related Questions