Это исходит из обучения, которое я проводил ранее, с удалением некоторых дел, связанных с удалением, и большим количеством справочных материалов (список литературы), спасибо, старшие, хорошо 😘

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

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

Эволюция официального сайта Apple

1992:

1996:

1998:

1999 год:

2000:

2001:

2003 год:

2005:

2006 год:

2007:

2008 год:

2010 год:

2011 год:

Джобс умер:

2012:

2013 год:

2014 год:

2015:

2016:

2017:

2018:

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

Только с внешнего интерфейса, через эволюцию официального веб-сайта Apple, мы можем видеть, что с быстрым развитием Интернета и мобильного Интернета внешние технологии также претерпели огромные изменения.

Эволюция режима разработки интерфейсных приложений

1. Статические желтые страницы
2. Динамические веб-страницы для данных сборки сервера
3. Серверный MVC
4. Разделение переднего и заднего концов
5. Фреймворк внешнего интерфейса MV*
6. Front-end VIrtual DOM, MNV*, front-end и back-end изоморфизм

Все изменения вращаются вокруг повышения эффективности и качества фронтенд-разработки.

Основы браузера

Внешний интерфейс большую часть времени имеет дело с браузером, так что давайте начнем с браузера.

Начнем с распространенного вопроса на фронтенд-интервью:

Что произошло с браузером и сервером с момента, когда мы открыли браузер и ввели URL-адрес, до того, как страница отобразила содержимое страницы?

Существует также более расходящаяся версия этого вопроса: что происходит с момента, когда мы открываем браузер и вводим URL-адрес, до момента, когда страница отображает содержимое страницы? Например, ниже приведены вопросы интервью Baidu FEX (отдел исследований и разработок веб-интерфейса):

GitHub.com/post-ex-team/in…

Чем подробнее, тем лучше, некоторые люди могут начать с мобильной оптической мыши: свет, излучаемый светодиодом, освещает нижнюю поверхность мыши, а затем часть света, отраженного назад от нижней поверхности мыши, пропускается через набор оптических линз к светочувствительному устройству для визуализации Когда мышь движется, ее траектория движения будет записана как группа когерентных изображений, снятых с высокой скоростью Анализируя изображения с помощью DSP, направление движения и расстояние перемещения мыши можно судить о завершении позиционирования курсора. . . От мыши, клавиатуры, экрана, компьютера, ввода и вывода, операционной системы и принципа компиляции можно сказать за день, поэтому здесь мы сосредоточимся только на основном процессе браузера и сервера.

Упрощенный процесс выглядит следующим образом:

1. После получения введенного пользователем URL-адреса браузер откроет поток для обработки запроса, проанализирует и оценит введенный пользователем URL-адрес и обработает его в соответствии с методом HTTP, если это протокол HTTP.
2. Вызовите соответствующий метод в движке браузера, например метод loadUrl в WebView, чтобы проанализировать и загрузить URL-адрес.
3. Получите IP-адрес, соответствующий адресу веб-сайта, с помощью разрешения DNS и отправьте запрос на целевой IP-адрес веб-сайта вместе с файлом cookie браузера, userAgent и другой информацией после завершения запроса.
4. Выполняется сеанс протокола HTTP, и клиент браузера отправляет сообщение на веб-сервер.
5. Войдите в веб-сервер на фоне веб-сайта для обработки запросов, таких как Apache, Tomcat, Nginx, Node.js и другие серверы.
6. Войдите в развернутые серверные приложения, такие как PHP, Java, JavaScript, Python и другие серверные программы, и найдите соответствующую логику обработки запросов.В течение этого периода кэш сервера может быть прочитан или база данных может быть запрошена.
7. Сервер обрабатывает запрос и возвращает ответное сообщение.В это время, если браузер посетил страницу и в кеше есть соответствующие ресурсы, она будет сравниваться с последней записью модификации сервера.Если она непротиворечива, то вернет 304, иначе вернет 200 и соответствующий контент.
8. Браузер начинает загрузку HTML-документа (когда код состояния заголовка ответа равен 200) или считывает содержимое файла из локального кеша (когда кеш браузера действителен или когда код состояния заголовка ответа равен 304).
9. Браузер создает дерево документа DOM в соответствии с проанализированной структурой HTML-файла, полученного при загрузке, и загружает указанный файл типа MIME (например, CSS, сценарий JavaScript и т. д.) в соответствии с запросом тега в HTML и устанавливает кэш и другое содержимое одновременно.
10. Страница начинает анализировать и отображать DOM, CSS анализирует в соответствии с правилами и объединяет дерево документов DOM для компоновки и отображения содержимого веб-страницы JavaScript обрабатывает DOM в соответствии с DOM API, считывает кэш браузера, выполняет привязку событий и т. д. ., и весь процесс отображения страницы завершен.

