html- Съюза и с CSS файлове, творчески начин проекти

Броят на заявките е най-тясното място при зареждането на страницата. Според последните изследвания около 40% от времето с мишката отнема само за създаване на нови връзки към сървъра. В тази връзка, всички методи за намаляване на броя на заявките, които изглеждат много обещаващи. Въпреки това, на всеки метод, като се започне с една проста комбинация от стилове и скриптове и завършва с данни: URI, е доста сложно от гледна точка на технологията, така че в някои случаи това може просто да не плащат за времето, прекарано.

Cookie често изложени на целия домейн, или дори на всички поддомейни, което означава, да ги изпратят на браузъра, дори когато иска всяко изображение с вашия домейн. В резултат на 400-байт отговор от картината става 1000 байта, или дори повече, в зависимост от добавените бисквитка заглавията. Ако страницата ви има много, които не са кеширани обекти и голям бисквитка домейн, трябва да се обмисли възможността за вземане на статични ресурси в друг домейн (например, нали така Yandex, поставяне на статични файлове на yandex.net домейн) и се уверете, че бисквитката никога няма да има.

там е доста просто правило на бележка брой на кадрите в страницата до минимум (в идеалния случай, те не би трябвало да съществува, защото всеки кадър включва създаването на нов документ в дървото на страница, която е достатъчно ресурси, като в) да се комбинират HTML-файлове. Така че нека да видим какво може да се направи с файловете на стил.

CSS-файл в началото на страницата

Когато се грижи за уеб страниците на изпълнение винаги искаме страниците могат да се направят постепенно, така че браузърът може да показва съдържание, веднага след като той бе показан. Това е особено важно за страниците, на които много текстово съдържание, както и за потребители с бавни връзки. Значението на визуални сигнали на потребителя за текущото състояние на страницата за сваляне някакъв показател за напредъка проучен подробно и документирано. Но във всеки случай, винаги е по-добре, ако самата страница действа като индикатор за прогрес. Когато браузърът зарежда HTML-файл постепенно - първо заглавието, а след това навигацията, логото в горната част и т.н. - всичко това е отличен показател за натоварването за потребителя. Той също така подобрява общото впечатление от сайта.

CSS настаняване в долната част на страницата не позволява да се започне постепенно показване на много браузъри, включително лъжи и Internet Explorer. Browser не започне да се визуализира на страницата, за да не се налага да преначертае елементи, които ще се променят по време на стила на багажника. Firefox започва веднага изобразяване на страницата, процесът на зареждане може да прерисувайки някои елементи, като променят свойствата си, но това е причината за Unstyled съдържание и рекурсивно актуализирането му.

HTML 4 спецификацията се посочва, че използването на стилове, за да бъдат включени в заглавната част на документа: "За разлика от , Тя може да се появи само в раздел , но това може да се случи неограничен брой пъти. " Нито една от алтернативите - бял екран или монитор Unstyled съдържание - не си струва риска (макар и на Firefox и Opera програмистите мислят малко по-различно). Оптималното решение е да се следват CSS спецификация и главата включването в този раздел на документа.

При проектирането на малки уеб сайтове или прост дизайн, това правило е от съществено значение за постигане на максимална ефективност. Въпреки това, по-късно в тази глава ще разгледаме алтернативни и неговото тълкуване.

Комбинирането на CSS файлове

Проблемът е, че браузърът не показва част от страницата (това не се отнася за Opera: страница й се показва без пълно натоварване CSS файлове, определени към настройките по подразбиране, да ги видите, както следва: "Preferences" (Ctrl-F12) -> напреднали "->" сърфиране "->" зареждане "или" инструменти - Settings> -> напреднали - движение "> '' -> 'зареждане'), докато се зарежда всички файлове на стилове - включително и тези, от тях, които не са предназначени за устройството, с помощта на които сте дисплея на страница. С други думи, браузърът няма да се показва на страницата, докато не се зареди стилове на файлове и принтери, въпреки че той не трябва да се правят на страницата. Погрешно е от гледна точка на производителност, но това е (Safari, всъщност, се държи само на "правилната": ненужни файлове да не забавят натоварване, но тя е свързана с функцията за изобразяване на модела, разказва за това по-подробно по-долу).

Практично решение

Решението изглежда доста тривиално: ние можем да по принцип CSS-файл за обявяване на правилата за всяко устройство, чрез @media. Например, всички стилове за принтера може да се запише по следния начин

@media печат <
правила за стил за принтер
>

в края на основната стилове файла. По този начин, винаги ще се зареди, само един файл. Това решение може лесно да бъде автоматизиран, а някои CMS вече се използва този подход (по-специално, Drupal).

Ако имаме CSS файлове са разделени на модули, е необходимо да се преразгледа структурата, така че всяка страница имаше не повече от две файлове (малки файлове - около 5K - могат да се комбинират в едно за него). За главната страница, аз препоръчвам винаги се ограничава до един файл или дори да го включите в HTML-кодът (както се прави, например, Yandex начална страница).

Окончателно строителството изглежда приблизително по следния начин:

HREF = »ie6.css» медийни = »екран» >

За всички браузъри, използвани main.css, както и за IE6 и по-долу - ie6.css. Въпреки това, тези версии на Interner Explorer не поискат файловете стил паралелно, така че зареждането на страницата се появяват ненужно забавяне, свързани с доставката на друг файл.

За да се избегне това (по-специално в случай на малък брой стилове, специално за IE), можете да използвате CSS-хакове вече в първоначалните CSS-файлове. Например, ако трябва да определим по правило само за IE7, ние можем да напишете:

* + Тяло Html <
марж: 0 автомобил;
>

* Html тяло <
марж: 0 автомобил;
>

и IE5.5- (Тази група не признава браузъра екраниране герои, така че да може да се прилага само първото правило на двете, второто правило ще работи за IE6, първостепенни първата):

* Html марж тяло: 0;
Марг \ в: 0 автомобил;
>