Skip to content

Instantly share code, notes, and snippets.

@joeljeske
Last active February 25, 2019 23:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joeljeske/b53f6c3aede1aea5fb397cdd68ffbfc9 to your computer and use it in GitHub Desktop.
Save joeljeske/b53f6c3aede1aea5fb397cdd68ffbfc9 to your computer and use it in GitHub Desktop.
Reproduce Chrome 72.x Android Layout CPU Spike
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span id="test"></span>
<p>
Click on the buttons below to use 'n' number of children in the inline container.
<br />
On my test device, 20-23 children made the CPU spike
<p>
<button onclick="updateChildren(5)">Use 5 Children</button><br />
<button onclick="updateChildren(10)">Use 10 Children</button><br />
<button onclick="updateChildren(15)">Use 15 Children</button><br />
<button onclick="updateChildren(20)">Use 20 Children</button><br />
<button onclick="updateChildren(25)">Use 25 Children</button><br />
<button onclick="updateChildren(30)">Use 30 Children</button><br />
<button onclick="updateChildren(35)">Use 35 Children</button><br />
<script>
function updateChildren(count) {
document.getElementById('test').innerHTML = '<span><div>child</div></span>'.repeat(count);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment