New issue
Advanced search Search tips

Issue 627242 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Jul 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug



Sign in to add a comment

Websites using YUI do hundreds of querySelectorAll calls when clicking things looking for ids

Project Member Reported by esprehn@chromium.org, Jul 11 2016

Issue description

Google Chrome	54.0.2793.0 (Official Build) canary (64-bit)
Revision	6667812b2dffe3f6bf794b2b040504e5a3ad7cb7-refs/heads/master@{#404564}

See the attached listings of the selectors being executed on mint.com's transaction table and zillow's detail page. The mint page requires a login but zillow does not.

To see the flood of selectors and also look at the time this snippet in the console:

$qsa = Document.prototype.querySelectorAll;
$qsae = Element.prototype.querySelectorAll;
$totalTime = 0;
function $qsaLog(s) { console.log(s); var t = performance.now(); var r = $qsa.call(this, s); $totalTime += (performance.now() - t); return r; }
Document.prototype.querySelectorAll = $qsaLog;
Element.prototype.querySelectorAll = $qsaLog;

Then after interacting with the page log $totalTime to see the time spent in querySelectorAll.

Mint is from: https://wwws.mint.com/transaction.event

1) Click any transaction category.

This runs querySelectorAll for 300ms on my Reks Chromebook.

Zillow is from: 
http://www.zillow.com/homes/for_sale/San-Francisco-CA/house,condo,apartment_duplex,townhouse_type/15074242_zpid/20330_rid/2-_beds/0-2000000_price/0-6976_mp/1500-_size/elevator_att/globalrelevanceex_sort/37.799917,-122.386794,37.777533,-122.459235_rect/13_zm/0_mmm/

1) Click anywhere in the text of the page.

or

1) Click the little calculator icon.
2) Click "30 year fixed" drop down.

Clicking the dropdown in (2) on a Reks Chromebook takes runs querySelectorAll for 800ms.

If you look at the sampling of the selectors they all end with [id="something"] and would be much faster if we instead used the getElementById fast path (or the websites weren't doing something so crazy, YUI doesn't seem to be helping here either).
 
mint-qsa-selectors.txt
10.9 KB View Download
zillow-qsa-selectors.txt
86.7 KB View Download
Patch here: https://codereview.chromium.org/2139843002

I also wonder if we should warn in the devtools when you run querySelectorAll hundreds of times in a single event handler?
Project Member

Comment 2 by bugdroid1@chromium.org, Jul 13 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/696789dfa7c62bef99966bbe2e0a41109e636a84

commit 696789dfa7c62bef99966bbe2e0a41109e636a84
Author: esprehn <esprehn@chromium.org>
Date: Wed Jul 13 02:52:24 2016

Allow [id=X] selectors to use the querySelector ID fast path.

This removes 300ms of input latency when clicking the input boxes in the
Mint transaction table on a Reks chromebook and 800ms when clicking
anything on Zillow on a Reks.

On a 2013 MacPro this saves 30-100ms when clicking on those websites.

querySelector(All) supports a fast path which transforms calls with
selectors like "#foo" and ".foo #bar" into a getElementById call
followed by a matches() call against the element and the selector.

This patch allows using that getElementById path when writing selectors
like "[id=foo]" or ".foo [id=foo]". Selectors of this type are used by
the YUI framework and pages like Zillow and Mint often execute a thousand
calls to one of these selectors per click event.

BUG= 627242 

Review-Url: https://codereview.chromium.org/2139843002
Cr-Commit-Position: refs/heads/master@{#404933}

[modify] https://crrev.com/696789dfa7c62bef99966bbe2e0a41109e636a84/third_party/WebKit/Source/core/dom/SelectorQuery.cpp
[modify] https://crrev.com/696789dfa7c62bef99966bbe2e0a41109e636a84/third_party/WebKit/Source/core/dom/SelectorQuery.h

Comment 3 Deleted

Comment 4 Deleted

Status: Fixed (was: Assigned)
Today's Canary has the performance improvement as reported in the commit.

Sign in to add a comment