CSS3 против CSS: Speed Benchmark | bot.kz

Я верю в мощь, скорость и “Обновление-способности» CSS3.

Не успев загрузить фоновые изображения в качестве структурного усовершенствования (например, PNG файлов для закругленные углы и градиенты) может сэкономить время в производстве (например, человеко-часов) и нагрузки (т.е. страница скорость).В нашей компании, we’ нас с радостью использует CSS3 на клиентских веб-сайтов для более года назад, и я считаю, что реализация многих из этих свойств Право now является наиболее разумным способом создания websites.

До сегодняшнего дня, все это было основано на предположении, что я могу производить пиксель-идеального веб-страницы с помощью CSS3 быстрее, чем я могу со взрослыми изображений на основе CSS методы, и что CSS3 страницы будут загружаться быстрее, с меньшимобщий размер файла и меньше HTTP запросов.В одном эксперименте случае использования, я решил дизайн и код веб-страницы и добавлять визуальные улучшения дважды: один раз с CSS3, и второй раз с помощью фоновых изображений нарезанный непосредственно из PSD.Я замерил себя каждый раунд, что я добавил усовершенствований, а когда закончил, я использовал Pingdom Для измерения нагрузки times.

Here’ SA фиктивные веб-страницы для Меркурия Automobiles которые можно было бы онлайн был Interweb существовали еще в 1950-х годах.Страница была разработана, чтобы продемонстрировать конкретные широко совместимых свойств CSS3, что в прошлом должны были бы быть достигнуто с помощью фоне images.

Выше представлена схема, которая ломает где я применил визуальных улучшений сначала с CSS3, а затем с CSS фоновое изображение (т.е. изображение подход):

Линейно-gradient
Границы radius
Радиально-gradient
Текст-shadow
Бокс-тень с RGBa

Эксперимент Process

День 1
Я закодированы HTML и CSS со структурной точки зрения.Это не означает закругленными углами, без теней, без градиентов и нет фотографий в стороне от логотипов и фотографий автомобиля.Я решил включить веб-шрифты на этом этапе, потому что я хотел бы сосредоточиться на материал, который также может быть сделано с помощью веб-безопасных шрифтов по вашему выбору (Helvetica, Грузия и т.д.).Кроме того, @font-face было задолго до CSS3.

Это дало мне чистый холст для добавления визуальных улучшений. Индекс page Выставки конца моей 1-й день работы, а также то, что неподдерживаемые браузеры будут отображать, появление которых является структурно неповрежденными и визуально приятным.Подробнее об этом позже, но, как я вижу это, старых браузеровaren’ T наказаны со сломанной макет, и современные браузеры награждены несколько визуальных бонусов.Часть реализации CSS3 идет о перспективное планирование и разработка веб-сайтов, которые выглядят хорошо, как fallback.

День 2
Начиная с главной страницы базы, я создал CSS3 page.Это заняло 49 минут, чтобы закончить.Вот код CSS ( css3.css):

/*-----CSS3 Started on 2/26/11 at 7:28 AM CST-----*/
h1 {
	text-shadow: -3px 2px 0px #514d46; }

#nav {
	-moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
	-webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
	box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
	background-image: -moz-linear-gradient(top, #5c5850, #48473e);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5c5850),color-stop(1, #48473e));
	background-image: -webkit-linear-gradient(#5c5850, #48473e); 
	background-image: linear-gradient(top, #5c5850, #48473e); }

nav a {
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px; }

nav a:hover {
	background-color: #3a3e38;
	background-color: rgba(47, 54, 48, .7); }
	
nav a.active {
	background-color: #070807;
	background-color: rgba(7, 8, 7, .7); }

body {
	background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(#FBF8E3), to(#E6E3D0));
	background-image: -moz-radial-gradient(50% 10%, farthest-side, #FBF8E3, #E6E3D0); }

#learn_more, #details img {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2);
	-moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2);
	box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); }

#learn_more a {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-color: #cc3b23;
	background-image: -moz-linear-gradient(top, #cc3b23, #c00b00);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cc3b23),color-stop(1, #c00b00));
	background-image: -webkit-linear-gradient(#cc3b23, #c00b00);
	background-image: linear-gradient(top, #cc3b23, #c00b00); }

a {
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in; }
	
/*-----CSS3 Finished on 2/26/11 at 8:17 AM CST (49 minutes) -----*/

День 3
Я добавил визуальных улучшений, нарезая и CSS’ing фоновых изображений непосредственно с PSD.Хотя есть меньше кода, все дополнительные приложения-коммутации и изображения срезов составили в общей сложности 73 минут. Оплата страницы для CSS на основе образа approach.Here’ Это код ( css.css):

 
/*-----CSS (the image-based approach) Started on 2/27/11 at 12:42 PM CST-----*/

#header {
	background: url(../img/navbg.png) left top repeat-x; }

body {
	background: #e6e3d0 url(../img/radial_gradient.jpg) no-repeat center top; }

#nav {
	background-color: transparent; }

h1 {
	background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent: -9999px; }

#learn_more {
	background-image: url(../img/learn_morebg.jpg);}

#details img {
	background-image: url(../img/detailsbg.jpg);}

#learn_more a {
	background: url(../img/learn_more_abg.jpg) no-repeat;}

.css3 {
	background: url(../img/css3_hover.png) no-repeat center top; }

.smashing {
	background: url(../img/smashing_hover.png) no-repeat center top; }

.trent {
	background: url(../img/trentwalton_hover.png) no-repeat center top;}

.css3:hover {
	background: url(../img/css3_hover.png) no-repeat center -20px;}

.css:hover {
	background: url(../img/css_hover.png) no-repeat center -20px;}

.smashing:hover {
	background: url(../img/smashing_hover.png) no-repeat center -20px;}

.trent:hover {
	background: url(../img/trentwalton_hover.png) no-repeat center -20px; }

.css {
	background: url(../img/css_hover.png) no-repeat center -50px; }

/*-----CSS (the image-based approach) Finished on 2/27/11 at 1:55 AM CST (1 hour and 13 minutes)-----*/

Продукция время Results

Итак, we’ смотрим на 24-минуте разница: 49 минут, чтобы добавить визуальные эффекты с CSS3, и 73 минут, чтобы сделать это с изображениями.Для меня, CSS3 был не только быстрее, но гораздо более приятным, потому что я был сосредоточен только на одном окне (мой редактор CSS), если я решил вывести часть кода из CSS3 Please.С другой стороны, нарезка изображения и переключения с Photoshop на FTP редактора CSS и снова была стычка, и это did взять longer.

It’ S Также стоит отметить, что я сделал все возможное, чтобы стек палуба против CSS3.Я закодировал сначала так, чтобы из любой начальной хэширования будет сделано прежде чем отправиться в 3-й день.Кроме того, изображение Я нарезать так же оптимизированы как я мог бы разумно сделать их: один пиксель повторять щепки и среднего разрешения экспорта изображений.В целом, 24 минут может показаться не так много времени, но это довольно простой страницы.Представьте себе, сколько времени (и денег) могут быть сохранены в течение year.

Что?Все еще не уверены …

Размер файла и время загрузки Results

Я взял обе мои страницы к Pingdom Tools сравнить размеры файлов и загрузки times.

Обе страницы довольно быстро, но преобладали CSS3, с 10 запросами и меньше размер файла, который был легче на 81,3 KB.Во время загрузки раз были близки, тем больше PNG файлов, используемых на обеих страницах …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 21.04.2011 by Newsbot