Как стать автором
Поиск
Написать публикацию
Обновить

Комментарии 24

Ага. Хром — единственный браузер и эталон.
Всего голосов 27: ↑19 и ↓8+11
WebKit — в большинстве браузеров.

Ну в IE ситуация схожа. Правда, он субъективно быстрее на этих примерах.
Всего голосов 11: ↑7 и ↓4+3
«в большинстве браузеров» — то, что все, кто создают браузер не заморачиваясь берут вебкит, не делает его большинством.
Всего голосов 12: ↑5 и ↓7-2
Можно просто сложить рынок браузеров Chrome + Safari — не меньше половины доли, + мобильные WebKit-based, так что можно считать WebKit массовым.

Gecko сильно сдал позиции, но, возможно, ситуация изменится с выходом Firefox OS.

Ну и, конечно, Trident. Internet Explorer потихоньку возвращает свою долю рынка.

Других массовых движков нет. Даже тот же NetFront основан на WebKit.
Всего голосов 7: ↑6 и ↓1+5
Статистик очень много :)

Например, тут больше 50%, — www.w3schools.com/browsers/browsers_stats.asp

А здесь, — всего 40% (http://www.quirksmode.org/blog/archives/2012/12/browser_stats_f_5.html). Зато интересно, что на мобильном рынке тотальное превосходство.
Всего голосов 2: ↑2 и ↓0+2
НЛО прилетело и опубликовало эту надпись здесь
Ой, вы такой умный, вам, наверное, очень одиноко по жизни?

Открыв оба линка в FF, выясняем: анимация 20 ноутбуков через top/left почти убивает Core i5/550Ti, а анимация через translate работает почти плавно.

Проделав тот же нехитрый опыт в Safari, замечаем, что 50 ноутбуков через top/left почти вешают вкладку, а translate позволяет плавно (на глаз — плавнее хрома) анимировать 100 ноутбуков и больше.
Всего голосов 17: ↑12 и ↓5+7
Получается, что ноутбук нарисован css-ом — тенюшками разными и т.п… Если просто картинку ноутбука двигать будут ли такие различия?
Всего голосов 3: ↑3 и ↓0+3
Вы может быть еще gif-анимацию предложите или flash? Нельзя без извратов делать анимацию в инете! Только CSS — только хардкор!
Всего голосов 1: ↑1 и ↓0+1
на разрешении чуть больше стандартно-ноутбучного (>1280px) наблюдаю страшные тормоза в обоих исполнениях. система не Core i5 но и не самая слабая.
Комментарий пока не оценивали0
Да хоть 100 кадров в секунду с сотней одинаковых макбуков. Без скачков. Переносимость — процентов 90, тормозов-никаких. Угадайте на чем?
Всего голосов 2: ↑1 и ↓10
w3m?
Всего голосов 2: ↑2 и ↓0+2
Какую-то фигню вы сказали. Даже не смешно. Я имел в виду Flash
Всего голосов 2: ↑1 и ↓10
ага, точно, давайте лепить флеш по каждому пчиху
Всего голосов 1: ↑0 и ↓1-1
Основной интерес рекламодателя — чтобы его рекламу увидели большинство посетителей площадки. Если площадка намертво вешает браузер — площадка перестает быть посещаемой. Если площадка не отображает баннер у большого количества посетителей — рекламодатель будет недоволен. Вот и всё. Баннеры на html и JS — быть может, лет через 10. Факт. Рисую баннеры уже много лет, и поток заказов идти не перестает, а на html5 что-то никто не просит
Всего голосов 3: ↑2 и ↓1+1
Здесь же сравнивается производительность двух методов реализации анимации, которая больше подойдет для разного рода менюшек, фильтров, эффектов и прочих плюшек. Для банеров и подобных штук эти методы еще точно не применимы, слишком много геморроя тянут за собой.
Комментарий пока не оценивали0
Но в примере же баннер с макбуком...?
Комментарий пока не оценивали0
Для сравнения производительности… На шарике то заметных лагов не было видно
Комментарий пока не оценивали0
НЛО прилетело и опубликовало эту надпись здесь
Вы сами-то думаете о чем говорите? Я слабо верю в популярность баннерной рекламы на мобильных девайсах в-принципе. И мой опыт дает мне немного права считать, что сомнения весьма имеют право на жизнь
Комментарий пока не оценивали0
НЛО прилетело и опубликовало эту надпись здесь
Вот у меня флеша нигде нету, и, думаю, не у одного меня.
Всего голосов 2: ↑2 и ↓0+2
Интересно. Возьму на заметку. requestAnimationFrame() действительно лучше, нежели городить велосипеды на таймерах.
А вот насчет translate, не очень-то: хромой на translate не обращал внимания и периодически делал «опаньки», а в огнелисе притормаживало. Совершенно аналогично выглядела картина с изменением позиционирования.
Скрытый текст
<html>
<head>
<script>
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
	window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
	window.requestAnimationFrame = requestAnimationFrame;
})();
var d = new Array(2), t0;
function start(){
	t0 = window.mozAnimationStartTime;
	if(!t0) t0 = Date.now();
	d[0] = document.getElementById("c1");
	d[1] = document.getElementById("c2");
	requestAnimationFrame(step);
}
function step(ts){
	var dt = ts - t0;
	var X = 100*Math.sin(dt/1000), Y = 150*Math.cos(dt/1000);
	d[0].style.transform = "translate("+X+"px,"+Y+"px)";
	d[1].style.transform = "translate("+(-X)+"px,"+Y+"px)";
	/*d[0].style.top = 300 + X + "px"; d[0].style.left = 300 + Y + "px";
	d[1].style.top = 300 - X + "px"; d[1].style.left = 300 + Y + "px";*/
	requestAnimationFrame(step);
}
</script>
<style>
.container{
	position: absolute;
	width: 100px;
	height: 100px;
	top: 300px;
	left: 300px;
}
.ball{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #ff9999;
	box-shadow: inset 10px -15px 50px 15px #990000;
	z-index: 10;
}
.ballshadow{
	position: absolute;
	bottom: 0;
	right: 20%;
	width: 100%;
	height: 30%;
	background: black;
	border-radius: 60%;
	box-shadow: 0 0 10px 2px;
	z-index: 0;
}
</style>
</head>
<body onload="start();">
<div class="container" id="c1"><div class="ballshadow"></div><div class="ball"></div></div>
<div class="container" id="c2"><div class="ballshadow"></div><div class="ball"></div></div>
</body>
</html>



Лучше все-таки линейную анимацию делать через свойство animation. А в сложной — делать паузы, не вызывая requestAnimationFrame слишком часто.
Комментарий пока не оценивали0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Показать лучшие за всё время

Истории

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2024, Habr