RSS

Прокоментируй статью, хотя бы пару слов!

Комментарии:

  • #1

    Roman F

    11.06.2014 22:27:26

    Меня в последнее время стали удручать новости о принятии той или иной крутой штуки в html5. Ну да, круто. Ну да, производительность. Но да, рано радуемся. Старые браузеры как жили, так и живут. Как с ними быть? Поддержка новых возможностей html5 в старых браузерах оборачивается дополнительными библиотеками и требует определённой сноровки. И если не отобразится векторная картинка в каком нибудь реликтовом хр, то вроде и ладно, но если отвалится добрая половина js функционала, то это уже страшно. Рано это всё. Скрипты за футер!

  • #2avatar

    Елена Лунная

    11.06.2014 23:30:55

    Вместо того чтобы выносить скрипты за футер - достаточно указать атрибут defer. Эффект будет тот же самый, при этом загрузка будет параллельна. Defer работает начиная с ie6, она несколько хромает но работает.
    Но на самом деле современные браузеры достаточно умны и на всякий случай параллельно подгружают все ресурсы в head (проверьте современные фф или хром).
    Единственной современной фишкой является атрибут async - вводя его вы говорите браузеру "Этот скрипт не влияет на все другие скрипты и не блокирует рендеринг страницы". Для старых браузеров вы можете всё также использовать defer. По спецификации их можно писать одновременно "async defer" - старые браузеры не поймут новый атрибут и будут использовать defer, для новых главным является async.
    В общем статьи я пишу медленно, так что ждите следующую =)

  • #3

    Roman F

    14.06.2014 00:04:30

    Да, вы оказались правы.Начал писать гневное опровержение вашего комментария с примерами и понял, что ничего не понял. Особенно после: "Этот скрипт не влияет на все другие скрипты и не блокирует рендеринг страницы".
    На самом деле всё оказалось проще чем я предполагал. Большое спасибо за комментарий.

  • #4avatar

    Елена Лунная

    14.06.2014 04:55:21

    Вам спасибо за подтверждение моих слов. =)
    Статья которую я пишу будет называться "Думайте своей головой". Она как раз про то что всякие советы следует проверять на личном опыте.
    Например если вы заметили - вторая из ссылок - PageSpeed Insights
    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdevelopers.google.com%2Fspeed%2Fdocs%2Finsights%2FOptimizeImages - ведёт на сервис анализатор оптимизации страницы от Гугла.
    Гугл советует "Подгружайте скрипты в конце body чтобы они не блокировали отрисовку других страниц". Проверим их анализатором их же страницу с советами. Что мы видим? "Удалите из верхней части страницы код JavaScript и CSS". Гугл нарушает свои же правила =). Не секрет и в том что основные страницы гугла часто содержат inline стили и скрипты. А дело в том что все советы даны из расчёта "В общем случае так будет лучше".
    Верстальщик гугла справедливо понял 2 вещи:
    1) Размещая скрипты и стили как можно выше на странице (в head) повышается приоритет их загрузки. При этом при желании мы можем сделать их асинхронными, все от этого только выйграют. Событие paint с применёнными стилями запустится быстрее.
    2) После первого посещения страницы браузер с большОй долей вероятности будет брать скрипты из кэша, или на худой конец запрашивать "If-not-modified". Значит в случае с размещением в head, ресурсы будут применены сразу же, и страница будет рендерится уже со стилями (и скриптами). А в случае с размещением в конце страницы пользователь может сначала увидеть страницу без стилей, что опечалит его.
    Другими словами не надо боятся нарушать правила и эксперементировать.

    Это относится и к программированию. В яваскриптах "хорошим тоном" считается оформление функций через присваивание анонимной функции переменной:
    var myfunc=function(){};
    Он трактуется как "более элегантный" против обычного метода:
    function myfunc(){}
    Возможен и совмещённый вариант:
    var myfunc=function myfunc(){};

    Результат всех трёх вариантов одинаков (ну, по крайней мере в strict режиме, а так конечно есть разница). Угадайте какой способ создания функций работает быстрее? =)

    Или например очень многие советуют вместо parseInt использовать ~~ оператор, т.к. он выполняется в сто тыщ раз быстрее. Но Вечеслав Егоров  https://www.youtube.com/watch?v=65-RbBwZQdU как бы говорит нам что это не так =)


Чтобы оставить комментарий нужно войти или зарегистрироваться (Регистрируйтесь за 5 секунд, без подтверждения email и т.п.).
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID
Подпишитесь на статьи через RSS

15 самых популярных статей: