Знание браузера, которое вы должны знать о фронтенд-разработке

Мы часто используем браузеры для разработки, но до сих пор не понимаем некоторые механизмы браузеров, как код работает в браузере? Как отрендерить макет? Что делает браузер, когда срабатывает событие? Многие знания о браузерах, которые мы знаем, могут быть несовершенными, давайте рассмотрим их более подробно.

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

Это старый вопрос.Такой вопрос надо было задавать всем на собеседовании.Это тоже базовые знания, которые мы должны освоить.Ответы в интернете немного общие.Я собрал более подробный вариант.

1.1 Введите адрес в браузере

Пользователь вводит URL-адрес, например.www.feng.com. Среди них http — протокол, www.feng.com — сетевой адрес и указывает, на каком компьютере расположены требуемые ресурсы. Как правило, сетевой адрес может быть доменным именем или IP-адресом, здесь это доменное имя. Доменное имя используется для облегчения памяти, мы легко можем неправильно запомнить строку цифр, но для того, чтобы компьютер понял этот адрес, его нужно разобрать на IP-адрес.

1.2 Просмотр кеша браузера

Если вы посетили URL-адрес, вы сначала войдете в кеш браузера, чтобы проверить, есть ли запрашиваемый файл (кеш браузера сохраняет копию ресурса локально).

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

В сети будет отмечено, запрашивается ли запрос на сервере или в кеше браузера.

Существует два типа локальных кэшей для записей DNS для доменного имени: кэш браузера и кэш операционной системы (ОС).

1.2.1 Кэш браузера -Браузеры кэшируют записи DNS на определенный период времени. Обычно от 2 минут до 30 минут. При поиске кеша браузера он будет выглядеть по порядку: Service Worker-->Кэш памяти-->Кэш диска-->Push Cache.

Сервисный работник:

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

Кэш памяти:

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

Кэш диска:

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

Среди всех кешей браузера охват Disk Cache в основном самый большой. Он будет судить, какие ресурсы необходимо кэшировать в соответствии с полями в HTTP Herder, какие ресурсы можно использовать напрямую без запроса, а какие ресурсы просрочены и требуют повторного запроса. И даже в случае кросс-сайта, как только ресурс с тем же адресом будет закэширован жёстким диском, он больше не будет запрашивать данные. Большая часть кеша поступает из Disk Cache.

Нажмите кэш:

Push Cache (push cache) — это контент в HTTP/2, он будет использоваться, когда ни один из трех вышеуказанных кешей не сработает. Он существует только в сеансе (Session) и освобождается после завершения сеанса, а время кэширования также очень короткое, всего около 5 минут в браузере Chrome, и он строго не реализует инструкции кэширования в заголовке HTTP.

1.2.2системный кеш– Если требуемая запись не найдена в кеше браузера, браузер выполнит системный вызов для получения записи в кеше системы (gethostbyname в windows).

1.2.3кеш маршрутизатора– Далее предыдущий запрос запроса отправляется на маршрутизатор, который обычно имеет собственный кеш DNS.

1.2.4DNS-кеш провайдера— Следующее, что нужно проверить, — это сервер, на котором провайдер кэширует DNS. Соответствующие записи кэша обычно можно найти здесь.

1.2.5рекурсивный поиск– DNS-сервер вашего интернет-провайдера начинает рекурсивный поиск серверов имен, от серверов имен верхнего уровня .com до серверов имен Facebook. Как правило, кеш DNS-сервера будет иметь доменное имя на сервере доменных имен .com, поэтому процесс сопоставления с сервером верхнего уровня не так уж необходим.

1.3 Разрешение доменного имени DNS

Если к URL-адресу не обращались, будет выполнено разрешение доменного имени DNS.

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

DNS: Система доменных имен Система доменных имен (основанная на интерпретации спецификации RFC) представляет собой распределенную базу данных во Всемирной паутине, которая сопоставляет доменные имена и IP-адреса друг с другом, позволяя пользователям более удобно выходить в Интернет без необходимости запоминать данные, которые может быть непосредственно прочитана машинной строкой IP.

Процесс разрешения DNS:

