Оптимизация производительности интерфейса

внешний интерфейс JavaScript браузер Gulp

В предыдущей разработке я часто сталкивался с проблемой оптимизации производительности фронтенда, за это время я просмотрел серию курсов и блогов больших парней Ниже приводится сводка производительности фронтенда оптимизация.

1. Справочник

  • Базовая оптимизация
    • Анализ принципа фронтальной оптимизации
    • HTML-оптимизация
    • css-оптимизация
    • js-оптимизация
    • Оптимизация изображения
    • оптимизация слияния файлов
  • Расширенная оптимизация
    • Ленивая загрузка и предварительная загрузка файлов
    • Перерисовка и перекомпоновка
    • кеш браузера
    • Политика кэширования браузера

2. Базовая оптимизация

1. Анализ принципа фронтальной оптимизации

Вопрос 1: Что происходит с запросом с момента его отправки до результата?

Ниже приводится конкретное описание приведенного выше рисунка:

Сначала пользователь вводит URL-адрес в браузере, а основной код в браузере разделяет и анализирует URL-адрес. Браузер отправит домен на DNS-сервер, DNS-сервер запросит соответствующий IP-адрес в соответствии с доменом и вернет IP-адрес браузеру.Следуйте протоколу, введите IP-адрес в протокол и перенесите все соответствующие параметры запроса, отправить его в нашу сеть, пройти через локальную сеть, коммутатор, маршрутизатор и магистральную сеть, а затем запрос дойдет до нашего сервера, который представляет собой архитектуру MVC. , запрос сначала попадет в контроллер, распределяем соответствующую логику в контроллере, вызываем уровень модели, модель взаимодействует с данными, при взаимодействии с данными получают данные из базы данных и, наконец, передаем наши визуализированные данные через слой представления, распространяемый по сети, ответ HTTP-запроса возвращается с сервера в браузер, и браузер начинает рендеринг.

Возможные точки оптимизации производительности:

  • 1. кеш днс
  • 2. Уменьшите количество http-запросов
  • 3. Уменьшите размер http-запроса
  • 4. Перейти к ближайшему сетевому запросу при выполнении сетевого запроса
  • 5. Кэш браузера

Вопрос 2: Как веб-сайт отображается в браузере?

Ниже приводится конкретное описание приведенного выше рисунка:

Запрос возвращает HTML-документ, который будет проанализирован синтаксическим анализатором HTML в браузере.Тег преобразуется в токен в процессе лексического анализа, а токен, в свою очередь, анализируется из HTML-документа сверху вниз, потому что он непрерывно анализируется сверху вниз по пути следующего токена.В процессе лексического анализа теги, такие как скрипт ссылки, могут быть соответственно проанализированы, и соответствующие веб-ресурсы в таких тегах будут далее отправлены браузером в Сеть инициирует запрос. Запрошенные веб-ресурсы JavaScript будут переданы механизму выполнения JavaScript v8 в браузере для выполнения. После того, как запрос ресурса, связанный с css, вернется, браузер сгенерирует соответствующее дерево CSSOM. Предпосылка рендеринга страницы заключается в том, что после того, как дерево DOM и дерево CSSOM становятся доступными, создается дерево рендеринга, а затем выполняется макет для рисования.

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

2. Оптимизация HTML

  • принцип
  • Метод реализации

принципСжатие включает в себя пробелы, символы табуляции, символы новой строки и т. д., а некоторые символы с другими значениями, например комментарии HTML, также могут быть сжаты.

Метод реализации1. Используйте плагин gulp-htmlmin для сжатия в gulp 2. Сжатие с помощью программного обеспечения для онлайн-сжатия (не применимо к большим проектам).

gulp.task('htmlmin', function() {
   	var options = {
   		removeComments: true, //清除HTML注释
   		collapseWhitespace: true, //压缩HTML
   		collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
   		removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
   		removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
   		removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
   		minifyJS: true, //压缩页面JS
   		minifyCSS: true //压缩页面CSS
   	};
   	var htmlSrc = './src/*.html',
   		htmlDst = './dist';
   	gulp.src(htmlSrc)
   		.pipe(htmlmin(options))
   		.pipe(gulp.dest(htmlDst)); //同名的html,会直接替换
   });

