Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.02.2014, 14:41
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Collection v4
Доделал 4-ю версию своего эпичного велосипеда Создал новый тред, т.к. по сравнению с прошлой версией было сделано оч много конфликтующих изменений.

https://github.com/kobezzza/Collection

Что это и зачем:
В JavaScript для массивов есть встроенные методы-итераторы, например, forEach, reduce и map и т.д. Их очень удобно использовать и они делают наш код нагляднее.

Данная либа позволяет юзать все те же методы + дополнительные для любых типов данных, а не только для массивов.
Также итераторы в Collection работают значительно быстрее нативных.

Также в этой либе реализован простой интерфейс для работы с хранилищами данных: localStorage, sessionStorage, indexedDB.

Итак:

По сравнению с прошлой версией было выпилено много лишнего (теперь сжатая либа - это всего 11.3 килобайта).

Теперь либа позиционируется как единый и очень навороченный API для функциональной работы с коллекциями данных, а не как блендер из кучи всего (как было раньше ).

Реализован единый прозрачный API для работы с хранилищами данных (localStorage, sessionStorage, indexedDB).

Реализован свой собственный JIT компилятор для итераторов, который позволяет увеличить до 10-ти раз производительность в сравнении с нативными методами во всех современных браузерах (применяемые оптимизации не делают работу за JIT VM JavaScript, а наоборот: дополняют те вещи, которые не могут быть оптимизированы нативным JIT). В древних браузерах этот эффект может быть ещё выше.

Переработаны интерфейсы методов для более простой и удобной работы.
Код переписан на ECMAScript6 (с транслятором)

Парочка примеров:

// Перебор элементов в обратном порядке начиная с 5-го
$C(document.querySelectorAll('.foo')).forEach(function (el) {
    ...
}, {
    reverse: true,
    startIndex: 5
});

// Вернуть массив всех чётных элементов исходного массива
$C([1, 2, 3, 4]).get(function (el) { return el % 2 === 0; });

// Cоздать новый объект на основе исходного,
// {a: 2, b: 4}
$C({a: 4, b: 16}).map(Math.sqrt);

// Загрузить коллекцию foo из локального хранилища
$C().load('foo');


О найденых багах пишите на гитхаб, вопросы можно задавать тут

ЗЫ: про отвратительную историю коммитов в курсе, буду исправляться
__________________
kobezzza
code monkey

Последний раз редактировалось kobezzza, 03.02.2014 в 20:29.
Ответить с цитированием
  #2 (permalink)  
Старый 02.02.2014, 15:13
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Было бы интересно послушать про оптимизации)
Ответить с цитированием
  #3 (permalink)  
Старый 02.02.2014, 15:41
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Сообщение от melky Посмотреть сообщение
Было бы интересно послушать про оптимизации)
Есть несколько слоёв оптимизации: самая очевидная и самая простая - это анализ параметров запроса.

Т.е. методы Collection принимают оч много параметров-ограничений, вроде количество элементов в ответе и т.д. Эта информация учитывается при генерации оптимизированный функции, т.е. если нет необходимости это учитывать то логика проверки не войдёт.

В функциях callback учитывается количество принимаемых параметров, наличие this, наличие возвращаемого значения и т.д. - эта информация также помогает построить оптимизированную функцию.

Анализируется тип данных, например для массиво-подобных объектов по умолчанию используется for, как и для массивов вместо for in. После нормальной реализации в браузерах for of добавлю дополнительную поддержку итераторов.

Фильтры анализируются более глубоко, вплоть до возможного инлайнинга. Инлайнингу почти всегда подвергаются функции-строки (вроде :el > 2), а также лямбда-функции (в теле которых сразу идёт return), но только если пройдёт проверка внешних зависимостей.

Поощряется разбивать фильтры на множество атомарных и затем использовать композицию, вроде:

.get('odd && unique || some') // и т.д. подробнее в доке


Т.к. составные фильтры перед выполнением строят дерево логики и оптимизируют его для максимального инлайнинга.

После всех оптимизаций составляется специальный ключ, который определяет вид применённых оптимизаций и в дальнейшем этот ключ может использоваться для схожий операций, т.е. оптимизация делается один раз.

В браузерах дополнительно оптимизированные функции подключаются как внешние скрипты, что дополнительно увеличивает скорость работы и улучшает отладку (для node планирую добавить кеширование во внешний файл).

Также ключи оптимизации в браузере сохраняются в локальном хранилище и при обновлении странице будут подключены как внешний скрипт, т.е. уже не будет необходимости в повторной оптимизации, причём ключи привязываются к домену, т.е. при повторном заходе на сайт оптимизация будет ещё сильнее.

На примере проекта над которым я сейчас работаю замена нативных методов на Collection без внесения дополнительных оптимизация увеличило скорость работы всего сайта в 12-16 раз во всех браузерах.

ЗЫ:
Вот пример сгенерированных ключей
http://screencast.com/t/M4IqYUqRNF

ЗЫЗЫ:
Ещё один слой оптимизации - это оптимизация и сжатие либы в GCC Adv Mode Хз что он там колдует, но после сжатия всё реально шустрее работает
__________________
kobezzza
code monkey

Последний раз редактировалось kobezzza, 02.02.2014 в 16:09.
Ответить с цитированием
  #4 (permalink)  
