9

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

Ситуация 1. Есть 2 js и 2 css файла. Как можно сделать, чтобы грузился только js #1 и css #1, в зависимости от screen.width например?

Ситуация 2. В dom есть элементы с классом .only-desktop, в которых находятся изображения. Какой наиболее быстрый и правильный способ предотвратить загрузку изображений в .only-desktop?

4 ответа 4

14
+100

Здесь официальное руководство от google, с примерами.

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

Сложные правила для media queries становятся сильно проще, если использовать какой-либо препроцессор стилей и миксины

Пример для раздельных Javascript с помощью enquire:

<script type="text/javascript">

   enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
      match : function() {
        require.ensure(['tablet.js'], function (reqiure) { require('tablet.js')});
      } 
   }).listen();


   enquire.register("screen and (min-width: 900px)", {
       match : function() {
          require.ensure(['desktop.js'], function(require) { require('desktop.js')});
       }
   }).listen();

</script>

Этот пример подразумевает, что вы используете require или webpack, поддерживающие сборку догружаемых модулей. Конечно, вы можете использовать любой доступный способ инжекции скриптов и ресурсов.

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

  1. Согласно этому исследованию, самым эффективным путём запрета загрузки изображений является каскадная перезапись свойства посредством @media queries
8

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

Подгружать css в зависимости от разрешения, можно указав атрибут media в теге link

<link rel="stylesheet" 
      media="screen and (min-width: 601px)" 
      href="device.css">

Для JavaScript можно использовать такой хак

<script>
if (screen.width < 601) {
  document.getElementsByTagName("HEAD").item(0).innerHTML+= '<script type="text/javascript" src="device.js"><\/script>';
}
</script>

Вы писали про modernizr.js, посмотрите на yepnopejs с помощью него, вы сможете загружать необходимые вам стили и js файлы в зависимости от условий.

Чтобы изображения не загружались сразу, используйте атрибут fake-src и туда пишите url для фото, потом с помощью JS подставлять url изображения из fake-src в src.

2
  • Спасибо. К сожалению, иногда необходимо переделывать фронтэнд без возможности изменений серверной стороны, поэтому ищу лучшее решение. Добавлю данный момент в вопрос чтобы было понятнее. Поскольку срок окончания конкурсного вопроса через 7 дней, жду еще варианты, возможно будет ещё что-то интересное. 8 сен 2015 в 20:56
  • Ответ выше - действительно набор костылей, как и признался автор. Есть нормальные практики, как разделять код для любых целей. Преждевременной оптимизацией вопрос не является, это наоборот очень распространённый кейс. 9 сен 2015 в 7:18
1

Вы можете выставить media queries для загрузки файлов в зависимости от разрешения экрана (Ситуация 1) или для загрузки классов внутри файла стилей (Ситуация 2). Или я не правильно понял ваш вопрос?

3
  • 1
    Я ищу лучшее решение условного загрузчика js и css скриптов. Как Modernizr, только ориентированный на работу с адаптивным дизайном. Возможно это библиотека / скрипты / хаки / метод организации кода фронтенда. 5 сен 2015 в 15:19
  • Насколько я знаю, браузер учтёт это в каком-то виде, но всё равно загрузит все стили.
    – Qwertiy
    8 сен 2015 в 17:32
  • ниже со ссылками про готовые решения 9 сен 2015 в 0:26
0

добавляейте атрибуты async или defer в зависимости от того что нужно

1
  • 2
    Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение. 4 сен 2015 в 22:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.