1.3.1Клиент DNS, работающий на хосте пользователя, означает, что клиент нашего ПК или мобильного телефона запускает клиент DNS.

1.3.2Браузер извлекает поле доменного имени из полученного URL-адреса, которое является именем посещенного хоста, например www.feng.com, и передает имя хоста клиенту приложения DNS.

1.3.3Сторона DNS-клиента отправляет сообщение с запросом на сторону DNS-сервера, и сообщение содержит поле имени хоста, к которому необходимо получить доступ (включая некоторые запросы кэширования столбцов и работу распределенного кластера DNS).

1.3.4Клиент DNS в конечном итоге получит ответное сообщение, содержащее IP-адрес, соответствующий имени хоста.

1.3.5Как только браузер получает IP-адрес от DNS, он может инициировать TCP-соединение с HTTP-сервером, расположенным по этому IP-адресу.

1.4 Получить номер порта

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

1.5 Установка TCP-соединения

TCP-соединение — это знакомое трехстороннее рукопожатие, а четырехсторонняя волна — прохожий.

Процесс TCP-соединения:

1.5.1Сервер готов принимать входящие соединения через сокет, связываться и слушать, в это время сервер находится в состоянии Listen.

1.5.2Клиент инициирует активное соединение, вызывая соединение, в результате чего клиентский TCP отправляет байт SYN (синхронизация), сообщающий серверу начальный порядковый номер данных, которые клиент будет отправлять в (устанавливаемом) соединении, и состояние клиента SYN_SENT.

1.5.3Сервер подтверждает (ACK) SYN клиента и отправляет сам SYN, который содержит начальный порядковый номер, по которому сервер будет отправлять данные по тому же соединению.

1.5.4Клиент подтверждает ACK и SYN службы, отправляет ACK на сервер, и статус клиента ESTABLISHED.

1.5.5Сервер получает ACK, и статус сервера ESTABLISHED.

1.6 HTTP-запрос

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

1.6.1Протокол http отправляет запрос на сервер.В процессе отправки запроса браузер передает данные на веб-сервер в виде потока, сообщая веб-серверу, какое веб-приложение на сервере имеет доступ к веб-ресурсам.

1.6.2После того, как сервер получит данные, переданные браузером, начните синтаксический анализ полученных данных.Когда сервер анализирует запрос, узнайте, какой веб-ресурс в приложении клиентский браузер должен получить, тогда сервер прочитает этот веб-ресурс.Содержимое внутри будет передается в браузер в виде потока (потока).

1.7 Закрыть TCP

Процесс прерывания TCP-соединения:

1.7.1Один конец сначала вызывает close, чтобы стать активным завершающим концом, и отправляет сегмент FIN на другой конец, указывая, что передача данных завершена, и активное завершающее состояние FIN_WAIT_1 в это время;

1.7.2Пассивный закрывающий конец получает FIN, а FIN подтверждается TCP.Сначала на активный закрывающий конец отправляется ACK, который передается принимающему оконечному прикладному процессу в виде символа конца файла (после любых других данных, которые был поставлен в очередь для получения прикладным процессом), так как получение FIN означает, что прикладной процесс принимающей стороны не имеет дополнительных данных для получения по соответствующему соединению, а состояние принимающей стороны — CLOSE_WAIT; активная закрывающая сторона получает Состояние ACK и меняется на FIN_WAIT_2;

1.7.3Через некоторое время процесс приложения, который получает конец файла на принимающей стороне, вызывает close для закрытия сокета, отправляет FIN на активную закрывающую сторону, а принимающая сторона находится в состоянии LAST_ACK;

1.7.4Активная закрывающая сторона подтверждает FIN, статус изменяется на TIME_WAIT и отправляет ACK принимающей стороне.Принимающая сторона получает ACK и закрывает TCP, а активная закрывающая сторона также закрывает TCP через определенный период времени;

1.8 рендеринг в браузере

Когда браузер получает html-файл, он загружается сверху вниз, анализируется и отображается в процессе загрузки.

1. Браузер преобразует HTML в DOM-дерево.Процесс построения DOM-дерева представляет собой процесс глубокого обхода: после того, как все дочерние узлы текущего узла будут построены, будет построен следующий одноуровневый узел текущего узла.

