From 6a93c8afacc66eec77447498ae10866398cd5815 Mon Sep 17 00:00:00 2001 From: Brandon Casey <2381475+brandonocasey@users.noreply.github.com> Date: Tue, 30 Jul 2019 16:01:00 -0400 Subject: [PATCH] perf: throttle more timers and use native bind (#6142) --- .../progress-control/mouse-time-display.js | 2 +- .../progress-control/play-progress-bar.js | 15 +++++++++++++++ .../progress-control/progress-control.js | 6 +++--- .../progress-control/time-tooltip.js | 17 ++++++++++++++++- .../control-bar/time-controls/time-display.js | 4 ++-- .../volume-control/volume-control.js | 4 ++-- src/js/slider/slider.js | 9 +++++---- src/js/utils/fn.js | 6 +++--- 8 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/js/control-bar/progress-control/mouse-time-display.js b/src/js/control-bar/progress-control/mouse-time-display.js index e8cdd42b1..1334f3c24 100644 --- a/src/js/control-bar/progress-control/mouse-time-display.js +++ b/src/js/control-bar/progress-control/mouse-time-display.js @@ -27,7 +27,7 @@ class MouseTimeDisplay extends Component { */ constructor(player, options) { super(player, options); - this.update = Fn.throttle(Fn.bind(this, this.update), 25); + this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL); } /** diff --git a/src/js/control-bar/progress-control/play-progress-bar.js b/src/js/control-bar/progress-control/play-progress-bar.js index 53283f09f..c63d953d6 100644 --- a/src/js/control-bar/progress-control/play-progress-bar.js +++ b/src/js/control-bar/progress-control/play-progress-bar.js @@ -3,6 +3,7 @@ */ import Component from '../../component.js'; import {IS_IOS, IS_ANDROID} from '../../utils/browser.js'; +import * as Fn from '../../utils/fn.js'; import './time-tooltip'; @@ -14,6 +15,20 @@ import './time-tooltip'; */ class PlayProgressBar extends Component { + /** + * Creates an instance of this class. + * + * @param {Player} player + * The {@link Player} that this class should be attached to. + * + * @param {Object} [options] + * The key/value store of player options. + */ + constructor(player, options) { + super(player, options); + this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL); + } + /** * Create the the DOM element for this class. * diff --git a/src/js/control-bar/progress-control/progress-control.js b/src/js/control-bar/progress-control/progress-control.js index a58ce544f..82f840665 100644 --- a/src/js/control-bar/progress-control/progress-control.js +++ b/src/js/control-bar/progress-control/progress-control.js @@ -3,7 +3,7 @@ */ import Component from '../../component.js'; import * as Dom from '../../utils/dom.js'; -import {throttle, bind} from '../../utils/fn.js'; +import {bind, throttle, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js'; import './seek-bar.js'; @@ -26,8 +26,8 @@ class ProgressControl extends Component { */ constructor(player, options) { super(player, options); - this.handleMouseMove = throttle(bind(this, this.handleMouseMove), 25); - this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), 25); + this.handleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL); + this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL); this.enable(); } diff --git a/src/js/control-bar/progress-control/time-tooltip.js b/src/js/control-bar/progress-control/time-tooltip.js index ce2c26eb6..e336fdc0b 100644 --- a/src/js/control-bar/progress-control/time-tooltip.js +++ b/src/js/control-bar/progress-control/time-tooltip.js @@ -4,6 +4,7 @@ import Component from '../../component'; import * as Dom from '../../utils/dom.js'; import formatTime from '../../utils/format-time.js'; +import * as Fn from '../../utils/fn.js'; /** * Time tooltips display a time above the progress bar. @@ -12,6 +13,20 @@ import formatTime from '../../utils/format-time.js'; */ class TimeTooltip extends Component { + /** + * Creates an instance of this class. + * + * @param {Player} player + * The {@link Player} that this class should be attached to. + * + * @param {Object} [options] + * The key/value store of player options. + */ + constructor(player, options) { + super(player, options); + this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL); + } + /** * Create the time tooltip DOM element * @@ -88,7 +103,7 @@ class TimeTooltip extends Component { /** * Write the time to the tooltip DOM element. * - * @param {String} content + * @param {string} content * The formatted time for the tooltip. */ write(content) { diff --git a/src/js/control-bar/time-controls/time-display.js b/src/js/control-bar/time-controls/time-display.js index 52861e20c..644040847 100644 --- a/src/js/control-bar/time-controls/time-display.js +++ b/src/js/control-bar/time-controls/time-display.js @@ -4,7 +4,7 @@ import document from 'global/document'; import Component from '../../component.js'; import * as Dom from '../../utils/dom.js'; -import {bind, throttle} from '../../utils/fn.js'; +import {bind, throttle, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js'; import formatTime from '../../utils/format-time.js'; /** @@ -25,7 +25,7 @@ class TimeDisplay extends Component { */ constructor(player, options) { super(player, options); - this.throttledUpdateContent = throttle(bind(this, this.updateContent), 25); + this.throttledUpdateContent = throttle(bind(this, this.updateContent), UPDATE_REFRESH_INTERVAL); this.on(player, 'timeupdate', this.throttledUpdateContent); } diff --git a/src/js/control-bar/volume-control/volume-control.js b/src/js/control-bar/volume-control/volume-control.js index 8c5ac7fd2..79cbb8d8d 100644 --- a/src/js/control-bar/volume-control/volume-control.js +++ b/src/js/control-bar/volume-control/volume-control.js @@ -4,7 +4,7 @@ import Component from '../../component.js'; import checkVolumeSupport from './check-volume-support'; import {isPlain} from '../../utils/obj'; -import { throttle, bind } from '../../utils/fn.js'; +import {throttle, bind, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js'; // Required children import './volume-bar.js'; @@ -40,7 +40,7 @@ class VolumeControl extends Component { // hide this control if volume support is missing checkVolumeSupport(this, player); - this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), 25); + this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL); this.on('mousedown', this.handleMouseDown); this.on('touchstart', this.handleMouseDown); diff --git a/src/js/slider/slider.js b/src/js/slider/slider.js index 3df300362..cac295eab 100644 --- a/src/js/slider/slider.js +++ b/src/js/slider/slider.js @@ -59,6 +59,7 @@ class Slider extends Component { this.on('keydown', this.handleKeyDown); this.on('click', this.handleClick); + // TODO: deprecated, controlsvisible does not seem to be fired this.on(this.player_, 'controlsvisible', this.update); if (this.playerEvent) { @@ -262,10 +263,10 @@ class Slider extends Component { const style = bar.el().style; // Set the new bar width or height - if (this.vertical()) { - style.height = percentage; - } else { - style.width = percentage; + const sizeKey = this.vertical() ? 'height' : 'width'; + + if (style[sizeKey] !== percentage) { + style[sizeKey] = percentage; } return progress; diff --git a/src/js/utils/fn.js b/src/js/utils/fn.js index 4f6b0d6b1..4365c7616 100644 --- a/src/js/utils/fn.js +++ b/src/js/utils/fn.js @@ -5,6 +5,8 @@ import { newGUID } from './guid.js'; import window from 'global/window'; +export const UPDATE_REFRESH_INTERVAL = 30; + /** * Bind (a.k.a proxy or context). A simple method for changing the context of * a function. @@ -32,9 +34,7 @@ export const bind = function(context, fn, uid) { } // Create the new function that changes the context - const bound = function() { - return fn.apply(context, arguments); - }; + const bound = fn.bind(context); // Allow for the ability to individualize this function // Needed in the case where multiple objects might share the same prototype