perf: Another 5ms of startup time improvements #6145

brandonocasey · 2019-07-30T21:45:30Z

See code comments

package.json

src/js/component.js

brandonocasey · 2019-07-30T21:46:54Z

src/js/error-display.js

@@ -57,7 +56,7 @@ class ErrorDisplay extends ModalDialog {
 *
 * @private
 */
-ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {


Object.assign is much faster.

brandonocasey · 2019-07-30T21:46:58Z

src/js/tracks/track-types.js

@@ -55,7 +53,7 @@ const REMOTE = {
  }
 };

-const ALL = mergeOptions(NORMAL, REMOTE);
+const ALL = Object.assign({}, NORMAL, REMOTE);


Object.assign is much faster.

src/js/utils/dom.js

brandonocasey · 2019-07-30T21:47:56Z

src/js/utils/dom.js

@@ -160,7 +160,7 @@ export function createEl(tagName = 'div', properties = {}, attributes = {}, cont
    // method for it.
    } else if (propName === 'textContent') {
      textContent(el, val);
-    } else {
+    } else if (el[propName] !== val) {


This function is also another big startup time user. We should make sure that the prop is not already equal to what we are going to set it to before doing it.

brandonocasey · 2019-07-30T21:48:30Z

src/js/utils/events.js

@@ -84,6 +84,9 @@ function _handleMultipleEvents(fn, elem, types, callback) {
 *         Fixed event object.
 */
 export function fixEvent(event) {
+  if (event.fixed_) {


This costs us 0.1 ms per event, but some event have it done to them 5+ times. Might as well only do it once.

Do we always go into the line 101/104 block?

It seems like we almost always do yeah.

brandonocasey · 2019-07-30T21:49:08Z

src/js/utils/events.js

-    });
+let _supportsPassive;
+
+const supportsPassive = function() {


For some reason this takes about 2ms to complete, making it lazy makes it take much less time later when an event that would need to be passive is actual used.

brandonocasey · 2019-07-30T22:00:24Z

src/js/tech/html5.js

+  ['featuresNativeTextTracks', 'supportsNativeTextTracks'],
+  ['featuresNativeVideoTracks', 'supportsNativeVideoTracks'],
+  ['featuresNativeAudioTracks', 'supportsNativeAudioTracks']
+].forEach(function(array) {


altogether these take about 1ms at startup.

src/js/component.js

src/js/utils/dom.js

gkatsev · 2019-08-01T18:53:50Z

src/js/utils/events.js

@@ -84,6 +84,9 @@ function _handleMultipleEvents(fn, elem, types, callback) {
 *         Fixed event object.
 */
 export function fixEvent(event) {
+  if (event.fixed_) {


Do we always go into the line 101/104 block?

gkatsev · 2019-08-01T18:55:58Z

src/js/video.js

@@ -566,5 +567,7 @@ videojs.dom = Dom;
 */
 videojs.url = Url;

+videojs.defineLazyProperty = defineLazyProperty;


any reason to expose it currently?

I think we will need it in a few other places, vhs for sure.

src/js/tech/html5.js

Skipping the tabIndex property on created elements due to videojs#6145 optimizations blocks them from receiving keyboard events, due to not being focusable; for example this breaks closing ModalDialog elements by pressing Escape. Fix this by always setting tabIndex, as the element may return the same value even though the property has not been explicitly set. Fixes videojs#6870

Skipping the tabIndex property on created elements due to #6145 optimizations blocks them from receiving keyboard events, due to not being focusable; for example this breaks closing ModalDialog elements by pressing Escape. Fix this by always setting tabIndex, as the element may return the same value even though the property has not been explicitly set. Fixes #6870

Skipping the tabIndex property on created elements due to videojs#6145 optimizations blocks them from receiving keyboard events, due to not being focusable; for example this breaks closing ModalDialog elements by pressing Escape. Fix this by always setting tabIndex, as the element may return the same value even though the property has not been explicitly set. Fixes videojs#6870