На следующем рисунке показано некоторое расширение на стороне сервера:

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

Браузер обычно состоит из следующих семи частей:

1. Пользовательский интерфейс:Включает адресную строку, кнопки вперед/назад, меню закладок и многое другое. За исключением главного окна браузера, отображающего запрошенную страницу, различные части дисплея относятся к пользовательскому интерфейсу.
2. Движок браузера:Передача инструкций между пользовательским интерфейсом и механизмом рендеринга или чтение и запись данных в локальный кэш клиента — это ядро ​​связи между различными частями браузера.
3. Движок рендеринга:Отвечает за отображение запрошенного контента и верстку контента в браузере для отображения стилизованного интерфейса. Если запрошенный контент представляет собой HTML, он отвечает за синтаксический анализ содержимого HTML и CSS и отображение проанализированного содержимого на экране, также называемое механизмом набора текста.Ядро браузера, на которое часто ссылаются, обычно относится к механизму рендеринга.
4. Сетевой функциональный модуль (Сеть):Используется для сетевых вызовов, таких как HTTP-запросы. Его интерфейс не зависит от платформы и обеспечивает базовую реализацию для всех платформ.
5. Бэкэнд пользовательского интерфейса:Используется для рисования основных виджетов, таких как поля со списком и окна. Он предоставляет общий независимый от платформы интерфейс, используя под капотом методы пользовательского интерфейса операционной системы.
6. Интерпретатор Javascript:Используется для анализа и выполнения кода JavaScript.
7. Сохранение данных:Постоянный слой. Браузер должен сохранять на жестком диске различные данные, такие как куки, localStorage. Новая спецификация HTML (HTML5) определяет «веб-базу данных», полную (но облегченную) базу данных в браузере.

Введение в механизмы браузерного рендеринга

Роль движка рендеринга. Конечно, это «рендеринг», то есть отображение запрошенного контента на экране браузера.

В настоящее время существует 4 основных типа ядер браузеров:

• Trident: IE, 360, Sogou и др.;
• Gecko: Netscape, Firefox и т. д.;
• Presto: Opera (новая Opera использует ядро ​​Blink, является ответвлением webkit, добавляющим некоторые характеристики оптимизации);
• WebKit: Safari, Chrome

Механизм рендеринга сначала извлекает содержимое запрошенного документа с сетевого уровня (размер содержимого обычно ограничен 8000 блоков).

Затем выполните основной процесс, как показано ниже:

1. При синтаксическом анализе HTML для построения дерева DOM механизм рендеринга сначала разбирает теги HTML-элементов на несколько узлов объектов элементов DOM с отношениями «родитель-потомок».Древовидная структура DOM (дерево DOM).
2. Затем, в соответствии с порядком каждого узла древовидной структуры DOM, извлекаются правила CSS, используемые при расчете, и данные стиля древовидной структуры DOM пересчитываются для создания описания стиля.Дом визуализации дереваобъект.
3. После создания дерева рендеринга DOM войдите в дерево рендерингаМакетЭтап, то есть в соответствии с размером и положением каждого узла дерева рендеринга на странице, узел фиксируется в соответствующем положении страницы, этот этап в основном представляет собой атрибуты макета элемента (такие как позиция, поплавок, поля и другие атрибуты) для вступления в силу, то есть при просмотре Позиция, в которой узел элемента на странице отображается в средстве визуализации.
4. Следующим шагом является этап рисования, который применяет фон, цвет, текст и другую информацию о стиле узла дерева рендеринга к каждому узлу.Этот этап в основном предназначен для внутреннего стиля отображения элемента (например, цвет, background.text- тень и другие атрибуты), чтобы они вступили в силу, и, наконец, завершить весь DOM на странице.Картинапоказывать.

Это постепенный процесс. Чтобы добиться лучшего взаимодействия с пользователем, механизм рендеринга будет запрашиваться, как только контент отображается на экране. Ему не нужно ждать, пока весь HTML-документ после парсинга будет завершен, он начнет строить дерево и установит представленный макет. Продолжая получать и обрабатывать остальной контент из сети, часть движка рендеринга будет анализировать и отображать его.

Основной процесс вебкита

