06:44
1,0×
00:00/06:44
26,1 тыс смотрели · 3 года назад
7 месяцев назад
🚀 Советы по оптимизации кода для учета repaint и reflow 💎 Не стоит менять стили элемента непосредственно в коде. Лучше использовать CSS-классы для смены внешнего вида элемента. Также можно воспользоваться свойством cssText. // Плохо var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // Хорошо el.className += " theclassname"; // Хорошо el.style.cssText += "; left: " + left + "px; top: " + top + "px;"; 💎 Объединяйте манипуляции с DOM и выполняйте их отдельно от обновления DOM // Создаем временный фрагмент документа для добавления элементов const fragment = document.createDocumentFragment(); // Создаем и добавляем элементы во временный фрагмент for (let i = 0; i < 10; i++) { const newElement = document.createElement('div'); newElement.textContent = 'Элемент ' + i; fragment.appendChild(newElement); } // Добавляем временный фрагмент в DOM одним операцией document.getElementById('container').appendChild(fragment); 💎 Не запрашивайте вычисляемые стили слишком часто, из-за этого браузер делает reflow и repaint // Очень плохо for(big; loop; here) { el.style.left = el.offsetLeft + 10 + "px"; el.style.top = el.offsetTop + 10 + "px"; } // Очень хорошо var left = el.offsetLeft, top = el.offsetTop esty = el.style; for(big; loop; here) { left += 10; top += 10; esty.left = left + "px"; esty.top = top + "px"; } 💎 Подумайте о том, как много изменений вы вносите в структуру документа при его отображении. Если у вас большая вложенность и самый глубокий элемент изменил свои размеры, то и все родительские будут вынуждены сделать перекомпоновку, следовательно операция является труднозатратной. 👩‍🎨 Как-то так. Конечно, современные фреймворки/библиотеки следят за всем этим, но нам, как разработчикам, нужно понимать, что происходит под капотом браузера.
1 месяц назад
​​​​​​​​​​​Как изменить код страницы сайта Как изменить код страницы сайта без использования HTML теговИзменить код страницы сайта можно с помощью языка CSS. CSS (Cascading Style Sheets) используется для оформления и стилизации веб-страниц. Для начала работы с CSS необходимо создать новый файл стилей с расширением .css и подключить его к HTML документу.Для изменения цвета текста можно использовать следующий код: css body { color: red; } Для изменения размера текста: css p { font-size: 16px; } Чтобы добавить отступы вокруг элементов: css div { margin: 10px; padding: 5px; } Для изменения фона страницы: css body { background-color: #f2f2f2; } Чтобы изменить шрифт текста: css h1 { font-family: Arial, sans-serif; } Эти примеры демонстрируют базовые возможности CSS. Для более сложных стилей можно использовать комбинации свойств, селекторов и классов. При этом важно помнить о правильной организации файлов и подключении стилей к HTML странице.Изменение кода страницы сайта с помощью CSS позволяет значительно улучшить внешний вид и пользовательский опыт пользователей, делая сайт более привлекательным и профессиональным.