CTAPbIu_MABP's BLOG » FireFox

-moz-box-shadow & -moz-transform

CTAPbIu_MABP — Tue, 17 Aug 2010 12:14:38 +0000

Ребята из YUI сделали песочницу для CSS3. А я поковырял и нашел косяки в FF 3.6/7.x. Смотреть в остальных браузерах не имеет смысла.


-moz-box-shadow:50px 50px 50px #FF4500;
-moz-transform:rotate(90deg);

background:none repeat scroll 0 0 #DDDDDD;
height:100px;
left:200px;
padding:10px;
position:absolute;
top:100px;
width:300px;

А вот и баг нашелся

Firebug 1.5

CTAPbIu_MABP — Sat, 16 Jan 2010 20:01:55 +0000

Свежие сводки с фронтов! Только что вышел Firebug 1.5!!! Качаем!

FireFox домашняя страница

CTAPbIu_MABP — Sat, 21 Nov 2009 09:24:19 +0000

А вы знали что в FireFox можно задать не одну а несколько стартовых страниц (вкладок)? Для этого достаточно написать их через | палку

Для тех кто не в курсе Инструменты->Настойки->Основные в поле "домашняя страница" написать



http://google.ru/|http://mabp.kiev.ua/|http://pyha.ru/forum/unread

jQuery profiling

CTAPbIu_MABP — Sun, 29 Mar 2009 17:34:47 +0000

С тех пор как как я написал про то как ускорить селекторы в jQuery меня все беспокоит скорость работы разных частей библиотеки. 21 февраля я проводил тестирование производительности селекторов, а 23 примерно таким же профайлингом занимался John в статье JavaScript Function Call Profiling. Я тогда еще подумал что все что я сделал можно выкинуть, потому что он написал лучше и подробнее.

Но он затронул далеко не все методы, а только основные. Именно этим я сейчас и собираюсь заняться, я собираюсь пройтись по всей документации выписать методы и посмотреть какие методы и сколько времени работают. В общем работа не сложная но нудная. Скрипт замеров уже есть плюс FireUnit мне поможет. Записывать буду имя тестируемого метода, количество вызовов внутри него, соотношение количества внутренних вызовов к количеству выбранных элементов (O), среднее время. Если O меньше 2n, то оно не записывается и считается примерно равным одному n , а n == 40, потому что в примере участвует 40 дивов. Для примера была взята страницы выдачи результатов Google и чуть-чуть подправлена. Да и еще есть такие методы которые работаю только с первым элементом коллекции, в основном получают значение его параметров, для них вноситься отдельная правка.

Пример отрабатывает долго поэтому я вынес его в отдельный файл, смотрите чтоб не подвесил ваш браузер. Хотел сделать еще сравнение по версиям типа 1.3.2 vs 1.2.6 но последний даже не смог полностью отработать - виснет, поэтому предлагаю тем кому действительно интересно сохранить страницу поправить версию и запустить локально, закомментировав половину кода. И там еще какие-то глюки с replaceAll, вроде как из-за него виснет. Но могу сказать заранее, что хоть в более новой версии показатель О выше (больше вызовов функций на каждый элемент), но работает она в среднем быстрее.

И последние перед тем как я дам ссылку на пример его нужно смотреть в FireFox c установленным FireBug и FireUnit. А вот и ссылка на пример.

Для тех кто по каким-то религиозным причинам не хочет ставить себе всё это публикую результат теста проведенного на моей машине.

Attributes/Attr
divs.attr("align");	6	O(6n)	0.075
divs.attr({align: "center"});	284	O(7n)	2.381
divs.attr("align", "center");	284	O(7n)	2.627
divs.attr("align", function () {});	324	O(8n)	2.089
divs.removeAttr("align");	204	O(5n)	2.29
Attributes/Class
divs.addClass("test");	223	O(6n)	1.706
divs.addClass("test");	244	O(6n)	1.255
divs.hasClass("test");	11		0.286
divs.removeClass("test");	304	O(8n)	2.188
divs.removeClass("test");	247	O(6n)	1.795
divs.toggleClass("test");	303	O(8n)	2.271
divs.toggleClass("test");	384	O(10n)	2.739
divs.toggleClass("test", true);	223	O(6n)	1.792
divs.toggleClass("test", true);	244	O(6n)	1.277
divs.toggleClass("test", false);	247	O(6n)	1.81
divs.toggleClass("test", false);	304	O(8n)	2.26
Attributes/HTML
divs.html();	2	O(2n)	2.221
divs.html(" test ");	9907	O(6n+n²)	71.238
Attributes/Text
divs.text();	6500	O(4n+n²)	35.785
divs.text("test");	9902	O(6n+n²)	71.749
Attributes/Value
divs.val();	4	O(4n)	0.04
divs.val("myValue");	124	O(3n)	1.046
divs.val(["myValue"]);	124	O(3n)	1.082
Traversing/Filtering
divs.eq(0);	9		0.05
divs.hasClass("test");	11		0.25
divs.filter("div");	100	O(3n)	0.606
divs.filter(function () {});	90	O(2n)	0.248
divs.is("div");	52		0.345
divs.is(".test");	10		0.228
divs.map(function () {});	89	O(2n)	0.24
divs.not("div");	104	O(3n)	0.651
divs.not(".test");	20		0.329
divs.slice(0, 1);	8		0.048
Traversing/Finding
divs.add("span");	106	O(3n)	1.369
divs.children("span");	216	O(5n)	3.238
divs.closest("div");	690	O(17n)	5.565
divs.closest("span");	4612	O(3n+n²)	38.784
divs.contents();	316	O(8n)	3.952
divs.find("span");	462	O(12n)	5.147
divs.next("span");	121	O(3n)	1.145
divs.nextAll("span");	161	O(4n)	1.761
divs.offsetParent("span");	4	O(4n)	0.311
divs.parent("span");	100	O(3n)	0.746
divs.parents("span");	383	O(10n)	3.348
divs.prev("span");	136	O(3n)	1.445
divs.prevAll("span");	190	O(5n)	2.478
divs.siblings("span");	251	O(6n)	3.403
Traversing/Changing
divs.andSelf();	55		0.425
divs.end();	2		0.006
Manipulation/Changing Contents
divs.html();	2	O(2n)	2.196
divs.html(" test ");	9907	O(6n+n²)	72.032
divs.text();	6500	O(4n+n²)	36.241
divs.text("test");	9902	O(6n+n²)	71.661
Manipulation/Inserting Inside
divs.append(" test ");	133	O(3n)	1.675
divs.appendTo("#form");	176	O(4n)	3.429
divs.appendTo("form");	191	O(5n)	3.506
divs.appendTo(".form");	192	O(5n)	3.534
divs.appendTo(" ");	184	O(5n)	3.149
divs.prepend(" test ");	133	O(3n)	2.155
divs.prependTo("form");	191	O(5n)	3.509
Manipulation/Inserting Outside
divs.after("form");	91	O(2n)	1.903
divs.after("");	94	O(2n)	2.078
divs.before("form");	91	O(2n)	1.457
divs.before("");	94	O(2n)	1.611
divs.insertAfter("form");	190	O(5n)	3.553
divs.insertBefore("form");	190	O(5n)	3.528
Manipulation/Inserting Around
divs.wrap("");	2644	O(2n+n²)	22.655
divs.wrap(document.createElement("span"));	2524	O(2n+n²)	20.983
divs.wrapAll("");	181	O(5n)	7.886
divs.wrapAll(document.createElement("span"));	178	O(4n)	7.85
divs.wrapInner("");	3245	O(2n+n²)	31.313
divs.wrapInner(document.createElement("span"));	3140	O(2n+n²)	29.689
Manipulation/Replacing
divs.replaceWith("");	7636	O(5n+n²)	60.003
divs.replaceAll("span");	35		1.854
Manipulation/Removing
divs.empty();	9774	O(6n+n²)	72.261
divs.remove();	6982	O(4n+n²)	55.583
Manipulation/Copying
divs.clone();	90	O(2n)	3.304
divs.clone(true);	5309	O(3n+n²)	52.121
CSS/CSS
divs.css("color");	4	O(4n)	0.136
divs.css("color", "red");	205	O(5n)	2.119
divs.css({color: "red", border: "1px solid red"});	365	O(9n)	4.112
CSS/Positioning
divs.offset();	2	O(2n)	0.337
divs.position();	14		0.51
divs.scrollTop();	2	O(2n)	0.112
divs.scrollTop(10);	44		0.475
divs.scrollLeft();	2	O(2n)	0.112
divs.scrollLeft(10);	44		0.468
CSS/Height and Width
divs.height();	12	O(12n)	24.01
divs.height(10);	206	O(5n)	2.271
divs.width();	12	O(12n)	10.789
divs.width(10);	206	O(5n)	2.189
divs.innerHeight();	10	O(10n)	10.782
divs.innerWidth();	10	O(10n)	10.533
divs.outerHeight();	5	O(5n)	10.195
divs.outerHeight(true);	10	O(10n)	10.483
divs.outerWidth();	5	O(5n)	10.216
divs.outerWidth(true);	10	O(10n)	10.342
Effects/Basics
divs.show();	162	O(4n)	8.007
divs.show();	253	O(6n)	2.991
divs.hide();	162	O(4n)	4.168
divs.hide();	42		0.393
divs.toggle();	845	O(21n)	23.782
divs.toggle(true);	325	O(8n)	10.757
divs.toggle(false);	325	O(8n)	5.31
Effects/Sliding
divs.slideUp();	1328	O(33n)	8.703
divs.slideUp();	3679	O(2n+n²)	101.01
divs.slideDown();	2280	O(n²)	62.462
divs.slideDown();	2200	O(n²)	61.412
divs.slideToggle();	4927	O(3n+n²)	156.157
Effects/Fading
divs.fadeIn();	1448	O(36n)	22.658
divs.fadeIn();	1368	O(34n)	21.313
divs.fadeOut();	1328	O(33n)	9.04
divs.fadeOut();	1288	O(32n)	15.798
divs.fadeTo(0, 0.5);	1968	O(n²)	17.539

Firebug 1.3

CTAPbIu_MABP — Thu, 08 Jan 2009 21:02:41 +0000

Сегодня обновился FireBug до версии 1.3! Полный список изменений тут. Хотя это и ожидаймая стабильная версия для FireFox3.0.x, но уже не за горами FireFox3.1 с которой надо будет использовать новую сырую версию FireBug1.4alpha.

Console2

CTAPbIu_MABP — Mon, 05 Jan 2009 17:54:46 +0000

Все меньше и меньше остается времени у шестого IE, все больше и больше сайтов объявляют, что они перестают поддерживать дизайн и скрипты для него. Напомню что шестой IE был выпущен в 1999 году то есть 10 лет назад, а до сих пор "популярен". Уже даже сам мелкософт заявил о том что будет распространять седьмой IE как стандартное обновление. Но эта тема все еще может быть актуально потому что даже в седьмом IE нет консоли, и потому что в Opera и у Safari она находиться в зачаточном состоянии по сравнению с firebug'ом. Так вот я и решил то пока еще не поздно написать вторую версию консоли. Заодно углубил свои знания и отточил практику. Теперь она работает еще быстрее и надежнее, хотя все еще не лишена кое каких глюков, например типа-массив arguments так и не покорился. И еще я не хочу чтоб вы думали что дальше я начну накладывать какие-то визуальные эффекты типа плавающих дивов вместо аллертов, я не хочу создавать второй furebug lite.

Итак собственно код, его стало немного больше но на много повысилась производительность. Возможно стоило собрать все методы в объект и наверное я это сделаю но не сейчас, сейчас ее надо потестить в реальных условиях.

И собственно мои тест-кейсы:


window.onload = function(){
	console.log("string: %d %s %d", 10, "text", 10);
	console.info({});
	console.info([]);
	console.info(null);
	console.info(window);
	console.info(document);
	console.info(document.getElementsByTagName("body"));
	console.info(document.getElementsByTagName("body")[0]);
	console.info(Math);
	(function(z){try {x.y = z;}catch(e){console.info(e);}})(null);
	//(function(x,y,z){console.info(arguments)})(1,2,3); // fail

}

Консоль для всех браузеров

CTAPbIu_MABP — Thu, 25 Dec 2008 19:43:55 +0000

Это попытка заставить работать синтаксис консоли FireBug'a со всеми браузерами. ИМХО кроссбраузерный дебаг звучит не ок, но это именно он! А все получилось как-то само собой когда я сегодня что-то дебажил на тестовой платформе и для того чтобы тестеры не видели ошибок прикрывал вызовы консоли заглушками.


if(window.console)
	console.log("myLog");

В общем это как-то гнило, нашел что по данному поводу пишут разработчики Prototype и jQuery, и даже сами разработчики FireBug'a склоняются к заглушкам

Уж очень мне эти затычки не нравятся. И решил я выяснить что можно с этим сделать. Уточнив с какой версии у браузеров появилась консоль (и текущую версию): IE8b2 (IE7), Opera 9.50 (9.63), Safari 1.3 (3.21), FireFox 2.0.0 (3.0.5), я принялся за работу.

Первое что приходило на ум это что-то вроде


if (!window.console) {
	window.console = {};
	window.console.log = alert;
		
}

Но не все так просто, FireBug славится тем что показывает содержимое любого объекта и может делать форматированный вывод. То есть во-первых можно сделать


console.info({a:null});

и увидеть содержимое объекта в закладке DOM, а во-вторых можно сделать форматированный вывод


console.info("string: %d %s %d", 10, "text", 10);

и увидеть строку "string: 10 text 10". В остальных же браузерах можно наблюдать только строку [object Object] и "string: %d %s %d" соответственно, кроме IE8b2, он поддерживает форматный вывод, выпендрился, блин!

Я решил начать с написания форматного вывода, но функция sprintf оказалась настолько громоздкой и избыточной что я решил обойтись небольшим регулярным выражением, для своих нужд, тем более что FireBug тоже не различает %d и %s ;) в отличие от IE8b2 который корректно выводит 0 вместо %d которому соответствует строка. Из этого вывод что достаточно использовать только %s.

Потом я решили что было бы неплохо научиться отображать содержимое объектов и массивов, для этого как нельзя хорошо подходила одна известная функция, написанная очень нелюбимым мной человеком, имя которого можете прочитать в комментарии в коде. Единственные минус этой функции в том что она не может корректно отобразить объекты типа window, на нем она уходит куда-то в глубь рекурсии и безнадежно вешает браузер. Но этот недостаток я постараюсь решить в следующей версии, если такая появиться.

Уже неплохо. Последним штрихом к портрету было прикручивание уровня дебага "log", "debug", "info", "warn", "error". Тут для меня было несколько откровений. Первое это то что массив arguments не такой уже и массив потому что содержит в себе еще и метод callee. Второе - что объект arguments прекрасно превращается в массив с помощью волшебной строки


var args = Array.prototype.slice.call(arguments);

Третье - что этот метод не работает (правильно!) в IE7 и IE8b2, а поэтому не годиться. И наконец четвертое и последние что чертов arguments не возможно обойти циклом через in нужно обязательно это делать через длину


for(var i in arguments) // fail
	alert(arguments[i]);
for(var i=0,j=arguments.length;i



Но это все не помешало мне дописать сегодня этот скрипт и выложит его на ваше растерзание


myConsole = function(){
	var args = (function(a,x){for(var i=0,j=a.length;i2){
		(window.opera?opera.postError:window.alert)(args.shift() +'':\\n''+ args.shift().replace(/(%[ds])/g, function(){
			return args.shift();
			})
		)
	}else{
		// автор функции dump - Дмитрий Котеров
		// http://dklab.ru/chicken/nablas/38.html
		(window.opera?opera.postError:window.alert)(args.shift() +'':\\n''+ (function dump(d,l) {
			if (l == null) l = 1;
			var s = '''';
			if (typeof(d) == "object") {
				s += typeof(d) + " {\\n";				for (var k in d) {
					for (var i=0; i


Кому пригодиться пишите в каменты...



Google Chome
CTAPbIu_MABP — Wed, 03 Sep 2008 16:16:15 +0000
Вчера вечером вышел релиз браузера Google Chrome, все предвещают ему долгую жизнь и процветание а так же прогнозируют что он будет конкурентом уже имеющимся браузерам. Я смотрю на это с точки зрения работы. Меня очень интересовало станет ли ее больше. Честно говоря пока еще точно сказать не могу но все продвинутые JS библиотеки, такие как jQuery, PrototypeJS, mooTools и т.д. работаю как часы.




Google не скрывает что не писал с нуля браузер а лишь взял все лучшее из WebKit и Gecko, о чем радотно заявляет UserAgent


Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13


Я только не понял пока какой у них JS движок JavaScriptCore (Safari 3.1) или его приемник SquirrelFish (Safari 4.0), а может быть SpiderMonkey (FireFox 3.0) или его потомок TraceMonkey (FireFox 3.1). ну это я скоро выясню.
Еще меня интересовало поддерживает ли Chrome метод document.querySelectorAll, и как оказалось поддерживает только какого-то хуя возвращает вместо массива нечто под названием  StaticNodeList.
Но самой большой неожиданностью стало то, что при всей хвалености гугловкого кода, в первый же день, была найдена огромная дыра в безопасности. Можно загрузить любой файл. даже *.exe без ведома пользователя на его машину, примерно вот таким образом.






Firefox 3.0 Release Candidate 1
CTAPbIu_MABP — Sat, 17 May 2008 16:11:03 +0000
Сегодня Mozilla выпустила Firefox 3.0 Release Candidate 1, это означает что до выпуска FF3 осталось совсем немного. Я думаю многие ждут окончательного релиза чтобы перейти на него, единственно что пока меня сдерживает это отсутствие FireBug'a. Некоторые нетерпеливые, типа Fedora 9 недождались окончательной версии и включили в дистрибутив Firefox 3.0 Beta 5.



Локальная  глобальная область видимости
CTAPbIu_MABP — Fri, 25 Apr 2008 15:00:04 +0000
Всю неделю готовлю сразу две статьи, первая о comet (постоянное соединение с сервером) и вторая о ранжированном поиске который наконец таки заработал на сайте но на этот раз будет махонькая заметка о корректной работе браузеров.

Все учебники по JavaScript наперебой рассказывают о присвоении значений переменным, и об области их видимости. Сейчас мы на примере рассмотрим, что хотя то что они говорят и есть правильно но не всегда работает. Итак, в глобальной области видимости мы проверим чему у нас равен указатель this, а заодно создадим функцию в любой области видимости главное, чтоб ее можно было вызвать.

alert(this === window);

var func = function(){
	alert("hello from onload!");
};

Как и следовало ожидать мы находимся в глобальной области видимости и this у нас равен (и того же типа что и) window, то есть объявляя какую-либо переменную мы можем не указывать ключевое слово var.

onload = function (){
	func();
}

В результате работы этого скрипта мы получим наш алерт, потому что событие window.onload срабатывает когда страница полностью загружена.
Вам еще не надоело перечитывать материалы учебника для ламеров? Ну ладно начинается вкусненькое!
Создадим переменную в локальной области видимости, поскольку локальная у нас глобальна (во загнул!), то мы собственно еще раз попытаемся присвоить значение событию window.onload.

var onload = function (){
	func();
}

Вот тут и начинаются косяки, работает это только в FireFox, а Opera и IE начисто игнорируют нашу писанину! Листаем учебник дальше и видим что определение функции с именем эквивалентно определению переменной с тем же именем в локальной области видимости.

function onload (){
	func();
}

И что бы вы думали?! Действительно абсолютно эквивалентно, потому что оно также не работает, как и прошлый пример. Вы можете сказать, что я где-то что-то мухлюю и во втором и третьем примере переменные не попадают в объект window, но для всех трех примеров и всех трех браузеров алерт выдает один и тот же результат.

alert(window.onload);


Из всего вышесказанного можно сделать два вывода, даже три: Первый и самый главный - FireFox снова на высоте! Второй заключается в том, что для Opera и IE локальная область видимости скрипта не такая уже и глобальная, как хотелось бы. Ну и третий маловероятный, что все учебники врут.

CTAPbIu_MABP's BLOG » FireFox

-moz-box-shadow & -moz-transform

Firebug 1.5

FireFox домашняя страница

jQuery profiling

Attributes/Attr

Attributes/Class

Attributes/HTML

Attributes/Text

Attributes/Value

Traversing/Filtering

Traversing/Finding

Traversing/Changing

Manipulation/Changing Contents

Manipulation/Inserting Inside

Manipulation/Inserting Outside

Manipulation/Inserting Around

Manipulation/Replacing

Manipulation/Removing

Manipulation/Copying

CSS/CSS

CSS/Positioning

CSS/Height and Width

Effects/Basics

Effects/Sliding

Effects/Fading

Firebug 1.3

Console2

Консоль для всех браузеров

Google Chome

Firefox 3.0 Release Candidate 1

Локальная глобальная область видимости