Raphaël—JavaScript Library
 

Хочу прикрутить библиотеку Raphaël (SVG(VML)) к Я.Карты(Google Map).
Может кто-то владеет информацией
1. О скорости отрисовки данной библиотеки для различных браузеров?
2. Об скорости работы SVG в различных браузерах?
3. Об скорости работы VML IE?

Я бы для начала поковырял файлик YMaps.js на наличие функций работы с векторной графикой. Может и не придется грузить еще один немаленький скрипт.

Тогда нужно каждый API карт ковырять для выяснения, что там есть. Учитывая, что процесс этот не документирован и может изменяться от версии к версии - дело безнадежное. Я же как раз хочу сделать минимальную обвязку для каждого API карт и отрисовывать своими функциями. В этом случае можно поддерживать сразу несколько API карт.
Просто не совсем ясно, как будет вести себя SVG/VML при отрисовке на нем 2 тыс объектов (или 20 тысяч). Было бы неплохо на ранней стадии проектирования понимать, нужно ли в дальнейшем делать отсечение невидимых объектов самому или SVG/VML сделает это за меня гораздо быстрее и качественнее.

Провел небольшой эксперимент по скорости. Может кому будет интересно. Запускал следующий код:

window.onload = function () {
        var maxRect = 50;
        var maxS = maxRect * 10;
        var maxR = maxS;
        var div = document.getElementById("svg");
//        window.console.dir(div);
        div.style.width = maxR+"px";
        div.style.height = maxR+"px";
        var paper = Raphael(div,maxS,maxS);
        //
        var dR = maxR / maxRect;
        var colors = ["red","blue"];
        var tStart = new Date();
        for(var x=0;x<maxR;x+=dR)
         for(var y=0;y<maxR;y+=dR)
         {
          (function() {
            var color = colors[ ((x+y)/dR)%2 ];
            var r = paper.rect(x,y,dR,dR);
            r.attr({
             fill : color
            });
            //*
            r.node.onmouseover = function() {
             r.attr({fill: "#ff0"});
            };
            r.node.onmouseout = function() {
             r.attr({fill: color});
            };
          })();
          //*/
         }
        var tEnd = new Date();
        alert((tEnd-tStart)/1000);

При количестве прямоугольников = 100x100 = 10.000

• FF 3.5.1: 6 секунд
• IE8: 116 секунд
• Opera Portable 9.52: 4 секунды

При количестве прямоугольников = 50x50 = 2500

• FF 3.5.1: 1 секунда
• IE8: 10 секунд
• Opera Portable 9.52: 1 секунда

В опере при выводе сообщения о времени исполнения сами прямоугольники ещё не отрисовываются. Отрисовка происходит через 2-3 секунды после закрытия окна со временем исполнения.

После отрисовки для определения скорости работы водил мышкой по прямоугольникам. Как можно заметить из кода, прямоугольник, на котором находится курсор мыши окрашивается в зеленый цвет.
По этому тесту результаты следующие:

1. FF - активный прямоугольник (АП) во время движения почти всегда находится под курсором
2. Opera - АК отстает от курсора. Однако всё-таки повторяет его движения
3. IE - АК периодически останавливается на месте, пропуская часть траектории

Выводы: Не пользуйтесь IE :nono:

в тесте не хватает браузеров на основе web-kit (Chrome/Safari) =)

У меня просто нету в наличие этих браузеров, поэтому и тестов на них не делал.

А зачем такое большое количество прямоугольников? Это столько на видимой части докуменда ?

Да, на видимой.