@exeditor23 дек 2012 в 10:20

Почему перемещать элементы с помощью translate лучше, чем с position:absolute top/left

2 мин

38K

CSS * Google ChromeВеб-разработка *

Перевод

+42

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

@datacompboy 23 дек 2012 в 10:29

Ага. Хром — единственный браузер и эталон.

@akzhan 23 дек 2012 в 11:35

WebKit — в большинстве браузеров.

Ну в IE ситуация схожа. Правда, он субъективно быстрее на этих примерах.

@datacompboy 23 дек 2012 в 11:54

«в большинстве браузеров» — то, что все, кто создают браузер не заморачиваясь берут вебкит, не делает его большинством.

@akzhan 23 дек 2012 в 12:56

Можно просто сложить рынок браузеров Chrome + Safari — не меньше половины доли, + мобильные WebKit-based, так что можно считать WebKit массовым.

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

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

Других массовых движков нет. Даже тот же NetFront основан на WebKit.

@datacompboy 23 дек 2012 в 13:00

webrowser.ru/wp-content/uploads/2012/04/browser-stat-liveinternet.png
22.7+6.3 = 29%. Чуть больше четверти, даже до трети не дотягивает.

@akzhan 23 дек 2012 в 13:09

Статистик очень много :)

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

А здесь, — всего 40% (http://www.quirksmode.org/blog/archives/2012/12/browser_stats_f_5.html). Зато интересно, что на мобильном рынке тотальное превосходство.

НЛО прилетело и опубликовало эту надпись здесь

@ssneg 23 дек 2012 в 12:39

Ой, вы такой умный, вам, наверное, очень одиноко по жизни?

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

Проделав тот же нехитрый опыт в Safari, замечаем, что 50 ноутбуков через top/left почти вешают вкладку, а translate позволяет плавно (на глаз — плавнее хрома) анимировать 100 ноутбуков и больше.

@Aleks_ja 23 дек 2012 в 14:52

Получается, что ноутбук нарисован css-ом — тенюшками разными и т.п… Если просто картинку ноутбука двигать будут ли такие различия?

@mishael 24 дек 2012 в 07:46

Вы может быть еще gif-анимацию предложите или flash? Нельзя без извратов делать анимацию в инете! Только CSS — только хардкор!

@Glook 23 дек 2012 в 19:12

на разрешении чуть больше стандартно-ноутбучного (>1280px) наблюдаю страшные тормоза в обоих исполнениях. система не Core i5 но и не самая слабая.

@alexbeep 23 дек 2012 в 19:29

Да хоть 100 кадров в секунду с сотней одинаковых макбуков. Без скачков. Переносимость — процентов 90, тормозов-никаких. Угадайте на чем?

@sapp 24 дек 2012 в 02:25

w3m?

@alexbeep 24 дек 2012 в 05:38

Какую-то фигню вы сказали. Даже не смешно. Я имел в виду Flash

@hermit931 24 дек 2012 в 06:58

ага, точно, давайте лепить флеш по каждому пчиху

@alexbeep 24 дек 2012 в 07:35

Основной интерес рекламодателя — чтобы его рекламу увидели большинство посетителей площадки. Если площадка намертво вешает браузер — площадка перестает быть посещаемой. Если площадка не отображает баннер у большого количества посетителей — рекламодатель будет недоволен. Вот и всё. Баннеры на html и JS — быть может, лет через 10. Факт. Рисую баннеры уже много лет, и поток заказов идти не перестает, а на html5 что-то никто не просит

@hermit931 24 дек 2012 в 08:10

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

@alexbeep 24 дек 2012 в 08:43

Но в примере же баннер с макбуком...?

@hermit931 24 дек 2012 в 08:45

Для сравнения производительности… На шарике то заметных лагов не было видно

НЛО прилетело и опубликовало эту надпись здесь

@alexbeep 24 дек 2012 в 20:16

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

НЛО прилетело и опубликовало эту надпись здесь

@drakmail 24 дек 2012 в 07:57

Вот у меня флеша нигде нету, и, думаю, не у одного меня.

@Eddy_Em 24 дек 2012 в 08:59

Интересно. Возьму на заметку. 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 слишком часто.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий