Skip to content

GitLab

T
tangled
Commit 81f80690 authored by wiltzius@chromium.org's avatar wiltzius@chromium.org
Browse files
Options

Add a history state update example to key_silk_cases 

Updating the history state has been a surprisingly rich source of performance
bugs. This minimal page exemplifies them.

BUG=391158

Review URL: https://codereview.chromium.org/378803002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@282291 0039d316-1c4b-4281-b951-d872f2087c98
parent 21ee3917
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 0 deletions
tools/perf/page_sets/key_silk_cases.py
View file @ 81f80690
......@@ -589,6 +589,33 @@ class SVGIconRaster(KeySilkCasesPage):
action_runner.Wait(1)
interaction.End()
class UpdateHistoryState(KeySilkCasesPage):
""" Why: Modern apps often update history state, which currently is janky."""
def __init__(self, page_set):
super(UpdateHistoryState, self).__init__(
url='file://key_silk_cases/pushState.html',
page_set=page_set)
def RunNavigateSteps(self, action_runner):
action_runner.NavigateToPage(self)
action_runner.ExecuteJavaScript('''
window.requestAnimationFrame(function() {
window.__history_state_loaded = true;
});
''')
action_runner.WaitForJavaScriptCondition(
'window.__history_state_loaded == true;')
def RunSmoothness(self, action_runner):
interaction = action_runner.BeginInteraction('animation_interaction',
is_smooth=True)
action_runner.Wait(5) # JS runs the animation continuously on the page
interaction.End()
class KeySilkCasesPageSet(page_set_module.PageSet):
""" Pages hand-picked for project Silk. """
......@@ -627,3 +654,4 @@ class KeySilkCasesPageSet(page_set_module.PageSet):
self.AddPage(Page25(self))
self.AddPage(Page26(self))
self.AddPage(SVGIconRaster(self))
self.AddPage(UpdateHistoryState(self))
tools/perf/page_sets/key_silk_cases/pushState.html 0 → 100644
View file @ 81f80690
<!doctype html><html><meta charset=utf-8>
<meta name = "viewport" content = "width = device-width, user-scalable = no">
<style>
body {
width: 300px;
}
div.o {
height: 50px;
width: 50px;
border-radius: 50px;
position: absolute;
left: 150px; top: 50px;
background: red;
-webkit-transform-origin: 25px 100px;
}
div.b {
position: relative;
}
.b div {
position: absolute;
height: 25px;
width: 25px;
border-radius: 25px;
}
</style>
<body>
<div class=b></div>
<div class=o></div>
<script>
var count=0;
function rnd(x) {
count++;
return Math.floor(Math.abs(Math.cos(count)) * x);
}
function newdiv() {
var d = document.createElement('div');
d.style.top = rnd(350) + 'px';
d.style.left = rnd(275) + 'px';
d.style.background = 'rgb(' + rnd(255) + ',' + rnd(255) + ',' + rnd(255) + ')';
document.querySelector('.b').appendChild(d);
}
for (var i = 0; i < 1000; i++) {
newdiv();
}
a = 0;
n = 0;
d = document.querySelector('.o');
function update(a) {
d.style.webkitTransform = 'rotate3d(0,0,1,' + a + 'deg)';
}
function step() {
a = (a + 3) % 360;
update(a);
window.requestAnimationFrame(step);
if (a == 0) {
n++;
history.pushState(n, n, '/pushstate/' + n);
}
}
step();
</script>
<body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment