Comments 15
Очень много вредных и неактуальных советов. Например:
- Для анимации в старых 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);
+8
Мне одному кажется что этот текст опоздал лет на 5? Особенно усиливается ощущение при чтении части 6
+11
В том, что нужно бороться с осликом 8? Чем больше проект, тем больше браузеров приходится поддерживать. Это ж очевидно. Маленьким неоправданно тратиться на такие вещи. Мы и сами в большинстве проектов не поддерживаем ИЕ 8, но несколько крупных клиентов требуют это делать все равно.
-5
translate3d (0, 0, 0) ускоряет анимацию
Не надо давать таких советов. Это было актуально 3 года назад, но точно не сейчас. Бесполезное захламление кода.
+1
DocumentFragement является так званым «мини-родителем»
API-интерфейсы по типу Web хранилищ стали огромным усилением и упрощением работы
XMLHttpRequest (объект, который разрешен для AJAX)
Проанализируйте свои сайты на предмет материала, который не является динамичным
На каком языке это вообще написано? Я обычно сообщаю авторам в ЛС об ошибках и опечатках, но это просто пирдуха.
+4
По аккуратней с innerHTML. Лично я бы вообще воздержался от его использования. С давних пор следую правилу: в пределах одного проекта, мы работаем с HTML елементами либо как с текстом, либо как с объектами. Но ни в коем случае не смешивая оба подхода. А поскольку в серьезном проекте одним только первым способом не обойтись, то он, как бы, отпадает.
Вот пример возможных проблем:
Да и по безопасности он не лучше eval(). Ведь в строке, которую вы вставляете как innerHTML, вполне может быть тег script.
Вот пример возможных проблем:
Код
<!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.
0
В innerHTML скрипты блокируются. Впрочем, другие способы напакостить всё равно остаются
0
Не знал, что они блокируются. В теории всегда думал что работает, а на практике как-то не приходилось таким заниматься. Век живи, век учись. Впрочем, пропихнуть абсолютно любой скрипт через innerHTML всё равно можно.
Например так
В принципе, тут и вставка тега script уже не нужна, можно всё написать прямо в onload. Но это не очень удобно.
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. Но это не очень удобно.
0
UFO just landed and posted this here
Через css медиа запросы фоном подгружать разные картинки на разных разрешениях: повернул телефон в руке и ждем пока подгрузятся новые картинки. Сомнительный совет.
0
Sign up to leave a comment.
9 способов оптимизации производительности Front-End