core(dom-size): collect only body nodes for DOM stats #7241

midzer · 2019-02-13T22:05:24Z

Hi :)

Summary

Respect only nodes within <body> for dom-size calculation audit

This has been tagged as bug, but it appears it's more like an adjustment how calculation of DOM size is done

More accurate results whether there are too many DOM elements which might result in bad performance for layouting and rendering

Related Issues/PRs

#6806

Have a nice day
midzer

patrickhulce

Thanks for jumping on this @midzer!

We'll probably want to add a smoketest for this one to make sure we're test that DOM stats function since we're changing it.

patrickhulce · 2019-02-14T01:08:10Z

lighthouse-core/gather/gatherers/dobetterweb/domstats.js

@@ -148,8 +148,8 @@ class DOMStats extends Gatherer {
    })()`;
    return passContext.driver.sendCommand('DOM.enable')
      .then(() => passContext.driver.evaluateAsync(expression, {useIsolation: true}))
-      .then(results => passContext.driver.getElementsInDocument().then(allNodes => {
-        results.totalDOMNodes = allNodes.length;
+      .then(results => passContext.driver.getElementsInDocument('body').then(bodyNodes => {


I don't think this will do what we want it to do. The implementation of getElementsInDocument looks like it doesn't accept a querySelector

lighthouse/lighthouse-core/gather/driver.js

Lines 1141 to 1153 in e6dbefa

/**

* Returns the flattened list of all DOM elements within the document.

* @param {boolean=} pierce Whether to pierce through shadow trees and iframes.

* True by default.

* @return {Promise<Array<Element>>} The found elements, or [], resolved in a promise

*/

getElementsInDocument(pierce = true) {

return this.getNodesInDocument(pierce)

.then(nodes => nodes

.filter(node => node.nodeType === 1)

.map(node => new Element({nodeId: node.nodeId}, this))

);

}

Yup, I misleadingly thought I can pick getElementsInDocument() from those page-functions...

patrickhulce · 2019-02-14T01:08:32Z

lighthouse-core/gather/gatherers/dobetterweb/domstats.js

@@ -148,8 +148,8 @@ class DOMStats extends Gatherer {
    })()`;
    return passContext.driver.sendCommand('DOM.enable')
      .then(() => passContext.driver.evaluateAsync(expression, {useIsolation: true}))


we'll probably want to piggyback on our getDOMStats function to compute the total body nodes

Yeah, sounds reasonable to do calculation right there :)

exterkamp

I'm gonna +1 @patrickhulce and say these changes LGTM but I think there should be a smoke test that has bodyNodesCount != totalNodesCount so we can make sure this doesn't break.

patrickhulce · 2019-03-07T22:50:32Z

Just checking in here @midzer do you think you'd be able to make the smoketest change we're talking about? You'll basically add an assertion in the expectations file and run yarn smoke dbw to make sure it passes with your fix and fails without it :)

midzer · 2019-03-08T07:24:08Z

Right now I'm kinda stuck with lighthouse due #7246
Yeah, I can try to finish those tests anyway @patrickhulce

patrickhulce · 2019-03-08T15:25:45Z

Oh bummer :( I wonder if there's another solution. Could downloading Chromium straight from https://download-chromium.appspot.com/ make any difference?

midzer · 2019-03-08T17:39:26Z

Thanks for your support @patrickhulce
Meanwhile I've installed regular Google Chrome and can run LH properly via node lighthouse-cli http://example.com --view --chrome-flags="--no-sandbox --headless --disable-gpu"

Running yarn smoke dbw fails though:

Unable to connect to Chrome

even if I add those chrome-flags in runSmokehouse() in run-smoke.js

brendankenny · 2019-04-10T00:41:18Z

ok, since this is a breaking change in the artifacts, I wanted to get this in for 5.0 :) I added an entry in the expectations file for dom-size as requested.

I also realized we're really counting elements, not nodes, so I changed all names to reflect that fact.

@exterkamp, @patrickhulce are you still good with this with the extra smoke test?

patrickhulce

LGTM other than that!

patrickhulce · 2019-04-10T13:51:47Z

