Примечание: ниже находится перевод заметки Steve Souders Using Iframes Sparingly, в которой автор рассуждает о плюсах и минусах фреймов с точки зрения производительности. Мои комментарии далее курсивом.
Эта заметка является частью моей новой книги Even Faster Web Sites. Предыдущие заметки в этой серии включают: chapters and contributing authors, Splitting the Initial Payload, Загружаем скрипты без блокировки, Стыкуем асинхронные скрипты, Размещаем внутренние скрипты, Балансируем основной домен и Быстро сбрасываем документ.
Время, уходящее на создание 100 элементов
Фреймы (iframes) позволяет относительно легко разместить произвольное содержание с одного сайта в другом. Но использовать их стоит с большой осторожностью. Они на 1-2 порядка «тяжелее» других DOM-элементов в плане создания, включая скрипты и таблицы стилей (и это неудивительно: браузеру фактически нужно создать целый документ внутри другого документа). Выше приведен график времени уходящего на создания 100 элементов разных типов, на нем прекрасно это видно (также вопрос ресурсоемкости создания документа отражен в данной статье).
На тех страницах, где есть фреймы, их обычно немного, поэтому проблема времени создания DOM-Элемента не столь критична. Гораздо важнее влияние фреймов на событие onload и распределение свободных соединений для загрузки.
OnloadОчень важно вызвать событие onload у объекта window как можно раньше. Это позволяет остановить индикаторы загрузки в браузерах и дает пользователю понять, что загрузка страницы закончилась. Если событие onload по какой-то причине задерживается, это ухудшает пользовательское восприятие и создает иллюзию того, что страница загружается медленнее.
Событие onload у window не сработает до тех пор, пока все вложенные фреймы (и все ресурсы этих фреймов) не будут полностью загружены. В Safari и Chrome выставляя src динамически через JavaScript, мы предотвращаем это блокирующее поведение.
У браузеров имеется в наличии довольно небольшое число доступных соединений с заданным веб-сервером, которые можно использовать для загрузки страницы. Старые браузеры, включая Internet Explorer 6 & 7 и Firefox 2, используют только 2 соединения к 1 хосту. В более новых браузерах это число увеличено. Safari 3+ и Opera 9+ открывают 4 соединения к одному хосту, при этом Chrome 1+, IE 8 и Firefox 3 — уже 6. Полную таблицу свойств браузеров можно посмотреть в Обзоре параллельных соединений.
Можно конечно предположить, что каждый фрейм имеет свои собственные соединения, но это не так. Во всех ведущих браузерах соединения распределяются между основной страницей и ее фреймами. Это означает, что вполне может сложиться такая ситуация, что загрузка ресурсов во фреймах может заблокировать загрузку основной страницы. Если содержимое фреймов так же или более важно, чем на основной странице, то это замечательно. Однако если содержимое фрейма не так важно для страницы (что случается гораздо чаще), то происходит нежелательный перехват управления соединениями со стороны фрейма. Одним из методов борьбы с данным явлением является выставление src у фреймов динамически, после того как наиболее приоритетные ресурсы на странице загружены.
5 из 10 наиболее популярных сайтов в штатах используют фреймы. В большинстве случаев они используются для отображения рекламы (Google AdWords также показывается во фреймах). Это не очень правильное, но вполне логичное решение, которое позволяет с легкостью вставлять материалы с сервера рекламы (также данная ситуация частично рассматривается в статье Принципы ненавязчивой рекламы). Но стоит иметь в виду, что все это оказывает существенное влияние на производительность вашей странице. И постарайтесь избежать фреймов во всех случаях, когда они могут не использоваться.