2. Разберите CSS в дереве правил CSS.

3. Постройте дерево визуализации в соответствии с деревом DOM и CSSOM. Примечание. Дерево рендеринга дерева рендеринга не эквивалентно дереву DOM, потому что некоторые элементы, такие как заголовок или display:none, не обязательно размещать в дереве рендеринга.

4. С деревом рендеринга браузер уже может знать, какие узлы находятся на веб-странице, определения CSS каждого узла и их принадлежность. Следующая операция называется Layout и, как следует из названия, вычисляет положение каждого узла на экране.

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

2. Как браузер анализирует код?

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

2.1 Разбор HTML

Синтаксический анализ HTML выполняется построчно.

Механизм рендеринга браузера анализирует документ HTML и преобразует теги в узлы DOM в дереве содержимого.

Он анализирует данные стиля из элементов стиля и внешних файлов. Данные стиля и элементы управления отображением в HTML будут использоваться вместе для создания другого дерева — дерева рендеринга.

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

Парсер браузера обычно делит работу на две составляющие — токенизатор отвечает за разбиение ввода на последовательность допустимых символов, а парсер отвечает за анализ структуры документа и построение синтаксического дерева в соответствии с синтаксическими правилами. Лексер умеет фильтровать посторонние символы, такие как пробелы, символы новой строки и т.д.

Дерево, выдаваемое синтаксическим анализатором, состоит из элементов DOM и узлов атрибутов.

Существует почти однозначное соответствие между DOM и тегами, такими как следующие теги

<html>
    <body>
        <p>
            Hello 枫
        </p>
        <div> <img src="feng.png"/></div>
    </body>
</html>

будет преобразовано в дерево DOM, такое как:

2.2 Разбор CSS

Селекторы CSS читаются справа налево.

#molly div.haha span{color:#f00}

Как и в приведенном выше коде, браузер будет читать селекторы в порядке справа налево.

Сначала найдите диапазон, а затем поднимитесь, чтобы найти div с классом «ха-ха», а затем найдите элемент с идентификатором «molly».

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

Весь процесс сформирует индексное дерево, соответствующее правилам, а узлы сверху вниз дерева — это узлы, соответствующие селекторам справа налево в правиле.

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

Если есть 100 или даже 1000 ветвей, это будет потреблять много производительности. И наоборот, поиск справа налево значительно сокращает диапазон поиска для повышения производительности.

Это объясняет, почему селекторы идентификаторов больше, чем селекторы классов, а селекторы классов больше, чем селекторы элементов.

2.3 Разбор JS

В браузере есть инструмент парсера js, который специально используется для разбора нашего кода js.

Когда браузер сталкивается с js-кодом, он немедленно вызывает «парсер js» для работы.

Парсер найдет все переменные, функции, параметры и т. д. в js и присвоит переменной значение undefined.

Функция выносится в функциональный блок, а затем хранится на складе. После этого код анализируется построчно (сверху вниз, слева направо), а затем сопоставляется со складом.

<script>
alert(a);   //undefined
var a = 1;
alert(a);   //1
</script>

<script>
a = 1;
alert(a);
//这个时候会运行报错！
//这时候a并不是一个变量，解析器找不到，仓库里面并没有a
</script>

Посмотрите еще раз на этот код

<script>
    alert(a);    //function a(){alert(4)}
    var a = 1;
    alert(a);    //1
    function a(){alert(2)}
    alert(a);    //1
    var a = 3;
    alert(a);    //3
    function a(){alert(4)}
    alert(a);    //3
</script>

При предварительном анализе js сохраняется только функциональный блок, если переменная и функция имеют одинаковое имя. Выражения (+, -, *, /, %, ++, –, параметры...) изменят соответствующее значение в репозитории при разборе кода построчно.

Давайте взглянем на слово «сфера действия» и немного разберем его.
Функция: операции чтения и записи
Домен: пространство, экстент, площадь…
Соединение — это область, доступная для чтения и записи.
«Область»: функции, json, ... используются в качестве области.
Глобальные переменные, локальные переменные, глобальные функции
Сегмент также является доменом. Когда домен разрешается, он также разрешается сверху вниз. Это объясняет, почему ссылки на внешние общедоступные файлы js (например, jquery) следует размещать поверх пользовательских js.

