johnsonjo4531/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Chrome Canary 63 seems to be having a performance problem running the following code when the inspector/console is open in chrome. To recreate open the html page open the console then refresh it then halts all execution.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="script.js"></script>
  <style>
  body {
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }

  #out {
    font-size: 4em;
  }
  </style>
</head>
<body>
  <p>
    This page will hang when the console is open on startup in chrome canary 63. Try interacting with it with and without the console on startup.
  </p>
  <button id="count">Increment</button>
  <div id="out">0</div>
  <script>
    var count = 0;
    document.getElementById("count").addEventListener("click", ()=>{
      document.getElementById("out").innerHTML = ++count;
    });
  </script>
</body>
</html>

## script.js
async function* asyncRange(from, to) {
  for (let i = from; i < to; i++) {
    yield i;
  }
}

async function main() {
  let total = 0;
  const iter = asyncRange(0, 550000);
  while (true) {
    const result = await iter.next();
    if (result.done) break;
    total += result.value;
  }
  console.log(total);
}

main()
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="script.js"></script>
	<style>
	body {
	padding: 20px;
	font-family: Arial, Helvetica, sans-serif;
	}

	#out {
	font-size: 4em;
	}
	</style>
	</head>
	<body>
	<p>
	This page will hang when the console is open on startup in chrome canary 63. Try interacting with it with and without the console on startup.
	</p>
	<button id="count">Increment</button>
	<div id="out">0</div>
	<script>
	var count = 0;
	document.getElementById("count").addEventListener("click", ()=>{
	document.getElementById("out").innerHTML = ++count;
	});
	</script>
	</body>
	</html>
	async function* asyncRange(from, to) {
	for (let i = from; i < to; i++) {
	yield i;
	}
	}

	async function main() {
	let total = 0;
	const iter = asyncRange(0, 550000);
	while (true) {
	const result = await iter.next();
	if (result.done) break;
	total += result.value;
	}
	console.log(total);
	}

	main()