Will console block the page rendering

Question

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)

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

score 1 · Answer 1 · answered Nov 11 '20 at 03:24

1

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.

answered Nov 11 '20 at 03:24

rjbathgate

319
3
14

score 0 · Answer 2 · answered Nov 11 '20 at 02:26

0

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.

answered Nov 11 '20 at 02:26

James Dinh

181
6

Liam Pillay · Accepted Answer · 2020-11-11T03:23:59.440

0

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

edited Nov 11 '20 at 03:23

answered Nov 11 '20 at 02:49

Liam Pillay

592
1
4
19

@d_30 if this is the answer you were looking for, don't forget to mark it as accepted. It helps me, and the community, out a lot. – Liam Pillay Nov 11 '20 at 03:04

Will console block the page rendering

3 Answers3