Многопоточность браузера и однопоточность js

1. Что такое процессы и потоки

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

1. Процесс

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

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

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

Компьютеры Mac могут просматривать количество запущенных процессов в Activity Monitor:

монитор активности

2. Нить

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

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

Если у вас все еще есть сомнения в понимании процессов и потоков, вы можете обратиться к следующим статьям👇Вууху. Руань Ифэн.com/blog/2013/0…

Для получения информации о том, как одноядерные процессоры, многоядерные процессоры и мультипроцессоры обрабатывают процессы и потоки, вы можете обратиться к следующим статьям👇blog.CSDN.net/Алин Год/AR… Зерно и масло в формате JSON Jun.ITeye.com/blog/235827…

Во-вторых, многопроцессорность браузера

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

Разные браузеры используют разные архитектурные шаблоны, здесь мы только изучаемChromeДля браузера, представленного:

Chrome использует многопроцессорную архитектуру.

Различные процессы Chrome

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

1,Основные процессы Chrome и их обязанности

Browser ProcessОсновной процесс браузера (отвечает за координацию, главный контроль) (1) Отвечает за работу, включая адресную строку, панель закладок, кнопки «вперед» и «назад» и т. д. (2) Отвечает за обработку некоторых невидимых базовых операций браузера, таких как сетевые запросы и доступ к файлам. (3) Отвечает за управление каждой страницей, создание и уничтожение других процессов.
Renderer ProcessОтвечает за все на вкладке о рендеринге веб-страницы, рендеринге страницы, выполнении скрипта, обработке событий и т. д.
Plugin ProcessОтвечает за управление всеми плагинами, используемыми веб-страницей, такими как flash. Один процесс для каждого типа подключаемого модуля, создаваемый только при использовании этого подключаемого модуля.
GPU ProcessОтвечает за обработку задач, связанных с графическим процессором.

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

Chrome также предоставляет нам «Диспетчер задач», чтобы мы могли легко просматривать все процессы, запущенные в текущем браузере, и системные ресурсы, занятые каждым процессом, и дважды щелкнуть, чтобы просмотреть дополнительную информацию о категории.

Соответствующую панель можно открыть через «три точки в правом верхнем углу страницы — дополнительные инструменты — диспетчер задач».

диспетчер задач

2. Преимущества и недостатки многопроцессорной архитектуры Chrome

преимущество:(1) Проблема с процессом рендеринга не повлияет на другие процессы. (2) Это более безопасно, а разрешения различных процессов ограничены на системном уровне.

недостаток:(1) Поскольку память между разными процессами не используется совместно, память разных процессов часто должна содержать одно и то же содержимое.В целях экономии памяти Chrome ограничивает максимальное количество процессов. Максимальное количество процессов определяется объемом памяти и возможностями процессора устройства. При достижении этого ограничения вновь открытая вкладка будет совместно использовать процесс рендеринга того же сайта. до.

Chrome рассматривает функции разных программ браузера как сервисы, и эти сервисы можно легко разделить на разные процессы или объединить в один процесс.

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

Третий, многопоточный браузер

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

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

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

1. Поток рендеринга графического интерфейса

Отвечает за отрисовку HTML-элементов интерфейса браузера. Когда интерфейс необходимо перерисовать (Repaint) или вызвать перекомпоновку (reflow) в результате какой-либо операции, этот поток будет выполняться. В то время как механизм Javascript запускает сценарий, поток рендеринга GUI находится в приостановленном состоянии, то есть он «заморожен».

ps: Разница между перестановкой и перерисовкой, если интересно, смотрите по ссылке 👇nuggets.capable/post/684490…

2. Поток движка JavaScript

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

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

3. Временная триггерная нить

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

4, поток событий

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

5. Асинхронный поток HTTP-запросов

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

let xhr = new XMLHttpRequest();   // 不兼容ie6及更低,创建ajax实例
  xhr.open('get',`json/banner.json?_${Math.random()}`); //打开请求：发送请求前的一些配置项,get有缓存，所以要加随机数，post不用
  xhr.onreadystatechange = ()=>{
     // 事件监听，ajax状态改变事件，基于这个事件可以获取服务器返回的响应头主体内容（响应头先回来）
     // 从这步开始，当前ajax任务开始，如果是同步的，后续代码不执行，要等到ajax状态成功后再执行，如果是异步的，不会
      if(xhr.readyState === 4 && /^(2|3)\d{2}$/.test(xhr.status)){
          //readyState 请求状态   // status 返回状态
          let data = JSON.parse(xhr.responseText);  // 获取响应主体的内容
      }
  };
  xhr.send(null); // 发送 ajax (括号中传递的内容就是请求主体的内容)

Это простой четырехэтапный запрос XMLHttpRequest, основанный на репрезентативных продуктах XMLHttpRequest $.ajax, axios и т. д.

3. Почему Js однопоточный?

Единый поток js связан с его назначением.Как язык сценариев браузера, он в основном используется для обработки взаимодействия пользователя на странице и для управления деревом DOM и деревом стилей CSS, чтобы предоставить пользователю динамичный и богатый интерактивный опыт. и сервер Логическая интерактивная обработка.

Если JavaScript использует эти DOM пользовательского интерфейса в многопоточном режиме, могут возникнуть конфликты в операциях пользовательского интерфейса;

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

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

Это также объясняет, почему поток GUI и движок JS являются взаимоисключающими.

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

Для вычислительной мощности многоядерных процессоров HTML5 предлагает стандарт Web Worker, который позволяет сценариям JavaScript создавать несколько потоков, но подпотоки полностью контролируются основным потоком и не должны работать с DOM. Таким образом, этот новый стандарт не меняет однопоточной природы JavaScript.

4. Какие проблемы принесет однопоточность Js? Как с этим бороться?

Что происходит, когда вызов функции в стеке вызовов отнимает у нас много времени?

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

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

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

Но это испортит ваш пользовательский опыт

При разработке js есть очень важная концепция:

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

Кто скажет движку JS выполнить вашу программу? На самом деле движок JS не работает сам по себе — он работает в среде хостинга, которая для большинства разработчиков является типичным браузером и Node.js. На самом деле, сегодня JavaScript используется во всем, от роботов до лампочек. Каждое устройство представляет отдельный тип среды размещения JS-движка.

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

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

Так, например, когда ваша программа JavaScript отправляет Ajax-запрос серверу для получения данных, вы пишете код «ответа» в функции (обратный вызов), и механизм JS сообщает хост-среде: «Эй, я собираюсь чтобы приостановить выполнение сейчас. , но когда вы завершите сетевой запрос и получите данные, вернитесь и вызовите эту функцию."

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

Браузерный тип EventLoop

Если хотите узнать об этом подробнее, ссылка 👇:web.jobbole.com/95613/