From 9fd7ee80b7992ffd92ff35a18fd767466b1f83df Mon Sep 17 00:00:00 2001 From: paul lee Date: Tue, 23 May 2017 07:47:29 -0700 Subject: [PATCH 1/2] cache css colors in parseCssColor function --- src/webglimpse/color.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/webglimpse/color.ts b/src/webglimpse/color.ts index 06c0de8..c4c1ac7 100644 --- a/src/webglimpse/color.ts +++ b/src/webglimpse/color.ts @@ -107,17 +107,24 @@ module Webglimpse { canvas.width = 1; canvas.height = 1; var g = canvas.getContext( '2d' ); + var rgbCache = {}; return function( cssColorString : string ) : Color { g.clearRect( 0, 0, 1, 1 ); g.fillStyle = cssColorString; g.fillRect( 0, 0, 1, 1 ); - var rgbaData = g.getImageData( 0, 0, 1, 1 ).data; - var R = rgbaData[ 0 ] / 255; - var G = rgbaData[ 1 ] / 255; - var B = rgbaData[ 2 ] / 255; - var A = rgbaData[ 3 ] / 255; - return rgba( R, G, B, A ); + var rgbaData; + if(!rgbCache[cssColorString]) { + rgbaData = g.getImageData(0, 0, 1, 1).data; + rgbCache[cssColorString] = rgbaData; + } else { + rgbaData = rgbCache[cssColorString]; + } + var R = rgbaData[ 0 ] / 255; + var G = rgbaData[ 1 ] / 255; + var B = rgbaData[ 2 ] / 255; + var A = rgbaData[ 3 ] / 255; + return rgba( R, G, B, A ); } } )( ); From ea4841537c7d625a736f1413400ec18b703ec258 Mon Sep 17 00:00:00 2001 From: paul lee Date: Thu, 25 May 2017 09:40:08 -0700 Subject: [PATCH 2/2] Add a cache for css color strings. The getImageData takes a lot of time overall when there are lots of events --- src/webglimpse/color.ts | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/webglimpse/color.ts b/src/webglimpse/color.ts index c4c1ac7..1c6f2bc 100644 --- a/src/webglimpse/color.ts +++ b/src/webglimpse/color.ts @@ -112,19 +112,18 @@ module Webglimpse { g.clearRect( 0, 0, 1, 1 ); g.fillStyle = cssColorString; g.fillRect( 0, 0, 1, 1 ); - - var rgbaData; - if(!rgbCache[cssColorString]) { - rgbaData = g.getImageData(0, 0, 1, 1).data; - rgbCache[cssColorString] = rgbaData; - } else { - rgbaData = rgbCache[cssColorString]; - } - var R = rgbaData[ 0 ] / 255; - var G = rgbaData[ 1 ] / 255; - var B = rgbaData[ 2 ] / 255; - var A = rgbaData[ 3 ] / 255; - return rgba( R, G, B, A ); + var rgbaData; + if(!rgbCache.hasOwnProperty(cssColorString)) { + rgbaData = g.getImageData(0, 0, 1, 1).data; + rgbCache[cssColorString] = rgbaData; + } else { + rgbaData = rgbCache[cssColorString]; + } + var R = rgbaData[ 0 ] / 255; + var G = rgbaData[ 1 ] / 255; + var B = rgbaData[ 2 ] / 255; + var A = rgbaData[ 3 ] / 255; + return rgba( R, G, B, A ); } } )( );