SECL 1 дек 2016 в 10:59

9 способов оптимизации производительности Front-End

10 мин

27K

JavaScript * Высоконагруженные системы * Клиентская оптимизация * Программирование * Веб-разработка *

Туториал

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

bromzh 1 дек 2016 в 11:42

Очень много вредных и неактуальных советов. Например:

Для анимации в старых IE лучше взять GSAP, так как он намного быстрее стандартных реализаций анимаций в jquery, и умеет с ним интегрироваться.
Картинки в base64 не кэшируются, да ещё и увеличивают вес (а значит и скорость парсинга) html. Плюс не стоит забывать, что если картинка грузится отдельным запросом, она не блочит загрузку всей страницы, а вот инлайн блочит. В итоге, крайне велика вероятность увеличения времени загрузки (см. http://stackoverflow.com/a/23779501/3288260 ). Так что использовать это стоит только для маленьких изображений, с умом и осторожностью.

Создавать элементы путём конкатенации строк, особенно без encode/sanitize, крайне опасно:

let ajaxResult = ['1</ul>', '2']
let div = document.createElement('div');
div.innerHTML = '<ul>' + ajaxResult.map(e => '<li>' + e + '</li>').join('') + '</ul>';
document.body.appendChild(div);

VasiliyIsaichkin 1 дек 2016 в 11:42

Мне одному кажется что этот текст опоздал лет на 5? Особенно усиливается ощущение при чтении части 6

SECL 1 дек 2016 в 12:29

В том, что нужно бороться с осликом 8? Чем больше проект, тем больше браузеров приходится поддерживать. Это ж очевидно. Маленьким неоправданно тратиться на такие вещи. Мы и сами в большинстве проектов не поддерживаем ИЕ 8, но несколько крупных клиентов требуют это делать все равно.

Odrin 1 дек 2016 в 12:42

translate3d (0, 0, 0) ускоряет анимацию

Не надо давать таких советов. Это было актуально 3 года назад, но точно не сейчас. Бесполезное захламление кода.

SECL 1 дек 2016 в 13:18

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

Tanner 1 дек 2016 в 13:22

DocumentFragement является так званым «мини-родителем»
API-интерфейсы по типу Web хранилищ стали огромным усилением и упрощением работы
XMLHttpRequest (объект, который разрешен для AJAX)
Проанализируйте свои сайты на предмет материала, который не является динамичным

На каком языке это вообще написано? Я обычно сообщаю авторам в ЛС об ошибках и опечатках, но это просто пирдуха.

Cryvage 1 дек 2016 в 14:17

По аккуратней с innerHTML. Лично я бы вообще воздержался от его использования. С давних пор следую правилу: в пределах одного проекта, мы работаем с HTML елементами либо как с текстом, либо как с объектами. Но ни в коем случае не смешивая оба подхода. А поскольку в серьезном проекте одним только первым способом не обойтись, то он, как бы, отпадает.
Вот пример возможных проблем:

Код

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src = "jquery.js"></script>
</head>
<body>
    <div id = "test_div">Test</div>
    <script type="text/javascript">
        $("#test_div").on("click",function(){
            $("body")[0].innerHTML += "<div>One more test</div>";//сработает только первый раз
        });
        $("#test_div").attr("onclick","$('body')[0].innerHTML += '<div>And more</div>';"); //продолжит работать, но вряд ли вы захотите работать с событиями, как с аттрибутами
    </script>
</body>
</html>

Подсказка

Всй дело в «innerHTML +=»

Да и по безопасности он не лучше eval(). Ведь в строке, которую вы вставляете как innerHTML, вполне может быть тег script.

andreymal 1 дек 2016 в 17:44

В innerHTML скрипты блокируются. Впрочем, другие способы напакостить всё равно остаются

Cryvage 2 дек 2016 в 07:06

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

Например так

document.body.innerHTML += "<img style='display:none;visibility:hidden' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY/j//z8ABf4C/qc1gYQAAAAASUVORK5CYII=' onload='var s=document.createElement(\"script\");s.src=\"something_very_bad.js\";this.parentNode.appendChild(s);this.parentNode.removeChild(this);' />";

В принципе, тут и вставка тега script уже не нужна, можно всё написать прямо в onload. Но это не очень удобно.

НЛО прилетело и опубликовало эту надпись здесь

RubaXa 1 дек 2016 в 20:31

Ба, да это же, Жан-Жак Свежак!

SECL 1 дек 2016 в 22:23

В начале поста я об этом писал, второй абзац.

НЛО прилетело и опубликовало эту надпись здесь

A3a 1 дек 2016 в 22:43

Вот тут советов побольше, а на русском есть перевод и на хабре.

barney 2 дек 2016 в 12:38

Через css медиа запросы фоном подгружать разные картинки на разных разрешениях: повернул телефон в руке и ждем пока подгрузятся новые картинки. Сомнительный совет.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий