Как работают сайты

Оглавление:

Сидя в интернете, у начинающих вебмастеров или даже у простых пользователей, может возникнуть такой вопрос, а как работают сайты ?

Так вот в этой статье именно этот вопрос мы и разберём. То есть, узнаем основные принципы работы сайтов.

Для того чтобы запустить какой-то сайт, нам нужны такие вещи как исходные файлы данного сайта, веб-сервер и браузер.

По словам википедии, веб сервер это сервер, который принимает запросы типа HTTP, от веб браузеров и выдаёт им HTTP ответы.

Вместе с HTTP ответами, веб сервер возвращает браузеру HTML страницу, изображения и другие необходимые файлы.

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

Сайты бывают двух типов, статические и динамические.

Когда мы заходим на главную страницу сайта, то в первую очередь, браузер ищет индексный файл, то есть файл с названием index. У статических сайтов, этот файл имеет расширение » .html » или » .htm «, а у динамичных сайтов » .php «.

Принцип работы статических сайтов

Со статическими сайтами всё просто. Для каждой странице, есть соответствующий html файл, который отвечает за эту страницу. Для страницы с контактами, может отвечать файл »

contacts.html «, для страницы об авторе, может отвечать файл » about.html » и так далее.

То есть браузер, каждый раз обращается к серверу за конкретный файл, сервер ищет у себя этот файл и если он есть, то в качестве ответа, возвращает браузеру html-разметку данного файла. Иначе, если запрашиваемый файл не существует, то сервер возвращает ошибку.

Принцип работы динамических сайтов

Здесь, сначала браузер также делает запрос к серверу, но сервер в этом случае уже не возвращает какой-то конкретный файл, а отправляет этот запрос на обработку интерпретатору PHP. Интерпретатор обрабатывает этот запрос и возвращает серверу обработанный код, а сервер уже возвращает браузеру этот код в формате html разметки.

У динамических сайтов, физических страниц, фактически нет. Они при каждом запросе генерируются.

Еще такой момент. Если в корне сайта находятся оба индексных файла, то есть файл » index.html » и файл » index.php «, то, когда мы заходим на главную страницу сайта, в первую очередь загружается файл » index.html «. Поэтому, если Вы хотите чтобы загружался файл » index.php «, то файл » index.html » нужно удалить.

На этом всё. Надеюсь, Вы поняли в общих чертах как работают сайты. Статья получилась не большая, но зато полезная.

Похожие статьи:

Видео по теме:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту [email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас,

сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2017-08-22 05:28:18

Что такое сайт и как он работает?

Привет, друзья! Сегодня мы продолжим говорить о технической стороне вашего Интернет бизнеса, а, точнее, обсудим что такое сайт и как он работает. В прошлой статье мы уже начали обсуждать инструменты Интернет бизнеса, мы говорили о том, как технические моменты выглядят с точки зрения пользователя, сейчас же рассмотрим этот вопрос со стороны вебмастера (или владельца).

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

Ничего сложного в этой теме нет, но я знаю, что многих она пугает. Поэтому, я постараюсь объяснить все тонкости максимально простым языком, чтобы про сайт поняли и пионеры и пенсионеры. Если останутся неясности – задавайте вопросы в комментариях.

Что такое сайт?

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

Для того, чтобы мы с вами увидели всю ту информацию, которая была заложена вебмастерами, при создании того или иного сайта, необходимы три составляющих:

1. Файлы

Все картинки и многочисленные тексты, которые мы видим в Интернете – это дизайн, система управления сайтом (wordpress, joomla или что-то еще) и сама полезная информация (контент). Каждый из этих элементов представляет собой специальные файлы, точно также как любые другие файлы у вас дома на компьютере. Создаются они на специальных языках web программирования, таких как HTML, PHP и т.д. Когда мы видим текст, картинки и видео в нашем браузере, мы видим работу именно этих файлов.

2. Место для хранения файлов

Точно также как и у вас на компьютере, эти файлы не могут висеть в воздухе. Интернет не является чем-то абстрактным, это всего лишь много устройств, объединенных в сеть. Поэтому, для файлов любого сайта необходимо место. Обычно, файлы сайтов размещаются на серверах,(читайте – как разместить сайт в интернете), которые предоставляют специальные компании, называющиеся хостинг провайдерами, а место под файлы, вместе со всеми необходимыми программами, нужными для работы сайта, называется хостинг.

Какой хостинг лучше выбрать для своего сайта я рассказываю тут.

3. Адрес сайта или доменное имя

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

Например, BiznesSystem.ru – это адрес моего сайта. Занимаются назначением адресов для всех сайтов в сети специальные компании – регистраторы. А сами адреса называются доменами или доменными именами. Мы можем купить себе любое, свободное на данный момент, доменное имя.

Тут можно проверить домен на занятость. А как правильно выбирать доменное имя для сайта я писал в этом посте.

Давайте закрепим этот материал простой аналогией с жильем. Вы и вся домашняя утварь, которой вы владеете – это внутреннее содержимое вашего сайта. Вам необходимо где-то жить, в квартире или доме – вашему сайту тоже нужно где-то жить, это хостинг. Чтобы вас найти, нужен адрес вашей квартиры – чтобы найти ваш сайт, нужно знать ее доменное имя.

Коротко ответ на вопрос “Что такое сайт?” будет звучать так – это комплекс файлов, размещенных на сервере (хостинге), к которому ведет специальный адрес (домен).

Как работает сайт?

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

Эта программа передает на компьютер пользователя данные сайта – текст, картинки, видео или что-то еще (зависит от конкретного случая).

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

Виды сайтов

Классификаций, по которым можно распределить сайты по категориям существует множество. В зависимости от ситуации применяйте ту, что подходит.

• Принадлежность – сайты бывают персональные, принадлежащие обычным людям, корпоративные – принадлежат фирмам, государственные – принадлежат органам власти или муниципальным образованиям.
• Тематика – самая подробная классификаций по этому направлению описана в Яндекс Каталоге. Там перечислены все тематики в иерархическом формате (от общих к более конкретным). Эта классификация бывает полезна при выборе площадок для рекламы.
• CMS – сайты могут создаваться как с чистого листа (html, css, php), так и с использованием уже готовых систем управления контентом. Движок сайта играет огромную роль при подборе плагинов или скриптов, так как то что подходит для одной CMS не подойдет для другой. Наиболее популярны WordPress, Joomla, Drupal, PHPbb.
• Назначение – каждый сайт создается для определенных целей – блоги, форумы, социальные сети, городские порталы, каталоги и т.д.

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

Как функционирует сайт: общие принципы работы веб-ресурса

Зачем знать как функционирует сайт

Чтобы правильно выбрать хостинг для веб-сайта, не достаточно посмотреть рейтинги хостинг компаний в Интернет и почитать отзывы на форумах. Эти способы выбора хостинга не имеют никакого значения, если вы не понимаете саму суть задачи. Вам прежде всего, нужно понять, как работает, как функционирует сайт. Каким образом пользователи Интернет могут видеть красивые картинки на своих экранах, а вы можете управлять информацией на сайте.

Что такое сайт

Итак, вы решили создать свой собственный сайт. Называйте его, как хотите, сайт, веб-ресурс, веб-сайт, ресурс, проект, площадка. Я буду называть его сайт. В этой статье нам не важно, для чего нужен сайт, важно понять общее устройство сайта.

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

Языки программирования HTML, PHP, Java, CSS

Для управления файлами сайта разработаны языки программирования. Основные языки программирования, на которых работают сайты это языки HTML, PHP, Java, CSS.

Язык разметки  HTML или XHTML, позволяют из текстового документа TXT создать документ формата html, который виден в браузере. На самом деле, чтобы превратить документ txt в html и посмотреть его в браузере, не нужны особые знания, достаточно заменить расширение файла, с txt на html. Можете попробовать.

Созданный таким образом документ будет виден только вам и не будет доступен никому в Интернет. Да и объединить самостоятельно несколько документов не получится.

Здесь я немного утрирую. На самом деле можно и на вашем компьютере сделать документы доступные для просмотра пользователям интернет, но это совсем другая история про локальный сайт.

Язык PHP язык программирования общего назначения был создан для web разработок, включая страницы сайта. Код PHP прекрасно внедряется в язык разметки HTML, и большинство сайтов создаются именно на языке PHP.

Современные сайты не обходятся без языка программирования JavaScript. С помощью программ (скриптов) написанных на JavaScript можно динамично менять HTML разметку веб-страницы, перемещать картинки, менять внешний вид страниц и т.д. Однако, «голый» язык JavaScript работает только в вашем браузере и его работу не видит никто кроме вас. Чтобы донести изменения JavaScript до других пользователей применяется комбинация JavaScript c PHP.

Все выше перечисленные языки программирования позволяют создать страницы сайта, но не решают задачу хранения и поиска страниц сайта.

Вызов и поиск сайта в Интернет

Для поиска и уникализации страниц сайта, разработана система доменных имен и IP адресов ресурсов. Причем, IP адреса ресурсов связываются с их доменными именами, через, серверы доменных имен (DNS).

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

Хранение данных сайта

Осталась последняя задача, где хранить все каталоги и файлы сайта. Для хранения каталогов и файлов сайта, и используются веб сервера коллективного пользования, называемые хостинги.

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

Общие требования к хостингу

На любом хостинге должны существовать:

• Физический диск (сервер) для размещения файлов сайта;
• Сервер для обработки заголовков и вызова документов, HTTP сервис;
• Сервер или место на сервере для размещения PHP;
• Сервер или место на сервере для хранения базы данных сайта;
• Свой (!) сервис доменных имен (DNS).

Соответственно программное обеспечение хостинга должно поддерживать все необходимые языки программирования, используемые для создания и работы сайтов. Кроме этого, и об этом в других статьях, хостингу нужен почтовый сервис, сервисы для резервирования и возможно еще другие сервисы и службы.

©www.wordpress-abc.ru

Статьи по теме

Похожие посты:

Как работают веб-приложения / Habr

Это статья для начинающих разработчиков и тех, кто хочет немного ориентироваться в терминах и технологиях современных веб-приложений. В статье написано о том, чем веб-приложения отличаются от сайтов, какие бывают веб-приложения, из чего они состоят и как работают.

1. Чем веб-приложения отличаются от сайтов

Для меня сайт это в первую очередь что-то информационное и статичное: визитка компании, сайт рецептов, городской портал или вики. Набор подготовленных заранее HTML-файлов, которые лежат на удаленном сервере и отдаются браузеру по запросу.

Сайты содержат различную статику, которая как и HTML-файл не генерируется на лету. Чаще всего это картинки, CSS-файлы, JS-скрипты, но могут быть и любые другие файлы: mp3, mov, csv, pdf.

Блоги, визитки с формой для контакта, лендинги с кучей эффектов я тоже отношу для простоты к сайтам. Хотя в отличие от совсем статических сайтов, они уже включают в себя какую-то бизнес-логику.

А веб-приложение — это что-то технически более сложное. Тут HTML-страницы генерируются на лету в зависимости от запроса пользователя. Почтовые клиенты, соцсети, поисковики, интернет-магазины, онлайн-программы для бизнеса, это все веб-приложения.

2. Какие бывают веб-приложения

Веб-приложения можно разделить на несколько типов, в зависимости от разных сочетаний его основных составляющих:

1. Backend (бэкенд или серверная часть приложения) работает на удаленном компьютере, который может находиться где угодно. Она может быть написана на разных языках программирования: PHP, Python, Ruby, C# и других. Если создавать приложение используя только серверную часть, то в результате любых переходов между разделами, отправок форм, обновления данных, сервером будет генерироваться новый HTML-файл и страница в браузере будет перезагружаться.
2. Frontend (фронтенд или клиентская часть приложения) выполняется в браузере пользователя. Эта часть написана на языке программирования Javascript. Приложение может состоять только из клиентской части, если не требуется хранить данные пользователя дольше одной сессии. Это могут быть, например, фоторедакторы или простые игрушки.
3. Single page application (SPA или одностраничное приложение). Более интересный вариант, когда используются и бэкенд и фронтенд. С помощью их взаимодействия можно создать приложение, которое будет работать совсем без перезагрузок страницы в браузере. Или в упрощенном варианте, когда переходы между разделами вызывают перезагрузки, но любые действия в разделе обходятся без них.

3. Pyhon-фреймворк Django aka бэкенд

В разработке фреймворк — это набор готовых библиотек и инструментов, которые помогают создавать веб-приложения. Для примера опишу принцип работы фреймворка Django, написанного на языке программирования Python.

Первым этапом запрос от пользователя попадает в роутер (URL dispatcher), который решает какую функцию для обработки запроса надо вызвать. Решение принимается на основе списка правил, состоящих из регулярного выражения и названия функции: если такой-то урл, то вот такая функция.

Функция, которая вызывается роутером, называется вью (view). Внутри может содержаться любая бизнес-логика, но чаще всего это одно из двух: либо из базы берутся данные, подготавливаются и возвращаются на фронт; либо пришел запрос с данными из какой-то формы, эти данные проверяются и сохраняются в базу.

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

Данные в БД можно создавать, читать, изменять и удалять. Иногда для обозначения этих действий можно встретить аббревиатуру CRUD (Create Read Update Delete). Для запроса к данным в БД используется специальный язык SQL (structured query language).

В Джанго для работы с БД используются модели (model). Они позволяют описывать таблицы и делать запросы на привычном разработчику питоне, что гораздо удобнее. За это удобство приходится платить: такие запросы медленнее и ограничены в возможностях по сравнению с использованием чистого SQL.

Полученные из БД данные подготавливаются во вью к отправке на фронт. Они могут быть подставлены в шаблон (template) и отправлены в виде HTML-файла. Но в случае одностраничного приложения это происходит всего один раз, когда генерируется HTML-страница, на который подключаются все JS-скрипты. В остальных случаях данные сериализуются и отправляются в JSON-формате.

4. Javascript-фреймворки aka фронтенд

Клиентская часть приложения — это скрипты, написанные на языке программирования Javascript (JS) и исполняемые в браузере пользователя. Раньше вся клиентская логика основывалась на использовании библиотеки JQuery, которая позволяет работать с DOM, анимацией на странице и делать AJAX запросы.

DOM (document object model) — это структура HTML-страницы. Работа с DOM — это поиск, добавление, изменение, перемещеие и удаление HTML-тегов.

AJAX (asynchronous javascript and XML) — это общее название для технологий, которые позволяют делать асинхронные (без перезагрузки страницы) запросы к серверу и обмениваться данными. Так как клиентская и серверная части веб-приложения написаны на разных языках программирования, то для обмена информацией необходимо преобразовывать структуры данных (например, списки и словари), в которых она хранится, в JSON-формат.

JSON (JavaScript Object Notation) — это универсальный формат для обмена данными между клиентом и сервером. Он представляет собой простую строку, которая может быть использована в любом языке программирования.

Сериализация — это преобразование списка или словаря в JSON-строку. Для примера:

Словарь:

    {
        'id': 1, 
        'email': '[email protected]'
    }

Сериализованная строка:

    '{"id": 1, "email": "[email protected]"}'

Десериализация — это обратное преобразование строки в список или словарь.

С помощью манипуляций с DOM можно полностью управлять содержимым страниц. С помощью AJAX можно обмениваться данными между клиентом и сервером. С этими технологиями уже можно создать SPA. Но при создании сложного приложения код фронтенда, основанного на JQuery, быстро становится запутанным и трудно поддерживаемым.

К счастью, на смену JQuery пришли Javascript-фреймворки: Backbone Marionette, Angular, React, Vue и другие. У них разная философия и синтаксис, но все они позволяют с гораздо большим удобством управлять данными на фронтенде, имеют шаблонизаторы и инструменты для создания навигации между страницами.

HTML-шаблон — это «умная» HTML-страница, в которой вместо конкретных значений используются переменные и доступны различные операторы: if, цикл for и другие. Процесс получения HTML-страницы из шаблона, когда подставляются переменные и применяются операторы, называется рендерингом шаблона.

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

5. Как клиент и сервер общаются между собой

Общение клиента с сервером происходит по протоколу HTTP. Основа этого протокола — это запрос от клиента к серверу и ответ сервера клиенту.

Для запросов обычно используют методы GET, если мы хотим получить данные, и POST, если мы хотим изменить данные. Еще в запросе указывается Host (домен сайта), тело запроса (если это POST-запрос) и много дополнительной технической информации.

Современные веб-приложения используют протокол HTTPS, расширенную версию HTTP с поддержкой шифрования SSL/TLS. Использование шифрованного канала передачи данных, независимо от важности этих данных, стало хорошим тоном в интернете.

Есть еще один запрос, который делается перед HTTP. Это DNS (domain name system) запроc. Он нужен для получения ip-адреса, к которому привязан запрашиваемый домен. Эта информация сохраняется в браузере и мы больше не тратим на это время.

Когда запрос от браузера доходит до сервера, он не сразу попадает в Джанго. Сначала его обрабатывает веб-сервер Nginx. Если запрашивается статический файл (например, картинка), то сам Nginx его отправляет в ответ клиенту. Если запрос не к статике, то Nginx должен проксировать (передать) его в Джанго.

К сожалению, он этого не умеет. Поэтому используется еще одна программа-прослойка — сервер приложений. Например для приложений на питоне, это могут быть uWSGI или Gunicorn. И вот уже они передают запрос в Джанго.

После того как Джанго обработал запрос, он возвращает ответ c HTML-страницей или данными, и код ответа. Если все хорошо, то код ответа — 200; если страница не найдена, то — 404; если произошла ошибка и сервер не смог обработать запрос, то — 500. Это самые часто встречающиеся коды.

6. Кэширование в веб-приложениях

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

Cache — это концепция в разработке, когда часто используемые данные, вместо того чтобы их каждый раз доставать из БД, вычислять или подготавливать иным способом, сохраняются в быстро доступном месте. Несколько примеров использования кэша:

• В Джанго пришел запрос на получение данных для графика в отчете. Мы достаем из БД данные, подготавливаем их и кладем в БД с быстрым доступом, например, memcached на 1 час. При следующем запросе мы сразу достанем их из memcached и отправим на фронтенд. Если мы узнаём, что данные перестали быть актуальными, мы их инвалидируем (удаляем из кэша).
• Для кэширования статических файлов используются CDN (content delivery network) провайдеры. Это серверы, расположенные по всему миру и оптимизированные для раздачи статики. Иногда бывает эффективнее положить картинки, видео, JS-скрипты на CDN вместо своего сервера.
• Во всех браузерах по умолчанию включено кэширование статических файлов. Благодаря этому, открывая сайт не в первый раз, все загружается заметно быстрее. Минус для разработчика в том, что со включенным кэшем не всегда сразу видны изменения сделанные в коде.

Принцип работы сайта

Уважаемый читатель, я хочу подробно описать процесс установки и настройки локальной среды разработки Apache + PHP + MySQL для операционной системы Ubuntu.

Но прежде чем приступить к реализации желаемого не лишним будет что-то вроде введения в принцип работы сайта на сервере.

Ранее я описывал процесс установки большой тройки (Apache + PHP + MySQL) для ОС Windows и даже умудрился опубликовать видеокурс, посвященный хостингу на локальном компьютере, где большая тройка устанавливалась на ОС ArchLinux.

Хотя ArchLinux, на мой взгляд, более подходит для использования в качестве серверной ОС, все же Ubuntu обойти вниманием невозможно. Ведь Ubuntu является отличной альтернативой Windows и, как рабочая лошадка веб-разработчика, частенько превосходит своего платного конкурента.

Лично я провел над собой эксперимент по переходу с ворованного ПО на свободное, результаты которого я публикую в отдельном разделе данного блога. Уже сейчас могу сказать, что я не только работаю в Ubuntu, но мне это начинает нравиться.

А раз так, то без установки сервера на Ubuntu нам не обойтись.

Но сначала, как и договаривались, введение.

Желающих избавиться от священного трепета перед пеленой непонимания процесса работы сайта на хостинг-компьютере я перенаправляю все к той же статье по настройке сервера на Windows, в начале которой я попытался покончить с этим самым трепетом. Если трепет не прошел, сегодня мы его добьем окончательно.

Как вы уже поняли, программная часть сервера состоит из трех основных составляющих:

1. Apache. Что он делает? Сейчас расскажу.

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

Во-вторых, компьютер, на жестком диске которого размещены файлы сайта, обладает уникальным идентификатором — IP-адресом (да и вообще, любой компьютер, подключенный к сети интернет на прямую обладает уникальным IP-адресом).

В-третьих, посредством программы Apache, компьютер способен отправить файлы сайта в ответ на запрос посетителя. Происходит это следующим образом: посетитель, зная IP-адрес компьютера-сервера, соединяется с ним и требует сайт; Apache, в ответ на это требование, отправляет файлы подключившемуся посетителю; браузер посетителя обрабатывает инструкции в полученных от Apache текстовых файлов и формирует привычный нам вид веб-страницы.

В-четвертых, вы же не знаете IP-адрес компьютера, на котором расположен сайт. Вы знаете доменное имя сайта, а о том, какой IP-адрес соответствует данному URL, знает NS-сервер.

В-пятых, промежуточное звено NS-сервер придумано для того, чтобы не запоминать бессмысленные цифры IP-адреса, ведь куда проще запомнить доменное имя.

В-шестых, на одном IP-адресе может быть размещено несколько сайтов с разными доменными именами, но об этом чуть позже.

Теперь я хочу развить тему NS-серверов и локальной среды разработки.

Понятно, что если сайт должен быть доступен из внешней сети (из интернета), то компьютер на котором размещены файлы сайта (будем называет его сервер) должен быть подключен к интернету и иметь прямой фиксированный внешний IP-адрес.

В принципе серверу не обязательно иметь подключение к интернету с прямым IP-адресом. Для обеспечения работоспособности сайта можно воспользоваться пробросом портов, но это отдельная тема для статьи.

Прямой IP-адрес сервера необходимо указать в настройках приобретенного вами доменного имени, если вы, конечно, хотите, чтобы на сайт могли попадать посетители из любой точки Мира.

Последовательность обработки запроса посетителя вашего сайта будет следующей: посетитель сайта ввел в браузер доменное имя, NS-сервер сообщил соответствующий IP, запрос по полученному IP пришел на ваш компьютер к Apache, Apache, в соответствии своим настройкам, показал посетителю те или иные файлы.

Вот каким образом выглядит интерфейс настройки NS-записи хостера imena.ua (услугами которого я пользуюсь):

 

В настройках домена я указал две записи типа А для доменного имени sdelaysite.com и www.sdelaysite.com, обоим доменным именам поставлен в соответствие IP-адрес 193.46.210.133.

IP-адресом 193.46.210.133 обладает мой сервер, на котором запущен Apache, отдающий посетителю файлы этого блога.

Еще немного умственных усилий и мы рассмотрим случай настройки локальной среды разработки.

Разница в настройках локальной среды разработки и глобального хостинга лишь в том, что в глобальном случае приходилось настраивать NS-сервер для того, чтобы все компьютеры интернета знали IP нашего сайта; а в случае использования локальной среды разработки для тестирования динамического сайта доступ к нему нужен только нам, его разработчикам, поэтому никакие NS-сервера не требуются, мы будем править файл hosts, расположенный на жестком диске компьютера.

Файл hosts представляет собой ни что иное как локальный NS-сервер. В нем можно указать доменное имя сайта и IP-адрес ему соответствующий.

В Ubuntu данный файл расположен по следующему пути: /etc/hosts

Для того, чтобы его отредактировать требуется ввести команду в терминале (Меню Ubuntu/Приложения/Стандартные/Терминал): sudo gedit /etc/hosts

Директива sudo включает режим суперпользователя для редактирования служебных файлов.

gedit — это название программы для редактирования текстовых файлов в Ubuntu.

Ну а /etc/hosts — это, как вы понимаете, путь к редактируемому файлу.

Слева написаны IP-адреса, справа через табуляцию — доменные имена.

После ввода доменного имени в браузере компьютер первым делом проверит наличие информации по данному домену в файле hosts и если там его не найдет полезет на NS-сервера.

IP-адрес 127.0.0.1 — это адрес данного локального компьютера (такие уж существуют правила).

Иными словами, если в браузере моего компьютера набрать test2 или wordpress.loc, то запрос будет передан моему локальному Apache.

Файл hosts, как вы знаете, есть и в Windows. Расположен он по адресу C:\WINDOWS\system32\drivers\etc\hosts и выполняет точно те же самые действия.

Теперь быстро пройдемся по оставшимся двум необходимым составляющим серверного ПО.

2. PHP. Это программа, которая устанавливается на сервер с целью обработки php-кода в текстовых файлах сайта. Посредством данной программы php-код преобразуется в HTML-инструкции и передается браузеру пользователя посредством Apache.

3. MySQL. Данная программа представляет из себя сервер баз данных, который обеспечивает хранение информации и доступ к ней.

В следующей части мы займемся непосредственно установкой и настройкой Apache + PHP + MySQL в Ubuntu.

У поста есть спонсор (как им стать):

Речь пойдет об ответе сервера, вот и ссылка: ответ http сервера.

С уважением, Андрей Морковин.

Принципы создания хорошего сайта

До сих пор встречаются компании, которые создают сайты из принципа «раз у конкурентов есть, то и нам нужно». Веб-студии или веб-мастеру ставится задача просто создать сайт, «чтобы был». При этом владелец бизнеса не участвует в процессе, и специалисты создают сайт в рамках своей картины мира. А ведь это не их бизнес, и они не знают всех тонкостей дела. Получается сайт обо всем и ни о чем, который тратит время и деньги владельцев.

Давайте разберемся, что нужно сделать перед заказом сайта, во время его создания и после, чтобы получить на выходе работающий инструмент для бизнеса. Выделим следующие этапы создания сайта:

Шаг 1. Определяем цели

В первую очередь нужно определиться, для чего вам нужен сайт. От этого будет зависеть структура и наполнение ресурса, а также способы продвижения.

Изучите вашу аудиторию: кто ваши клиенты и как они ищут информацию о продукте или услуге. От этого и будет зависеть, какой сайт вам нужен. Если вы только начинаете бизнес, то посмотрите исследования из вашей сферы, чтобы понять общую картину. Для тех, у кого уже много клиентов в офлайне, рекомендуем провести опросы среди покупателей и сотрудников.

Для интернет-магазинов рекомендуем начать изучение e-commerce в целом, чтобы понимать кто и что заказывает в интернете. Пример диаграмм с сайта Shopolog (ссылка на полный материал):

И, конечно же, не забывайте о конкурентах, которые уже создали сайты. Изучите, как они привлекают клиентов, какие у них есть возможности или какие ошибки они допускают. Подробнее о конкурентном анализе мы писали ранее: часть 1 и часть 2.

Поняв, кто ваши клиенты, легче сформулировать цель сайта, которая может выглядеть, например, вот так:

1. Расширение охвата аудитории. Вы хотите выйти в другие регионы и расширить дилерскую сеть. Или вы узнали, что большинство клиентов ищут информацию в интернете и готовы заказывать онлайн. Понадобится полноценный сайт с информацией о всех продуктах и услугах компании.
2. Продвижение бренда. Ваша компания уже утвердилась на рынке, но неизвестна в интернете: в различных рейтингах, на страницах форумов или на информационных сайтах нет упоминаний о вас, только о конкурентах. Подойдет создание сайта-визитки, который будет повышать лояльность клиентов и помогать быстрее найти контакты компании.
3. Сокращение нагрузки на службу поддержки. После опроса сотрудников стало ясно, что клиентам не хватает информации о продукте, и создание некоего справочника позволило бы решить эту проблему. То есть тут нужен сайт с упором на информационный контент. Также такой сайт подойдет для обучения новых работников.
4. Повышение продаж определенного продукта. Тем, кто пока не готов запускать полноценный сайт или хотел бы «прощупать» аудиторию, стоит начать с лендинга (landing page) для одного товара или услуги.

Это лишь самые распространенные варианты, для ориентира.

Шаг 2. Выбираем домен и хостинг

Название сайта и хостинговую компанию лучше выбрать заранее. Подборка статей на данную тему:

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

И не стесняйтесь советоваться с разработчиками вашего сайта.

Шаг 3. Составляем техническое задание

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

1. Описание цели и назначения сайта, а также краткая информация о целевой аудитории (смотрите шаг 1). Чтобы разработчики сайта были с вами на одной волне и заодно помогли выбрать формат ресурса.
2. Требования к оформлению сайта. В общих чертах опишите, как вы представляете дизайн будущего ресурса, укажите желаемую цветовую гамму и, если есть, корпоративные цвета. Также в данном разделе нужно указать логотип или обозначить, каким он должен быть.
3. Список средств просмотра сайта. Перечислите браузеры и их версии, с которых сайт должен корректно отображаться, особенно если специфика бизнеса требует поддержки старых версий (например, для банковской сферы). И не забываем про оптимизацию под мобильные, чтобы ваш сайт выглядел аккуратно на любом устройстве.
4. Требования к системе управления контентом. Определите список основных возможностей для администратора сайта, например, добавление фотографий в портфолио или изменение текстов на страницах, создание новых разделов или изменение структуры и т. д.

   Посоветуйтесь с разработчиками, какую CMS лучше выбрать. Главный совет – не рекомендуем использовать самописные системы и конструкторы, особенно, если вы в дальнейшем не сможете их поддерживать самостоятельно. Рекомендуем ознакомиться с обзорами самых популярных систем и не подходящих для продвижения систем.

5. Описание структуры сайта. Продумайте основные разделы, основываясь на ваших товарах или услугах, и укажите, что примерно будет на страницах (или странице в случае с лендингом). Не забываем при планировании структуры учитывать запросы пользователей, чтобы сайт было легче продвинуть в поиске. Подробнее об этом в нашей книге.

Большинство агентств попросят вас заполнить бриф на разработку. Это и будет своего рода техническим заданием на сайт. Наш бриф вы можете посмотреть тут.

Будьте готовы ответить на все вопросы максимально подробно, от этого зависит качество проработки вашего сайта.

Шаг 4. Создание прототипов

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

Обязательно требуйте с исполнителей выполнение данного шага, потому что прототип помогает проверить, правильно ли вы друг друга поняли, а внесение правок до разработки обойдется гораздо дешевле. Пример прототипа Главной страницы:

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

Шаг 5. Написание текстов

После того как вы окончательно согласовали структуру вашего будущего сайта, необходимо подготовить тексты для основных страниц сайта:

1. Главная страница. Обязательно подготовьте данный текст до разработки сайта, чтобы увидеть, как он будет выглядеть рядом с другими блоками. Возможно информацию придется дополнить графическими элементами или разделить на части. О чем писать на Главной странице читайте здесь и как показать преимущества тут.
2. Страница услуги или карточка товара. Напишите текст для одной типовой страницы, чтобы затем по аналогии заполнить остальные. Инфографика о том, как создать эффективную карточку товара. Для текста об услуге рекомендуем также перейти по предыдущей ссылке и взять оттуда основные приемы.
3. Страница о компании. Аналогично Главной стоит подготовить текст заранее и продумать визуальные акценты. Подробнее о тексте для данной страницы.

При создании текстов помним о том, что они должны быть уникальными. Мы ранее писали о том, что такое уникальность и как защитить тексты от копирования для Яндекса и Google.

Еще тексты должны быть оптимизированными. Поэтому перед написанием текста необходимо составить список ключевых слов, или семантическое ядро (рекомендуем ознакомиться с нашей бесплатной книгой), которые затем нужно будет распределить по тексту. Также в тексте следует указать теги Title, Description и заголовки h2-h4. Подробнее об этом в данной статье.

Шаг 6. Дизайн

А вот теперь можно уже продумывать дизайн проекта. Многие по ошибке начинают с этого этапа, поэтому в итоге получаются красивые, но ненужные сайты.

Перед обращением к дизайнеру рекомендуем сделать мини-подборку сайтов, которые вам нравятся, но не забываем про особенности тематики бизнеса. Ориентируйтесь на конкурентов и ознакомьтесь с трендами в дизайне, чтобы продумать уникальный и современный дизайн.

Для тех, кто планирует или уже работает с зарубежными клиентами, рекомендуем зайти на сервис Behance, где собраны примеры работ со всего мира.

При выборе компании или фрилансера обязательно смотрите портфолио. Оно должно вам нравиться и, в идеале, содержать примеры из вашей тематики.

Шаг 7. Оптимизация

Мы уже упоминали про оптимизацию текстов, теперь перейдем к оптимизации всего сайта. Базовый список работ, который необходимо выполнить:

1. Составление карты релевантности. На основе собранного ранее семантического ядра создаем план распределения ключевых слов между страницами сайта. Подробный туториал на эту тему.
2. Регистрация сайта в Яндекс.Вебмастере и Google Search Console, чтобы настроить отображение информации о сайте для поисковых систем. О том, как правильно это сделать.
3. Добавление карты сайта (sitemap.xml), которая поможет ускорить индексацию сайта. Статья на эту тему.
4. Создание robots.txt. Файл с инструкциями для поисковых роботов, какие страницы нужно или не нужно индексировать. Инструкция по заполнению.
5. Настройка 404 страницы. Поможет перенаправить пользователей с пустых разделов на работающие страницы сайта. Подробнее по теме.
6. Подключение SSL-сертификата. Если на вашем сайте планируется личный кабинет и/или форма заказа, то обязательно прочтите данную статью.
7. Прописание тегов и метатегов. Необходимы, чтобы страницы привлекательно отображались в поиске. Учебное пособие на эту тему.

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

Шаг 8. Верстка сайта

На самом деле данный этап выполняется почти одновременно с предыдущим, но для облегчения восприятия информации выделим его в отдельный шаг.

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

Шаг 9. Наполнение контентом

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

1. Оставшиеся страницы услуг и карточки товара. Типовые варианты у вас уже есть.
2. Страницы портфолио. Выбирайте только реальные фотографии и оформляйте их в едином стиле, чтобы раздел выглядел презентабельно. Подробнее о том как подбирать и оптимизировать изображения.
3. Разделы типа «Блог» или «Новости». Разместите для начала несколько материалов (только если у вас не информационный портал), чтобы разделы не были пустыми. О том, как правильно писать статьи.

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

4. Страницы гарантий или условий доставки и оплаты. Обязательно заполните их перед запуском сайта, чтобы повысить доверие к сайту.
5. Страница контактов. Укажите как можно больше контактов для связи, чтобы клиент смог выбрать наиболее удобный.
6. Раздел отзывов. Не оставляйте данный раздел пустым. Если у вас уже есть клиенты, то попросите самых лояльных оставить свое мнение или прислать благодарственное письмо. Также рекомендуем всячески поощрять клиентов за отзывы, чтобы раздел регулярно пополнялся.

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

Шаг 10. Подключение веб-аналитики

Чтобы понимать, насколько эффективен ваш сайт и понятен ли он пользователям, необходимо установить счетчики веб-аналитики. Наиболее удобные и распространенные системы – Яндекс.Метрика и Google Analytics. Инструкцию по их установке вы можете найти здесь. Также рекомендуем посмотреть вебинар про основные отчеты, на которые стоит ориентироваться в Яндекс.Метрике.

Итоги

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

Если вы не знаете, кому доверить создание сайта, то можете обратиться к нам. Выполняем все работы под ключ, при разработке учитываем все нюансы для продвижения в ТОП. Подробнее об услуге.

Важные аспекты работы браузера для разработчиков. Часть 1 / DataArt corporate blog / Habr

Автор: Антон Реймер

Статья основана на вебинаре, который я проводил некоторое время назад. Рассчитана она, в первую очередь на тех, кто не знает, как работают браузеры, или тех, у кого есть пробелы в знаниях. Вероятно, здесь будет много очевидного для тех кто не первый день в веб-разработке. Статью я решил разделить на две части. В первой рассмотрим общие принципы работы браузера. Во второй части я акцентирую внимание на некоторых важных моментах: reflow и repaint, event loop.

Что такое браузер?

Браузер — программа, работающая в операционной системе. Большинство браузеров написано на языке C++. Основное предназначение браузера — воспроизводить контент с веб-ресурсов. В качестве веб-ресурса в большинстве случаев выступает html-страница. Это также может быть pdf-файл, png, jpeg, xml-файлы и другие типы. Среди огромного количества браузеров можно выделить самые популярные: Chrome, Safari, Firefox, Opera и Internet Explorer. Мы рассмотрим браузеры с открытым исходным кодом: Chrome, Firefox, Safari.

Из чего состоит и как работает браузер?

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

Пользовательский интерфейс — то, что видит перед собой пользователь, т. е. адресная строка, элементы навигации, собственное меню и т. д. Несмотря на то что пользовательские интерфейсы очень похожи друг на друга, никакого стандарта, который их описывал бы, не существует. Так исторически сложилось, что браузеры постепенно перенимали интерфейс друг у друга и становились все более похожими.

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

Модуль отображения. Этот модуль — самый важный для разработчиков. Работа разработчика, в первую очередь, происходит именно с ним, а как можно понять по названию — отвечает он за отображение информации на экране.

Когда мы говорим о браузерных движках, таких как Webkit или Gecko (первый находится «под капотом» у Safari и до 2013 года был у Chrome, второй у Firefox), в первую очередь имеем в виду модуль отображения. Далее мы подробно рассмотрим модуль отображения и более детально разберем, как он работает.

Следующий модуль — сетевые компоненты. Он отвечает за запросы по сети, берет данные с внешних ресурсов и взаимодействует с модулем отображения.

Модуль JS Interpreter отвечает за интерпретацию скрипта, и его выполнение. Существует несколько JS-движков. Самые известные это V8 и JavaScriptCore. Важно не путать движок браузера и JS-движок, который работает в модуле JS Interpreter.

Следующий модуль — исполнительная часть пользовательского интерфейса (UI backend). Она отвечает за отрисовку всего на экране и работу пользовательского интерфейса.

Последний модуль — хранилище данных. Браузеру нужно где-то хранить данные, обычно для этого используется оперативная память. Какие данные нужно хранить? Например, кэш, собственные настройки. Также к хранилищу данных можно отнести indexedDB, который появился в стандарте html5 — собственные базы данных браузера.

Модуль отображения

Модуль отображения получает данные от сетевого модуля. Данные поступают пакетами по 8 Кб. Что важно — модуль отображения не ждет, пока придут все данные, он начинает обрабатывать и выводить их на экран по мере поступления. В случае с html-страницами, он начинает их анализировать, происходит парсинг html (это отдельная большая тема, я на ней останавливаться не буду). Главное, что нужно понимать: в результате парсинга у нас появляется DOM-дерево. Также по окончании парсинга срабатывает событие load, которое можно обрабатывать в скрипте. Это значит, что документ готов и скрипт может с ним работать.

DOM-дерево — document object model. По большому счету, «интерфейс», который предоставляет браузер JS-движку для работы с тем или иным html-документом. На основе DOM-дерева происходит конструирование дерева отображения (render tree). Дерево отображения — тоже важная часть модуля отображения. По большому счету, два этих дерева — DOM-дерево и дерево отображения — наиболее важные элементы для разработчика. Дерево отображения во многом повторяет структуру DOM-дерева (далее будет пример, где это будет представлено нагляднее), но имеет некоторые отличия:

1. Дерево отображения не содержит скрытых элементов. Если у нас есть html-элемент, у которого прописан display:none, в дереве отображения он присутствовать не будет. При этом, если visibility:hidden, то в дереве отображения он будет. Некоторые DOM-узлы, которые в DOM-дереве представлены как единый узел, в дереве отображения могут быть представлены в виде нескольких. Яркий пример — составной тэг select. Если в DOM-дереве это один узел, в дереве отображение он преобразовывается в минимум три узла. Первый узел отвечает за отображение выбранного элемента. Второй — за выпадающий список с возможными пунктами. И, наконец, третий блок отвечает за стрелочку.
2. Текст в DOM-дереве представлен как простая node. DOM-дереву нет никакого дела до того, что там написано, сколько строк этот текст занимает. В то время, как для дерева отображения — это важно, и текст трансформируется в несколько узлов, в зависимости от того сколько строк он занимает. Это нагляднее рассмотрим чуть позже.

Дерево отображения служит для того, чтобы браузер понимал, что выводить на экран. Оно содержит информацию о том, из каких блоков состоит страница. Дальше в тексте для простоты я буду называть составные части дерева отображения прямоугольниками, чтобы не путать с html блоками.

Дерево отображения — совокупность прямоугольников, которая должна быть выведена на экране. После того как дерево отображения сконструировано, следует этап компоновки. На этом этапе всем прямоугольникам присваиваются размеры и координаты. Каждый прямоугольник получает свои ширину и высоту, координаты в окне браузера. После компоновки происходит отрисовка дерева отображения. Пользователь видит уже конечный результат. Модуль отображения в каждом браузере устроен по-своему, но схема работы схожая.

Предлагаю рассмотреть два браузерных движка: Webkit и Gecko.

Webkit. Модуль отображения получает html и стили. В результате парсинга html возникает DOM-дерево. В результате парсинга CSS возникает дерево правил таблиц стилей (Style Rules). Далее идет важный этап, который называется Attachment, можно перевести, как «совмещение». На этом этапе CSS-стили накладываются на DOM-дерево, в результате чего появляется Render Tree. После чего происходит компоновка дерева. Называется она здесь Layout. И в завершении происходит отрисовка (Painting).

Если посмотреть на Gecko, можно заметить, что схемы очень похожи. Главные отличия — в терминологии. Здесь тоже парсятся HTML, CSS. В результате чего создается DOM-дерево, которое здесь называется Content Model. Парсятся стили, образуется дерево стилей. Этап Attachment здесь называется Frame Constructor, но, по сути, это тоже самое. В результате совмещения образуется дерево отображения, здесь оно называется Frame Tree. Компоновка здесь называется Reflow. А отрисовка называется Painting, так же, как и в Webkit.

Для простоты приравняем некоторые термины:

• Attachment = Frame constructor = Совмещение
• Render Tree = Frame Tree = Дерево отображения
• Layout= Reflow = Компоновка

Пример

Здесь у нас есть теги:

<head>, <p>, есть <div style =” display: none”> и ещё один <div><img src>”…”/></div>

Модуль отображения строит DOM-дерево. В данном случае оно будет выглядеть следующим образом. Есть корневой элемент (он всегда присутствует), называется он documentElement и соответствует тегу html. В этом дереве присутствуют все теги. И заметим, что текст представлен, как [text node]. И DOM-дереву больше ничего о тексте знать не нужно. На основе этого DOM-дерева строится Render Tree.

Пример

Дерево отображения. У него также есть корневой элемент (RenderView), но уже можно увидеть отличия между DOM-деревом и деревом отображения. Во-первых, нет тега head, т. к. он не отображается на экране. Нет <div style =” display: none”>, есть только

 <div><img src>”…”/></div>

Текст в дереве отображения разделился на две строки и представляет собой два элемента: line 1 и line2. Как я писал выше, узлы дерева отображения мы будем называть прямоугольниками. Для наглядности я так и отобразил их на иллюстрации.

Пример

Каждый прямоугольник имеет своего «родителя», кроме корневого элемента root.

Модуль отображения также занимается обработкой скриптов.

Порядок обработки скриптов и таблиц стилей

Важно понимать порядок, в котором происходит обработка скриптов. Рассмотрим следующий пример, где я попытался продемонстрировать все возможные способы подключения скриптов и стилей.

<html>
<head>
<script src="script1.js"></script>
<script src="http://site.com/script3.js"></script>

<script defer src="script4.js"></script>
<script async src="script5.js"></script>

<link rel="style" src="style.css"></link>
</head>
<body>

...

<script src="script2.js"></script>

</body>
</html>

Скрипт 1. Первое, что нужно знать про скрипты, — когда при парсинге html анализатор встречает скрипт, он останавливает дальнейший парсинг документа. Т. е., как только анализатор дошел до скрипта 1, браузеру ничего неизвестно о том, что будет дальше. И пока скрипт 1 не выполнится, дальнейший анализ документа происходить не будет.

Но при этом браузер продолжает выполнять ориентировочный синтаксический анализ. Что это значит? Браузер все равно смотрит, что следует за скриптом. Если находятся ссылки на внешние ресурсы, которые нужно скачать и загрузить, он подгрузит эти данные, пока выполняется скрипт 1. Сделано это для оптимизации.

При этом скрипт 3 все равно не будет выполняться, пока не выполнится скрипт 1. К моменту, когда скрипт 1 уже выполнится, скрипт 3 уже может быть полностью загружен. Скрипты можно вставлять в теги head и body. Разница в том, что в скрипте 2, в отличии от скрипта 1, практически весь документ уже будет проанализирован.
У скрипта могут быть атрибуты, такие как defer и async. Они похожи, но у них есть отличия:

• Атрибут defer сообщает браузеру, чтобы тот не ждал окончания выполнения скрипта, а продолжал парсинг html-страницы. При этом скрипт 4 выполнится только после того, как весь html-документ будет проанализирован и построено DOM-дерево.
• Атрибут async тоже говорит браузеру, что дальнейший html-документ может быть проанализирован, пока скрипт выполняется. При этом он загружается в параллельном потоке и выполняется сразу после загрузки. Это означает, что он может быть выполнен раньше, чем скрипт1, если последний тоже имеет атрибут async. Т. е. порядок подключения в этом случае не соблюдается.

В случае с defer скрипт 4 всегда выполняется после скрипта 1. С атрибутом async неизвестно, когда он будет выполнен и какая часть документа уже будет проанализирована к этому моменту.

Стили, в отличие от скриптов, никак не могут повлиять на документ. Если скрипты могут добавить дополнительные узлы или теги, то стили этого сделать не могут. Поэтому никакой надобности для браузера блокировать дальнейший анализ документа нет.

При этом есть небольшой нюанс. Например, скрипт 1 может работать с теми или иными стилям, и может потребоваться доступ к ним. Т.е. если мы хотим поменять (или узнать) какие-то стили, но при выполнении скрипта 1 они ещё не подгружены — может случиться ошибка.

Браузеры стараются этот нюанс учесть. Firefox, например, если находит какие-то не подгруженные стили в процессе ориентировочного синтаксического анализа, блокирует выполнение скрипта, подгружает стили, после чего завершает выполнение скрипта. Chrome действует аналогичным образом, но чуть более оптимизировано. Он останавливает скрипт, только если понимает, что в этом скрипте происходит работа с не подгруженными стилями.

Компоновка окон

Окно = Прямоугольник = Узел дерева отображения

Способ компоновки окна определяется следующими факторами:

• Тип окна (свойство display).
• Схема позиционирования (свойства position и float).
• Размеры окна.
• Внешняя информация (размеры изображения, размер экрана).

Компоновка окон — это этап компоновки дерева отображения. Я думаю многим верстальщикам знакома эта схема, она называется “Box model”. Я не буду подробно на ней останавливаться.

При компоновке окон учитываются следующее факторы:

CSS-свойство display. Два основных типа — inline и block. Другие, такие как inline-block table и прочие, появились уже позже. Отличие в том, что display:block, указывает, что ширина прямоугольника будет вычисляться в зависимости от ширины «родителя». А display:inline указывает, что ширина прямоугольника будет вычисляться в зависимости от его содержимого. Если в элементе два слова, ширина прямоугольника будет равна ширине, необходимой для вывода этих слов. Inline-элементы выстраиваются друг за другом. А блочные элементы — друг под другом.

Следующее, что влияет на компоновку элемента, — свойства position и float. Position по умолчанию static, при этом прямоугольник идет в стандартном потоке компоновки. Также есть position:relative и position:absolute. Position:relative указывает, что прямоугольнику выделяется место в стандартном потоке компоновки. При этом позиция элемента может быть сдвинута относительно этого места: влево, вправо, вверх, вниз с помощью соответствующего свойства.

Абсолютное позиционирование, к которому относится position:absolute и position:fixed, указывает, что элемент выходит за пределы своего прямоугольника из общего потока компоновки. Остальные прямоугольники его не учитывают. Он также не учитывает соседние элементы. Координаты его вычисляются относительно корневого элемента страницы, либо относительно предка, у которого position не static. Размеры же вычисляются тоже относительно родителя. Также на позиционирование влияет свойство float. Оно указывает, что наш прямоугольник идет в стандартном потоке, но при этом занимает либо крайнюю левую, либо крайнюю правую позиции. При этом все остальные прямоугольники «обтекают» этот элемент.

В заключение этой части стоит сказать что, основной поток браузера представляет собой бесконечный цикл, поддерживающий рабочие процессы. Он ожидает отправки событий, таких как reflow и repaint. Эти события ему приходят от модуля отображения. Получив их, он выполняет соответствующие действия.

В Firefox модуль отображения работает в одном потоке. Он един на весь браузер. В Chrome все немного иначе: модуль отображения и поток выполнения у каждой вкладки свои.

Важно, что сетевой модуль работает в отдельных параллельных потоках, которые не связаны с модулем отображения. Следовательно, сетевой компонент может использовать ресурсы независимо от того, что происходит в модуле отображения. Обычно у такого компонента есть возможность работать одновременно с несколькими подключениями и подгружать сразу несколько файлов. В Firefox, например, может быть шесть параллельных потоков, с помощью которых можно подгружать контент, скрипты и т. д.

В следующей части мы детально рассмотрим события reflow и repaint и попытаемся понять как грамотная работа с ними может повысить скорость работы приложения.