Способността да пишат HTML и CSS със солидна разбиране на уеб технологии - това е страхотно преживяване. Но тъй като кода и трафика на сайта влезе в игра, нов набор от умения, който е от изключително значение както по време на развитие, както и за работата на потребителите. Основни познания за работата и интернет страницата на организацията може да има голямо значение.
Организация и код архитектура може значително да повлияе не само на скоростта на развитие, но също така и от скоростта на изобразяване. Както може да предизвика сериозни проблеми не само за разработчици, но също така и за потребителите. Отделете време, за да се проектира правилната структура на кода и да определят как различните компоненти работят заедно - това може да ускори готовия сайт и да подобрите своя опит по всякакъв начин.
В допълнение, тези няколко малки стъпки за подобряване на ефективността на сайта могат да бъдат компенсирани под формата на дивиденти. Ефективността на сайта припомня правилото 80/20, където 20% скорост оптимизация на около 80% от сайта.
Стратегия и структура
В първата част за подобряване на производителността и организацията на сайта се върти около определянето на добра стратегия и структура за развитието на кода. По-специално, изграждането на строга архитектура папки, презентационни шаблони за проектиране и търсене на начини за повторно използване на общ кодекс.
архитектурен стил
Въпросът е как да се организира стила се свежда до лични предпочитания и това, което е най-добро за определен сайт, но като цяло, има добри практики, които трябва да се спазват. Един от тях е свързано с отделяне на стилове въз основа на значението, което включва създаването на папки за общите основни стилове на компонентите потребителски интерфейс и бизнес логиката модули.
Гореописаният архитектура включва три папки, всички с отделни групи стилове. Целта тук - за да започнем да мислим за обектите като системи. а не като отделни страници и код архитектура трябва да отразява този начин на мислене. Моля, имайте предвид, че не съществуват стилове на определени страници.
Папка с основните стилове включва стилове и общи променливи, които ще се използват в целия сайт, например, за оформлението и типографията. Папката с компонентите включва стилове за някои елементи на потребителския интерфейс, които са разделени в различни файлови компоненти, като например предупреждения и бутони. И накрая, папката на модула включва стилове за различни секции от страницата си, които се определят в съответствие с нуждите на бизнеса.
Стилове компонента - изчистен интерфейс, както и те нямат нищо общо с основния бизнес логиката на сайта. Модули включват стилове, характерни за бизнес логиката. Когато маркировка модул в HTML тя обикновено използва различни компоненти на потребителския интерфейс. Така например, на страничния панел на страницата може да съдържа списък и бутон стилове, които са определени в стила на компонента, а други стилове, необходими за страничния панел, са наследени от стила на модула. раздяла стил за насърчаване на доброто да се мисли за възможността за предварителни настройки и стилове, които ще бъдат широко разпространени и използвани многократно.
Стратегията на стила на организацията не е изцяло нов начин, и това вече беше споменато в различни методики за CSS, включително обектно-ориентиран CSS (OOCSS) и SMACSS. Тези методики имат собствено мнение относно структурата и как да се използват стилове.
Обектно-ориентирано CSS
Методологията на обектно-ориентираното CSS е описан за първи път от Никол Съливан в своята работа по написването стил за големи обекти. ОО CSS определя два принципа, които ще ви помогнат да създадете приспособими уеб сайтове с строга архитектура и управление на код. Тези два принципа включват:
- конструкция и дизайн разделяне;
- разделяне на съдържанието и контейнера.
Като цяло, разделянето на структура и дизайн оформление елемент включва отделяне от мястото на субект. модул структура трябва да бъде прозрачна, което позволява на други стилове, наследени и се показват без конфликти. Най-често това е необходимо редовно оформлението и структурата на мрежата, заедно с добре обмислени модули.
Разделяне на съдържание и контейнерът включва функция отстраняване на вложени деца елементи на основния елемент. Заглавието трябва да изглежда по същия начин, независимо от неговата майка контейнер. За да се постигне това, елементите трябва да наследят стилове по подразбиране, и след това се удължава няколко класове, ако е необходимо.
В основата включва основните елементи на стиловете и обхваща обща стойност по подразбиране. Структурата след това определя размерите и стилове на различни решетъчни елементи определят тяхното оформление. модулни стилове - една по-специфична стилове, насочени към отделни части от страницата, като навигация или основните му характеристики. Стилове след това състояние се използва за допълване или замени другите стилове, в случай, че модулът включва променено състояние, например, активната раздела. И накрая, темата може да се добавя, когато стил на базата на дизайна или появата на различните модули.
Изборът на методология
Изборът какво методология за използване, във всеки случай, зависи изцяло от вас и какво ви харесва, това е най-доброто за даден уебсайт. Най-общо казано, комбинацията от OOCSS SMACSS и работи добре, заимствайки предпочитаните от вас принципи на всяка методология.
селектори за изпълнение
Един CSS функционалност често несъзнателно се злоупотребява - е селектори. Значително внимание е отделено на CSS свойства и стойности. Макар че тези стилове се прилагат правилно към всичко изглежда наред. Това е много лошо предположение. Изберете елементи в CSS се отразяват на работата, включително и от това колко бързо страница се показва, както и в практиката стилове се вписват в цялостната архитектура на сайта.
Дръжте селектори кратко
Има няколко предимства, защо спести CSS селектори, когато е възможно по-малко. Те включват минимизиране на спецификата, която го прави по-лесно да бъде наследен и пренесени, плюс ефективност. Дълги, по-точни селектори намаляване на производителността, тъй като те накара браузъра, за да се покаже всеки един селектор тип дясно на ляво. Той също така налага ограничение върху останалата част от инструментите за избор, така че те да станат по-конкретни.
В по-горе код, първият избор е много специфичен и по-бързо, може да бъде идентифициран и е показано с помощта на класа. В допълнение, използването на класа, в този случай значително намалява необходимостта от идентифициране на родителите на този елемент, който позволява на елемента в крайна сметка да се промени местоположението си, без да се счупи всякакви стилове.
Вторият пример включва селектори по-кратък от в първия пример, но те могат да бъдат подобрени, като се гарантира същото ниво на специфичност за всеки селектор. Избягвайте прекалено специфични селектори, вместо това ще се намали вероятността от нарушаване на правилния ред на елементите, когато те са се променили. С премахването на някои от отделните елементи на селектори и селектори на който да бъде равна сила, всичко, което ще им позволи по-добре да си взаимодействат.
Като цяло, целта на късо селектори - намаляване на специфичност, за да се създаде по-чисти, по-отзивчиви код.
предпочитам класове
Класовете са добри, тъй като те се появяват бързо, позволи повторното използване на стилове и са широко използвани при изграждането на един уеб сайт. Има общи методи на класове на приложения, които ви позволяват да се види какво класове работят правилно.
Тъй като селектори се извеждат от дясно на ляво, е важно да следите на ключовата за избор. Това селектор е в самия край, крайната десница. Ключовият за избор е от решаващо значение, тъй като определя първия елемент от това кой браузър е намерен. Bad ключ за избор може да изпрати на браузъра да ловуват диви гъски. Не се страхувайте да използвате класа, за да елемента по-уникален, просто за по-голяма производителност.
Освен това не предхожда клас селектор елемент. Това не позволява на стиловете различни елементи и подобрява цялостната спецификата на селектор.
Трябва също да се отбележи, - доколкото е възможно да се пази от идентичност, тъй като те са твърде специфични и не позволява да се повтаря. В крайна сметка, използването на идентификатора не е много по-различен от използване! Важно.
Код повторна употреба
Един от най-големия спад в представянето си идва с подувам размер на файла и ненужни дисплей в браузъра. Един от най-бързите начини да по много начини, за да се намали размера на CSS-файл се повтаря, доколкото е възможно, използването на стилове. Всички повтарящи се стилове на интерфейса или шаблони ще бъдат интегрирани, деблокирането на общ кодекс. Ако два модула използват една и съща среда, заоблени ъгли и сянката в уреда, няма причина да укажете в същите стилове двукратни. Вместо това, те могат да бъдат комбинирани в един клас, а стилове са написани веднъж.
Многократна употреба код не трябва да работи поради семантика. Един метод може да бъде съединение селектори заедно, разделени със запетая и позволяващи същите две стилове наследствени селектори. Друг подход, който е често срещан в посочените по-горе методики и OOCSS SMACSS, включва обвързване стилове от същия клас, а след това използването на няколко класа в един единствен елемент.
Между прилага подход не е голяма разлика, защото кодът се използват повторно, а общият размер на файловете се намалява.
Минимизиране и компресиране на файлове
GZIP компресия
Създаване софтуерна е съвсем безболезнено и HTML5 BOILERPLATE свърши чудесна работа за това. За GZIP файловете, които искате да добавите файл .htaccess в главната папка на уеб сървъра, чрез проверка на специфични файлове, за да бъдат компресирани. Точката в началото на името на файла е правилен, тъй като файла .htaccess е скрита.
- mod_setenvif.c
- mod_headers.c
- mod_deflate.c
- mod_filter.c
- mod_expires.c
- mod_rewrite.c
Най-общо казано, това не е проблем, а някои уеб сървъри също могат да конфигурират компресия за вас. В крайна сметка, компресирате файлове също е в интерес на уеб сървъра.
измерване на компресия
В уеб инспектор Google Chrome дава изобилие от данни, свързани с изпълнението, особено в раздела Мрежа. В допълнение, има няколко места, които ви помагат да определи, че софтуерна компресия е активирана.
Фиг. 1.01. раздела Network идентифицира всеки изтеглен файл в браузъра и показва времето за размер на файла и изтегляне. Моля, имайте предвид, че използването на GZIP размери на файла намалява с около 60%.
Фиг. 1.02. С поглед към преписката, по-специално определят какъв тип компресия поддържан браузър. В нашия случай, GZIP, дефлация и SDCH обозначени като поддържа в заглавието на поискване. С поглед към заглавията на реагиране се уточни, че даден файл е бил изпратен от метод за компресиране на софтуерна.
компресиране на изображения
Намаляване на размера на текстовия файл помага, но вие ще получите по-добри резултати чрез компресиране размерът на файла. Общият размер на файла на всички изображения в целия сайт, можете бързо да добавите и сгъстяване на изображения до голяма степен ще помогне да се запази размерът на файла е под контрол.
Съществуват няколко инструмента, които помагат за компресиране на изображението, двамата най-добре са ImageOptim PNGGauntlet за Mac и за Windows. И двете от тях предлагат да компресирате най-популярните графични формати като JPG, PNG и файлове.
Демонстрация на компресия на изображението
Некомпресирано, 455 KB
Фиг. 1.03. С ImageOptim това изображение са намалени с повече от 14%, без намаление или загуба на качество.
Трябва също да се отбележи, че размерите на изображението в HTML, инсталация, добавяйки ширина и височина атрибути наистина помага за изобразяване на страницата по-бързо, оставяйки достатъчно място за изображението. Разберете, тези атрибути трябва да се използват само за определяне на точните размери на изображение, вместо да го намали. Използвайте по-голямо изображение, а след намаляването му с помощта на височината и ширината атрибути е лоша практика, тъй като тя се сваля повече данни, отколкото е необходимо.
HTTP-заявки Намалете
След като HTTP-заявки размера на файла на броя на сайта - един от най-големите клопки на производителността. Всеки път, когато е отправено искане до сървъра, увеличава времето за зареждане. Някои искания трябва да бъдат завършени преди началото, а другата сървъра може да се удави твърде много заявки.
Обединяване на файлове
Практика CSS Sprites включва използването на фоново изображение в продължение на няколко елемента. Целта е да се намали броят на HTTP-заявки, направени с помощта на множество изображения за фон.
За да създадете спрайт вземете шепа фонови изображения, тези, които често се използват, и ги поставете в едно изображение. След това, с помощта на CSS, добавете спрайт като фоново изображение на даден елемент с помощта на имота на фона позиция да показва правилния фоновото изображение.
Представете си, че фоново изображение зад елементи слайд само да бъдат определени правилно фоново изображение на елемента. Например, ако размерът на елемент от 16 пиксела широчина и 16 пиксела висок, той може да изложи само фоновото изображение 16 пиксела от 16 пиксела, а останалата част от фоновото изображение е скрито.
С помощта на спрайт горе в менюто може да бъде създаден чрез фона на елемента . След това, с помощта на класове промените позицията на фона на спрайт да покаже съответните икони.
демонстрация на спрайтове
Снимки чрез информация: URL
Освен това, вместо спрайтове кодирани данни с изображения могат да бъдат включени в HTML и CSS директно от данни: URL адрес. дори се премахва необходимостта от HTTP заявка. информация: URL работи добре за малки изображения, които никога не се променят и къде HTML и CSS в голяма степен кеширани. Има, обаче, няколко проблема. Снимките могат да бъдат трудни за да се промени и да поддържа, в резултат на необходимостта да има други данни. И те не работят в по-стари браузъри, като Internet Explorer 7 и по-ниска.
Ако използването на информация: URL помага за намаляване на броя на HTTP-заявки и HTML или CSS могат да бъдат кеширани в голяма степен, ползите обикновено надвишават рисковете. Няколко инструменти могат да ви помогнат да генерира информация: URL, включително преобразуватели и генератори на модели. Бъдете внимателни и винаги двойна проверка, че данните на: URL адрес е по-малко от самото изображение.
Демонстрация информация: URL
Кеширане споделени файлове
Друг начин да се помогне за намаляване на HTTP-заявки и да служи страници по-бързо - кеш на общи файлове. Когато страницата се зарежда за първи път, някои файлове могат да бъдат кеширани. Сега браузърът не трябва да се стреми едни и същи файлове на второто посещение от доста време. Колко е дълъг този период от време да решите, че всичко зависи от това колко дълго искате потребителят да задържи определени типове файлове.
Подобно GZIP файлове, заглавен конфигурационен файл за кеширане на изтичане може да се настрои чрез .htaccess файл. Отново, HTML5 BOILERPLATE е една крачка пред нас. В своя .htaccess файл има секция, обозначена Изтича заглавки.
Ресурси и връзки
Свързани статии