New issue
Advanced search Search tips

Issue 732377 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Jul 2017
Cc:
Components:
EstimatedDays: ----
NextAction: 2017-07-21
OS: Linux
Pri: 2
Type: Bug



Sign in to add a comment

button click handler slower than WebKit

Reported by jba...@implen.de, Jun 12 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

Steps to reproduce the problem:
open this index.html file:

<!DOCTYPE HTML>
<!doctype html>
<html>
<body>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Implen</title>
    <script language="javascript" type="text/javascript">
		var toggle = true;
		function myFunction () {
			if (toggle) {
				document.getElementById("demo").innerHTML = "Hello World";
				toggle = false;
			} else {
				document.getElementById("demo").innerHTML = "";
				toggle = true;
			}
		}
	</script>
	<style>
	.centered {text-align:center;}
	.button {
		background-color: #4CAF50;
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 72px;
		margin: 4px 2px;
		cursor: pointer;
	}	
	.text {
		font-size: 72px;
	}
</style>
</head>
<body>
	<div class="centered">
		<button class="button" onclick="myFunction()">Click me</button>
		<div class="text" id="demo"/>
	</div>
</body>
</html>

What is the expected behavior?
Chromium should be at least as fast as WebKit.

What went wrong?
I ran the above HTML / JavaScript on WebKit and Chromium and recorded the behavior with a highspeed camera (1000 fps):
- WebKit: 66 ms
- Chromium: 105 ms

Did this work before? N/A 

Chrome version: 57.0.2948.0  Channel: dev
OS Version: Debian Wheezy
Flash Version: n/a
 
WebKit_min.mp4
294 KB View Download
Chromium_min.mp4
576 KB View Download

Comment 1 by woxxom@gmail.com, Jun 12 2017

1. A high-speed camera is not a reproducible setup. Try using the built-in time measurement JavaScript functions, see an example in the attached file. Depending on the duration I hold the button I see results as low as 16 ms.

2. A single measurement is not enough. Javascript code is parsed, optimized, compiled on the first run, which is implemented differently in Chrome and WebKit.

3. It should be noted that the "click" event is fired after the mouse button is released in Chrome. I don't know if there is any specification and whether it's different in WebKit, though.
test.html
947 bytes View Download

Comment 2 by jba...@implen.de, Jun 12 2017

Regarding comment 1:
With the JavaScript approach, it is measured when the following events are happening:
- mousedown
- mouseup
- click
But I am interested in the time between I actually released the button and something is visible on the screen. Therefore I used the high-speed camera.

Regarding comment 2:
Before I did the actual measurement, I pressed the button several times.

Regarding comment 3:
In both browsers, the button click is only handled when releasing the button.
 Issue 732376  has been merged into this issue.
Labels: Needs-Milestone
Components: -Blink Blink>DOM
Cc: kkaluri@chromium.org
Labels: Needs-Feedback
Tested this issue on Windows 10, Ubuntu 14.04 and mac 10.12.5 with chrome Stable #59.0.3071.104 and canary #61.0.3135.0 with test case provided in comment #1

Didn't observe any delay in the chrome browser.

Observed that "Click" event is fired after the "Mouse Up" event is fired.

Attaching the screen-cast for reference.

jbauer@ could you please look into it and let us know your observations.
Issue 732377.mp4
444 KB View Download

Comment 7 by jba...@implen.de, Jun 19 2017

As described in comment #2, I am observing the time between actually releasing the button and something is rendered on the screen.

I think this can only be observed with a touch screen and a high-speed camera.

I did the test on Embedded Linux, which runs WebKit (e.g. in Qt4) and Chromium, but a system, which has a touch screen and runs Safari as well as Chromium, should be suitable as well.
Project Member

Comment 8 by sheriffbot@chromium.org, Jun 19 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "kkaluri@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: pbomm...@chromium.org
Labels: TE-NeedsTriageFromMTV
Passing this issue to MTV as we don't have the above configured machine here with India team.

@prudhvi: Can you please take a look at it

Thanks!!

Comment 10 by jba...@implen.de, Jun 22 2017

I did the same test on an iPad with the most recent Chrome and Safari (see attachments). The effect is visible, but less prominent:
- Safari: 97 ms
- Chrome: 110 ms
iPad_Safari.mp4
1.8 MB View Download
iPad_Chrome.mp4
1.9 MB View Download
Components: -Blink>DOM Blink>Input
Chrome on an iPad uses webkit underneath. So the difference you are measuring there is likely noise.

For the embedded linux device:

Are you able to provide a trace (chrome://tracing) from the device? Probably all categories would be best then we can see what is taking a certain amount of time.
Labels: Needs-Feedback
NextAction: 2017-07-21

Comment 14 by jba...@implen.de, Jul 10 2017

I was able to do a trace from the device with all categories.
trace_all.json.gz
380 KB Download
Project Member

Comment 15 by sheriffbot@chromium.org, Jul 10 2017

Cc: dtapu...@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "dtapuska@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
The trace definitely shows that you are using the software renderer instead of the GL renderer.

From the trace handling the gesture tap is about 85ms. Handling the event is roughly 45ms of that. With the remaining 40ms in the compositing, painting.

Have you tried to ensure that the GL renderer is used on this hardware? Perhaps it is being used in WebKit and that ultimately is the difference.

Comment 17 by jba...@implen.de, Jul 10 2017

Thanks for this analysis. Yes, I am aware that I am using the software renderer. I  am using X11 without GL support right now, but I am also working to get GL support in X11 working. However, Qt4 WebKit runs in the very same X11 environment, i.e. with software renderer.
I don't think there is anything that is unreasonably long that requires specific actions. Different browsers have fundamentally different execution times because of different trade-offs that are made but the values you are indicating are well within the RAIL guidance. 85ms with software raster is < 100ms of the response guidance.

This number will get smaller as you enable the GL path so that is your best bet for making improvements as the trace seems a summation of small items.

Comment 19 Deleted

Comment 20 Deleted

Status: WontFix (was: Unconfirmed)
The NextAction date has arrived: 2017-07-21

Comment 23 by jba...@implen.de, Jul 21 2017

I am still working to get X11 with GL support running.

Sign in to add a comment