Геккон основной процесс

Основное различие между двумя рабочими процессами механизма рендеринга заключается в процессе анализа документа HTML или CSS для создания дерева рендеринга:

• Парсинг HTML и CSS в ядре Webkit можно считать параллельным;
• Gecko сначала анализирует HTML, генерирует приемник контента, а затем начинает анализировать CSS.

Терминология, используемая для описания того, как работы двух рендеринга работают также разные:

• Визуализированный объект, проанализированный ядром Webkit, называется деревом рендеринга, которое состоит из «объектов рендеринга»;
• Объект рендеринга, анализируемый ядром Gecko, называется деревом фреймов, и каждый элемент является фреймом.

Для размещения элемента:

• WebKit использует термин «Макет»;
• Термин, который использует Gecko, - «Reflow».

Но их основные процессы похожи, все они проходят этапы парсинга HTML DOM, парсинга стилей CSS, генерации дерева рендеринга и рендеринга и отображения дерева рендеринга. Как правило, процесс синтаксического анализа механизма рендеринга включает синтаксический анализ HTML и синтаксический анализ CSS, которые также являются двумя наиболее важными частями процесса синтаксического анализа механизма рендеринга.

что такое разбор

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

Например:2 + 3 - 1После парсинга оно станет следующим деревом:

Процесс синтаксического анализа можно разделить на два подпроцесса: лексер и парсер. Проще говоря, один из них — токен разделения, а другой — правило сопоставления.

Как правило, для генерации парсеров используются некоторые инструменты, Webkit использует два известных генератора парсеров: лексические анализаторы.Flex, парсерBison(Лекс/Якк).

Разбор HTML-документа

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>

будет переведено в следующее дерево DOM:

Правила синтаксического анализа HTML более сложны, потому что HTML имеет высокую устойчивость к ошибкам, например:

</br>а также<br>а также<br />должны анализироваться как пустые строки;

<table>
    <table>
        <tr><td>inner table</td></tr>
    </table>
    <tr><td>outer table</td></tr>
</table>

<!-- 离散表格会被解析成 -->

<table>
    <tr><td>outer table</td></tr>
</table>
<table>
    <tr><td>inner table</td></tr>
</table>

Разбор CSS

Webkit разбирает файлы CSS на объекты StyleSheet, каждый из которых содержит правила CSS, и объекты правил CSS, содержащие объекты селектора и объявления, а также другие объекты, соответствующие синтаксису CSS.

Если на узле есть несколько разных правил стиля, они будут рассчитываться по весу. Обычно считается:

!important> правила встроенного стиля > селекторы идентификаторов > селекторы классов > селекторы элементов

Одновременно с построением дерева DOM браузер также строит другую древовидную структуру: дерево рендеринга. Это дерево визуальных элементов в том порядке, в котором они отображаются, и визуальное представление документа. Что он делает, так это рисует содержимое в правильном порядке.

макет

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

Макет — это рекурсивный процесс. Он начинается с корневого рендерера (соответствующего HTML-документу).<html>element), затем рекурсивно обходят часть или всю иерархию кадров, вычисляя информацию о геометрии для каждого средства визуализации, которое необходимо вычислить.

Макет делится на глобальный макет и инкрементный макет. Глобальный макет относится к макету, который запускает всю область дерева рендеринга.Причины запуска могут включать:

• Глобальные изменения стиля, влияющие на все средства визуализации, например, изменение размера шрифта.
• Изменение размера экрана.

Инкрементальная компоновка заключается в выкладывании только измененной части (грязный рендерер).

рисовать

На этапе рисования система просматривает дерево рендеринга и вызывает метод «paint» модуля рендеринга для отображения содержимого модуля рендеринга на экране.

Как и компоновка, отрисовка делится на глобальную (отрисовка всего дерева рендеринга) и пошаговую.

Когда происходит изменение, браузер будет давать наименьший возможный ответ. Поэтому при изменении цвета элемента элемент будет перерисовываться (перекрашиваться). После изменения положения элементов только макет (макет) и перерисовка (перерисовка) элемента и его дочерних элементов (и, возможно, одноуровневых элементов). После добавления узла DOM он выложит (макет) и перерисует (перерисует) этот узел. Некоторые серьезные изменения (например, увеличение шрифта элемента «html») могут привести к недопустимому кешу, из-за чего все дерево будет перекомпоновано (relayout) и отрисовано (repaint).

Постоянное хранилище данных браузера

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