Посмотрите еще раз на этот код

<script>
    var a = 1;
    function fn(){
        alert(a);    //undefined
        var a = 2;
    }
    fn();
    alert(a);    //1
</script>

Продолжайте отслеживать процесс разбора парсера: сначала внешняя функция fn() — это глобальная переменная, а внутренняя fn() — локальная переменная. Функция fn() также является областью действия, поскольку она является областью действия, она должна выполнять этапы предварительного и построчного анализа. Таким образом, первое предупреждение выводит переменную a, на которую указывает хранилище, в области видимости fn(), которая не определена. Второе предупреждение выводит глобальную переменную a, которая равна 1.

Далее продолжаем смотреть код, в принципе тот же код, я немного поменял местами.

<script>
    var a = 1;
    function fn(){
        alert(a);    //1
        a = 2;
    }
    fn();
    alert(a);    //2
</script>

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

Здесь возникает проблема цепочки областей видимости. Весь процесс парсинга похож на цепочку. Сверху вниз, изнутри наружу. Локальный может читать и записывать глобальный, но глобальный не может читать и записывать локальный.

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

<script>
    var a = 1;
    function fn(a){
        alert(a);    //undefined
        a = 2;
    }
    fn();
    alert(a);    //1
</script>

Не забывайте, что браузеру нужно найти некоторые параметры помимо переменных и функций во время пре-парсинга и присвоить им значение undefined. Таким образом, fn(a) здесь эквивалентно fn(var a), и логика на этот раз такая же, как и в первом примере кода.

Продолжайте делать вещи, продолжайте смотреть на код, в основном тот же код, я снова изменил небольшое место.

<script>
    var a = 1;
    function fn(a){
        alert(a);    //1
        a = 2;
    }
    fn(a);
    alert(a);    //1
</script>

Когда код выполняется для fn(a), вызывается функция fn() и глобальная переменная a передается в качестве параметра.

В это время выводится, естественно, 1. Помните, что функция fn(a) эквивалентна функции fn(var a), поэтому в это время a=2, локальная переменная a изменена, и это не влияет на глобальную переменную a, поэтому второй Второй отпечаток по-прежнему равен 1.

3. Механизм сборки мусора в браузере

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

Интерпретатор JavaScript может определить, когда программа больше не использует объект.Когда он определяет, что объект бесполезен, он знает, что объект больше не нужен, и может освободить занимаемую им память.

var a = "before";
var b = "override a";
var a = b; //重写a

После выполнения этого кода строка «до» теряет свою ссылку (на нее ссылался a), и после того, как система обнаруживает этот факт, она освобождает место для хранения строки, чтобы ее можно было использовать повторно.

Браузеры обычно используют два метода сборки мусора: удаление меток и подсчет ссылок.

3.1 Удаление тегов

Это самый распространенный способ сборки мусора в javascript. Когда переменная входит в среду выполнения, пометьте переменную как «входящую в среду». Логически память, занимаемая входящими в среду переменными, никогда не может быть освобождена, потому что они могут быть использованы, как только поток выполнения войдет в соответствующую среду. Когда переменная покидает среду, она помечается как «выходящая из среды».

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

Когда объект не может быть пройден от корневого объекта по ссылке, то есть недоступен (unreachable), он очищается. В приведенном выше примере к a и b в fn() нельзя получить доступ через внешний контекст после выполнения функции, поэтому их можно очистить.

Это текущий основной алгоритм GC, который используется в V8.

不管是高级语言，还是低级语言。内存的管理都是：分配内存使用内存（读或写）释放内存前两步，大家都没有太大异议。关键是释放内存这一步，各种语言都有自己的垃圾回收（garbage collection, 简称GC）机制。

В большинстве сценариев приложений: вновь созданный объект, жизненный цикл обычно очень короткий. Следовательно, в V8, обработка GC разделена на две категории: новое поколение и старое поколение.

