Define mutation events

[annevk]

Telemetry from Firefox release builds: 39 0.4% of window/node objects had seen mutation event listener somewhere in them, 47 0.22%.

Chrome:

• DOMCharacterDataModified: https://www.chromestatus.com/metrics/feature/timeline/popularity/148 0.016%
• DOMNodeInserted: https://www.chromestatus.com/metrics/feature/timeline/popularity/144 0.6%
• DOMNodeInsertedIntoDocument: https://www.chromestatus.com/metrics/feature/timeline/popularity/147 0.007%
• DOMNodeRemoved: https://www.chromestatus.com/metrics/feature/timeline/popularity/145 0.077%
• DOMNodeRemovedFromDocument: https://www.chromestatus.com/metrics/feature/timeline/popularity/146 0.021%
• DOMSubtreeModified: https://www.chromestatus.com/metrics/feature/timeline/popularity/143 0.4%

Chrome probably inherits non-support for DOMAttrModified from WebKit: https://bugs.webkit.org/show_bug.cgi?id=8191 (WONTFIX, \o/).

A couple of the Chrome numbers are below the Blink threshold of 0.03%.

@esprehn has mentioned he wanted to change how these events are dispatched in Chrome to offset some of their negative side effects. Is this happening?

According to https://msdn.microsoft.com/en-us/library/dn265032.aspx Internet Explorer does not support *IntoDocument and *FromDocument, but does support DOMAttrModified.

It seems like DOM Standard needs to define

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified

at a minimum. "Asynchronous timing" would be great, but we should only specify that if Chrome manages to ship it.

[smaug----]

I'm still hoping we actually try to get rid of mutation events.
Isn't Firefox still the only browser warn about their use.

(FYI, Firefox telemetry compares Window objects, in which a listener for mutation events was added to either Window or to some Node, to those Window objects where such listeners weren't added.)

[foolip]

See also thread in https://lists.w3.org/Archives/Public/www-dom/2016JulSep/thread.html

[zcorpan]

20 most commonly used scripts in httparchive that use the strings above (if somebody wants to analyze feasibility of changing timings or so):

Row	url	num
1	https://s.ytimg.com/yts/jsbin/player-en_US-vflHuW2fm/base.js	16661
2	https://s.ytimg.com/yts/jsbin/player-en_US-vfld7sVQ3/base.js	7987
3	https://s.ytimg.com/yts/jsbin/player-en_US-vflua32tg/base.js	3397
4	https://s.ytimg.com/yts/jsbin/player-en_US-vflI2is8G/base.js	1448
5	https://tags.crwdcntrl.net/c/9234/cc.js?ns=_cc9234	1261
6	http://imasdk.googleapis.com/js/sdkloader/ima3.js	1221
7	https://secure.flashtalking.com/frameworks/js/api/2/9/html5API.js	756
8	http://tags.crwdcntrl.net/c/9193/cc.js?ns=_cc9193	726
9	http://s0.2mdn.net/instream/html5/ima3.js	685
10	http://prscripts.com/pub.js	633
11	https://www.fullstory.com/s/fs.js	429
12	http://imasdk.googleapis.com/js/core/bridge3.138.5_en.html	394
13	http://tags.crwdcntrl.net/c/8060/cc_af.js	333
14	http://tags.crwdcntrl.net/c/4575/cc_af.js	327
15	http://st.chatango.com/h5/gz/r0802161130/id.html	320
16	http://imasdk.googleapis.com/js/core/bridge3.137.0_en.html	318
17	https://secure.flashtalking.com/frameworks/js/api/2/8/html5API.js	313
18	https://choices.truste.com/ca?pid=ehi01&aid=moosylvania01&cid=0413&c=moosylvania01cont2&w=300&h=250&admarker=dynamic	304
19	https://choices.truste.com/ca?aid=tradedesk01&pid=tradedesk01&cid=10312015&w=728&h=90&c=tradedesk01cont1&js=pmw2	289
20	http://st.chatango.com/h5/gz/r0805161606/id.html	280

Query was

SELECT * FROM (
  SELECT page, url, REGEXP_EXTRACT(body, r'["\'](DOM(?:CharacterDataModified|Node(?:Inserted|Removed)(?:(?:Into|From)Document)?|SubtreeModified))["\']') AS ev
  FROM [httparchive:har.2016_08_01_chrome_requests_bodies]
) WHERE ev != "null"
ORDER BY ev

(result of this 88,540 rows, csv is 10.8MB, at https://gist.github.com/zcorpan/6e16e387cfc6cdf377944c7960a02884 )

SELECT url, COUNT(page) AS num FROM [test.mutation_events_2016_08_01] 
GROUP BY url
ORDER BY num DESC
LIMIT 20

(result above)

[zcorpan]

Usage of each event

SELECT ev, COUNT(page) AS num FROM [test.mutation_events_2016_08_01] 
GROUP BY ev
ORDER BY num DESC

Row	ev	num
1	DOMSubtreeModified	40083
2	DOMNodeInserted	35337
3	DOMNodeRemoved	7211
4	DOMCharacterDataModified	5549
5	DOMNodeRemovedFromDocument	329
6	DOMNodeInsertedIntoDocument	30

[annevk]

Latest here is https://lists.w3.org/Archives/Public/www-dom/2017JanMar/0004.html. So Blink still wants to change their behavior.

[annevk]

Once we define these (it seems ever more unlikely we'll be able to remove them), we'll need to make sure to not fire them inside shadow trees. Tracked by https://bugzilla.mozilla.org/show_bug.cgi?id=1489858 for Fx.

[domenic]

Noting for the record that when/if we fix this, we'd need to update HTML (https://www.w3.org/Bugs/Public/show_bug.cgi?id=23036) and UI Events. UI Events currently has a decent amount of spec text around mutation events.

[tkent-google]

Elliot proposed dispatching DOM mutation events on CEReactions timing in 2016. I investigated the feasibility of the proposal.

TL;DR: Not feasible for DOMNodeRemoved, feasible for DOMNodeRemovedFromDocument but it won't have much benefit, and feasible for other events.

The details.