Если вам нравится играть с новыми функциями, которые могут быть недоступны во всех браузерах, вы наверняка уже попробовали Modernizr . Эта библиотека позволяет проверить, доступны ли нужные вам функции или нет. Поскольку Modernizr добавляет некоторые классы CSS к элементу htmlhead
Этот подход был тем, что разработчики Modernizr сами рекомендовали в начале. Проблема в том, что он не совместим с ответственным подходом, который мы все должны иметь. Вот почему Пол Ирриш, один из разработчиков проекта, поделился своими мыслями о том, как Модернизр должен быть включен . Эти мысли вдохновили эту статью. В нем мы поговорим о том, почему мы должны принять ответственный подход, когда мы хотим использовать Modernizr. Затем мы увидим некоторые способы применения этого подхода на практике, когда это возможно.
Зачем заботиться о том, как включен Modernizr
Полезность ответственного подхода можно возобновить одним вопросом: вам нравится ждать несколько секунд, чтобы получить доступ к веб-странице? Конечно, нет, и ваши посетители тоже ненавидят это. Поэтому, если они долго ждут отображения страницы, они не вернутся. И я уверен, что ты этого не хочешь. Мы все любим необычные функции, но не слишком ли сильно они замедляют работу нашего сайта. Хорошей новостью является то, что вы все еще можете сохранить свои модные функции, даже с ответственным подходом. Разница в том, что вы не будете загружать их одинаково.
Давайте обсудим конкретный пример файла JavaScript. Во многих случаях мы ждем загрузки страницы перед выполнением скрипта. В этих случаях включение скрипта в элемент head Проблема в том, что если ваш скрипт включен в head Это означает, что если ваш скрипт имеет большой размер, ваши посетители должны подождать, пока скрипт не загрузится, прежде чем они смогут увидеть страницу.
Modernizr был разработан, чтобы определить, можете ли вы использовать некоторые недавние функции, такие как CSS-переходы или преобразования, на веб-странице. За исключением некоторых особых случаев, вам не нужны эти функции для отображения чего-либо на экране пользователя. Есть сценарии, которые должны быть включены в тег head Модернизр не исключение. В большинстве случаев вам не нужно включать его в headbody
Прежде чем двигаться дальше, я хотел бы уточнить один момент: если загрузка веб-страницы с использованием Modernizr занимает много времени, в том числе этой ответственной библиотеки будет недостаточно для повышения производительности. Ответственный подход означает, что вы должны думать об этом каждый раз, когда хотите включить файл JavaScript или другие потенциально большие ресурсы. Если вы оптимизируете способ включения одного ресурса, вам не нужно будет видеть большую разницу. Однако, если вы оптимизируете то, как вы включаете все свои ресурсы, разница может быть огромной.
Как я уже говорил, есть случаи, когда вы должны включить Modernizr в head Это зависит от вашего проекта и ваших потребностей, о которых я расскажу далее.
Определите свои потребности
Определение ваших потребностей — это первое, что вы должны сделать, прежде чем включать Modernizr. С помощью этой библиотеки вы можете протестировать много разных вещей, но, вероятно, вашему проекту не нужны все эти тесты. Если вы зайдете на эту страницу, вы увидите, что Modernizr дает нам возможность создать собственную версию библиотеки, настроенную только на основе необходимых тестов. Сгенерированный файл будет меньше по размеру, чем полная версия библиотеки, поэтому его загрузка займет меньше времени.
Зачастую вы не знаете заранее, какие функции понадобятся после публикации проекта. Создание новой сборки при каждом добавлении функции — не очень привлекательный вариант. Возможным решением является разработка вашего проекта с полной версией и создание собственной сборки только после публикации проекта. Гораздо лучший подход — использовать инструмент автоматизации, такой как grunt-modernizr, который сканирует ваши файлы CSS и JavaScript, чтобы найти все функции, которые вы используете. После этого будет создана соответствующая сборка Modernizr.
Используя grunt-modernizr вместо создания собственной версии самостоятельно, вы гарантируете, что случайно не включите бесполезную функцию. Например, вам может понадобиться тест в данный момент, но затем избавиться от него, не удаляя тест из пользовательской сборки Modernizr. Имейте в виду, что grunt-modernizr не заменит вас, когда вы решите, действительно ли тест или функция, которую вы используете в своем проекте, действительно полезна или нет. Таким образом, для каждого возможного теста Modernizr вы должны спросить себя, действительно ли вам нужен этот тест или нет.
Например, в библиотеке есть тест, чтобы определить, поддерживается ли браузером text-shadow Вы можете подумать, что знание этой информации полезно, чтобы не применять свойство, если оно не поддерживается. Однако, если браузер не поддерживает функцию CSS, он не остановит или не сломает веб-сайт, свойство будет просто проигнорировано. Поэтому вы должны подумать, если это большой для вашего сайта, если тень не отображается. Возможно, ваши тени добавят интересный эффект, и в этом случае не имеет значения, не может ли посетитель его увидеть. Расширенные возможности предназначены для пользователей, которые обновляют свои браузеры, но ваш веб-сайт может выжить без тени текста. Вывод таков: проверка, доступна ли эта функция или нет, может оказаться бесполезной.
В некоторых случаях вы хотите добавить тень текста, чтобы улучшить читаемость текста. Если это так, вы должны иметь запасной вариант для браузеров, которые не поддерживают эту функцию, поэтому вам необходимо выполнить тест. Но необходимость этого теста также зависит от типа запасного варианта, который вы хотите использовать. В CSS есть некоторый запасной вариант, который вообще не нуждается в тестировании. В заключение, тщательно продумайте свои потребности, прежде чем принимать решение.
Аналогичное обсуждение может быть сделано для html5shiv, который позволяет поддерживать элементы HTML5 в более старых версиях Internet Explorer. Modernizr может включить это для вас, но должно ли оно быть у вас? Если ваш веб-сайт не поддерживает более старые версии Internet Explorer, обеспечение возможности стилизовать элементы HTML5 в этих браузерах бесполезно, поэтому вам не нужен html5shiv. Лично я считаю ошибкой не поддерживать некоторые браузеры. Не очень сложно иметь работающий веб-сайт для некоторых старых версий Internet Explorer. В заключение, вы должны использовать html5shiv, но не обязательно через Modernizr. Следуя ответственному подходу, мы часто включаем этот shiv во встроенный тег scripthead
Подводя итог, обязательно выберите тесты, которые вам действительно нужны. Некоторые тесты часто можно забыть, а резервные CSS не всегда нуждаются в Modernizr для работы.
Некоторые функции могут подождать
Мы все научились писать наши сценарии в отдельных файлах, объединять и минимизировать их, а также ссылаться на минимизированный файл в HTML-коде. Преимущества многочисленны: от возможности включения сценария на нескольких страницах до кэша браузера, который можно использовать для ускорения загрузки при последующих посещениях. scripthead Более того, размещение его в нижней части HTML-кода имеет несколько преимуществ. Например, файл не будет загружен, пока другие элементы не будут проанализированы. Даже если ваш скрипт большой, он не помешает вашим пользователям видеть страницу. Затем ваш скрипт будет загружен, и улучшенный опыт начнется.
Здесь я обсуждаю скрипт, который может дождаться загрузки конца страницы. Точно так же большинство функций Modernizr могут подождать. Мы создаем расширенный опыт, доступный, как только базовый станет доступен. Дух ответственного подхода заключается в том, что пользователь хочет видеть контент вашего веб-сайта, и он хочет видеть его быстро. Хорошая среда вокруг контента всегда лучше, но только при наличии информации. Вот почему мы загружаем скрипт, чтобы улучшить работу внизу страницы.
Сказал, что есть еще некоторые возможности Modernizr, которые мы должны включить в head Для поддержки элементов HTML5 в старых версиях Internet Explorer этот файл должен быть загружен до просмотра первого элемента HTML5. Это означает, что вы просто не можете отложить его загрузку, но вы все равно можете улучшить способ его включения. Например, вы можете включить html5shiv, только если браузер нуждается в условном комментарии. Другим примером является то, что вы можете напрямую включить (встроенный) этот файл в код HTML, без внешнего файла. Кеш не будет доступен, но шив не такой большой. Преимущество отказа от использования внешнего файла состоит в том, что вы избегаете HTTP-запроса.
Чтобы определить, нужно ли вам включать Modernizr в head Для всех тестов, которые вы используете, вы должны учитывать, будет ли веб-страница повреждена, если тесты будут выполнены после отображения страницы. Мы всегда можем обеспечить резервное поведение, а затем, после добавления правильного класса в тег html Для вас важно понять, является ли изменение большим или нет. Фактически, вы можете потерять своих пользователей, если некоторые блоки переместятся после загрузки страницы. Если изменение большое, возможно, вам следует включить Modernizr в head Но, прежде, посмотрите, возможно ли сделать изменение менее заметным с лучшим резервным поведением.
Как насчет эффективности?
Мы хотим загрузить Modernizr внизу страницы, чтобы улучшить время загрузки. Однако, как говорит Пол Ирриш , многие из тестов Modernizr (особенно тесты CSS) вызывают перекомпоновки
. С помощью этих тестов браузеру, возможно, придется пересчитать некоторые стили. Учитывая сложность дерева DOM и стилей, уже имеющихся в документе, эти пересчеты могут занять больше или меньше времени. Если библиотека включена в head Если body
На этом этапе вы должны принять важное решение: может ли время, потраченное на загрузку Modernizr внизу страницы, быть полностью потеряно из-за времени выполнения? К сожалению, сложно дать универсальный ответ, и все зависит от вашего конкретного случая. Учитывая сложность вашего DOM-дерева, тесты могут быть быстрыми или нет, поэтому проведите несколько тестов, чтобы узнать, сколько времени в вашем случае требуется для выполнения Modernizr. Имейте в виду, что время может сильно различаться в зависимости от браузеров и версий, которые вы тестируете.
Разговор об эффективности Modernizr — это еще один повод, чтобы еще раз упомянуть пользовательскую сборку, которую вы можете создать. Выбрав только те тесты, которые вам нужны, бесполезные тесты не будут выполняться, и если они влияют на дерево DOM, это экономит время!
Выводы
Благодаря этой статье вы должны лучше понимать Modernizr и то, как вы должны включить его в свои страницы. Мы обсудили случаи, в которых вы можете включить его внизу страницы и другие, где это должно быть в head Независимо от того, что является решением в вашем случае, всегда старайтесь обеспечить хороший опыт для тех из ваших пользователей, которые имеют медленное подключение к Интернету, включив только те функции, которые вам нужны.
В этой статье я говорил о Modernizr, но эта библиотека не единственная, которая может извлечь выгоду из ответственного подхода. Например, если учесть, что jQuery используется для воздействия на дерево DOM, а сценарии, использующие jQuery, часто выполняются, когда весь документ готов, почему все же включить его в тег head
Ответственное развитие — это не просто модный термин. Это подход, которому мы должны следовать как можно больше. Как следует из его названия, довольно безответственно принудительно загружать ненужные данные.