Уменьшение размера HTML форума средствами JavaScript

Книга знаний

Уменьшение размера HTML форума средствами JavaScript

Динамическое оформление HTML страниц средствами JavaScript/DOM позволяет резко сократить размер страницы.

Автор статьи: romix
Последняя редакция №1 от 01.03.06
URL: http://kb.mista.ru/article.php?id=117

Ключевые слова: HTML, JavaScript, DOM, уменьшить размер страницы

По ссылке приведен пример HTML-кода и JavaScript для компактной заглавной страницы форума.
Страница весит 15 Килобайт / 100 веток. Соответственно, примерно 3 килобайта на 20 веток.

http://x-romix.narod.ru/mista_js/Index.html

Динамически формируются постраничные ссылки наподобие 1 2 3 4 5 >>
"Интересные" темы выделяются жирным.

Чтобы выбрать ячейки таблицы по интерфейсу DOM, я использую следующий код:

    obj1_=document.getElementsByTagName("TABLE");

      obj1=obj1_[0];
      obj2_=obj1.getElementsByTagName("TR");
      for(i2=1; i2<obj2_.length; i2++){  //выборка не с 0, а с 1 строки (чтобы получилось без заголовка)
        obj2=obj2_[i2];
        obj3_=obj2.getElementsByTagName("TD");

          objForum=obj3_[0]; //Здесь форум
          objDateTime=obj3_[1]; //Здесь дата и время
          objAnswers=obj3_[2]; //Здесь число ответов
          strAnswers = getTextFromNode1(objAnswers);
          objHeader=obj3_[3]; //Здесь заголовок сообщения
          obj4=objHeader.getElementsByTagName("A");
          strUrl = obj4[0].getAttribute("HREF");
          strText = getTextFromNode1(objHeader);
          obj3=obj3_[4]; //Здесь автор сообщения

...

Выравнивание и размер шрифта ячеек таблицы я выставляю таким образом:

        objAnswers.align="center";
        objAnswers.style.fontSize="65%";

В данном примере, полю "Число ответов" я выставил центрирование и размер шрифта - 65% (мелкий шрифт).

Чтобы динамически сформировать постраничные ссылки, я использую свойство innerHTML:

        objHeader.innerHTML="некий текст HTML";

Ссылки для постраничного просмотра зависят только от текущего URL и от числа ответов:

//Динамически формируем ссылки для постраничного просмотра ветки
            strPages="";
            iAnsw=0+strAnswers;

            bb1="";
            bb2="";
            
            if (iAnsw>100){
              bb1="<b>";
              bb2="</b>";
            }


            iPage=1;
            if(iAnsw>=40){
              while(iAnsw>0){
                strPages=strPages+ " <A HREF='" +
                  strUrl+"&amp;bit="+iPage+
                  "'>"+ iPage +"</A>";

                  iAnsw=iAnsw-40;
                  iPage++;

              }//while
            }//if

//Динамически формируем ссылку на последнюю страницу

            last20="";
            if((0+strAnswers)>20){
              last20="&nbsp;<A HREF='"+strUrl+"&amp;&amp;p=last20#F'><font color='gray'>&gt;&gt;</font></A>";

            }

        objHeader.innerHTML=bb1+"<a href="+strUrl+">"+strText+"</a>&nbsp;<font size=-2>"+strPages+last20+"</font>"+bb2;

Получение текста узла зависит от версии браузера, поэтому я вынес это действие в функцию:

///////////////////////////////////////////////////////////////////////
function getTextFromNode1(obj){
//Функция рекурсивно извлекает из дескриптора HTML все текстовое содержимое

  obj_=obj.childNodes;
  str="";
  for(i=0; i<obj_.length; i++){ //выбираем подчиненные узлы
    obj1=obj_[i];
    if(obj1.nodeType==3){ //3=текст
      str=str+obj1.nodeValue;
    }else if(obj1.nodeType==1){ //1=тег
      str=str+getTextFromNode1(obj1); //рекурсивный вызов
    }
  }
  return(str);
}//function