Websites using YUI do hundreds of querySelectorAll calls when clicking things looking for ids |
||
Issue descriptionGoogle 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).
,
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
,
Jul 14 2016
Today's Canary has the performance improvement as reported in the commit. |
||
►
Sign in to add a comment |
||
Comment 1 by esprehn@chromium.org
, Jul 11 2016