Пространство кучи нового поколения составляет 1M~8M и делится на две части (to-space и from-space).Обычно для вновь созданного объекта память выделяется в новом поколении. Когда to-space заполняется, to-space и form-space меняются позициями (в это время to пусто, а from заполнено), и выполняется GC. Если объект определен как неиспользуемый, он будет очищен; если на него есть ссылка, количество экранирований +1 (если количество экранирований в этот момент равно 2, он будет перемещен в старое поколение, в противном случае он будет переехал в космос).

У старого поколения большое пространство кучи, а GC не подходит для нового поколения, которое разделено на два пространства по времени. Сборка мусора старого поколения делится на два этапа: маркировку и очистку (есть два способа Sweeping и Compacting).

Маркеры, используя 3-цветные маркеры: черный, белый, серый. Действуйте следующим образом:

Сборщик мусора запускается, поэтому объекты помечаются белым цветом.

Корневой объект помечен черным и начинает обход своих дочерних элементов (объектов, на которые ссылаются).

Текущий пройденный узел, отмеченный серым цветом, помещается в стек, называемый растровым изображением маркировки. В стеке пометьте пройденный в данный момент узел черным цветом и извлеките его из стека, а в то же время пометьте его дочерние узлы (если они есть) серым цветом и поместите его в стек. (Большие объекты являются особыми и не будут здесь раскрываться)

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

3.2 Количество цитирований

Смысл подсчета ссылок заключается в отслеживании количества ссылок на каждое значение. Когда переменная объявляется и ей присваивается ссылочный тип, количество ссылок на это значение равно 1. И наоборот, если переменная, содержащая ссылку на это значение, принимает другое значение, количество ссылок на это значение уменьшается на 1. Когда количество ссылок становится равным 0, это означает, что нет возможности получить доступ к этому значению, поэтому занимаемое им пространство памяти может быть восстановлено. Таким образом, при следующем запуске сборщика мусора он освободит память, занятую значениями, счетчик ссылок которых равен 0.

Но есть проблема с этим методом, давайте посмотрим на код:

function problem() {
    var objA = new Object();
    var objB = new Object();

    objA.someOtherObject = objB;
    objB.anotherObject = objA;
}

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

Большинство браузеров отказались от этого метода утилизации.

4. Локальное хранилище браузера

Если я спрошу вас, что такое кэши в браузере, думаю, большинство людей ответят, что их три вида: cookie, sessionStorage, localStorage.

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

Еще одна вещь, здесь их пять: файлы cookie, локальное хранилище, хранилище сеансов, WebSQL и IndexedDB.

4.1 cookie

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

Сам протокол HTTP не имеет состояния. Что такое stateless, то есть сервер не может определить личность пользователя. Файл cookie на самом деле представляет собой небольшой фрагмент текстовой информации (формат «ключ-значение»). Клиент инициирует запрос к серверу, и если серверу необходимо записать статус пользователя, он использует ответ для выдачи файла cookie браузеру клиента. Браузер клиента сохранит файл cookie. Когда браузер снова запрашивает веб-сайт, браузер отправляет запрошенный URL-адрес на сервер вместе с файлом cookie. Сервер проверяет файл cookie, чтобы определить статус пользователя.

4.2 Local Storage Session Storage

И локальное хранилище, и хранилище сеансов принадлежат веб-хранилищу. Веб-хранилище похоже на файлы cookie, разница в том, что оно имеет больший объем памяти. Где локальное хранилище является постоянным локальным хранилищем, если мы не удалим данные активно, они всегда будут храниться локально. Хранилище сеанса существует только в сеансе сеанса, то есть его можно использовать только на странице того же сеанса.Когда сеанс сеанса заканчивается, данные будут автоматически освобождены.

4.3 Сравнение локального хранилища файлов cookie Хранилище сеансов

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

характеристика

Local Storage

Session Storage

время жизни данных

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

Постоянный, если явно не очищен

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

размер данных хранилища

Около 4 КБ

5МБ~10МБ (разные браузеры, разные ситуации)

Связь с серверной частью

Он будет каждый раз передаваться в заголовке HTTP.Если вы используете файлы cookie для сохранения слишком большого объема данных, это приведет к проблемам с производительностью и безопасностью.

Он сохраняется только в клиенте (например, браузере) и не участвует в связи с сервером

Он сохраняется только в клиенте (т.е. в браузере) и не участвует в обмене данными с сервером.

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

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

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

Сценарии применения

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

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

Если на странице несколько форм, вы можете использовать хранилище сеансов, чтобы разделить страницу формы и оптимизировать взаимодействие с пользователем.

Уведомление

Не сохраняйте системные данные в файлы cookie, локальное хранилище, хранилище сеансов, чтобы предотвратить риск внедрения XSS. Поскольку XSS-инъекция может изменить значения ваших атрибутов через консоль, вы можете обратиться к другому блогу, который я написал для получения подробной информации, Front-End Hacking Technology.

4.4 WebSQL

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

WebSQL — это, точнее, WebSQL DB API, который представляет собой интерфейс веб-API для работы с локальной базой данных, а работа с клиентской базой данных может выполняться через API. Когда мы используем WebSQL, мы можем легко использовать SQL для добавления, удаления, изменения и запроса данных. Эти браузерные клиенты, такие как Chrome и Safari, используют SQLite для реализации локального хранилища, а WeChat использует SQLite в качестве хранилища локальных записей чата.

4.5 IndexedDB

IndexedDB — это локальная база данных, предоставляемая браузером, которую можно создавать и управлять ею с помощью веб-скриптов. Он может хранить большой объем данных, предоставляет интерфейс поиска и может создавать индексы. Но это не реляционная база данных (не поддерживает операторы запросов SQL, больше похожие на базы данных NoSQL).

Возможности IndexedDB:

Хранение пар ключ-значение: IndexedDB внутренне использует хранилище объектов для хранения данных. Все типы данных могут храниться напрямую, включая объекты JavaScript. В хранилище объектов данные хранятся в виде «пар ключ-значение». Каждая запись данных имеет соответствующий первичный ключ, первичный ключ уникален, и при его дублировании будет выдана ошибка.
Асинхронный: операции IndexedDB не блокируют браузер, и пользователи по-прежнему могут выполнять другие операции.В отличие от синхронных операций локального хранилища, асинхронный дизайн предназначен для чтения и записи большого объема данных, что снижает производительность страницы и уменьшает пользовательский опыт.
Поддержка транзакций: IndexedDB поддерживает транзакции, что означает, что на некоторых этапах операции столбца, если на определенном этапе есть исключение, вся транзакция исчезнет, а база данных будет возвращена в состояние до возникновения транзакции, и не будет записана только часть данных.
Ограничение одного и того же происхождения: на IndexedDB распространяется ограничение одного и того же происхождения, и каждая база данных соответствует доменному имени, которое ее создало. Веб-страницы могут обращаться к базам данных только под своими доменными именами, но не могут обращаться к междоменным базам данных IndexedDB.
Большое пространство для хранения. Объем хранилища IndexedDB обычно составляет не менее 250 МБ или больше.
Поддержка двоичного хранилища: IndexedDB может хранить не только строки, но и двоичные данные (объекты ArrayBuffer и объекты Blob).

Транзакция — это концепция базы данных,дела(транзакция) — последовательность операций с базой данных, которые обращаются к различным элементам данных и, возможно, манипулируют ими.Эти операции либо выполняются все, либо не выполняются вообще и представляют собой неделимую единицу работы. Транзакция состоит из всех операций с базой данных, выполненных между началом и концом транзакции.

5. Потоки браузера

Когда мы обычно используем JavaScript, мы все знаем, что js — однопоточный, а браузеры — многопоточный.

5.1 CPU

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

5.2 процесса

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

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

5.3 Потоки

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

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

5.4 Многопоточность браузера

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

Поток рендеринга графического интерфейса
Поток движка JavaScript
поток триггера события
синхронизированный триггерный поток
Асинхронный поток HTTP-запросов

5.4.1 Поток рендеринга GUI

Поток рендеринга GUI отвечает за рендеринг HTML-элементов интерфейса браузера, синтаксический анализ HTML, CSS, построение дерева DOM и дерева RenderObject, компоновку и рисование и т. д.

Когда интерфейс необходимо перерисовать (Repaint) или вызвать перекомпоновку (reflow) (перекомпоновку) какой-либо операцией, этот поток будет выполняться.

