-
Notifications
You must be signed in to change notification settings - Fork 40
/
scroll-latency.html
66 lines (63 loc) · 2.89 KB
/
scroll-latency.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="initial-scale=1">
<link rel="stylesheet" href="scroll-latency.css"></link>
</head>
<body>
<div id='console'>
Periodic jank:
<input type='checkbox' id='pjank'>
<input type='number' id='ptime' value='200'>ms
<br>
Handler jank:
<input type='checkbox' id='hjank'>
<input type='number' id='htime' value='200'>ms
<br>
Touch listener:
<select id='ltype'>
<option selected>touchstart</option>
<option>touchmove</option>
<option>touchend</option>
</select>
<br>
passive
<input type='checkbox' id='passive'>
preventDefault
<input type='checkbox' id='pd'>
<br>
show non-blocking events
<input type='checkbox' id='snb'>
<br>
<div id='spinner'>Running</div>
<div id=log>
</div>
</div>
<div id=content>
<h2>Scroll jank due to touch/wheel handlers demo</h2>
<a href="https://github.com/RByers/rbyers.github.io/blob/master/scroll-latency.js">View on GitHub</a><br>
<h3>Instructions</h3>
The log shows the touch/wheel events which block scrolling (have cancelable=true).<br>
Scroll the page, observing the latency associated with each event.<br>
The 'running' animation represents the responsiveness of the JavaScript thread.
Jank can be added to this thread as a regular repeating pattern ("periodic jank"),
and/or directly inside of each touch/wheel handlers ("handler jank").<br>
In Chrome 51+ and Safari 10, the touch/wheel listeners can be marked as
<a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md">passive</a>
to keep them from being able to block the scroll.<br>
When working properly (eg. <a href="https://www.chromestatus.com/features/5523910145605632">Chrome 49+</a>)
this demo will be able to measure both types of jank.<br>
Safari 9+ appears to work well (though only at millisecond precision and <a href="https://lists.webkit.org/pipermail/webkit-dev/2013-June/025027.html">
with possible issues with NTP skew</a>).
<h2>Scroll performance resources</h2>
<ul>
<li><a href="https://blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html">https://blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html</a></li>
<li><a href="http://jankfree.org/">Jank Free</a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/speed/scrolling/">HTML5 Rocks - Scrolling Performance</a></li>
<li><a href="https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool">How to Use the Timeline Tool</a></li>
<li><a href="https://webperf.ninja/2015/jank-meter/">Measuring Webpage Jank</a></li>
</ul>
</div>
<script src="scroll-latency.js"></script>
</body>
</html>