lighthouse-core/audits/dobetterweb/dom-size.js

  failureTitle: 'Avoid an excessive DOM size',
  /** Description of a Lighthouse audit that tells the user *why* they should reduce the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
  description: 'Browser engineers recommend pages contain fewer than ' +
-    `~${MAX_DOM_NODES.toLocaleString()} DOM nodes. The sweet spot is a tree ` +
+    `~${MAX_DOM_ELEMENTS.toLocaleString()} DOM nodes. The sweet spot is a tree ` +


shall we change the text here then to to read DOM elements?

shall we change the text here then to to read DOM elements?

definitely, thanks for catching that

exterkamp

LGTM, labeling i18n b/c it has some strings to translate. Sorry for being the long pull!

lighthouse-core/audits/dobetterweb/dom-size.js

collect only body nodes for DOM stats

01466d4

midzer requested review from brendankenny, patrickhulce and paulirish as code owners February 13, 2019 22:05

patrickhulce suggested changes Feb 14, 2019

View reviewed changes

midzer added 2 commits February 14, 2019 15:32

fix body nodes calculation

430c642

fix unit tests

fcdb45e

exterkamp requested changes Feb 22, 2019

View reviewed changes

brendankenny added the 5.0 label Apr 9, 2019

brendankenny added 2 commits April 9, 2019 17:37

add dom-size smoke test

97498a2

s/nodes/elements

6f134bf

brendankenny approved these changes Apr 10, 2019

View reviewed changes

patrickhulce approved these changes Apr 10, 2019

View reviewed changes

exterkamp added the i18n internationalization thangs label Apr 10, 2019

exterkamp approved these changes Apr 10, 2019

View reviewed changes

paulirish reviewed Apr 10, 2019

View reviewed changes

lighthouse-core/audits/dobetterweb/dom-size.js Outdated Show resolved Hide resolved

more elements

ee1aa84

brendankenny merged commit 11a1e5f into GoogleChrome:master Apr 10, 2019

midzer deleted the gatherBodyNodes branch April 10, 2019 18:50

brendankenny mentioned this pull request Apr 10, 2019

misc: update collected i18n string #8158

Merged

paulirish mentioned this pull request Apr 17, 2019

☂️ 👣 Breaking changes for v5 #7752

Closed

8 tasks

exterkamp mentioned this pull request Apr 30, 2019

Dom Size fails when no body present #8725

Closed

paulirish mentioned this pull request Apr 30, 2019

[meta] 2019 I/O Burndown #8331

Closed

67 tasks

brendankenny mentioned this pull request May 1, 2019

Head childs doesn't have to be evaluated in Maximum Child Elements #6806

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

core(dom-size): collect only body nodes for DOM stats #7241

core(dom-size): collect only body nodes for DOM stats #7241

midzer commented Feb 13, 2019

patrickhulce left a comment

patrickhulce Feb 14, 2019

midzer Feb 14, 2019

patrickhulce Feb 14, 2019

midzer Feb 14, 2019

exterkamp left a comment

patrickhulce commented Mar 7, 2019

midzer commented Mar 8, 2019

patrickhulce commented Mar 8, 2019

midzer commented Mar 8, 2019

brendankenny commented Apr 10, 2019

patrickhulce left a comment

patrickhulce Apr 10, 2019

brendankenny Apr 10, 2019

exterkamp left a comment

	/**
	* Returns the flattened list of all DOM elements within the document.
	* @param {boolean=} pierce Whether to pierce through shadow trees and iframes.
	* True by default.
	* @return {Promise<Array<Element>>} The found elements, or [], resolved in a promise
	*/
	getElementsInDocument(pierce = true) {
	return this.getNodesInDocument(pierce)
	.then(nodes => nodes
	.filter(node => node.nodeType === 1)
	.map(node => new Element({nodeId: node.nodeId}, this))
	);
	}

core(dom-size): collect only body nodes for DOM stats #7241

core(dom-size): collect only body nodes for DOM stats #7241

Conversation

midzer commented Feb 13, 2019

patrickhulce left a comment

Choose a reason for hiding this comment

patrickhulce Feb 14, 2019

Choose a reason for hiding this comment

midzer Feb 14, 2019

Choose a reason for hiding this comment

patrickhulce Feb 14, 2019

Choose a reason for hiding this comment

midzer Feb 14, 2019

Choose a reason for hiding this comment

exterkamp left a comment

Choose a reason for hiding this comment

patrickhulce commented Mar 7, 2019

midzer commented Mar 8, 2019

patrickhulce commented Mar 8, 2019

midzer commented Mar 8, 2019

brendankenny commented Apr 10, 2019

patrickhulce left a comment

Choose a reason for hiding this comment

patrickhulce Apr 10, 2019

Choose a reason for hiding this comment

brendankenny Apr 10, 2019

Choose a reason for hiding this comment

exterkamp left a comment

Choose a reason for hiding this comment