Използване на външни CSS каскадни стилове и JavaScript
09.07.2008 – 14:54В тази секция ви запознаваме как браузърите работят с отделните вътрешни и външни уеб елементи и компоненти. Преди да започнете работата по уеб дизайна и изграждането на страниците, трябва да си зададете един прост въпрос:
Трябва ли CSS стиловете и скриптовете на JavaScript да бъдат вмъкнати в сорса на документа, или могат да бъдат съхранени във външни файлове.
Практическото използване на външни CSS (.css) и JavaScript (.js) файлове значително подобрява работата на уеб страниците, защото те лесно се кешират от уеб браузърите. Скриптовете и каскадните набори от стилове, които са интегрирани в HTML сорс кода на уеб страницата се свалят от уеб сървъра всеки път когато се направи заявка за конкретната страница. Особено ако има указание за предотвратяване на кеширането.
Вмъкнатите стилове и скриптове намаляват броя на заявките към сървъра, но увеличават размера на HTML документа. От друга страна след като браузъра кешира външните скриптове и стилове, бъдещото използване на уеб страницата силно повишава своята лекота.
Ключовият фактор в случая, е честотата на използването на кешираните външни файлове, свързани с конкретен HTML уеб документ. Ако потребителите на сайта ви извършват множество разглеждания на сайта и по този начин използват същия скриптов файл и css файла, така ползата от кеширането се увеличава.
Препоръка: За заглавната страница на Вашия сайт, можете да използвате JavaScript и CSS стиловете като ги поставяте директно в HTML сорс кода на индекс файла. При положение, че потребителя вижда заглавната страница и е добре тя да се зареди бързо, а след това посетителите ще разглеждат вътрешните страници, може да спестите заявките като вмъкнете стиловете и скриптовете в кода. Така индекс страницата Ви ще има по-малко кеширани елементи, но ще използвате ефекта от малкото заявки. Ако сайта Ви има голяма посещаемост, по този начин ще намалите в известна степен, макар и малко, товара върху уеб сървъра Ви.
Примери за използване на външни CSS каскадни стилове и JavaScript файлове
Вероятно сте отлично запознати със употребата, но за по-начинаещите ще покажем накратко как се внедряват външните файлове в уеб страницата.
Повикване на външен CSS файл:
<link href=”stylesheets.css” rel=”stylesheet” type=”text/css”>
Във външния файл с каскадните набори от стилове не слагайте таговете <STYLE> и </STYLE>
Повикване на външен JavaScript файл:
<script language=”javascript” type=”text/javascript” src=”scripts.js”></script>
Подобно на външните css файлове, файловете, който съдържат скриптовете Ви не трябва да започват с таговете <script> и затварящия таг </script>.
Сходни статии:
- Използване на Expires и Cache-Control хедъриЗа статични елементи използвайте Never expire в уеб документа. При динамични компоненти с помощта на Cache-Control хедър можете да помагате на браузъра при извършването на заявките. Уеб дизайна на Интернет...
- Фокусирайте вниманието на търсачките на Вашия WordPress блог към основното съдържание чрез JavaScript в WordPresПовечето блогъри, които използват системата WordPress са се досещали, че в резултатите в Гугъл се индексират и техните страници за регистрация и вход на потребителите към системата. Понякога, блогърите, които...
- Вмъкването на скриптовете в дъното на уеб страницатаПроблем при скриптовете е, че блокират паралелното зареждане на страниците. В HTTP/1.1 спецификациите е оказано, че браузърите свалят по 2 уеб елемента паралелно от един хост. Ако имате изображения в...
- Избягвайте CSS ExpressionsCSS Експрешъните са мощен метод за динамично задаване на CSS стойности. Поддържат се в Internet Explorer от версия 5 насам. Използват се например, ако искате да зададете бекграунда на страницата...
- Ограничение на HTTP заявките с цел подобряване на скоростта на Вашия уеб сайтВремето за зареждане на уеб сайтовете зависи от много фактори. Нека да обърнем внимание като начало на уеб елементите в страниците - изображения, stylesheets, скриптове, флаш анимации и др. Намаляването...
