Главная страница>Учебник по веб-дизайну>Учебник по HTML

Краткое обсуждение основных правил оптимизации производительности веб-страниц.

Автор：Eve Cole Время обновления：2025-03-12 06:32:01

Некоторые правила оптимизации веб-страниц браузера

Оптимизация страницы

Статическое сжатие ресурсов

Используйте инструменты разработки (webpack, gulp) для надлежащего сжатия статических ресурсов веб-страницы, таких как изображения, сценарии и стили.

Изображения спрайтов CSS, встроенные изображения base64

Объедините маленькие значки на сайте в одно изображение, используйте CSS для позиционирования и захвата соответствующих значков, используйте соответствующие встроенные изображения;

Стили вверху, скрипты внизу.

Страница представляет собой пошаговый процесс рендеринга. Прикрепление стиля к верху может быстрее представить страницу пользователю; прикрепление тега <script> к верху заблокирует загрузку ресурсов, находящихся за страницей.

Используйте css и js внешних ссылок

Несколько страниц ссылаются на общедоступные статические ресурсы, а повторное использование ресурсов уменьшает количество дополнительных HTTP-запросов.

Избегайте изображений с пустым src

Избегайте ненужных http-запросов. 

 <!-- Изображения с пустым src по-прежнему будут инициировать http-запросы --><img src= style="margin: 0px; Padding: 0px; Outline: none; Line-Height: 25.2px; Font-size: 14px; Width: 660px; переполнение: скрыто; ясно: оба; семейство шрифтов: tahoma, arial, Microsoft YaHei;"> 
 <!-- Фактический размер изображения — 600x300, который масштабируется до 200x100 в HTML --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; контур: нет; высота строки: 25,2 пикселей; ширина шрифта: 660 пикселей; скрыто; ясно: оба; семейство шрифтов: tahoma, arial, Microsoft YaHei;"> 
 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Документ</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>
 В этом примере файлы css и js предварительно загружены, и они будут вызываться сразу же после использования при последующих рендерингах страниц.
 Вы можете указать тип загрузки различных типов ресурсов. 
  1.  стиль
  2.  сценарий
  3.  видео
  4.  аудио
  5.  изображение
  6.  шрифт
  7.  документ
  8.  ...
 Этот метод также может предварительно загружать ресурсы между доменами, установив атрибут crossorigin. 
 <link rel=preload href=fonts/cicle_fina-webfont.woff2 as=тип шрифта=font/woff2 crossorigin=anonymous>
 CSS
 селектор
 Приоритет селекторов от высокого к низкому: 
  1.  Селектор идентификатора
  2.  селектор класса
  3.  селектор тегов
  4.  соседний селектор 
 h1 + p {маржа-верх: 15 пикселей};
 Выбирает абзац, который появляется сразу после элемента h1. Элементы h1 и p имеют общий родительский элемент.
 дочерний селектор 
 h1 > сильный {цвет: красный;}
 селектор потомков 
 h1 em {цвет:красный;}
 селектор подстановочных знаков
 селектор атрибутов 
 *[title] {color:red;}img[alt] {граница: 5 пикселей, сплошной красный;}
 Селектор псевдоклассов
 Опыт использования селектора: 
  1.  Расставьте приоритеты селекторов классов, которые могут заменить многослойные селекторы меток;
  2.  Используйте инструмент выбора идентификатора с осторожностью. Хотя он эффективен, он уникален на странице и не способствует совместной работе и обслуживанию;
  3.  Разумно используйте наследование селекторов;
  4.  Избегайте выражений CSS.
 Уменьшите уровень селекторов
 В зависимости от приоритета предыдущего селектора следует стараться избегать нескольких уровней вложенности селекторов, желательно не более 3 уровней. 
 .container .text .logo{ цвет: красный }/*Изменить на*/.container .text-logo{ цвет: красный };
 Оптимизируйте файлы стилей страниц и удалите неиспользуемые стили.
 Браузер будет выполнять избыточное сопоставление стилей, что повлияет на время рендеринга. Кроме того, слишком большие файлы стилей также повлияют на скорость загрузки.
 Используйте наследование CSS, чтобы уменьшить размер кода
 Используя наследуемые свойства CSS, родительский элемент задает стиль, и дочерним элементам не нужно устанавливать его снова.
 К общим наследуемым атрибутам относятся: цвет, размер шрифта, семейство шрифтов и т. д.; к ненаследуемым атрибутам относятся: позиция, отображение, плавание и т. д.;
 Если значение атрибута равно 0, единица измерения не добавляется.
 Если значение атрибута CSS равно 0, невозможно добавить единицу измерения для уменьшения объема кода. 
 .text{ ширина: 0 пикселей; высота: 0 пикселей }/*Изменить на*/.text{ ширина: 0; высота: 0;
 JavaScript
 Использовать делегирование событий
 Используйте делегирование событий для привязки событий к нескольким похожим элементам DOM. 
 <ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul> 
 // Неразумный способ: привязать событие клика к каждому элементу $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); });//Метод делегирования событий: используйте механизм пузырькового обмена событиями для делегирования событий родительскому элементу $('#container').on('click', '.list', function() { var text = $(this ).текст(); console.log(текст});
 Следует отметить, что хотя событие и можно делегировать документу при использовании делегирования событий, это неразумно. Во-первых, это легко приводит к неправильной оценке события, а во-вторых, эффективность поиска по цепочке областей низкая. В качестве делегата следует выбрать ближайший родительский элемент.
 Помимо повышения производительности, использование делегирования событий также устраняет необходимость привязки событий к динамически создаваемым элементам DOM.
 DOMContentЗагружено
 Вы можете начать обработку дерева DOM после загрузки элемента DOM (DOMContentLoaded), вместо того, чтобы ждать, пока загрузятся все ресурсы изображения. 
 // Собственный javascript document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM полностью загружен и проанализирован);}, false);// jquery$(document).ready(function() { console.log(ready) ! );});// Упрощенная версия $(document).ready()$(function() { console.log(ready!);});
 Предварительная загрузка и отложенная загрузка
 предварительная загрузка
 Используйте время простоя браузера для предварительной загрузки ресурсов, которые могут использоваться в будущем, таких как изображения, стили и скрипты.
 Безусловная предварительная загрузка
 Как только загрузка срабатывает, сразу же получаются ресурсы, которые потребуются в будущем.
 Ресурсы изображений предварительно загружены. (3 способа реализации предварительной загрузки изображений).
 Предварительная загрузка на основе поведения пользователя
 Оцените возможные операции поведения пользователя и предварительно загрузите ресурсы, которые могут понадобиться в будущем. 
  1.  Когда пользователь вводит текст в поле ввода поиска, предварительно загружаются ресурсы, которые можно использовать на странице результатов поиска;
  2.  Когда пользователь управляет вкладкой, одна из них будет отображаться по умолчанию. При нажатии на другие параметры ресурсы, которые будут использоваться в будущем, могут быть загружены первыми при наведении курсора мыши;
 Ленивая загрузка
 За исключением контента или компонентов, необходимых для инициализации страницы, все остальное можно загружать лениво, например js-библиотеки, вырезающие картинки, картинки, находящиеся вне видимого диапазона и т.д.
 Изображения загружаются лениво. (Определите, находится ли изображение в видимой области, если да, назначьте реальный путь к изображению)
 Избегайте глобального поиска
 Любая нелокальная переменная, используемая в функции более одного раза, должна храниться как локальная переменная. 
 функция updateUI() { var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++) { imgs[i].title = document.title + image + i; } var msg = document.getElementById(msg); msg.innerHTML = Обновление завершено.;}
 Глобальная переменная документа используется много раз в приведенной выше функции, особенно в цикле for. Поэтому лучше хранить глобальные переменные документа как локальные, а затем использовать их. 
 функция updateUI() { var doc = document; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title; + изображение + я; } var msg = doc.getElementById(msg.innerHTML = Обновление завершено.;}
 Стоит отметить, что в коде JavaScript любая переменная, объявленная без var, станет глобальной переменной, и неправильное использование приведет к проблемам с производительностью.
 Избегайте ненужных запросов атрибутов
 Использование переменных и массивов более эффективно, чем доступ к свойствам объекта, поскольку объект должен искать в цепочке прототипов свойство с таким именем. 
 //Использовать значения var массива = [5, 10];var sum = Values[0] + Values[1];alert(sum);//Использовать значения var объекта = { first: 5, Second: 10 };var sum = значения.первый + значения.второй;оповещение(сумма);
 В приведенном выше коде для вычислений используются свойства объекта. Поиск свойств один или два раза не вызовет проблем с производительностью, но если потребуется несколько поисков, например в цикле, это повлияет на производительность.
 При поиске нескольких атрибутов для получения одного значения, например: 
 var query = window.location.href.substring(window.location.href.indexOf(?));
 Следует сократить количество ненужных поисков атрибутов, а window.location.href следует кэшировать как переменную. 
 var url = window.location.href;var query = url.substring(url.indexOf(?));
 функция регулирования
 Предположим, есть поле поиска, привяжите событие onkeyup к полю поиска, чтобы запрос отправлялся при каждом поднятии мыши. Использование функций регулирования может гарантировать, что несколько последовательных операций пользователя в течение указанного времени ввода запускают только один запрос. 
 <тип ввода=текстовый идентификатор=входное значение= /> 
 // Привязываем событие document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// Логическая функция function search() { console.log('search. . .');}// Функция дросселирования function throttle(method, context) {clearTimeout(method.tId); }, 300);}
 Сценарии применения функции регулирования не ограничиваются полем поиска. Например, при прокрутке страницы, изменении размера растянутого окна и т. д. функцию регулирования следует использовать для повышения производительности.
 Минимизируйте количество утверждений
 Количество операторов также является фактором, влияющим на скорость выполнения операции.
 Объединение нескольких объявлений переменных в одно объявление переменной. 
 // Использование нескольких объявлений var var count = 5; var color = blue; varvalues ​​= [1,2,3]; var now = new Date(); // После улучшения var count = 5, color = blue , значения = [1,2,3], теперь = новая дата();
 Улучшенная версия предполагает использование только одного объявления var, разделенного запятыми. Когда переменных много, использование только одного объявления var намного быстрее, чем объявление отдельных переменных по отдельности.
 Использование массивов и объектных литералов
 Используйте литералы массивов и объектов вместо присваивания операторов за операторами. 
 значения var = new Array(); значения [0] = 123; значения [1] = 456; значения [2] = 789; // После улучшения значения var = [123, 456, 789]; 
 var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ alert(this.name);};//После улучшения var person = { name : Джек, возраст : 28,sayName: function(){ alert(this.name }};
 Оптимизация строк
 Конкатенация строк
 Ранние браузеры не оптимизировали способ объединения строк со знаком плюс. Поскольку строки неизменяемы, это означает, что для хранения результатов используются промежуточные строки, поэтому частое создание и уничтожение строк является причиной его неэффективности. 
 var text = Привет;text+= ;text+= Мир!;
 Добавьте строку в массив, а затем вызовите метод соединения массива, чтобы преобразовать ее в строку, избегая таким образом использования оператора сложения. 
 var arr = [], i = 0;arr[i++] = Hello;arr[i++] = ;arr[i++] = World!;var text = arr.join('');
 Современные браузеры оптимизировали конкатенацию строк и знаков, поэтому в большинстве случаев оператор сложения по-прежнему остается первым выбором.
 Уменьшите количество перекомпоновок и перерисовок
 В процессе рендеринга браузера задействованы перекомпоновка и перерисовка, а это процесс, который снижает производительность. Следует обратить внимание на сокращение количества действий, вызывающих перекомпоновку и перерисовку во время операций сценария. 
  1.  Перекомпоновка: геометрические свойства элемента изменились, и дерево рендеринга необходимо перестроить. Процесс изменения дерева рендеринга называется перекомпоновкой;
  2.  Перерисовка: геометрический размер элемента не изменился, но изменился стиль CSS (цвет фона или цвет) элемента.
 Какие операции вызывают перекомпоновку или перерисовку? 
  1.  Изменение размера окна
  2.  Изменить шрифт
  3.  Добавить или удалить таблицы стилей
  4.  Изменения содержимого, например ввод пользователем текста в поле <input/>.
  5.  Управление атрибутами класса
  6.  Скрипты для управления DOM (добавление, удаление или изменение элементов DOM)
  7.  Вычисление свойств offsetWidth и offsetHeight
  8.  Установите значение атрибута стиля
 Как уменьшить перекомпоновку и перерисовку и повысить производительность веб-страницы?
 1. Скриптовые манипуляции с элементами DOM 
  1.  Установите для элемента DOM значение display:none. Во время процесса настройки будет запущено перекомпонование, но вы можете изменить его позже и отобразить после изменения;
  2.  Клонируйте элемент в память перед его использованием и снова замените элемент после модификации.
 2. Измените стиль элемента. 
  1.  Попробуйте вносить изменения пакетно, а не изменять их по одному;
  2.  Заранее задайте идентификатор и класс, а затем установите className элемента.
 3. При добавлении анимации к элементу установите стиль CSS элемента в положение: фиксированное или положение: абсолютное. Элемент не будет вызывать перекомпоновку после того, как он покинет поток документа.
 4. Используйте функцию регулирования (уже упомянутую выше) при настройке размера окна, вводе данных в поле ввода, прокрутке страницы и т. д.
 HTTP
 кеш браузера
 Правильная настройка кэша браузера является одним из важных средств оптимизации веб-страниц.
 Срок действия и контроль кэша
 Expires поступает из HTTP1.0, а Cache-Control — из HTTP1.1. Если оба параметра установлены одновременно, Cache-Control переопределяет Expires. 
  1.  Expires указывает фактическую дату истечения срока действия, а не количество секунд. Но у Expires есть некоторые проблемы, например, время на сервере не синхронизировано или неточно. Поэтому лучше выражать время истечения срока действия в оставшихся секундах, а не в абсолютном времени.
  2.  Cache-Control может установить значение максимального возраста в секундах и указать время истечения срока действия кэша. Например: Cache-Control: max-age=3600.
 ETag и последнее изменение
 И ETag, и Last-Modified возвращаются сервером в заголовках ответа. ETag имеет более высокий приоритет, чем Last-Modified, что означает, что сервер будет отдавать приоритет значению ETag. 
  1.  ETag — это любой тег, прикрепленный к документу, который может быть серийным номером или номером версии документа, проверкой содержимого документа и т. д. При изменении документа значение ETag также меняется. С ETag связан параметр If-None-Match. Когда браузер инициирует запрос, он переносит значение ETag в поле If-None-Match и отправляет его на сервер;
  2.  Last-Modified — это время, когда документ был последний раз изменен на стороне сервера. С Last-Modified связан параметр If-Modified-Since. Когда браузер инициирует запрос, он переносит значение Last-Modified в поле If-Modified-Since и отправляет его на сервер.
 Сильное кэширование и согласованное кэширование
 Типы кэша: сильный кэш и согласованный кэш. Разница между ними заключается в том, что сильный кеш не отправит запрос на сервер, а согласованный кеш отправит запрос. Если совпадение успешное, он вернет 304 Not Modified, а если совпадение не удалось, оно вернет. 200; браузер сначала проверит сильный кеш, а если сильный кеш промахнется, выполнит проверку кэша переговоров.
 Как настроить кеш браузера 
  1.  Добавьте Expires и Cache-Control в ответ веб-сервера;
  2.  Настройте Expires и Cache-Control в файле конфигурации nginx или apache.
 Зачем сокращать HTTP-запросы
 Меры по сокращению http-запросов играют большую роль в оптимизации производительности, такие как: использование изображений css-спрайтов для замены нескольких запросов изображений, отказ от пустых изображений src, использование встроенных изображений, использование внешних ссылок css и js, кеширование и т. д.
 Процесс от ввода URL-адреса до завершения загрузки страницы включает в себя: 
  1.  Разрешение DNS
  2.  TCP-соединение
  3.  HTTP-запрос и ответ
  4.  Браузер отображает страницу
  5.  тесная связь
 Полный http-запрос должен пройти через эти процессы, что отнимает много времени и ресурсов, поэтому возникает необходимость сократить количество запросов.
 Ссылки:
 «Расширенное руководство по созданию высокопроизводительных веб-сайтов в сравнении с созданием высокопроизводительных веб-сайтов»
 «Лучшие методы ускорения вашего веб-сайта»
 Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.
Связанные статьи