Узнайте о «Сборке мусора в браузере» из 4 вопросов на собеседовании

опрос

Сборка мусора в браузере всегда была обычной частью фронтенд-интервью, и я никогда не понимал этого. Недавно я подробно изучил его и постарался разъяснить в статье.

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

  1. Как браузеры выполняют сборку мусора?
  2. Когда освобождается память разных типов переменных в браузере?
  3. Какие ситуации могут привести к утечке памяти? Как этого избежать?
  4. weakMap weakSetа такжеMap SetКакая разница?

хорошо пойдем!

Что такое ненужные данные?

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

Точно так же, когда мы пишем код js, мы часто манипулируем данными.

Когда некоторые данные не нужны, это мусорные данные, и память, занятая мусорными данными, должна быть переработана.

переменный жизненный цикл

Например этот кусок кода:

let dog = new Object()
 dog.a = new Array(1)

Когда JavaScript выполняет этот код,

сначала добавитdogатрибут и создал в куче пустой объект, указывающий на адрес объектаdog.

Затем создайте массив размером 1 и укажите адрес свойства наdog.a. Схема размещения памяти на данный момент выглядит следующим образом:

Если в это время я назначу другой объектaсвойства, код выглядит следующим образом:

dog.a = new Object()

Схема размещения памяти на данный момент:

aНаправление изменилось, В этот момент объекты массива в куче становятся неиспользуемыми данными, а технический термин — «недоступные» данные.

Это мусорные данные, которые необходимо собрать.

Алгоритм сборки мусора

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

Шаг 1: Отметьте «достижимое» значение в пространстве.

V8 использует алгоритм достижимости, чтобы определить, следует ли освобождать объекты в куче.

Идея этого алгоритма заключается в следующем:

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

В среде браузера существует множество корневых узлов, в основном в том числе следующие:

  • глобальная переменнаяwindow, на каждыйiframeсередина
  • ДокументацияDOMДерево
  • ...

Эти корневые узлы не являются мусором и не могут быть переработаны.

Шаг 2: Восстановите память, занятую «недоступным» значением.

После завершения всех маркировок равномерно очищаем все недоступные объекты в памяти.

Третий шаг – организовать память.

  • После частого освобождения объектов в памяти будет большое количество прерывистого пространства, что называется «фрагментацией памяти».
  • Когда в памяти появляется большое количество фрагментов памяти, если необходимо выделить большую непрерывную память, может не хватать памяти.
  • Итак, последний шаг — дефрагментация памяти. (Но на самом деле этот шаг необязателен, потому что некоторые сборщики мусора не создают фрагментацию памяти, например вторичный сборщик мусора, который мы представим далее.)

Когда вывозится мусор?

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

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

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

Коллекция поколений

Браузеры делят данные на два типа: один является «временным» объектом, а другой — «постоянным».

  • Временный объект:
    • Большинство объектов живет в памяти в течение короткого времени.
    • Например, переменные, объявленные внутри функций, или переменные в области блока. Когда выполнение функции или блока кода заканчивается, переменные, определенные в области видимости, уничтожаются.
    • Такие объекты быстро становятся недоступными и должны быть быстро восстановлены.
  • Постоянные объекты:
    • Объекты с длительным жизненным циклом, такие как глобальныеwindow、DOM、Web APIи т.п.
    • Такие объекты можно медленно перерабатывать.

Эти два объекта соответствуют разным стратегиям утилизации, поэтому V8 делит кучу на две области: новое поколение и старое поколение. Временные объекты хранятся в молодом поколении, а постоянные объекты хранятся в старом поколении.

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

Это обеспечивает эффективную сборку мусора.

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

главный сборщик мусора

За сборку мусора старого поколения отвечают две характеристики:

  1. Объекты занимают много места.
  2. Предметы живут долго.

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

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

Вторичный сборщик мусора

Отвечает за сборку мусора нового поколения, обычно поддерживает только емкость 1~8M.

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

  1. Сначала отметьте весь мусор в районе объекта.

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

  3. После завершения копирования область объекта и свободная область меняются местами. Поместите объекты, которые выживают в свободной области, в область объектов.Таким образом, сборка мусора завершена.

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

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

Коллекция поколений

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

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

Инкрементная коллекция

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

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

Это решает проблему долгих пауз.

коллекция свободного времени

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