Старый 03.02.2014, 17:46
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от kobezzza
сжатие либы в GCC Adv Mode
для тех кто в танке, можно обьянсть как это?)

не особо вникал в код пока, но я так понял ты вообще не используешь встроенные циклы типа for при переборе, или как ты перебираешь то что передали?
К примеру я передал массив , как он будет обработан и каким циклов перебран?
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 03.02.2014, 18:08
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Сообщение от cyber Посмотреть сообщение
для тех кто в танке, можно обьянсть как это?)
Ну это сжатие в продвинутом режиме closure compiler, для этого нужно спецом под него код писать.

Сообщение от cyber Посмотреть сообщение
не особо вникал в код пока, но я так понял ты вообще не используешь встроенные циклы типа for при переборе, или как ты перебираешь то что передали?
К примеру я передал массив , как он будет обработан и каким циклов перебран?
Как не использую? как раз его и использую) Если передал массив, строку или массивоподобный объект (например HTMLCollection) то буит простой for, для остальных for in
__________________
kobezzza
code monkey
Ответить с цитированием
  #6 (permalink)  
Старый 03.02.2014, 19:00
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от kobezzza
Ну это сжатие в продвинутом режиме closure compiler, для этого нужно спецом под него код писать.
а понял, просто не знал что он так называеться. Под него довольно сложно писать

Сообщение от kobezzza
Как не использую? как раз его и использую) Если передал массив, строку или массивоподобный объект (например HTMLCollection) то буит простой for, для остальных for in
а, твоя реализация быстрее forEach и медленее for?)

вопрос по продвинутом сжатию, к примеру есть код

(function (undef) {

    var local_name = "cache_module_",
        v_name = local_name + "cache_version";

    function cache(params) {
        this.storage = sessionStorage;
        this.isUse = false;

        if(params.isLocal) {
            this.storage = localStorage;
        }
    }

    cache.prototype.get = function (id) {
        if(!this.isUse) return;

        try{
           var obj = this.storage.getItem(local_name + id)
           return JSON.parse(obj);
        } catch(ignore) {}
    };

    cache.prototype.set = function(key, data) {
        if(!this.isUse) return;

        setTimeout(function() {
            this.storage.setItem(local_name + key, JSON.stringify(data));
        }.bind(this), 0)
    };

    cache.prototype.removeItem = function(key) {
            this.storage.removeItem(local_name + key);
    };

    cache.prototype.clear = function () {
        var storage = this.storage, key;

        for(var i = 0; i < storage.length; i++) {
            key = storage.key(i);

            if(~key.indexOf(local_name))
                storage.removeItem(key);
        }
    }

    cache.prototype.init = function(parent, initObj) {
        var v;

        if(arguments.length != 2 ||
            initObj.cacheVersion === undef) return;

        if(v = this.get(v_name) &&
            v != initObj.cacheVersion) {
                this.clear();
        }

        this.set(v_name, initObj.cacheVersion);
        this.isUse = true;
    };

    Object.defineProperty(cache.prototype, "name", {
        value: "cache",
        writable: false
    });

    window.Cache_module = cache;

}());
// почему из него убираються прототипы и остаеться

(function(){function b(){}Object.defineProperty(b.prototype,"name",{value:"cache",writable:!1});window.a=b})();


это из за того что они явно не используеться в коде?
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 03.02.2014, 19:14
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Сообщение от cyber Посмотреть сообщение
а, твоя реализация быстрее forEach и медленее for?)
равна for, но в реальной жизни обычно даже быстрее, т.к. там внутри делаются оптимизации на которые просто забивают, т.к. они портят читаемость кода.

Сообщение от cyber Посмотреть сообщение
вопрос по продвинутом сжатию, к примеру есть код
это из за того что они явно не используеться в коде?
Да, для продвинутого сжатия нужно писать специальный jsdoc анотации.
__________________
kobezzza
code monkey
Ответить с цитированием
  #8 (permalink)  
Старый 03.02.2014, 20:21
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от kobezzza
Доделал 4-ю версию своего эпичного велосипеда
молодец) Добавь в начало первого поста "что это" и "зачем оно нужно" в двух словах. Иначе все
Сообщение от kobezzza
По сравнению с прошлой версией
не имеют смысла, т.к. не понятно о чем идет речь.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #9 (permalink)  
Старый 03.02.2014, 20:25
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от kobezzza
Да, для продвинутого сжатия нужно писать специальный jsdoc анотации.
где можно по читать как это замутить?)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #10 (permalink)  
Старый 03.02.2014, 20:27
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Сообщение от nerv_ Посмотреть сообщение
молодец) Добавь в начало первого поста "что это" и "зачем оно нужно" в двух словах. Иначе все

не имеют смысла, т.к. не понятно о чем идет речь.
Исправил
__________________
kobezzza
code monkey
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Закрытие и открытие дива по клику OLDBOY Общие вопросы Javascript 30 28.09.2016 19:41
как обновлять collection каждые 5 секунд sergey_magic Backbone.js 1 29.07.2013 14:31
Collection – фреймворк для управления данными kobezzza Ваши сайты и скрипты 155 10.05.2013 08:59
Удаление всех options в select Ceргей Элементы интерфейса 9 28.11.2012 08:36