Google Closure: как не писать JavaScript

На прошлой неделе на конференции Edge of the Web в Перте я встретился с Дмитрием Барановским , создателем библиотек JavaScript Raphaël и gRaphaël . Возможно, самая важная вещь, которую делают эти библиотеки, — это создание сложной векторной графики в Internet Explorer, где производительность JavaScript относительно низкая. Поэтому у Дмитрия мало терпения к плохо написанному JavaScript, как к коду, который он обнаружил в только что выпущенной Google библиотеке закрытия .

Прочитав на конференции доклад о том, как написать свою собственную библиотеку JavaScript ( подробные заметки ), Дмитрий поделился своими мыслями о новой библиотеке за завтраком на следующее утро. «Как раз то, что нужно миру — еще одна отстойная библиотека JavaScript», — сказал он. Когда я спросил его, что делает его «отстойным», он уточнил. «Это библиотека JavaScript, написанная разработчиками Java, которые явно не получают JavaScript».

В течение оставшейся части дня всем, кто слушал, Дмитрий приводил пример за примером ужасного кода, который он обнаружил, когда копался в Closure. Его самый большой страх, сказал он мне, заключается в том, что люди будут переходить от действительно превосходных библиотек JavaScript, таких как jQuery, к Closure, основываясь на имени Google.

«Я заключу с тобой сделку», — сказал я ему. «Пришлите мне несколько примеров этого ужасного кода, и я опубликую его на SitePoint».

Медленная петля

Из array.js , строка 63:

for (var i = fromIndex; i < arr.length; i++) { 

Этот цикл for ищет свойство .length массива ( arr ) каждый раз в цикле. Просто установив переменную для хранения этого числа в начале цикла, вы можете сделать цикл намного быстрее:

 for (var i = fromIndex, ii = arr.length; i < ii; i++) { 

Разработчики Google, похоже, выяснили этот трюк позже в том же файле. Из array.js , строка 153:

 var l = arr.length;  // must be fixed during loop... see docs ⋮ for (var i = l - 1; i >= 0; --i) { 

Этот цикл лучше в том, что он избегает поиска свойств каждый раз в цикле, но этот цикл for настолько прост, что его можно еще больше упростить в цикл while, который снова будет работать намного быстрее:

 var i = arr.length; ⋮ while (i--) { 

Но не все проблемы производительности Closure Library связаны с плохо оптимизированными циклами. Из dom.js , строка 797:

 switch (node.tagName) { case goog.dom.TagName.APPLET: case goog.dom.TagName.AREA: case goog.dom.TagName.BR: case goog.dom.TagName.COL: case goog.dom.TagName.FRAME: case goog.dom.TagName.HR: case goog.dom.TagName.IMG: case goog.dom.TagName.INPUT: case goog.dom.TagName.IFRAME: case goog.dom.TagName.ISINDEX: case goog.dom.TagName.LINK: case goog.dom.TagName.NOFRAMES: case goog.dom.TagName.NOSCRIPT: case goog.dom.TagName.META: case goog.dom.TagName.OBJECT: case goog.dom.TagName.PARAM: case goog.dom.TagName.SCRIPT: case goog.dom.TagName.STYLE: return false; } return true; 

Этот вид кода на самом деле довольно распространен в Java, и там будет работать очень хорошо. Однако в JavaScript этот оператор switch будет работать как собака каждый раз, когда разработчик проверяет, разрешено ли конкретному элементу HTML иметь детей.

Опытные разработчики JavaScript знают, что гораздо быстрее создать объект для инкапсуляции этой логики:

 var takesChildren = {} takesChildren[goog.dom.TagName.APPLET] = 1; takesChildren[goog.dom.TagName.AREA] = 1; ⋮ 

Когда этот объект настроен, функция проверки, принимает ли тег дочерние элементы, может выполняться намного быстрее:

 return !takesChildren[node.tagName]; 

Этот код может быть дополнительно hasOwnProperty от внешних помех с помощью hasOwnProperty (полное объяснение этого см. Ниже).

 return !takesChildren.hasOwnProperty(node.tagName); 

Если есть одна вещь, которую мы ожидаем от Google, это фокус на производительности. Черт, Google выпустил свой собственный браузер Google Chrome, прежде всего, чтобы поднять производительность JavaScript на новый уровень!

 goog.memoize = function(f, opt_serializer) { var functionHash = goog.getHashCode(f); var serializer = opt_serializer || goog.memoize.simpleSerializer; return function() { // Maps the serialized list of args to the corresponding return value. var cache = this[goog.memoize.CACHE_PROPERTY_]; if (!cache) { cache = this[goog.memoize.CACHE_PROPERTY_] = {}; } var key = serializer(functionHash, arguments); if (!(key in cache)) { cache[key] = f.apply(this, arguments); } return cache[key]; }; }; 

 goog.object.forEach = function(obj, f, opt_obj) { for (var key in obj) { f.call(opt_obj, obj[key], key, obj); } }; 

 goog.object.forEach = function(obj, f, opt_obj) { for (var key in obj) { if (obj.hasOwnProperty(key)) { f.call(opt_obj, obj[key], key, obj); } } }; 

 goog.isDef = function(val) { return val !== undefined; }; 

 var undefined = 5; 

 goog.isDef = function(val) { var undefined; return val !== undefined; }; 

 // We cast to String in case an argument is a Function. … var replacement = String(arguments[i]).replace(…); 

 var replacement = (arguments[i] + "").replace(…); 

 goog.isString = function(val) { return typeof val == 'string'; }; 

 var a = "I am a string!"; alert(typeof a); // Will output "string" var b = new String("I am also a string!"); alert(typeof b); // Will output "object" 

 var b = new String("I am also a string!"); alert(goog.isString(b)); // Will output FALSE 

 return [ Math.round(factor * rgb1[0] + (1.0 - factor) * rgb2[0]), Math.round(factor * rgb1[1] + (1.0 - factor) * rgb2[1]), Math.round(factor * rgb1[2] + (1.0 - factor) * rgb2[2]) ]; 

 goog.fx.Animation.prototype.updateCoords_ = function(t) { this.coords = new Array(this.startPoint.length); for (var i = 0; i 

 this.coords = new Array(this.startPoint.length); 

 this.coords = [];