input_latency_analysis/index.html at master · spanicker/input_latency_analysis · GitHub

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
<!DOCTYPE html>
<html>
  <script src="utils.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
  <link rel="stylesheet" href="style.css">
  <body>
    <h1>Input Latency Deep Reports Analysis</h1>
    <h2><i>kdillon@chromium.org</i></h2>
    <h3>1 April 2019</h3>

    <p>The data for these graphs was gathered from deep reports which contain trace data from employees during regular use.
    The graphs show what the main thread of the renderer is doing during a given input latency event. The duration of an
    input latency event starts when that event is dispatched from the browser to the renderer and ends when the rendering effect
    is scheduled. All data is from traces that took longer than 100ms.</p>

    <p>Queuing time is the time from when the event is dispatched to the renderer to when the renderer begins to handle the event.</p>

    <p>Handling time is the time from when the renderer begins to handle the event to when the rendering effect is scheduled.</p>

    <p>There are two graphs per latency event. Trace events are represented as a stack; if event a calls event b, event a is the
    parent to b and b is shown under a. One graph shows the bottom layer of the events, 'Bottom-Up', and the other graph shows the
    top layer of events, 'Top-Down'. This gives a view of what the renderer is doing underneath as well as on the surface level.</p>

    <div style="text-align: center;">
      <button id="legendButton" style="font-size:20px;" onclick="toggleLegendAll()">Toggle Legends</button>
      <button id="dataButton" style="font-size:20px;" onclick="toggleDataTypeAll()">Normalized Data</button>
    </div>

    <div id='gestureScrollBegin'></div>
    <div id='gestureScrollBeginTD'></div>
    <div id='gestureScrollUpdate'></div>
    <div id='gestureScrollUpdateTD'></div>
    <div id='gestureTap'></div>
    <div id='gestureTapTD'></div>

    <script>
      generateGraph('gestureScrollBegin', 'Gesture Scroll Begin: Bottom-Up');
      generateGraph('gestureScrollBeginTD', 'Gesture Scroll Begin: Top-Down');
      generateGraph('gestureScrollUpdate', 'Gesture Scroll Update: Bottom-Up');
      generateGraph('gestureScrollUpdateTD', 'Gesture Scroll Update: Top-Down')
      generateGraph('gestureTap', 'Gesture Tap: Bottom-Up');
      generateGraph('gestureTapTD', 'Gesture Tap: Top-Down');
    </script>
  </body>
</html>