3. Оптимизация CSS

  • принцип
  • Метод реализации

принципУдаление неверного кода, удаление пробелов, удаление вкладок

Метод реализации1, Гульпу в Гульп-Minify-CSS Plug-in 2. Сжатие с помощью программного обеспечения для онлайн-сжатия (не применимо к большим проектам).

4. JS-оптимизация

  • принцип
  • Метод реализации

принципУдаление недопустимых символов, удаление комментариев, сокращение и оптимизация семантики кода, защита кода (изменение некоторых семантических имен на a/b/c и т. д.)

Метод реализации1. Используйте плагин gulp-uglify для сжатия в gulp 2. Сжатие с помощью программного обеспечения для онлайн-сжатия (не применимо к большим проектам).

5. Оптимизация изображения

Тип изображения

  • jpg сжатие с потерями высокая степень сжатия не поддерживает прозрачность
  • png поддерживает прозрачность и хорошую совместимость с браузерами
  • webp имеет лучшее сжатие и имеет проблемы совместимости с iOS webview
  • Стиль изображения векторного изображения SVG относительно простая сцена

Решение

  • Image Inline (уменьшает количество http-запросов)
  • Карта спрайтов (уменьшить количество http-запросов)

Реализация

  • онлайн-программа для сжатия изображений
  • Плагин сжатия изображений gulp-imagemin для gulp

6. Объединение файлов и оптимизация

существующие проблемы

  • Проблема рендеринга первого экрана (объединение нескольких файлов приводит к тому, что HTTP-запрос становится слишком большим, а время запроса слишком долгим)
  • Проблема инвалидации кеша (изменение любого файла после слияния приведет к аннулированию кеша)

Решение

  • Слияние общей библиотеки
  • Объединение разных страниц

Реализация

Используйте плагин gulp-concat для слияния файлов.

3. Расширенная оптимизация

1. Ленивая загрузка и предварительная загрузка файлов

ленивая загрузка

  • Запрашивать ресурсы изображения после того, как изображение попадает в видимую область
  • Для электронной коммерции и других бизнес-сценариев с большим количеством изображений и длинных страниц
  • Уменьшить загрузку недопустимых ресурсов
  • Слишком много ресурсов, загруженных одновременно, заблокируют загрузку js и повлияют на нормальное использование веб-сайта.

Предварительная загрузка

  • Предварительные запросы на статические ресурсы, такие как изображения, до их использования.
  • Ресурсы могут быть загружены из кеша, когда они используются для улучшения взаимодействия с пользователем.
  • Обслуживание зависимостей для отображения страницы

Метод реализации ленивой загрузкиHTML-код

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>lazyload</title>
	<link rel="stylesheet" href="main.css" />
</head>
<body>
	<div class="image-list">
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i3/3851834739/TB2KAmyBHGYBuNjy0FoXXciBFXa_!!3851834739.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i3/3851834739/TB2RYRxqeGSBuNjSspbXXciipXa_!!3851834739-0-item_pic.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i3/1210506068553231586/TB2ZL6qt3RkpuFjy1zeXXc.6FXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i2/511076404/TB2J7wUApmWBuNjSspdXXbugXXa_!!511076404.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i3/23745640/TB2zBv9D1uSBuNjy1XcXXcYjFXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i3/587488716/TB2OyN5wrSYBuNjSspiXXXNzpXa_!!587488716.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i1/114335006/TB2IewMr41YBuNjy1zcXXbNcXXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i4/2782657655/TB2VvzUfYorBKNjSZFjXXc_SpXa_!!2782657655.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i3/13016599/TB2TuxpuGSWBuNjSsrbXXa0mVXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i2/90919986/TB2KqfVxv9TBuNjy1zbXXXpepXa_!!90919986.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i4/52863407/TB2mKqZDkKWBuNjy1zjXXcOypXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i3/1969607927/TB25oQdaIuYBuNkSmRyXXcA3pXa_!!1969607927.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i2/31490775/TB26MyDb8smBKNjSZFsXXaXSVXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i1/886644258/TB29ufKvrxmpuFjSZJiXXXauVXa_!!886644258.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i2/886644258/TB2D9pNwSxjpuFjSszeXXaeMVXa_!!886644258.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i2/121453312/TB2iATKD29TBuNjy0FcXXbeiFXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i4/3083173120/TB2CCLWDr5YBuNjSspoXXbeNFXa_!!3083173120.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i4/15303864/TB2eVxzhYsrBKNjSZFpXXcXhFXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i2/694223667/TB2N4cXy1ySBuNjy1zdXXXPxFXa_!!694223667.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i4/73861778/TB2r8vgl4uTBuNkHFNRXXc9qpXa_!!73861778.jpg_100x100xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/bao/uploaded/i2/26868233/TB2j2jQAhSYBuNjSsphXXbGvVXa_!!0-saturn_solar.jpg_240x240xzq75.jpg" />
		<img src="" class="image-item" lazyload="true" data-original="https://gma.alicdn.com/i3/694223667/TB21ohCqOCYBuNkHFCcXXcHtVXa_!!694223667.jpg_100x100xzq75.jpg" />
	</div>
	
	<script type="text/javascript" src="lazyload.js"></script>
</body>
</html>

CSS

.image-item{
	width: 40%;
	margin-right: 5%;
	display: inline-block;
	height: 400px;
	background: gray;
}

.image-list{
	margin-left: 5%;
}

JS

/**
 * 原理 需要比较可视区域的高度和当前图片在区域内的top值来决定是否加载图片
 * Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
 * 
 * dataset 用于获取某个属性的值
 * */

var viewHeight = document.documentElement.clientHeight;


function lazyload(){
	var eles = document.querySelectorAll('img[data-original][lazyload]');
	Array.prototype.forEach.call(eles,function(item,index){
		var rect;
		if(item.dataset.original === '')
			return;
		rect = item.getBoundingClientRect();
		if(rect.bottom >=0 && rect.top < viewHeight){
			!function(){
				var img = new Image();
				img.src = item.dataset.original;
				img.onload = function(){
					item.src= img.src;
				}
				item.removeAttribute('data-original');
				item.removeAttribute('lazyload');
			}()
		}
	})
}

lazyload();

document.addEventListener('scroll', lazyload);

Метод реализации предварительной загрузки

img标签 + display:none
<img src="../a.png" style="display:none;" />

new Image()
var img =new Image();
img.src="sdsds.png";

2. Перерисовка и перекомпоновка

  • вопрос
  • Механизм перерисовки и перекомпоновки в браузере
  • что такое перекрасить
  • что такое рефлоу
  • Какие операции можно перерисовывать и перекомпоновывать?

Вопрос 1: Производительность CSS замедляет работу JavaScript? (Могу)

CSS и JavaScript заблокируют друг друга (JavaScript может получить соответствующие результаты рендеринга в коде) Один нить => табассинг JavaScript Один нить => рендеринг пользовательского интерфейса

==== Все эти два потока взаимоисключающие ====

СуммироватьПричина, по которой оптимизация производительности внешнего интерфейса связана с перерисовкой и перекомпоновкой, заключается в том, что частое срабатывание перерисовки и перекомпоновки приведет к частому рендерингу пользовательского интерфейса, что в конечном итоге приведет к замедлению js и снижению производительности страницы.

переплавкаИзменения размера, макета, скрытия и т. д. требуют перестроения, которое называется перекомпоновкой.

Факторы, вызывающие оплавление:

  • Свойства, связанные с блочной моделью
  • Позиционирование и плавающие связанные свойства
  • Структура внутреннего текста узла

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

3. Кэш браузера

  • cookie
  • localstroage sessionstorage
  • Service Workers

4. Кэш

  • cache-control
  • expires
  • last-modified
  • etag
Категории