ASM.JS невероятен
 

Ну че пасоны, кто игрался, кто что думает? п.с. (Я вот буду на нем юиху писать теперь), там есть и работа с дом и виртуальная файловая система,и удобно шейдеры писать, и на канве рисовать, и можно в бинарник для node.js скомпилировать и.т.п.

А вы что думаете? Научить вас его запускать писать и компилить? Али сами)?

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

javascript код:

function Cat(newAge) {
            this.age = newAge
        }

        Cat.prototype.say = function () {
            return this.age;
        }

        console.time('javascript time');
        var q = 0
        for (var i = 0; i < 10000000; ++i) {
            var cat = new Cat(4)
            q += cat.say()
            if (q === 12) q = 0
        }
        console.timeEnd('javascript time');
        console.log('javascript q=' + q);

его эквивалент на С++:

class Cat {
private:
	int age;

public:
	Cat(int newAge) {
		age = newAge;
	}

	int say() {
		return age;
	}
};


int main() {

	EM_ASM(console.time('asm time'));

	int q = 0;

	for (int i = 0; i < 10000000; ++i) {
		Cat cat(4);
		q += cat.say();
		if (q == 12) q = 0;
	}

	EM_ASM(console.timeEnd('asm time'));

	printf("asm: q=%d", q);
	return 0;
}

То есть asm показывает минимальное проседание fps в 52 кадра в секунду
Яваскрипт же выдает 5.4 кадра в секунду

Иными словами чем сложнее данные и чем больше операций, тем выгодней asm js
Использовать его в юишке было отличной идеей. Осталось только как то выкинуть тучу лишнего кода который прикрепляется в выходному файлу, убрать всякую егалду для работы с файлами и прочие штуки для совместимости с сишными программами. Мне по сути очень не хочется в фреймворк тащить тучу лишнего кода увеличивая вес на 100кб.

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

Я пишу двигло для рендера. Использующее виртуал дом (виртуальные дом элементы) как в Реакт от фейсбука. Я работаю с виртуальным DOM деревом а оно, когда ему нужно, подрендеривает это в реальный браузерный дом, физически отображая элементы на экране. Иными словами я хочу список в миллион элементов нарисовать на экране. Но браузер зависнет уже при 10к. ПО этому я нарисую его в виртуальный дом, а тот отследит где щас камера по отношеню к сайту и какие элементы должны быть видны а какие нет, и нарисует из того миллиона только те, что на экране могут быть видны. А когда чел прокрутит камеру вниз, то фреймворк поймет это ибыстренько подрисует элементы снизу, а те что сверху скрылись за экраном удалит). таким образом чел может рисовать огроменное количество кнопок и элементов, а движок рендера будет рисовать только то что видно на экране.

Для этого нужно будет построить не только виртуал дом, но и виртуал стайлшит, но фреймворк предполагает что мы не будем добавлять новые css стили после инициализации приложения, но если добавим ни что не мешает вызвать что-то типа ui.update() и пересчитать виртуальный стайлшит.


Вообще, теоретически, имея такие мощности, можно написать браузер в браузере, и оптимизировать не оптимальные места в браузере заточив под нужды фреймворка. Например я уже парсю стайлшиты определяю приоритеты селекторов и определяю какие изменения добавляет тот или иной класс чтобы анимировано изменить width с auto на допустим 30em, если задан transition widtn. Хотя браузер это делает рывком. и.т.п.

Я могу расширить эту концепцию и добавить нууу, например можно будет не писать префиксы всякие в css, фреймворк их сам добавит. Или можно будет написать что-то вроде новых кастомных css свойств, ну как то что делают препроцессоры, тока тут будет какое нить свойство типа width: @parent - 10% и фреймворк начнет автоматически в виртуал дом брать ширину в 10% от родительской высчитывать. Или можно добавить новые единицы измерения например, типа "одна сотая ширины экрана". Но я пока не знаю можно ли получать доступ к сырым данным css файлов? Кто знает? Я имею ввиду если стайл уже загружен и я хочу посмотреть тупо его КОД. Как это сделать? Просто стайлшиты котрые генерит браузер, при парсинге игнорируют неизвестные им свойства и синтаксические ошибки. По этому мне нужны сырые стили. Чтобы не делать xhr запрашивая и парся их повторно.

Увеличел количество итераций с обьектами в 10 раз

результаты поражают:

Еще есть вот такая штука http://www.leaningtech.com/cheerp/, она генерирует не asm.js код а просто код на бинарных операторах. В отличии от emscripten она позволяет из С++ работать напрямую со всем браузерным api включая дом и прочее, даже позволяет фреймворки юзать типа jQuery. НО она работает где то на 20% медленнее asm, а где то млять БЫСТРЕЕ!! Чертовщина) и оверхед у неё аж 600 килобайт!!!! а у асма 140


вот сравнение производительности на миллионе элементов:



Кстати помнится мне кто-то тут кукарекал что бинарные операторы работают не быстрее чем обычные и типа все это миф)??? лалки

Ну, короче че я думаю, я думаю я буду писать классы обертки для взаимодействия с DOM в браузере ;) для Emscripten.
Так как он все таки быстрее и кода меньше генерит. А потом предложу внедрить их в стандартную библиотеку Emscripten, я ж крутой

о, оказуца стандартные яваскрипт классы могут наследовать от сишных) красавцы ребята

оказуца взаимодействовать с рантайм окружением проще простого

#include <emscripten.h>
#include <emscripten/val.h>

using namespace emscripten;


int main() {

    val document = val::global("document");
    val body = document["body"];
    body.set("innerHTML", val("ololo"));
    body.call<void>("setAttribute", val("name"), val("i winner"));
}

Mаxmaxmаximus, тема интересная. Взял бы свою энергию направил на бы созидание, а точнее, написал бы туториал. Сейчас, я не понимаю, для кого ты всё это пишешь.

ща