Вопрос интервью 1: Как браузер выполняет сборку мусора?

Ответьте по трем пунктам, что такое мусор, как убирать мусор и когда убирать мусор.

  1. что такое мусор
    • больше не нужно, это хлам
    • Глобальные переменные можно использовать в любое время, поэтому они не должны быть мусором.
  2. Как подобрать мусор (алгоритм обхода)
    • «Достижимое» значение в пространстве тегов.
      • Начиная с корневого узла (Root), обходим все объекты.
      • Объект, который можно обойти, достижим.
      • Объект, который не был пройден, недоступен
    • Освободить память, занятую «недоступными» значениями.
    • Делайте сортировку памяти.
  3. когда убирать мусор
    • Внешний интерфейс имеет свою специфику, и страница будет зависать во время сборки мусора.
    • Генерационный сбор, добавочный сбор и бездействующий сбор.

Вопрос интервью 2: Когда освобождается память различных типов переменных в браузере?

Типы в Javascript: типы значений, ссылочные типы.

  • тип ссылки
    • Автоматически восстанавливается V8 после отсутствия ссылок.
  • тип значения
    • Если это в случае замыкания, оно не будет переработано V8 до тех пор, пока замыкание не будет иметь ссылки.
    • В случае незакрытия он перерабатывается при ожидании перехода на новое поколение V8.

Вопрос интервью 3: Какие ситуации могут привести к утечке памяти? Как этого избежать?

Утечка памяти относится к переменной, которую вы «не можете использовать» (не можете получить доступ), которая все еще занимает место в памяти и не может быть использована снова.

Для Vue например, обычно есть эти ситуации:

  • слушаюwindow/bodyПодождите, пока событие не отвяжется
  • привязан кEventBusСобытие не несвязанное
  • Vuexиз$store,watchнет послеunwatch
  • Создано с использованием сторонней библиотеки, не вызывается корректная функция уничтожения

Решение:beforeDestroyуничтожено вовремя

  • границаDOM/BOMсобытия в объектахaddEventListener,removeEventListener.
  • Шаблон наблюдателя$on,$offиметь дело с.
  • Если в компоненте используется таймер, его следует уничтожить.
  • если вmounted/createdВ хуке используется сторонняя библиотека для его инициализации и уничтожения соответственно.
  • Используйте слабые ссылкиweakMap,weakSet.

Вызывают ли замыкания утечки памяти?

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

Вызывают ли замыкания утечки памяти? Правильный ответ - нет.

Утечка памяти относится к переменной, которую вы «не можете использовать» (не можете получить доступ), которая все еще занимает место в памяти и не может быть использована снова.

Переменные в замыкании — это те переменные, которые нам нужны, и их нельзя назвать утечками памяти.

Как возникло это недоразумение? из-за ИЕ. В IE есть ошибка: после того, как мы используем замыкание, IE по-прежнему не может повторно использовать переменные, на которые ссылается замыкание. Это проблема IE, а не проблема закрытия. обратитесь к этомустатья

4 Вопросы лица:weakMap weakSetа такжеMap SetКакая разница?

В ES6 мы добавили две новые структуры данных, WeakMap и WeakSet, чтобы решить проблему утечек памяти.

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

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

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

Более подробное введение можно найти здесь:Вопрос 4: Расскажите о различиях между Set, Map, WeakSet и WeakMap.

Суммировать

Теперь, когда у нас есть краткое представление о механизме сборки мусора в браузере, помните первые 4 вопроса?

  1. Как браузеры выполняют сборку мусора?

Отвечая на вопросы: что такое мусор, как собирать мусор и когда собирать мусор.

  1. Когда освобождается память разных типов переменных в браузере?

Идеи ответов: разделены на типы значений, ссылочные типы.

  1. Какие ситуации могут привести к утечке памяти? Как этого избежать?

Ответ на вопрос: Утечки памяти относятся к переменным, которые вы «не можете использовать» (не можете получить доступ), которые все еще занимают место в памяти и не могут быть использованы снова.

  1. weakMap weakSetа такжеMap SetКакая разница?

Идеи ответов на вопросы:WeakMap,WeakSetСлабые ссылки для решения проблемы утечки памяти.

Ссылаться на

Уровень автора ограничен, если в статье есть ошибки, просьба указывать старшим братьям, спасибо~!

Категории