• Кэширование HTTP-файлов
• LocalStorage
• SessionStorage
• indexDB
• Web SQL
• Cookie
• CacheStorage
• Application Cache
• Кэш-память

Кэширование HTTP-файлов

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

Блок-схема процесса кэширования файлов HTTP выглядит следующим образом:

Например:

Если установлены и Expires, и Cache-Control, только Cache-Control вступит в силу.

localStorage

localStorage — это схема локального кэширования для HTML5. Он поддерживает текущие основные браузеры, и ограничение длины зависит от разных браузеров. Например, Chrome составляет 2,6 МБ, а IE — 5 МБ. Это ограничение длины относится к ограничению размера localStorage под одним доменным именем.

localStorage не подходит для хранения слишком большого количества данных, он следует политике того же происхождения, но сохраняется.

Когда браузер переходит в приватный режим просмотра, создается новая временная база данных для хранения данных localStorage; когда приватный режим просмотра выключен, база данных очищается и удаляется.

sessionStorage

sessionStorage похож на localStorage, но sessionStorage автоматически очищается при закрытии браузера. Он используется меньше, например, содержимое поля ввода формы может быть автоматически сохранено.Если браузер обновляется из-за случайных факторов, содержимое поля ввода будет восстановлено, поэтому написанное содержимое не будет потеряно.

Cookie

Файл cookie – это небольшой фрагмент данных, который сервер отправляет в браузер пользователя и сохраняет его локально. Он будет перенесен и отправлен на сервер при следующем запросе браузера к тому же серверу. Запись файла cookie в основном состоит из ключа, значения, домена, времени истечения срока действия и размера и обычно используется для сохранения информации об аутентификации пользователя на веб-сайте или персонализированных настроек. Максимальная длина файлов cookie обычно составляет 4 КБ.

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

WebSQL

WebSQL — это отдельная спецификация, независимая от HTML5, и в настоящее время поддерживается очень мало браузеров, поэтому он мало используется.

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

IndexDB

IndexDB поддерживает широкий спектр браузеров, и обычно рекомендуется использовать IndexDB для хранения больших объемов данных. Ограничение размера браузера для IndexDB обычно составляет около 50 МБ.

ДЕМО:girliemac.com/stickies/

Application Cache

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

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

Кэш приложений постепенно устаревает и заменяется Service Workers.

cacheStorage

CacheStorage определен в спецификации ServiceWorker и может использоваться для сохранения объекта Cache, объявленного каждым ServiceWorker.Это автономное решение, которое может использоваться для замены кэша приложений в будущем.

Образец кода:

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('mysite-static-v3').then(function(cache) {
      return cache.addAll([
        '/css/whatever-v3.css',
        '/css/imgs/sprites-v6.png',
        '/css/fonts/whatever-v8.woff',
        '/js/all-min-v4.js'
        // etc
      ]);
    })
  );
});

Демо:fed.renren.com/

Для конкретного использования см.:Developers.Google.com/Web/Женщины большие…

Инструменты отладки внешнего интерфейса — Инструменты разработчика Chrome

Инструменты разработчика Chrome — это набор инструментов веб-разработки и отладки, встроенных в Google Chrome, которые можно использовать для итерации, отладки и анализа веб-сайтов. Это один из наиболее часто используемых инструментов отладки для разработчиков интерфейса.

Панель элементов

Используйте панель «Элементы» Chrome DevTools для проверки и редактирования HTML и CSS вашей страницы в режиме реального времени.

🖥 Демонстрация:

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

Панель консоли (Консоль)

Консоль в основном используется для просмотра динамической информации и выполнения кода Javascript.

Используйте API консоли для записи информации в консоль, создания файлов конфигурации JavaScript и запуска сеансов отладки.

• console.log
• console.info
• console.warn
• console.error
• console.assert
• console.count
• console.time
• console.timeEnd
• console.timeStamp
• console.group
• console.groupEnd
• console.profile
• console.profileEnd
• console.trace
• console.clear

🖥 Демонстрация:

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
    console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

function add(num) {
    if(num > 0) {
        console.trace('num:', num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}
add(5);

Функция удобства:

• $_Возвращает значение последнего вычисленного выражения.
• $(selector)Возвращает ссылку на первый элемент DOM с указанным селектором CSS.
• ?(selector)Возвращает массив элементов, соответствующих заданному селектору CSS.

Несколько интересных консолей:
www.zhihu.com/
www.tmall.com/
www.baidu.com/
www.iqiyi.com/

Панель «Источники» (Sources)

Панель исходного кода в основном используется для просмотра и отладки кода.

🖥 Демонстрация:Google chrome.GitHub.IO/Инструменты для разработчиков — Посыпать…

Сетевая панель (сеть)

Наше развитие основано на отладке интерфейса HTTP, поэтому сетевая панель очень важна.

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

Панель «Сеть» состоит из пяти панелей:

1. Управление. Используйте эти параметры для управления внешним видом и функциями панели «Сеть».
2. Фильтры. Используйте эти параметры для управления тем, какие ресурсы отображаются в таблице запросов. Удерживая нажатой клавишу Cmd (Mac) или Ctrl (Windows/Linux), щелкните фильтр, чтобы выбрать несколько фильтров одновременно.
3. Обзор. На этой диаграмме показана временная шкала времени извлечения ресурсов. Если вы видите несколько вертикальных полос, расположенных друг над другом, эти ресурсы были извлечены одновременно.
4. Таблица запросов. В этой таблице перечислены все извлеченные ресурсы. По умолчанию таблица отсортирована в хронологическом порядке, причем самые старые ресурсы находятся вверху. Щелкните имя ресурса, чтобы отобразить дополнительную информацию. Совет. Щелкните правой кнопкой мыши любой заголовок таблицы, кроме временной шкалы, чтобы добавить или удалить столбцы информации.
5. Резюме. Эта панель обеспечивает краткий обзор общего количества запросов, объема переданных данных и времени загрузки.

Панель «Сеть» может делать снимки экрана во время загрузки страницы. Эта функция называется слайд-шоу.

Панель Network выделяет два события: DOMContentLoaded и load. DOMContentLoaded запускается при анализе исходной разметки страницы. load срабатывает, когда страница полностью загружена.

🖥 Презентации: панели, слайд-шоу

Текстовое поле «Фильтр» также поддерживает различные ключевые слова, а сочетание клавиш Ctrl+Пробел позволяет просматривать все команды:

• домен. Показать только ресурсы из указанного домена. Подстановочные знаки (*
  ) Включить множество доменов. Например,*
  Доменные имена .com будут отображаться на всех ресурсах, заканчивающихся на .com. DevTools использует все заполненные поля, которые он встречает в раскрывающемся меню с автоматическим заполнением.
• имеет заголовок ответа. Отображает ресурсы, содержащие указанные заголовки ответа HTTP. DevTools заполняет раскрывающийся список автозаполнения всеми встречающимися заголовками ответов.
• является. Используйте is:running для поиска ресурсов WebSocket.
• больше, чем. Отображает ресурсы больше указанного размера (в байтах). Установка значения 1000 эквивалентно установке значения 1k.
• метод. Отображает ресурсы, полученные указанным типом метода HTTP. DevTools заполняет раскрывающийся список всеми методами HTTP, с которыми он сталкивается.
• мим-тип. Отображает ресурсы указанного типа MIME. DevTools заполняет раскрывающееся меню всеми типами MIME, с которыми он сталкивается.
• смешанное содержание. Отображение всех ресурсов смешанного содержимого (mixed-content:all) или только отображаемых в данный момент ресурсов (mixed-content:displayed).
  схема. Отображает ресурсы, полученные по незащищенному HTTP (схема:http) или защищенному HTTPS (схема:https).
• установить домен cookie. Отображает ресурсы с заголовком Set-Cookie с атрибутом домена, соответствующим указанному значению. DevTools заполняет раскрывающийся список автозаполнения всеми полями файлов cookie, с которыми он сталкивается.
• установить имя файла cookie. Отображает ресурсы с заголовком Set-Cookie, имя которого соответствует указанному значению. DevTools заполняет раскрывающийся список автозаполнения всеми именами файлов cookie, с которыми он сталкивается.
• установить значение cookie. Отображает ресурсы, которые имеют заголовок Set-Cookie со значением, соответствующим указанному значению. DevTools заполняет раскрывающийся список автозаполнения всеми встречающимися значениями файлов cookie.
• код состояния. Показать только те ресурсы, код состояния HTTP которых соответствует указанному коду. DevTools заполняет раскрывающийся список автозаполнения всеми кодами состояния, с которыми он сталкивается.

🖥 Демонстрация: фильтруйте, копируйте, сохраняйте и очищайте сетевую информацию

Основные этапы жизненного цикла запроса включают в себя:

• перенаправить

  • Начните немедленно с startTime.
  • redirectStart также запускается, если происходит перенаправление.
  • Если перенаправление происходит в конце этой фазы, будет собран redirectEnd.

• кеш приложения

  • Если кеш приложения выполняет запрос, будет собрано время fetchStart.

• DNS

  • Время domainLookupStart собирается в начале запроса DNS.
  • Время domainLookupEnd собирается в конце DNS-запроса.

• TCP

  • connectStart Собирается при первоначальном подключении к серверу.
  • Если используется TLS или SSL, secureConnectionStart запустится в начале рукопожатия (для защиты соединения).
  • connectEnd будет собран, когда соединение с сервером будет завершено.

• просить

  • requestStart собирается, как только запрос на ресурс отправляется на сервер.

• отклик

  • responseStart — это время, когда сервер первоначально ответил на запрос.
  • responseEnd — это время завершения запроса и завершения получения данных.

На вкладке «Время» можно просмотреть полную информацию о затратах времени на сетевые запросы:

• Постановка в очередь: время ожидания запроса, обычно поставленного в очередь, поскольку запрос имеет низкий приоритет или приостановлен (в HTTP 1 браузеры разрешают только шесть TCP-соединений для каждого источника) и т. д.
• Stupled/Blocking: время ожидания отправки запроса.
• Согласование прокси: время, затраченное на согласование соединения с прокси-сервером.
• Поиск DNS: время, затраченное на поиск DNS.
• Начальное соединение/подключение: время, затраченное на установление соединения, включая время для подтверждения/повторной попытки TCP и согласования SSL.
• SSL: время, затраченное на завершение рукопожатия SSL.
• Запрос отправлен/отправлен: время, затраченное на выполнение сетевого запроса. Обычно меньше миллисекунды.
• Ожидание (TTFB): время ожидания исходного ответа, также известное как время до первого байта. Это время фиксирует задержку приема-передачи сервера и время, затраченное на ожидание ответа сервера.
• Загрузка/загрузка контента: время, затраченное на получение данных ответа.

Его можно найти в большом количестве возможных проблем через сетевую панель, например:

Есть много остановленных записей:
Указывает, что из одного домена извлекается слишком много ресурсов. При соединениях HTTP 1.0/1.1 Chrome заставит каждый хостдо шестиTCP-соединение. Для решения этой проблемы необходимо реализовать шардинг домена. То есть настройка нескольких поддоменов в приложении для предоставления ресурсов. Например, на главной странице Jingdong есть много поддоменов для загрузки картинок:

Время до первого байта велико:
Также известен как: большой зеленый, как правило, потому что: плохие сетевые условия между клиентом и сервером или медленный ответ серверного приложения. Если ТТФБ еще долго после локального хостинга, то проблема вообще в сети между клиентом и сервером.

Достижение пропускной способности:
Также известен как: большой синий. Как правило, возвращаемое сообщение слишком велико, и основное решение — уменьшить количество отправляемых байтов.

🖥 Демонстрация: домашняя страница JD.comwww.jd.com/; Используйте DevTools для имитации различных сетевых условий и решения проблем со временем загрузки.

Панель производительности

Панель производительности ранее называлась временной шкалой и была переименована в панель производительности после Chrome 57. В основном используется для записи и анализа всех действий приложения во время выполнения.

Панель «Производительность» содержит следующие четыре панели:

1. Управление. Начните запись, остановите запись и настройте информацию, полученную во время записи.
2. Обзор. Общая сводка производительности страницы.
3. график пламени. Визуализация трассировки стека ЦП. На графике пламени можно увидеть от одной до трех вертикальных пунктирных линий. Синяя линия представляет событие DOMContentLoaded. Зеленая линия показывает, когда она была впервые нарисована. Красная линия представляет событие загрузки.
4. Подробности. После выбора события на этой панели отображается дополнительная информация о событии. Если события не выбраны, на этой панели отображается информация о выбранном временном диапазоне.

Панель Обзор содержит следующие три диаграммы:

1. FPS. кадров в секунду. Чем выше зеленая вертикальная линия, тем выше FPS. Красные блоки на графике FPS представляют собой длинные кадры, и возможны заикания.
2. ЦПУ. Ресурсы процессора. На этой диаграмме с областями показаны типы событий, которые потребляют ресурсы ЦП.

3. СЕТЬ. Каждая цветная полоса представляет собой ресурс. Чем длиннее полоса, тем больше времени требуется для извлечения ресурса. Светлая часть каждой полосы представляет время ожидания (время от запроса ресурса до загрузки первого байта). Полосы имеют следующую цветовую кодировку:

   • HTML-файлсиний.
   • Скриптжелтый.
   • Таблица стилей Фиолетовый span>.
   • Медиа файлзеленый.
   • Другие ресурсысерый.

Панель общей производительности в основном используется для оптимизации времени загрузки страницы и улучшения беглости страницы, что очень полезно для настройки страницы с большим количеством пользователей. Например:

• Обнаружив длинное событие Evaluate Script, профилировщик JS получает более подробную информацию о том, какие именно функции JS были вызваны и сколько времени потребовалось для вызова каждой функции.
• Изменения стиля обходятся дорого, особенно когда эти изменения затрагивают несколько элементов в DOM. Изучив журнал большого события Recalculate Style (показанного фиолетовым), если изменение стиля занимает много времени, влияние на производительность может быть значительным.
• «Дрожание макета» относится к повторяющимся ситуациям принудительной синхронизации макета. Это происходит, когда JavaScript постоянно выполняет запись и чтение из DOM, заставляя браузер постоянно пересчитывать макет. Проблемы макета можно обнаружить, наблюдая за событиями макета, отмеченными красной вертикальной полосой.
• Рисование — это процесс заполнения пикселей. Часто это самая дорогая часть процесса рендеринга. В любом случае, если вы заметите заикание на странице, велика вероятность, что проблема с отрисовкой.

🖥 Демонстрация: быстрое определение узких мест при рисовании, мигание краски (на панели рендеринга), когда эта опция включена, Chrome будет мигать зеленым цветом каждый раз, когда происходит рисование.www.jd.com/

Панель памяти (Память)

Панель памяти ранее называлась Profile и была переименована в панель памяти после Chrome 57. В основном используется для поиска проблем с памятью, которые влияют на производительность страницы, включая утечки памяти, раздувание памяти и частые сборки мусора.

Пользователи обычно воспринимают проблемы с памятью следующим образом:

• Производительность страницы со временем ухудшается. Это может быть признаком утечки памяти. Утечка памяти — это когда ошибка на странице приводит к тому, что страница со временем использует все больше и больше памяти.
• Производительность страницы была ужасной. Это может быть симптомом раздувания памяти. Раздувание памяти — это когда страница использует больше памяти, чем нужно для оптимальной скорости.
• Страница задерживается или часто приостанавливается. Это может быть признаком частой сборки мусора. Сборка мусора — это когда браузер освобождает память. Браузер решает, когда выполнять сборку мусора. Во время перезапуска выполнение всех скриптов приостанавливается. Поэтому, если в браузере часто выполняется сборка мусора, выполнение скрипта будет часто приостанавливаться.

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

Оцените производительность с помощью моделей RAIL

RAIL — это ориентированная на пользователя модель производительности. Каждое веб-приложение имеет четыре различных аспекта, связанных с его жизненным циклом, которые по-разному влияют на производительность:

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

Задержка и реакция пользователя:

0 - 16 мс	Пользователи могут воспринимать плавные анимированные переходы, отображаемые со скоростью 60 кадров в секунду. Это 16 миллисекунд на кадр.
0–100 мс	В течение этого временного окна в ответ на действия пользователей они почувствуют, что мы можем получить результаты немедленно. Затем на длительное время связь между операцией и реакцией прерывается.
100 - 300 мс	Пользователи испытывают слегка ощутимую задержку.
300 - 1000 мс	Для большинства пользователей в сети этот период времени представляет собой разумную задержку, когда задача продолжается.
1000+ мс	По прошествии 1 секунды внимание пользователя отвлечется от задачи, которую он выполняет.
10 000+ мс	Разочарованные пользователи могут отказаться от задания, после этого могут не вернуться.

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

Анимация: попробуйте сгенерировать кадр менее чем за 10 мс, потому что браузеру требуется время, чтобы нарисовать новый кадр на экране, поэтому для выполнения кода требуется всего 10 мс.

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

Загрузка: Попробуйте отобразить контент в течение 1000 мс.

Чтобы контролировать использование памяти в режиме реального времени с использованием Chrome Cass Cass Manager, откройте диспетчер задач, щелкните правой кнопкой мыши заголовок таблицы задач и включите память JavaScript.

Память может быть представлена ​​как графика, состоящая из нескольких межсоединений:

Объекты могут занимать память двумя способами:

• непосредственно самим объектом.
• Оставляя ссылки на другие объекты неявно занятыми, это предотвращает автоматическое удаление этих объектов сборщиком мусора (GC).

В профилировщике кучи:

• Неглубокий размер — сколько памяти занимает сам объект.
• Retained Size — объем памяти, освобожденный после удаления самого объекта вместе со связанными с ним объектами.

График памяти начинается с корня, которым может быть объект окна браузера или глобальный объект модуля Node.js. Поле Distance указывает расстояние от корня GC.

Любые объекты, которые не могут быть доступны из корня, собираются GC.

🖥 Демонстрация: исследование выделения памяти с помощью функции выборки распределения

Панель приложений (Приложение)

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

🖥 Демонстрация: просмотр и редактирование локального хранилища.

Панель безопасности (Безопасность)

Основная панель безопасности используется для просмотра общей безопасности страницы.

🖥 Демонстрация:

Незащищенные страницы будут передавать сообщениеThis page is not secure.намекать

Сравнивать:www.google.com/

другие панели

🖥 Демонстрация: аудит основан на Lighthouse и может использоваться для анализа производительности страницы.

Высокопроизводительная сеть для Chrome

С момента своего запуска в 2008 году Chrome занимает первое место на мировом рынке браузеров и постоянно растет.

Существует несколько принципов, лежащих в основе разработки браузера Chrome:

• Speed: Будьте самым быстрым браузером.
• Security: Предоставьте пользователям самую безопасную онлайн-среду.
• Stability: Обеспечьте надежную и стабильную платформу веб-приложений.
• Simplicity: Обеспечить чистый пользовательский опыт.

Упомянутая здесь высокопроизводительная сеть следует первому принципу: скорость.

Как упоминалось ранее, в жизненном цикле сетевого запроса есть много этапов:

Этот промежуточный поиск DNS, трехстороннее рукопожатие TCP, рукопожатие SSL и т. д. потребуют определенного времени.Для запросов, которые отвечают быстро, более 80 % служебных данных может приходиться на сеть.

Многопроцессорная архитектура Chrome придает большое значение обработке сетевых запросов браузера, и в настоящее время он поддерживает четыре различных режима выполнения:

• Процесс для экземпляра сайта: это открытие веб-сайта, а затем каждая вкладка, открытая с этого веб-сайта, принадлежит процессу. Преимущества: сильная изоляция; недостатки: высокие затраты памяти и сложная реализация.
• Процесс для каждого сайта: вкладки веб-сайтов с одинаковым доменным именем помещаются в один процесс.
• Process-per-Tab: вкладка процесса.
• Один процесс: традиционная модель, только один процесс.

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

Оптимизация функции прогнозирования Chrome Predictor:

Chrome становится быстрее с использованием. Predictor наблюдает и изучает текущую модель сетевой активности и заранее предсказывает следующее действие пользователя. Например:

• Когда пользователь наводит указатель мыши на ссылку, это указывает на предпочтения пользователя и следующее поведение при просмотре. В настоящее время Chrome может заранее выполнять поиск DNS и TCP-рукопожатие. В среднем операция щелчка пользователя занимает около 200 мс, и операции, связанные с DNS и TCP, могут быть обработаны в течение этого времени, что означает экономию сотен миллисекунд времени задержки.
• Когда в адресной строке срабатывает параметр высокой вероятности, он также запускает поиск DNS и предварительное подключение TCP и даже предварительный рендеринг на невидимой вкладке.
• У каждого из нас есть список веб-сайтов, которые мы посещаем каждый день, и Chrome изучает подресурсы на этих страницах и пытается выполнить предварительное разрешение и, возможно, даже предварительную выборку, чтобы оптимизировать работу в Интернете.

Chrome использует четыре метода оптимизации основных оптимизации:

• DNS Pre-Refolve: DNS предлогают, заранее разбирающиеся хост-адреса, чтобы уменьшить задержку DNS.
• Предварительное соединение TCP: предварительное соединение TCP, предварительное соединение с целевым сервером, чтобы уменьшить задержку установления связи TCP.
• Предварительная загрузка ресурсов: предварительная загрузка ресурсов, которая заранее загружает основные ресурсы страницы для ускорения отображения страницы.
• Предварительный рендеринг страницы: предварительный рендеринг страницы, получение всей страницы и связанных с ней подресурсов заранее.

🖥 Демонстрация:chrome://predictors/

Chrome хранит историю введенных пользователем префиксов, предлагаемых действий и показателей совпадений для каждого префикса. Например, если я обычно ввожу appl, то 100% захожу на официальный сайт Apple.

TL;DR

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