• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по HTML » Избавляемся от div (тотальная отимизация сайта)
Избавляемся от div
Aleko
Дата: Пятница, 16.10.2009, 01:44 | Сообщение # 1
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Я постоянно улучшаю и сокращаю код своей студии. Оптимизирую всё, что могу. На этот раз я придумал интересный способ уменьшить код ещё больше. Вот мой способ:

Убираем теги div

Как вы знаете, тег div может быть сделан из любого элемента благодаря css свойству

Code
display:block;
Этим мы и воспользуемся. Давайте прикиним выгоду:
Code
<div></div>    

Так мы создаем див блок - 11 байт кода

<z></z>

А вот так всё могло бы быть - 7 байт!

Если ваш сайт сверстан дивами, а страницы велики и содержат 100, 200 блоков, то выигрыш будет ощутим. К тому же мы усложним работу ворам кода.

Как это сделать? Просто!

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

Code
<script type='text/javascript'>document.createElement('z')</script>

и конечно не забудьте назначить нашему новому блоку стиль display:
Code
<style type='text/css'>z{display:block;}</style>

Всё! теперь все блоки на вашем сайте могут быть совершенно спокойно заменены на новоиспеченный элемент.

Код кроссбраузерного примера:

Code
<html>
<head>
<style type='text/css'>z{display:block;}</style>
<script type='text/javascript'>document.createElement('z')</script>
</head>
<body>
<z>text</z>
</body>
</html>

Бесплатные обои.
  
Aleko
Дата: Пятница, 16.10.2009, 01:52 | Сообщение # 2
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Забыл написать, что данное решение не валидно с точки зрения www консорциума, но благодаря xml cdata это можно обойти.
Бесплатные обои.
  
ad
Дата: Пятница, 16.10.2009, 02:03 | Сообщение # 3
Группа: Удаленные
Здорово! rolleyes

Спасибо Алеко. Пригодится, так как я постоянно тоже ищю способы уменьшить вес кода сайта. У меня на сайте будет пункт в магазине: Заказать валидный-сжатый код.

  
vladko95
Дата: Пятница, 16.10.2009, 02:05 | Сообщение # 4
говорун
Группа: Проверенные
Пользователь №: 51
Сообщений: 121
Получено оценок: 6 		Я так понял, что это тот же самый div, только с другим названием? Тоесть z?
  
ad
Дата: Пятница, 16.10.2009, 02:07 | Сообщение # 5
Группа: Удаленные
Если взять всю сумму дивов в коде и заменить их на z то вес будет около 66% из 100% что были с дивами. Это большой плюс.

Интересно, а с table или с прочими кодами действует ?

Сообщение отредактировал ad - Пятница, 16.10.2009, 02:13
  
Aleko
Дата: Пятница, 16.10.2009, 03:21 | Сообщение # 6
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		ad, для таблиц существует display:table, для tr и td - аналогичные коды (table-cell и table-row). Просто использование таблиц уже само по себе ужасное поведение в коде.
Бесплатные обои.
  
Андрей
Дата: Четверг, 22.10.2009, 21:02 | Сообщение # 7
шептун
Группа: Проверенные
Пользователь №: 189
Сообщений: 65
Получено оценок: 11 		Может баян, но... в общем вот HTML5 - Доктайп и новые теги

Сообщение отредактировал Андрей - Пятница, 23.10.2009, 05:06
  
Aleko
Дата: Пятница, 23.10.2009, 01:25 | Сообщение # 8
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Андрей, информация в тему. Я её уже достаточно давно читал, но новичкам пригодится.
Бесплатные обои.
  
ColdFire
Дата: Пятница, 23.10.2009, 14:20 | Сообщение # 9
говорун
Группа: Проверенные
Пользователь №: 85
Сообщений: 123
Получено оценок: 7
Quote (Андрей)
Может баян, но... в общем вот HTML5 - Доктайп и новые теги

Ха, большое спасибо за инфу! Давно пора осваивать новые возможности ;)
  
Андрей
Дата: Пятница, 23.10.2009, 17:51 | Сообщение # 10
шептун
Группа: Проверенные
Пользователь №: 189
Сообщений: 65
Получено оценок: 11 		Пример одного такого сайта на HTML 5

