-
Notifications
You must be signed in to change notification settings - Fork 16
/
DOM.javascript.txt
3279 lines (2734 loc) · 238 KB
/
DOM.javascript.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
DOM
TODO ==> split some of file into own files in my doc (e.g. fetch, URLPattern, etc.)
SUMMARY ==> #Basic:
# - HTML: integrating with HTML, integrity
#Architecture:
# - Rendering:
# - steps: preload parsing, parsing, cascading, layout, paint, composite
# - performance: avoid re-rendering, max 4ms JavaScript
# - Loading (async|sync)
#Utilities:
# - Utilities: onerror|unhandledrejection|rejectionhandled()
# - Timeouts: setTimeout|Interval|Immediate(), requestAnimationFrame()
# - console: logs, trace, profile, timeStamp
# - performance: timing (initial network, document loading performance), user (custom)
#Events:
# - Events
# - UIEvent: focus, input|change, keyboard, composition, scroll, resize
# - Mouse/touch events
# - Load events: and page visibility
#Document:
# - Top-level: WINDOW, DOCUMENT
# - query
# - iteration: crawling
# - test
# - creation
# - manipulation
# - observing
# - content
# - attr|text|comment
# - range|selection
#Browsing:
# - URI|location
# - history
#Browser|device:
# - platform
# - geolocation
# - orientation|motion
#Networking:
# - offline
# - HTTP headers
# - XHR, fetch, beacon
# - websocket, SSE
#Storage:
# - streams
# - files
# - storage: localStorage, sessionStorage
# - indexedDB
# - encoding
# - compression
# - storage summary
#Messaging/workers:
# - messaging
# - workers
#UI components:
# - popup
# - drag&drop
# - RTF
/=+===============================+=\
/ : : \
)==: GENERAL :==(
\ :_______________________________: /
\=+===============================+=/
VERSION ==> #4
STANDARD ==> #W3C for most
#But WHATWG (fork) has few specs
TYPES ==> # - DOM (Document Object Model): WINDOW.document.*
# - BOM (Browser Object Model): browser elements, i.e. frames, history, location, window
# - Web APIs: Usually on WINDOW, e.g. WebSocket, BatteryManager, SessionStorage, etc.
XML ==> #This doc doesn't include objects, etc. related to XML: check XML doc.
INTEROPERABILITY ==> #See HTML doc for list of browsers
/=+===============================+=\
/ : : \
)==: HTML :==(
\ :_______________________________: /
\=+===============================+=/
INCLUDING IN HTML ==> #Priority is from top to bottom
LOADING|PARSING ORDER ==> #See DOM doc
<script> #Loaded right away, sync (in same thread)
src="FILE.js" #From external file.
type="STR" #MIME type. Def: 'text/javascript'
type="module" #See JavaScript doc
async #Loaded right away, async (in a different thread)
#"src" mandatory, not compatible with defer.
defer #Loaded on DOMContentLoaded, sync (in same thread)
#"src" mandatory, not compatible with async.
integrity="ALGO-HASH ..." $#See <link>
charset="CHARSET" #Only works if Content-Type [S] does not provide the information (including when accessing files locally)
#E.g. 'UTF-8' (def)
withVAR="VAL" #Like `import ... { with: { VAR: VAL} }`
SCRIPT.text #Like SCRIPT.textContent
DOCUMENT.scripts #SCRIPT_HTMLCOLL
<script>CODE</script> #Inline.
<a|area>
href="JavaScript:CODE" #
<any>
onEVENT="CODE" #Deprecated. EVENT lowercase.
<noscript>...</noscript> #When JavaScript not available.
ARCHITECTURE
/=+===============================+=\
/ : : \
)==: BROWSER PARTS :==(
\ :_______________________________: /
\=+===============================+=/
PARTS ==> #Browser chrome:
# - meta-information: history
# - tabs-related features
# - print, save
# - changing URL: address bar, back|forward|refresh|home button, bookmarks
# - changing loading state: stop button
# - changing document: zoom, privacy, autofil, default font size, language, accessibility
#Extensions/addons
#Devtools: treated like a document
#Document: actual webpage
/=+===============================+=\
/ : : \
)==: DOCUMENT PARTS :==(
\ :_______________________________: /
\=+===============================+=/
PARTS ==> #Rendering engine:
# - parse and ask UI backend to paint HTML
#UI backend:
# - does the pixel painting (a bit like Cairo)
#JavaScript interpreter:
# - parse and execute JavaScript
#Networking:
# - HTTP requests
#Data storage:
# - localStorage, cookies, IndexedDB, etc.
/=+===============================+=\
/ : : \
)==: RENDERING STEPS :==(
\ :_______________________________: /
\=+===============================+=/
STEPS ==> #Event-driven
#Done locally, i.e. to the parts that changed
PRELOAD PARSING ==> #Like parsing, but simplistic for early optimizations
# - e.g. starting to perform HTTP requests
PARSING ==> #HTML:
# - creates DOM tree
# - context-sensitive language, whereas CSS and JavaScript are context-free, because HTML has forgiving syntax
#CSS:
# - creates CSSOM tree
#JavaScript:
# - also execute it, which will get|set DOM|CSSOM tree
CASCADING ==> #Creates render tree:
# - by combining DOM tree + CSSOM tree
# - assign CSS rules to DOM nodes
# - decide CSS rules priority (specificity)
# - does not include DOM nodes:
# - with display: none
# - not attached to DOCUMENT
# - not visible in viewport
LAYOUT ==> #Add layout information to render tree:
# - viewport position|dimensions to render tree elements
# - depends on CSS display, box model and positioning properties:
# - one element can have several areas, e.g. multiline inline element
# - one element can have no area, e.g. with display none
PAINT ==> #Calculate pixel information from render tree
COMPOSITE ==> #Mix several paint areas, e.g. transparency
UI BACKEND ==> #Change the actual screen pixels
/=+===============================+=\
/ : : \
)==: RENDERING PERFORMANCE :==(
\ :_______________________________: /
\=+===============================+=/
WHEN IS RENDERING TRIGGERED ==> #Cascading (recalculating style):
# - changing HTML|CSS
#Layout (reflow):
# - changing element position|dimensions
# - viewport resizing|scrolling
# - does not trigger reflow (depends on browser):
# - stacking: opacity|visibility, z-index
# - colors: border-color, color
# - images: background-*, border-image-*
# - non-layout decorations: border-radius, text-decoration
#Paint (repaint):
# - changing UI but not positions|dimensions (e.g. colors)
# - does not trigger repaint nor reflow (depends on browser):
# - effects: perspective*, transform*, backface-visibility
# E.g. prefer translate() over positioning properties
# - browser UI: pointer-events, resize, cursor
# - page breaks: orphans|widows
GOOD PRACTICES ==> #Avoiding re-rendering:
# - re-rendering is deferred:
# - unless querying DOM|CSS info, which (to be calculated) requires reflow|repaint
# - so should do DOM|CSSOM getters before DOM|CSSOM setters
# - put NODE out of render tree temporarily while working on it
# - e.g. display: none or detach from DOCUMENT
# - change many things at once:
# - CSS classes > CSSSTYLEDEC.cssText > CSSSTYLEDEC.PROP
#Limit re-rendering:
# - to small|simple UI parts
#Limit DOM|CSSOM getters:
# - cache result instead of re-invoking function
TIMING ==> #One frame at 60FPS is 17ms:
# - some time is for browser garbage collection, etc.
# - some time is for parsing, cascading, layout, painting, compositing, etc.
# - so JavaScript should not be more than 4ms per stack
# - otherwise use web worker to separate from rendering thread
# - if cannot use web worker (e.g. need DOM), break into several parts with requestAnimationFrame()
/=+===============================+=\
/ : : \
)==: LOADING :==(
\ :_______________________________: /
\=+===============================+=/
SUMMARY ==> #Async:
# - JavaScript|CSS:
# - when dynamically added, <script async> or <link rel="preload">
# - problems:
# - using DOM|CSSOM -> DOMContentLoaded or <script defer>
# - FOUC
# - fonts: always. FOUT vs FOIT vs FOFT
# - other resources: always
#Should group HTML|CSS|JavaScript into components
JAVASCRIPT ==> #Sync:
# - inline <script>
# - <script src>
#Async:
# - how:
# - <script src async>
# - dynamically adding <script src>
# - problem: when script uses DOM
# - fixes (aside from using sync):
# - <script src defer>
# - DOMContentLoaded
# - (deprecated) <script> at end of <body>
CSS ==> #Sync:
# - <style>
# - CSS <link>:
# - parsing blocked at next <script>
# - rendering blocked right away
# - exceptions:
# - Safari: parsing blocked right away
# - Firefox:
# - rendering not blocked if in <body>
# - fix: adding empty <script> after CSS <link>
# - @import
#Async:
# - how:
# - <link rel="preload" url="URL.css" as="style" onload="this.rel = 'stylesheet';"> (see HTTP doc)
# - dynamically adding CSS <link>
# - non-matching media="MEDIAQUERYLIST"
# - loadCSS (1.2.0):
# - loadCSS('URI.css'[, ELEM[, 'MEDIAQUERYLIST']])->LINK
# - dynamically adds CSS <link>, before ELEM (def: end of <head>)
# - polyfills <link rel="preload" as="style">
# - problems:
# - (parsing) when script uses CSSOM
# - (rendering) FOUC (Flash Of Unstyled Content):
# - shows unstyled HTML
# - makes DOM jumping around
# - only for HTML visible on viewport
# - fixes (aside from using sync):
# - (parsing) DOMContentLoaded
# - (rendering) emulate sync by temporarily display: none on related HTML
FONTS ==> #@font-face always async
#Problems:
# - FOUT (Flash Of Unstyled Text):
# - shows different font while download ongoing
# - def for IE
# - can be forced by adding web font to element once font loaded:
# - adding web font: by toggling CSS class
# - once font loaded: see below
# - should prioritize normal web fonts over variants (e.g. bold):
# - i.e. adding one CSS class per font
# - variants can be temporarily emulated using CSS
# - also called FOFT (Flash Of Faux Text)
# - FOIT (Flash of Invisible Text):
# - shows invisible font while download ongoing
# - best for icon fonts
# - def for Safari
# - can be forced by hiding text (visibility: hidden) until font loaded (using library
# like FontFaceObserver pr Google FontLoader, or CSS Font Loading spec)
# - FOFT (Flash of Fallback Text):
# - FOIT for 3 seconds, FOUT then
# - best for normal content
# - def for Firefox, Chrome, Opera
#Font download only starts:
# - when some HTML is rendered and uses the web font
# - (except Firefox, IE) and only if HTML has text content
# - can add <link rel="preload"> to start download earlier instead
HTML ==> #<link rel="import">:
# - async if <link async>
# - fixes (aside from using sync): DOMContentLoaded
#<template>: always sync
OTHER RESOURCES ==> #Images, video, audio, svg, object, iframe: always async
PERFORMANCE ==> #Async is best
#Should defer sync by grouping HTML|CSS|JavaScript into components:
# - above the fold / critical path CSS:
# - (poorer) alternative to grouping into components
# - make first displayed DOM's CSS sync, other CSS async
# - usually use headless browser to load page and figure out which CSS is "above the fold"
UTILITIES
/=+===============================+=\
/ : : \
)==: UTILITIES :==(
\ :_______________________________: /
\=+===============================+=/
DOMError #
DOMERROR.name #STR
DOMException #
DOMEXCEPTION.name #
WINDOW|WORKERGLOBAL.onerror = #On unhandled exception or runtime error.
FUNC('MSG', 'URL', LINE_NUM, COL_NUM, ERROR) #If the error comes from a <script> with a different origin:
# - same origin policy: the arguments will only be 'Script error', '', null, null
# - unless CORS is used, including <script crossorigin>
WINDOW|WORKERGLOBAL.addEventListener
('error', FUNC(ERROREVENT)) #
ABSTRACTWORKER.onerror = FUNC(ERROREVENT) #On unhandle exception or runtime error
ERROREVENT.message #STR
ERROREVENT.filename #STR
ERROREVENT.lineno #NUM
ERROREVENT.colno #NUM
ERROREVENT.error #ERROR
WINDW.onunhandledrejection = FUNC(PROMREJEVENT)$#When any PROMISE is rejected without call to catch() in the same microtask (i.e. sync)
$#Not all browsers, but degrades gracefully if used as a debugging tool
WINDOW.onrejectionhandled = FUNC(PROMREJEVENT) $#When any PROMISE was rejected with a call to catch(), but not in the same microtask (i.e. async)
$#Same compatibility as unhandledrejection
PROMREJEVENT.promise $#PROMISE
PROMREJEVENT.reason $#VAL
reportError(VAL) $#Like throw VAL, except cannot be caught, except by onerror handler
/=+===============================+=\
/ : : \
)==: TIMEOUTS :==(
\ :_______________________________: /
\=+===============================+=/
WINDOW|WORKERGLOBAL.setTimeout #Browsers actually enforce:
(FUNC(...), INT[, ...])->ID # - adds 4ms if nesting if 5 levels deep or more
# - 1 FUNC per second on inactive tabs
#Uses macrotask queue (see JavaScript doc)
WINDOW|WORKERGLOBAL.clearTimeout(ID) #
WINDOW|WORKERGLOBAL.setInterval
(FUNC(...), INT[, ...])->ID #
WINDOW|WORKERGLOBAL.clearInterval(ID) #
WNDW|WKRGLOBL.setImmediate(FUNC(...)[,...])->ID$#Similar to set|clearTimeout(..., 0) but faster and more efficient (e.g. no 4ms minimum)
WINDOW|WORKERGLOBAL.clearImmediate(ID) $#'setImmediate' (YuzuJS) (1.0.4)
queueMicrotask(FUNC()) #Add a new microtask (see JavaScript doc)
WINDOW.requestAnimationFrame(FUNC(FLOAT))->ID #Similar to setImmediate() but:
# - before screen refresh:
# - usually 60 times/sec, but can be lower in inactive tabs
# - this avoids changing UI several times while screen is not refreshing
# (optimized and smoother results)
# - should be used for any visual change
# - FLOAT: PERFORMANCE.now() when current frame started
WINDOW.cancelAnimationFrame(ID) #
WINDOW.scheduler $#SCHEDULER
SCHEDULER.wait(NUM[, OPTS])->> $#Like setTimeout(NUM) and setImmediate() but:
SCHEDULER.yield()->> $# - FUNC -> promisified
$# - clear*() -> OPTS.signal ABORT_SIGNAL
$# - higher priority
/=+===============================+=\
/ : : \
)==: CONSOLE :==(
\ :_______________________________: /
\=+===============================+=/
WINDOW.console #CONSOLE
CONSOLE.debug|info|log|warn|error(VAL...) #Can use format strings:
# - %s: STR
# - %d, %i: NUM
# - %f: DOUBLE
# - %O: OBJ
# - %o: hyperlink
# - %c: CSS "PROP:VAL;..."
CONSOLE.dir(OBJ|ELEM) #Prints with accordion arrows
#ELEM will be printed as a JavaScript object, as opposed to HTML representation
CONSOLE.dirxml(...) #Inverse
CONSOLE.table(OBJ_ARR|OBJ_OBJ[, STR[_ARR]]) $#Prints as a table.
$#If STR[_ARR], only shows those columns.
CONSOLE.assert(BOOL, ...) #If false, like console.error(...), except cannot use format strings
CONSOLE.count([STR]) #Increments a NUM for a given STR, then console.debug('STR: NUM')
#Def: "default"
CONSOLE.countReset([STR]) #
CONSOLE.clear() #
CONSOLE.group[Collapsed](...) #console.log(...) then starts dropdown (if Collapsed: closed at start), incrementing level
CONSOLE.groupEnd() #Stops dropdown, decrementing level
CONSOLE.trace(...) $#console.log(...) then prints current stack.
CONSOLE.profile[End]([STR]) #Start CPU profile (like clicking on 'Start' in devtools)
#Def STR for profileEnd(): the most recent one.
CONSOLE.timeStamp(STR) #Add a marker, e.g. in devtool Performance tab
CONSOLE.time(['LABEL']) #timeEnd() do console.debug('LABEL: TIMEms') (microsecs precise) with TIME between both calls
CONSOLE.timeEnd(['LABEL']) #Also add marker in Timeline view
#Def: "default"
CONSOLE.timeLog(['LABEL'][, ...]) $#Same but in-between time() and timeEnd(), then log(...)
/=+===============================+=\
/ : : \
)==: PERFORMANCE :==(
\ :_______________________________: /
\=+===============================+=/
GLOBAL.performance #PERFORMANCE
DOMTIMESTAMP #DOUBLE in ms
#Precision is software|hardware-dependent
DOMLOCALTIME #DOMTIMESTAMP representing time since PERFORMANCE.timeOrigin
#I.e. not affected by clock OS (as opposed to new Date())
DOMGLOBALTIME #DOMTIMESTAMP representing time since Unix
DOMDURATION #DOMTIMESTAMP representing a duration
PERFORMANCE.timeOrigin #DOMGLOBALTIME when global scope started
PERFORMANCE.now()->DOMLOCALTIME #Current DOMLOCALTIME
PERFORMANCE.toJSON()->OBJ #
PERFORMANCE|PERFLIST.getEntries()->PERFENTRY_ARR#Sorted by PERFENTRY.startTime
PERFORMANCE|PERFLIST.getEntriesByType('TYPE')
->PERFENTRY_ARR #
PERFORMANCE|PERFLIST.getEntriesByName
('NAME'[, 'TYPE'])->PERFENTRY_ARR #
PERFORMANCE.clearMarks|Measures|ResourceTimings
(['NAME']) #
new PerformanceObserver
(FUNC(PERFLIST, PERFOBSERVER)) #Fire FUNC on new PERFENTRYs
PERFOBSERVER.observe(OPTS) #OPTS:
# - entryTypes STR_ARR (valid PERFENTRY.entryType to listen to)
# - type STR: same but single STR
# - buffered BOOL:
# - if false (def): fire listener callbacks sync
# - if true:
# - use setImmediate()
# - requires OPTS.type
#Must be called for PERFOBSERVER to work
PERFOBSERVER.takeRecords()->PERFENTRY_ARR #Get and empty PERFLIST, right away
PERFOBSERVER.disconnect() #Should be called as soon as no longer needed, e.g. in FUNC()
PerformanceEntry #
PERFENTRY.entryType #Type-specific type name.
PerformanceObserver.supportedEntryTypes #ARR of all 'TYPE'
PERFENTRY.name #Type-specific name STR. Do not have to be unique.
PERFENTRY.startTime #DOMLOCALTIME when PERFENTRY was created
PERFENTRY.duration #DOMDURATION (0 if none)
PERFENTRY.toJSON()->OBJ #
PerformanceResourceTiming #Child of PerformanceEntry, for network requests.
PERF_RESOURCE_TIMING.entryType #'resource'
PERF_RESOURCE_TIMING.name #'URL'
TIMES ==> #Following are DOMLOCALTIME, in order
PERF_RESOURCE_TIMING.workerStart #If through service WORKER, when it started (0 if none)
PERF_RESOURCE_TIMING.redirectStart|End #HTTP redirections (0 if none)
PERF_RESOURCE_TIMING.fetchStart #Is going to do HTTP main request
PERF_RESOURCE_TIMING.domainLookupStart|End #DNS request (same as fetchStart if cached, local request or kept TCP socket (e.g. keep-alive))
PERF_RESOURCE_TIMING.connectStart|End #TCP handshake (same as fetchStart if kept TCP socket)
PERF_RESOURCE_TIMING.secureConnectionStart #TLS handshake (0 if none). End is connectEnd
PERF_RESOURCE_TIMING.requestStart #HTTP main request
PERF_RESOURCE_TIMING.responseStart|End #HTTP main response
PERF_RESOURCE_TIMING.initiatorType #Similar to fetch's REQ.destination, but with different values
PERF_RESOURCE_TIMING.nextHopProtocol #Scheme used, as defined by ALPN
PERF_RESOURCE_TIMING.transferSize #NUM (in bytes) of headers + body
PERF_RESOURCE_TIMING.decoded|encodedBodySize #NUM (in bytes) of body, after|before decompression
PERFORMANCE.setResourceTimingBufferSize(NUM) #Sets maximum amount of PERF_RESOURCE_TIMINGs to keep track of
PERFORMANCE.addEventListener
('resourcetimingbufferfull', FUNC(EVENT)) #When limit is hit
PERF_RESOURCE_TIMING.serverTiming #SERVER_TIMING_ARR
PerformanceServerTiming #Server-Timing [S] headers
SERVER_TIMING.name #'NAME'
SERVER_TIMING.duration #NUM
SERVER_TIMING.description #STR
SERVER_TIMING.toJSON() #STR
PerformanceNavigationTiming #Child of PerformanceResourceTiming, for navigation
PERF_NAVIGATION_TIMING.entryType #'navigation'
TIMES ==> #Following are DOMLOCALTIME, in order
PERF_NAVIGATION_TIMING.unloadEventStart|End #Previous page unload event (0 if different origins)
PERF_NAVIGATION_TIMING.domInteractive #DOCUMENT.readyState 'interactive'
PERF_NAVIGATION_TIMING.
domContentLoadedEventStart|End #DOCUMENT DOMContentLoaded event
PERF_NAVIGATION_TIMING.domComplete #DOCUMENT.readyState 'complete'
PERF_NAVIGATION_TIMING.[un]loadEventStart|End #DOCUMENT [un]load event
PERF_NAVIGATION_TIMING.type #How page started.
#Can be:
# - "navigate": normal navigation
# - "reload": page reloaded
# - "back_forward": using history
# - "prerender"
PERF_NAVIGATION_TIMING.redirectCount #Number of redirections 3** that happened
PERFORMANCE.mark('NAME'[, OPTS])->PERF_MARK #
new PerformanceMark('NAME'[, OPTS]) #Child of PerformanceEntry, for custom discrete point in time
PERF_MARK.entryType #'mark'
PERF_MARK.name #'NAME'
#Recommends using the following names when used to mark the following cases:
# - 'mark_above_the_fold': viewport fully visible to end-user
# - 'mark_fully_visible': full page fully visible to end-user
# - 'mark_time_to_user_action': end-user can interact
# - 'mark_fully_loaded': page fully loaded, including application modules initialized (not only page subresouces)
PERF_MARK|OPTS.detail #VAL (def: null)
PERF_MARK|OPTS.startTime #DOMLOCALTIME (def: now)
PERFORMANCE.measure('NAME'[, OPTS]) #OPTS:
->PERF_MEASURE # - start (def: timeOrigin): DOMLOCALTIME or PERF_TIMING 'NAME' (use its startTime)
# - end (def: now): same type as OPTS.start
# - duration DOMDURATION (def: end - start): computes start|end based on end|start
PERFORMANCE.measure('NAME', STR[, STR2]) #Same as using OPTS.start|end STR[2]
PerformanceMeasure #Child of PerformanceMark, for custom duration between two marks. Shown in devtools
PERF_MEASURE.entryType #'measure'
PERF_MEASURE.name #'NAME'
PERF_MEASURE.startTime #DOMLOCALTIME of OPTS.start
PERF_MEASURE.duration #DOMDURATION
PERF_MEASURE|OPTS.detail #VAL (def: null)
EVENTS
/=+===============================+=\
/ : : \
)==: PERFORMANCE :==(
\ :_______________________________: /
\=+===============================+=/
DEFAULT HANDLERS ==> #Event with browser default handler (e.g. scroll, touch*, click on link, context menu)
#defer default handler, so user handler should not be too long
THROTTLING ==> #Event handlers fired very rapidly (e.g. scroll, hovering) should be throttled
TEMPORARY ==> #Conditional event handlers:
# - e.g. touchmove|end only triggered between touchstart and touchend
# - should be added|removed dynamically
TASKS ==> #Event handlers are fired in a new macrotask
/=+===============================+=\
/ : : \
)==: EVENTS :==(
\ :_______________________________: /
\=+===============================+=/
EventTarget #OBJ that can receive EVENTs
EVENTTARGET.add|removeEventListener #Idempotent if same FUNC + OPTS
('TYPE', FUNC(EVENT)[->>][, BOOL|OPTS]) #BOOL: same as { capture BOOL }
#Instead of FUNC, can be { handleEvent: FUNC }
OPTS.once #BOOL (def: false)
OPTS.signal #ABORT_SIGNAL
OPTS.capture #BOOL (def: false). If false|true: bubbling|capturing phase only
OPTS.passive #BOOL. Make EVENT not cancelable (but do not change EVENT.cancelable value itself)
#Only used as a performance hint:
# - i.e. user agent does not need to wait for event handlers to do default action
# - e.g. on touch|wheel events to give smoother scrolling, etc.
#Def: false, except for touchstart|touchmove on Chrome
<any onEVENT="CODE"> #Same but:
EVENTTARGET.onEVENT = FUNC(EVENT) # - can only register one handler
# - dispatchEvent() does not work
# - kept by cloneNode()
EVENTTARGET.dispatchEvent(EVENT)->BOOL #Returns true if defaultPrevented
new Event('TYPE'[, OPTS]) #Creates EVENT, but does not emit until dispatchEvent()
#Usually inherited by an EVENTTYPE (e.g. MouseEvent or CustomEvent)
#OPTS:
# - bubbles|cancelable|composed
# - most child allow overriding EVENT.*, unless readonly
EVENT.type #'TYPE' (e.g. 'click|mouseover|...')
EVENT.eventPhase #Event handlers are fired in that order:
# - Event.CAPTURING_PHASE: capturing handlers, from outermost to target
# - Event.AT_TARGET: target
# - Event.BUBBLING_PHASE: bubbling handlers (def), from target to outermost, providing EVENT.bubbles true
#Can also be Event.NONE
EVENT.bubbles #True for:
# - UI events:
# - except select, resize, scroll
# - focus|blur does not bubble, but focusin|out fixes it
# - mouse|pointerover|out does bubble (should not), but mouse|pointerleave|enter fixes it
# - UI-related events:
# - fullscreen*, selectstart, SVG* (except SVG[Un]Load), visibilitychange
# - transitionend
# - location-related events:
# - DOMContentLoaded, hashchange, popstate
# - resourcetimingbufferfull
EVENT.currentTarget #The current EVENTTARGET (=== this in event handler)
EVENT.target #The original EVENTTARGET
EVENT.cancelable #True for:
# - bubbling UI events, except:
# - end|abort-related: abort, dragend|leave, pointer|touchcancel, pointerlockchange|error
# - input, change
# - animation*
# - selectstart, transitionend, resourcetimingbufferfull
# - reset, invalid
#True (but actually preventDefault() is a noop):
# - beforeunload
EVENT.preventDefault() #Cancel browser default handler (but not user handlers), providing cancelable true.
#Can cancel:
# - typing, zooming, selecting, form submit|reset, validation alerts, drag&drop, keyboard shortcuts, following links
# - (must prevent input events directly, e.g. keydown|click|mousedown|wheel|touchstart): focus, control interactions, scroll
# - not: media controls, high-level navigation (unload|pagehide, history), hardware (orientation|motion, location), HTTP requests
#Consider alternative solutions when end-user expects default browser action:
# - e.g. <control disabled> (focus, control interaction), CSS overflow (scroll)
EVENT.defaultPrevented #preventDefault() has been called
EVENT.stopImmediatePropagation() #Do not call any further user handlers
EVENT.stopPropagation() #Same, except for currentTarget's ones
EVENT.composedPath()->EVENTTARGET_ARR #All EVENTTARGET called during propagation
EVENT.composed #BOOL. true if propagation will cross current SHADOW_ROOT
EVENT.timeStamp #DATE_NUM (in ms)
EVENT.isTrusted #BOOL. Whether generated programatically (new Event()) or UI
CustomEvent $#User-defined event
CUSTOMEVENT.detail $#VAL
/=+===============================+=\
/ : : \
)==: UIEVENT :==(
\ :_______________________________: /
\=+===============================+=/
UIEvent #Child of EVENT
UIEVENT.view #WINDOW
FOCUSABLE #Is A|AREA|BUTTON|INPUT|TEXTAREA|CONTENTEDITABLE|SELECT|WINDOW
FOCUSABLE.onfocus|blur = FUNC(FOCUSEVENT) #Gains|loses focus. Can sometimes fire twice.
#Not cancelable (use mousedown|touchstart.preventDefault() instead)
FOCUSABLE.onfocusin|out = FUNC(FOCUSEVENT) #Like focus|blur, but bubbles.
FOCUSABLE.focus|blur() #Emit those events
DOCUMENT.activeElement #Currently focused ELEM. If none, BODY.
#Readonly.
DOCUMENT.hasFocus()->BOOL #
FocusEvent #UIEVENT child, for focus*|blur
FOCUSEVENT.relatedTarget #For focus|focusin, previous ELEM
#For blur|focusout, next ELEM
INPUT|TEXTAREA.oninput = FUNC(EVENT) #Control value just changed.
#Not cancelable
INPUT|TEXTAREA|SELECT.onchange = FUNC(EVENT) #SELECT: control value changes.
#INPUT|TEXTAREA: blur + value changed since focus
#Not cancelable
DOCUMENT|FOCUSABLE.onkeydown = FUNC(KEYBOARDEVT)#When key is down (repeats).
#Possible default browser action (cancelable):
# - DOCUMENT|FOCUSABLE: scrolling (arrows)
# - DOCUMENT: navigation (refresh, history), shortcuts (bookmarks), etc.
# - FOCUSABLE: typing characters, tabbing
# - most controls keyboard interaction
DOCUMENT|FOCUSABLE.onkeyup = FUNC(KEYBOARDEVENT)#When key is not down anymore (only once).
KeyboardEvent #UIEVENT child
#Modifier keys launch event themselves.
#There is no attribute for getting the key value that is crossbrowser.
KEYBOARDEVENT.ctrl|shift|alt|metaKey #True if pressed while keyboard event
KEYBOARDEVENT.location #Can be KeyboardEvent.DOM_KEY_LOCATION_*:
# - STANDARD (def)
# - LEFT|RIGHT: where key present several times on keyboard, i.e. possible for key 'Shift|Control|Alt|Meta'
# - NUMPAD: key is on numpad, i.e. possible for key 'Arrow*', 'Home|End', 'PageDown|Up', '0-9', 'Enter', '+ - * /'
KEYBOARDEVENT.key $#Typed key, from a visual perspective:
$# - takes combination into account (e.g. case), but each combination key still fire an event
$# - takes keyboard layout into account
$# - does not take location into account
$# - useful when need value of typed key, e.g. shortcuts
$#Can be:
$# - printable Unicode 'CHAR' (including case, whitespaces)
$# - 'F1-12'
$# - 'Enter', 'Tab', 'Backspace', 'Delete', 'Insert', 'Escape', 'Pause', 'Clear'
$# - 'ArrowDown|Up|Left|Right', 'Home|End', 'PageDown|Up'
$# - 'Shift', 'Meta', 'Control', 'Alt[Graph]', 'Hyper', 'Super'
$# - 'Accel' ('Meta' in OSX, 'Control' otherwise)
$# - 'CapsLock', 'Fn[Lock]', 'NumLock', 'ScrollLock', 'Symbol[Lock]'
$# - 'Power[Off]|Hibernate|Standby|WakeUp', 'PrintScreen', 'BrightnessUp|Down', 'Eject', 'LogOff'
$# - 'MediaFastForward|Pause|Play[Pause]|Record|Rewind|Stop|TrackNext|TrackPrevious'
$# - 'AudioVolumeDown|Up|Mute'
$# - 'Dead': combining key, e.g. circumflex accent on French keyboard
$# - 'AppSwitch', 'GoBack|Home': on mobile keyboards
$# - 'Copy', 'Cut', 'Paste', 'Redo', 'Undo'
$# - 'Unidentified'
$# - Others: see spec
$#'inexorabletash polyfill' (only keyboard.js) (0.1.33)
KEYBOARDEVENT.code $#Typed key, from a mechanic perspective:
$# - does not take combination into account
$# - regardless of layout (i.e. on US layout)
$# - takes location into account
$# - useful when need physical location of key, e.g. for games
$#E.g. 'keyA' or 'ShiftRight'. See spec for values
$#'inexorabletash polyfill' (only keyboard.js) (0.1.33)
DOCUMENT|FOCUSABLE.oncompositionstart|end #When IME autocompletion start|ends
= FUNC(COMPOSITIONEVENT) #Possible browser default action (cancelable): opening up IME
DOCUMENT|FOCUSABLE.oncompositionupdate
= FUNC(COMPOSITIONEVENT) #When IME autocompletion is updated (e.g. by typing keys, including at start, but not at end)
CompositionEvent #UIEVENT child
#Similar to key events, but for IME (Input Method Editor):
# - autocompletion choice started|ended
# - e.g. used:
# - when typing diacretics characters
# - for asian characters entry
# - by speech recognition software
# - word suggestion on mobile
COMPOSITIONEVENT.data #STR: characters entered
ELEM|DOCUMENT|WINDOW.onscroll = FUNC(EVENT) #When scrolling happens.
#Not cancelable (but can preventDefault() keydown|wheel instead)
WINDOW|ELEM.onresize = FUNC(EVENT) #When user resizes window or element
#Not cancelable
/=+===============================+=\
/ : : \
)==: MOUSE/TOUCH EVENTS :==(
\ :_______________________________: /
\=+===============================+=/
SUMMARY ==> #In order:
# +--------------+--------------+--------------+
# | mouse | tap | hold |
# +-----------------+--------------+--------------+--------------+
# | touchstart | | y | y |
# | touchmove | | y | |
# | | | might scroll | |
# | | | or zoom | |
# | touchend | | y | |
# | touchcancel | | | y |
# +-----------------+--------------+--------------+--------------+
# | mouseover|enter | y | session | session |
# | mouseout|leave | y | session | session |
# | mousemove | y | once | once |
# | mousedown | y | y | y |
# | mouseup | y | y | |
# | click | y | y | |
# | dblclick | y | zoom | |
# | contextmenu | y | | y |
# | wheel | y | | |
# +-----------------+--------------+--------------+--------------+
ALL #Is ELEM|DOCUMENT|WINDOW
ALL.onclick = FUNC(MOUSEEVENT) #Left click down then up on same element. Fired after mouseup.
#Possible default browser action (cancelable):
# - following <a|area> link
# - some controls mouse interaction (e.g. checkbox, file upload, buttons, datepicker, etc.)
HTMLELEM.click() #
ALL.oncontextmenu = FUNC(MOUSEEVENT) #Same for right click.
#Possible default browser action (cancelable): opening context menu
ALL.ondblclick = FUNC(MOUSEEVENT) #Same for double left click.
ALL.onmousedown|up = FUNC(MOUSEEVENT) #Any mouse button down|up (only once).
#Possible default browser action for mousedown (cancelable):
# - focus
# - some controls mouse interaction (e.g. number, range, select, etc.)
ALL.onmousemove = FUNC(MOUSEEVENT) #While moves (repeats).
#Possible default browser action (cancelable):
# - some controls mouse interaction (e.g. range, etc.)
ALL.onmouseover|out = FUNC(MOUSEEVENT) #When enter|leaves (only once)
#Bubbles, which means that anytime the mouse enters/leaves a child element,
#it is fired again: prefer mouseenter|leave.
ALL.onmouseenter|leave = FUNC(MOUSEEVENT) #Same but doesn't bubble
MouseEvent #UIEVENT child
MOUSEEVENT.screenX|Y #According to screen
MOUSEEVENT.clientX|Y #According to page (visual viewport)
MOUSEEVENT.pageX|Y #According to page (layout viewport)
MOUSEEVENT.offsetX|Y #Offset to ELEM border-box top-left corner
MOUSEEVENT.ctrl|shift|alt|metaKey #True if pressed while mouse event
MOUSEEVENT.button #Event's button: 0|1|2 for left|middle|right button
MOUSEEVENT.buttons $#All event's buttons as or'd flag: 0|1|2|4|8|16 for none|left|right|middle|4th(back)|5th(forward) button
$#'mikolalysenko mouse-event' (1.0.5)
MOUSEEVENT.detail #Number of clicks.
#Only for [dbl]click, mousedown|up
WINDOW|DOCUMENT|ELEM.onwheel = FUNC(WHEELEVENT) #Possible default browser action (cancelable): scrolling
WHEELEVENT #Child of MOUSEEVENT
WHEELEVENT.deltaX|Y|Z #Amount scrolled as DOUBLE
WHEELEVENT.deltaMode #Whether deltaX|Y|Z is in WheelEvent.DOM_DELTA_PIXEL|LINE|PAGE
TOUCH EVENTS ==> #Only:
# - touch screens (which might have a mouse as well)
# - implemented by Chrome|Opera on desktop
#Emulation concepts:
# - tap -> like left click
# - hold -> like select + right click
# - mouse hovering sessions:
# - tapping somewhere -> like keeping mouse hovered until next tap
# - fire mouseover|enter once the first time,
# then mouseout|leave once when exits
# - mousemove fired only once, at each tap
# - touchmove: more of a gesture|swipe session than hovering
#Touch user interaction:
# - double tap: zoom
# - touchmove: might scroll|zoom
#Mouse events are fired in addition after touch events:
# - unless preventDefault() fired during both touchstart and touchend
# - unless zooming|scrolling
# - previously (not anymore) with 300ms delay:
# - allow waiting for double tap
# - can be disabled with <meta name="viewport"> (see HTML doc)
#Warning:
# - finger less precise than mouse
# - should keep touch event handlers limited in number and space, cause it can flicker scrolling
DOCUMENT|ELEM.ontouchstart = FUNC(TOUCHEVENT) #Like mousedown but for touch, except:
# - possible default browser action: scrolling, zooming
# - cancelable:
# - except on Chrome
# - prefer using touch-action
DOCUMENT|ELEM.ontouchend = FUNC(TOUCHEVENT) #Like mouseup but for touch
DOCUMENT|ELEM.ontouchcancel = FUNC(TOUCHEVENT) #Fired when touch stops but not because of touchend:
# - holding usually triggers contextmenu
# - going beyong screen borders
# - too many fingers on screen
DOCUMENT|ELEM.ontouchmove = FUNC(TOUCHEVENT) #Like mousemove but for touch, except:
# - more of a gesture|swipe session than hovering, i.e. only cares about DOM when move starts:
# - target remains the same during the whole move
# - move stops when touchend|touchcancel, not when not hovering anymore
# - preventDefault() prevents scrolling|zooming (except on Chrome):
# - only on the first touchmove event
# - prefer using touch-action
TOUCHEVENT.alt|ctrl|meta|shiftKey #Like MOUSEEVENT
TOUCHEVENT.changedTouches #TOUCHLIST: that actually triggered the TOUCHEVENT
TOUCHEVENT.targetTouches #TOUCHLIST: any with TOUCH.target === TOUCHEVENT.target
TOUCHEVENT.touches #TOUCHLIST: any related or not to current TOUCHEVENT
TOUCHLIST #TOUCH_ARR-like
#On touchend|touchcancel, that touch is not available anymore
TOUCH.identifier #ID_NUM
TOUCH.target #
TOUCH.screen|client|pageX|Y #Like MOUSEEVENT
/=+===============================+=\
/ : : \
)==: LOAD EVENTS :==(
\ :_______________________________: /
\=+===============================+=/
DOCUMENT.onDOMContentLoaded = FUNC(EVENT) #When page parsed
WINDOW.onload = FUNC(UIEVENT) #When resources done loading
DOCUMENT.readyState #Can be:
# - "loading": first
# - "interactive": after DOMContentLoaded
# - "complete": after load
DOCUMENT.onreadystatechange = FUNC(EVENT) #When DOCUMENT.readyState changes
WINDOW.onbeforeunload = FUNC(BEFOREUNLOADEVENT) #Just before unload event.
#If BEFOREUNLOADEVENT.returnValue STR + return STR (for crossbrowser):
# - does WINDOW.confirm(STR) first
# - not supported by Mobile Safari nor Chrome
# - only if page has been interacted with.
#Unreliable: see unload event
WINDOW.onunload = FUNC(UIEVENT) #On closing page.
#DOM is still available but invisible to the user.
#Unreliable:
# - on mobile devices, not fired if switching application then closing the application
# - prefer checking for visibilitychange
WINDOW|DOCUMENT.onpageshow|hide = #
FUNC(PAGETRANSITIONEVENT) #Like [un]load (including reliablity problems), except also fired when loaded from history cache.
PAGETRANSITIONEVENT.persisted #True when loaded from history cache.
RESOURCE #Any external|embedded resource:
# - <script>, <style>, <link> (including prefetching)
# - <img>, <input type="image">, <video>, <audio>, <iframe>, <svg>, <object>
#Also <body>
RESOURCE.onload = FUNC(UIEVENT) #When done loading
RESOURCE.onerror = FUNC(UIEVENT) #
WINDOW|RESOURCE.onabort = FUNC(UIEVENT) #When starts loading but stops.
DOCUMENT.visibilityState #Can be:
# - 'hidden': not current tab, e.g. tab is closed, tab is switched, window is minimized, OS screen is locked
# - 'prerender': e.g. using <link rel="prerender">
# - 'visible'
DOCUMENT.onvisibilitychange = FUNC(EVENT) #When DOCUMENT.visibilityState changes
DOCUMENT
/=+===============================+=\
/ : : \
)==: TOP-LEVEL :==(
\ :_______________________________: /
\=+===============================+=/
Window #
Document #NODE child, parent of HTML.