Какова в настоящее время самая лучшая конфигурация HTML/CSS/Javascript?

Я получаю больше в jQuery и поэтому создал HTML/Javascript/CSS базовый сайт, который я использую для всех своих тестов.Какова в настоящее время самая лучшая конфигурация HTML/CSS/Javascript?

Поскольку эти тесты будут в конечном итоге превратиться в PHP и ASP.NET MVC веб-сайтов, я хочу использовать эту возможность, чтобы получить основы вниз прямо снова для современных браузеров и веб-стандартов, прежде чем строить языки сценариев на нем.

Я выбрал для использования:

XHTML 1.0 Strict
UTF-8 кодирование
, как несколько ссылок CSS, как это возможно (поместить все в 1 CSS файл для скорость загрузки)
как можно меньше ссылок на Javascript (1 javascript-файл p Lus JQuery базовый код ссылки - Я полагаю, используя Google JQuery код базы является оптимальным для скорости)
проверить мой код, как я построить его с http://validator.w3.org

Есть ли что-нибудь еще мне нужно рассматривать?

Вот пример одного из моих тестовых сайтов:

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
     <title>Text XHTML Page</title> 
     <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript" src="javascript/main.js"></script>  

    </head> 

<body> 
    <h1 class="highlightTitle">Text</h1> 
    <p class="main">First</p> 
    <p>Second</p> 
    <p id="selected" class="regular">Third</p> 
    <p>Fourth</p> 

<form action=""> 
    <div> 
     <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
     <input type="button" value="highlight title" onclick="highlightTitle()" /> 
     <p>here is another paragraph</p> 
    </div> 
</form> 

</body> 
</html>

main.cs:

p.highlighted { 
    background-color:orange; 
} 
h1.highlightTitle { 
    background-color:yellow; 
} 
h1.deselected { 
    background-color:#eee; 
} 
p.regular { 
    font-weight: bold; 
}

main.js:

google.load("jquery", "1.3.2"); 

function highlightIt() { 
    $('#selected') 
     .toggleClass('highlighted'); 
} 

function countThem() { 
    alert("there are " + $("p.main").size() + " paragraphs"); 
} 

function highlightTitle() { 
    $("h1").toggleClass("deselected"); 
}

источник

2009-09-26 Edward Tanguay

для меня выбор, который вы создали, выглядит хорошо. xhtml strict, utf-8, jquery ... Я думаю, что это сводится к тому, что вы делаете некоторые исследования и тесты о том, что работает в целом лучше всего. – markus

Лично я хотел бы привязать к событию мыши с помощью JQuery, чтобы обеспечить хорошее разделение, как это:

$("#yourId").bind("click", highlightIt);

Таким образом, вы можете связать с несколькими обработчиков событий. Если вы просто используете onclick AFAIK, вы можете использовать только один обработчик.

BTW вы можете также использовать пользовательские события и события пространств имен:

$("#yourId").bind("beforeHighlighting", doSomething);

запускается

$("#yourId").trigger("beforeHighlighting");

$(".hasAHelptext").bind("helptext.click", showHelptextFct); 
$(".hasAHelptext").bind("click", otherFct); 

// will only remove the showHelptextFct event handler 
$(".hasAHelptext").unbind("helptext.click");

HTH Alex

источник

2009-09-26 11:32:56

спасибо, да, ненавязчивый javascript - еще одна цель дизайна, к которой я буду придерживаться, когда я создаю эти примеры, просто еще не сделал этого в этом примере :-( –

Переместить <script> на bottom of the page.

источник

2009-09-26 11:28:34 Rob

hmm, я явно переместил их в начало страницы снова после того, как опыт jquery-эффектов не работал до полной загрузки страницы, например. У меня был сайт флеш-карты, где пользователю приходилось ждать полной загрузки страницы (5 секунд), прежде чем можно было перевернуть карточки, но я продолжаю слышать, что это лучшая практика, но мне это не может быть так плохо, если сайты, подобные http://www.apple.com имеют 12 (двенадцать) ссылок на скрипт в верхней части страницы. –

Браузеры обычно обрабатывают загрузку javascript по одному файлу за раз. Ваша страница будет загружаться быстрее, если вы переместите их до конца, так как все остальные запросы будут обрабатываться параллельно до начала загрузки javascript. Если ваша страница занимает очень много времени для загрузки, и интерфейс не работает должным образом, пока это не произойдет, вы можете захотеть иметь загрузочное сообщение, которое отображается с реальным содержимым, скрытым до тех пор, пока интерфейс не будет доступен. Последний бит загруженного javascript будет содержать код для удаления загружаемого изображения и отображения интерфейса. – tvanfosson

Что касается файлов CSS и JS вообще, я бы не объединил все JS-файлы в один файл во время разработки. В одном большом JS-файле очень сложно развиваться. Скорее используйте модуль, который объединяет их «на лету» или во время развертывания.

Я обычно хожу с (как CSS и JS):

один общий файл:

project.css

и одна на странице:

project_welcome .css

и любые специальные компоненты (элементы управления входами, виды рекламных площадок и т. Д.) Также имеют отдельный раздел.

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

НТН Alex

источник

2009-09-26 11:36:11

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

Хммм, у меня на моих PHP-сайтах были десятки javascript-файлов, но я решил переключиться на один, так как я продолжаю читать, что проблема «двух одновременных загрузок на имя хоста» является одним из самых больших узких мест для сайтов, а не правдой? –

Да, я могу подтвердить, что если вы используете аналогичный подход, как я уже говорил, вы можете легко завершить работу с браузером, пытающимся загрузить 50+ JS + CSS-файлов, которые при первом ударе заставят его занять много времени. И после каждого обновления происходит то же самое и т. Д. Конечно, кэш будет запускаться после этого, но это не имеет значения, если ваш посетитель не вернется после того, как первое время загрузки заняло слишком много времени. И такие вещи, как минимизация JS, проще, если вы обработали его в один JS-файл. –

Я рекомендовал бы поставив JS звонки ниже тела тега. Если ваши скрипты висят, страница может загружаться и загружать поведение (JS) после факта. Я заметил, что с этим методом скорость значительно улучшается.

Отметьте: http://stevesouders.com/hpws/rule-js-bottom.php

источник

2009-09-28 03:52:54 mager

Какова в настоящее время самая лучшая конфигурация HTML/CSS/Javascript?

ответ

Смежные вопросы