PS вгляните в исходник confused
PPS Интересное оформление страницы, просто и со вкусом.

  
Slimmi
Дата: Вторник, 17.11.2009, 12:00 | Сообщение # 11
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38 		Подскажите пожалуйста, в JS ссылку модно сделать на только что созданный элемент. Например, на тег
Code
<z>text</z>

Большие фотостатусы
  
ad
Дата: Вторник, 17.11.2009, 13:19 | Сообщение # 12
Группа: Удаленные
style к нему не применяются. :(
  
Slimmi
Дата: Вторник, 17.11.2009, 14:06 | Сообщение # 13
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38
Quote (ad)
style к нему не применяются.

Всмысле не применяется
Code
<z>text</z>
<style type='text/css'>z{display:block; color:#3f4;}//Всё работает
</style>

А можно так сделать:
Code
<script type='text/javascript'>document.z.Свойство|Метод()</script>
<z>text</z>

Можно так? И ссылку к данному елементу JS может получить?
Большие фотостатусы

Сообщение отредактировал Slimmi - Вторник, 17.11.2009, 14:07
  
ad
Дата: Вторник, 17.11.2009, 18:50 | Сообщение # 14
Группа: Удаленные
Slimmi, Да не, я про то что я немогу сделать так например:

<z style="color:#000;"></z>

А в то время как див это позволит:

<div style="color:#000;"></div>

  
Aleko
Дата: Вторник, 17.11.2009, 19:36 | Сообщение # 15
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Quote (ad)
<z style="color:#000;"></z>

А в то время как див это позволит:

<div style="color:#000;"></div>


Елопукки, Елопукки, переставь мне с ж***ы руки...

Code
<script>
document.createElement('z');
</script>
<z style='color:red;'>Текст</z>

Работает ВЕЗДЕ.

Бесплатные обои.
  
Aleko
Дата: Вторник, 17.11.2009, 19:37 | Сообщение # 16
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Slimmi, можно всё, это полноценный элемент.
Бесплатные обои.
  
MrOizo
Дата: Вторник, 17.11.2009, 19:42 | Сообщение # 17
говорун
Группа: Проверенные
Пользователь №: 42
Сообщений: 188
Получено оценок: 6 		Aleko, пока ты здесь, мне лень читать первый пост скажу честно.
Вопрос. div можно заменить только на букву, или на любой набор букв?
Например: <google></google>
  
Aleko
Дата: Вторник, 17.11.2009, 19:55 | Сообщение # 18
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		MrOizo, что угодно. Буква просто самое короткое. Символы нельзя.
Бесплатные обои.
  
Slimmi
Дата: Среда, 18.11.2009, 07:10 | Сообщение # 19
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38 		Aleko, спс :)
Большие фотостатусы
  
Slimmi
Дата: Суббота, 21.11.2009, 14:21 | Сообщение # 20
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38 		Вот такая проблема :'(
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script type='text/javascript'>document.createElement('basis');</script>
</head>
<body>
<basis style="position:absolute; background:black; width:113px; height:93px; left:426px;" onmouseover='colors.animate("smooth",this,{"backgroundColor":"#FF9900"},100)' onmouseout='colors.animate("smooth",this,{"backgroundColor":"#000"},700)'></basis>
</body>
<script type="text/javascript">
colors={current:function(el,st){var result;if(el.style[st]&&el.style[st]!=""){result=el.style[st]}else{if(/*@cc_on!@*/false){result=el.currentStyle[st]}else{result=document.defaultView.getComputedStyle(el,null)[st]}}return result=="transparent"?"#FFFFFF":result},torgb:function(e){var h,f,c,a;function d(i,g){var j={A:10,B:11,C:12,D:13,E:14,F:15};return parseInt(i in j?j[i]:i)*16+parseInt(g in j?j[g]:g)}a=e.toUpperCase();if(/RGB\(\d+,\s?\d+,\s?\d+\)/.test(a)){h=a.match(/\d+/g)[0];f=a.match(/\d+/g)[1];c=a.match(/\d+/g)[2]}else{if(/#([0-9A-F]{2}){3}/.test(a)){h=d(a.charAt(1),a.charAt(2));f=d(a.charAt(3),a.charAt(4));c=d(a.charAt(5),a.charAt(6))}else{if(/#([0-9A-F]{1}){3}/.test(a)){h=d(a.charAt(1),a.charAt(1));f=d(a.charAt(2),a.charAt(2));c=d(a.charAt(3),a.charAt(3))}}}return{r:h,g:f,b:c}},animtype:function(e,b){switch(b){case"simple":return e;break;case"compress":var a=2;return Math.pow(e,2)*((a+1)*e-a);break;case"smooth":function f(c){return Math.pow(c,3)}if(e<0.5){return f(2*e)/2}else{return(2-f(2*(1-e)))/2}break;case"jump":function g(h){for(var d=0,c=1;1;d+=c,c/=2){if(h>=(7-4*d)/11){return -Math.pow((11-6*d-11*h)/4,2)+Math.pow(c,2)}}}return 1-g(1-e);break;default:return e;break}},animator:{},anielems:0,animate:function(a,e,b,d,f){for(key in b){c(key,b[key])}function c(h,j){var i,g;j=colors.torgb(j);i=colors.torgb(colors.current(e,h));for(key in colors.animator){if(colors.animator[key].o==e&&colors.animator[key].p==h){clearInterval(colors.animator[key].timer)}}g=colors.anielems;colors.animator[g]={o:e,p:h,start:new Date().getTime(),timer:setInterval(function(){var n,m,l,p,o,k;n=(new Date().getTime())-colors.animator[g].start;m=n/d;l=colors.animtype(m,a);p=parseInt((parseInt(j.r)-parseInt(i.r))*l+parseInt(i.r));o=parseInt((parseInt(j.g)-parseInt(i.g))*l+parseInt(i.g));k=parseInt((parseInt(j.b)-parseInt(i.b))*l+parseInt(i.b));e.style[h]="rgb("+p+","+o+","+k+")";if(m>=1){clearInterval(colors.animator[g].timer);e.style[h]="rgb("+j.r+","+j.g+","+j.b+")";if(f){f()}delete colors.animator[g]}},10)};colors.anielems++}}};    
</script>
</html>

Ни хрена не работает >(
А если с div`ами то всё ништяк %)
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position:absolute; background:black; width:113px; height:93px; left:426px;" onmouseover='colors.animate("smooth",this,{"backgroundColor":"#FF9900"},100)' onmouseout='colors.animate("smooth",this,{"backgroundColor":"#000"},700)'></div>
</body>
<script type="text/javascript">
colors={current:function(el,st){var result;if(el.style[st]&&el.style[st]!=""){result=el.style[st]}else{if(/*@cc_on!@*/false){result=el.currentStyle[st]}else{result=document.defaultView.getComputedStyle(el,null)[st]}}return result=="transparent"?"#FFFFFF":result},torgb:function(e){var h,f,c,a;function d(i,g){var j={A:10,B:11,C:12,D:13,E:14,F:15};return parseInt(i in j?j[i]:i)*16+parseInt(g in j?j[g]:g)}a=e.toUpperCase();if(/RGB\(\d+,\s?\d+,\s?\d+\)/.test(a)){h=a.match(/\d+/g)[0];f=a.match(/\d+/g)[1];c=a.match(/\d+/g)[2]}else{if(/#([0-9A-F]{2}){3}/.test(a)){h=d(a.charAt(1),a.charAt(2));f=d(a.charAt(3),a.charAt(4));c=d(a.charAt(5),a.charAt(6))}else{if(/#([0-9A-F]{1}){3}/.test(a)){h=d(a.charAt(1),a.charAt(1));f=d(a.charAt(2),a.charAt(2));c=d(a.charAt(3),a.charAt(3))}}}return{r:h,g:f,b:c}},animtype:function(e,b){switch(b){case"simple":return e;break;case"compress":var a=2;return Math.pow(e,2)*((a+1)*e-a);break;case"smooth":function f(c){return Math.pow(c,3)}if(e<0.5){return f(2*e)/2}else{return(2-f(2*(1-e)))/2}break;case"jump":function g(h){for(var d=0,c=1;1;d+=c,c/=2){if(h>=(7-4*d)/11){return -Math.pow((11-6*d-11*h)/4,2)+Math.pow(c,2)}}}return 1-g(1-e);break;default:return e;break}},animator:{},anielems:0,animate:function(a,e,b,d,f){for(key in b){c(key,b[key])}function c(h,j){var i,g;j=colors.torgb(j);i=colors.torgb(colors.current(e,h));for(key in colors.animator){if(colors.animator[key].o==e&&colors.animator[key].p==h){clearInterval(colors.animator[key].timer)}}g=colors.anielems;colors.animator[g]={o:e,p:h,start:new Date().getTime(),timer:setInterval(function(){var n,m,l,p,o,k;n=(new Date().getTime())-colors.animator[g].start;m=n/d;l=colors.animtype(m,a);p=parseInt((parseInt(j.r)-parseInt(i.r))*l+parseInt(i.r));o=parseInt((parseInt(j.g)-parseInt(i.g))*l+parseInt(i.g));k=parseInt((parseInt(j.b)-parseInt(i.b))*l+parseInt(i.b));e.style[h]="rgb("+p+","+o+","+k+")";if(m>=1){clearInterval(colors.animator[g].timer);e.style[h]="rgb("+j.r+","+j.g+","+j.b+")";if(f){f()}delete colors.animator[g]}},10)};colors.anielems++}}};    
</script>
</html>

Подскажите, что делать :D
Большие фотостатусы

Сообщение отредактировал Slimmi - Суббота, 21.11.2009, 14:24
  
DSC
Дата: Суббота, 21.11.2009, 14:37 | Сообщение # 21
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		Slimmi, добавь в код:
Code
<style>
basis {display:block}
</style>

aka Latro
  
Slimmi
Дата: Воскресенье, 22.11.2009, 07:08 | Сообщение # 22
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38 		DSC, добавил и всё равно не работает >(
Большие фотостатусы
  
Aleko
Дата: Воскресенье, 22.11.2009, 12:35 | Сообщение # 23
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Руки из задницы значит. Разницы между элементами нет.
Бесплатные обои.
  
Slimmi
Дата: Воскресенье, 22.11.2009, 12:50 | Сообщение # 24
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38
Quote (Aleko)
уки из задницы значит. Разницы между элементами нет.

Aleko, ты сам то попробовал?.. прежде чем говорить !!! А?!
Большие фотостатусы
  
Aleko
Дата: Воскресенье, 22.11.2009, 13:29 | Сообщение # 25
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Slimmi, у меня весь сайт на таких элементах. Ещё глупые вопросы?
Бесплатные обои.
  
Aleko
Дата: Воскресенье, 22.11.2009, 15:09 | Сообщение # 26
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Slimmi, блин. Беру свои слова обратно. Оказывается на подобный элемент в Opera не получается навесить события. Дело в этом. Вот это уже не пашет:

Code
<x onclick='alert("")'></x>

Бесплатные обои.
  
Aleko
Дата: Воскресенье, 22.11.2009, 19:18 | Сообщение # 27
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		Slimmi, работают любые события) только их надо задавать не через тег а назначать скриптом:

Code
<!-- так не работает -->

<x onclick='alert("")'></x>

<script>
document.getElementsByTagName('x')[0].onclick=function(){alert("")};
// а так работает
</script>

Бесплатные обои.
  
DSC
Дата: Вторник, 15.12.2009, 20:28 | Сообщение # 28
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		вот вариант, благодаря которому можно всё это сделать гораздо короче:
Code
<script type="text/javascript">
(function() {
    if (!/*@cc_on!@*/0) return;
    a = "СКОЛЬКО УГОДНО ВАШИХ ТЕГОВ ЧЕРЕЗ ЗАПЯТУЮ".split(','),
    b = a.length;
    while (b--){
      document.createElement(a[b]).style.display = 'block'
    }
})()
</script>

aka Latro
  
Slimmi
Дата: Среда, 16.12.2009, 11:05 | Сообщение # 29
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38 		DSC, СПС :)
Большие фотостатусы
  
DSC
Дата: Среда, 16.12.2009, 11:07 | Сообщение # 30
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41 		Slimmi, ставь +! ^_^
aka Latro
  
kyza
Дата: Четверг, 31.12.2009, 01:37 | Сообщение # 31
молчун
Группа: Проверенные
Пользователь №: 203
Сообщений: 37
У Aleko каждый байт на счету хД
  
WRC
Дата: Понедельник, 29.03.2010, 08:45 | Сообщение # 32
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11 		Aleko, спасибо... отличная штука
Устраняем баг при просмотре материала
  
Aleko
Дата: Понедельник, 29.03.2010, 11:15 | Сообщение # 33
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167 		WRC, не за что.
Бесплатные обои.
  
Форум Studio AD » Сайтостроение » Общий форум по HTML » Избавляемся от div (тотальная отимизация сайта)
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.