Когда механизм Javascript запускает сценарий, поток рендеринга GUI находится в состоянии приостановки, то есть он «заморожен», а обновление графического интерфейса будет сохранено в очереди и выполнено немедленно, когда механизм JS простаивает.

5.4.2 Поток движка JavaScript

Движок JavaScript, также известный как ядро JS, в основном отвечает за обработку программ-скриптов Javascript, таких как движок V8.

Движок JS ожидает поступления задач в очередь задач, а затем обрабатывает их.В любой момент существует только один поток JS, выполняющий программу JS (одиночный поток) на вкладке (процесс рендеринга).

注意：GUI渲染线程和JavaScript引擎线程互斥。

Поскольку JavaScript является управляемым DOM, и если в то же время интерфейс рендеринга изменить атрибуты этих элементов (т. е. поток JavaScript и поток пользовательского интерфейса, работающие одновременно), то элементы данных, полученные до и после потока рендеринга, могут не совпадать. .

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

Если время выполнения JS слишком велико, рендеринг страницы будет бессвязным, что приведет к ощущению, что рендеринг и загрузка страницы заблокированы.

5.4.3 Поток триггера события

Когда событие инициировано, поток добавит событие в конец очереди ожидания, ожидая, пока механизм JS обработает его.

Эти события могут быть в настоящее время выполняемыми блоками кода, такими как временные задачи, или другими потоками из ядра браузера, такими как щелчки мыши, асинхронные запросы AJAX и т. д., но из-за однопоточных отношений JS все эти события должны быть поставлены в очередь. для обработки движком JS.

5.4.4 Поток синхронизированного триггера

setIntervalа такжеsetTimeoutНить

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

Синхронизация и запуск синхронизации через отдельный поток (после того, как синхронизация завершена, добавьте его в очередь событий и подождите, пока JS-движок будет бездействовать перед выполнением)

Обратите внимание, что W3C предусматривает в стандарте HTML, что временной интервал менее 4 мс в setTimeout должен считаться 4 мс.

5.4.5 Поток асинхронного HTTP-запроса

После подключения XMLHttpRequest через браузер открывается новый запрос потока.

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

6. Совместимость с браузером

Проблема совместимости браузеров всегда была головной болью.Некоторое время назад я еще боролся с совместимостью IE с qiankun.

6.1 Почему наш код несовместим с браузерами?

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

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

6.2 Как решить?

6.2.1 CSS Hack

Что касается CSS, мы можем использовать CSS Hack. CSS хак позволяет разным браузерам распознавать разные символы, добавляя некоторые специальные символы, то есть префиксы браузера, в стили CSS (какой браузер распознает, какие символы являются стандартными, CSS хак позволяет вам запомнить Живой этот стандарт) для этой цели применения различных стилей CSS.

6.2.2 polyfill

На стороне JS мы можем использовать полифиллы. Полифилл — это фрагмент кода (или плагин), предоставляющий функциональные возможности, которые разработчики хотели бы поддерживать в собственных браузерах. Библиотека сначала проверяет, поддерживает ли браузер API, и если нет, загружает соответствующий полифилл. Например, хранилище html5. Разные браузеры, разные версии, кто-то поддерживает, кто-то нет. По сути, полифилл — это своего рода прокладка.

Shim 指的是在一个旧的环境中模拟出一个新 API ，而且仅靠旧环境中已有的手段实现，以便所有的浏览
器具有相同的行为。

6.2.3 PostCSS

PostCSS — это инструмент, который использует плагины JS для преобразования CSS, Эти плагины очень мощные и мощные. Среди них Autoprefixer — самый популярный из многих плагинов PostCSS.

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

6.2.4 Modernizr.js

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

Modernizr по умолчанию делает очень мало, за исключением (по вашему выбору) добавления небольшого сценария прокладки html5, разработанного Реми Шарпом, к браузерам, которые не поддерживают теги html5, такие как IE6, 7, 8, чтобы он распознал

и другие элементы html5, он в основном определяет функции браузера. Таким образом, он знает, поддерживает ли браузер различные функции html5 и css3.

7. Безопасность браузера

Обратитесь к другой моей статье:

Технологии взлома и безопасности в разработке веб-интерфейса (всего семь)