Краткий анализ Buffer в Node.js и разговор о цикле событий

Использование буфера

двоичные данные

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

• JS может напрямую обрабатывать очень интуитивные данные: например, строки. Обычно мы показываем это содержимое пользователям,

• но вы можете подумать, что это JS. Также может обрабатывать изображения.

  • Фактически, на веб-странице изображения всегда обрабатываются
  • браузером с помощью JS или HTML . Он отвечает только за сообщение браузеру адреса изображения.
  • Браузер отвечает за отправку запроса на получение. изображение и, наконец, рендеринг изображения.

• Однако для сервера все по-другому.

  • Серверу приходится обрабатывать относительно много локальных типов файлов.
  • Например, файл, который сохраняет текст, кодируется не с помощью utf-8 , а с помощью GBK . мы должны прочитать их. Двоичные данные затем преобразуются в соответствующий текст через GKB.
  • Например, нам нужно прочитать данные изображения (двоичные), а затем выполнить вторичную обработку данных изображения с помощью некоторых средств (обрезка, преобразование формата, т. д.). вращение, добавление фильтров), в Node есть библиотека sharp , которая отвечает за чтение картинок или Buffer входящих картинок и их последующую обработку.
  • Например, в Node устанавливается длинное соединение через TCP , передающее байт. поток Нам нужно Данные преобразуются в байты перед передачей, и размер передаваемых байтов должен быть известен (клиент должен судить, какой объем контента нужно прочитать, исходя из размера).

Буферный и двоичный.

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

• Поэтому, чтобы облегчить разработчикам выполнение большего количества функций

.

• Node предоставляет нам класс с именем Buffer , и он является глобальным. Как

• мы уже говорили, двоичные данные хранятся в Buffer, так как же они хранятся?

  • Мы можем думать о Buffer как о массиве, хранящем двоичные данные.
  • Каждый элемент в этом массиве может хранить 8 -битный двоичный код: 00000000 , что составляет ровно один байт

• . Почему он 8-битный?

  • В компьютерах очень мало случаев, когда мы напрямую оперируем двоичным битом. Поскольку данные, хранящиеся в двоичном бите, очень ограничены
  • , 8 бит обычно объединяются в единицу byte
  • Другими словами, 1 byte = 8 bit
  .
  • 1 byte = 8 bit , 1kb = 1024 byte , 1M = 1024kb , 1 G = 1024 M
  • Например, тип int во многих языках программирования составляет 4 байта, а тип long — 8 байт.
  • Например, TCP передает
  For.
  • потоки байтов, количество байтов необходимо указывать при записи и чтении.
  • Например, значения RGB равны 255 соответственно, поэтому по сути

Buffer и строковый

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

• Если мы хотим поместить строку в буфер, каков процесс?

  • Передайте строку непосредственно в класс Buffer, а затем создайте экземпляр buffer .
  • Английские строки имеют характеристику. Каждый символ соответствует байту двоичной кодировки

const message = 'Hello'.
// Используйте ключевое слово new для создания экземпляра буфера, но срок действия этого метода создания истек const buffer = new Buffer(message)
console.log(buffer); // <Буфер 48 65 6c 6c 6f>
console.log(buffer.toString()); // Привет,

кодировка и декодирование строк на китайском языке.

• Кодировка buffer по умолчанию — utf-8 , поэтому в следующем коде класс Buffer использует кодировку utf-8 для кодирования нашей строки. мы также используем utf-8 для декодирования наших строк.
• Китайские строки имеют особую особенность. В кодировке utf-8 один текст соответствует 3 байтовому двоичному сообщению

const = «Hello».
// Используем Buffer.from для декодирования нашей строки const buffer = Buffer.from(message)
console.log(buffer); // <Буфер e4 bd a0 e5 a5 bd e5 95 8a>
// В экземпляре буфера есть метод toString, который может декодировать кодировку console.log(buffer.toString()); // 'Здравствуйте'

• , что произойдет, если кодирование и декодирование используют разные формы результатов кодирования?

  • Нет сомнений в том, что декодированная вещь — это не та строка, которую мы изначально закодировали:

const message = 'Hello'
const buffer = Buffer.from(сообщение, 'utf16le')
console.log(buffer); // <Буфер 60 4f 7d 59 4a 55>
console.log(buffer.toString()); // `O}YJU

Другие способы создания буферов

buffer Здесь мы можем создавать Buffer с помощью alloc

• Мы можем напрямую создавать экземпляры буферов в виде массивов. каждый бит изменяется.

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

// которое может указать количество цифр в нашем буфере. Например, если здесь передано 8, то созданный буфер будет содержать 8 элементов, а двоичное число, соответствующее каждому элементу, будет равно 0.
константный буфер = Buffer.alloc(8)
console.log(buffer); // <Буфер 00 00 00 00 00 00 00 00>
// Если значению присвоено десятичное число, буфер поможет нам преобразовать его в шестнадцатеричное число, а затем записать в соответствующее место buffer[0] = 88 
// В js все, что начинается с 0x, представлено как шестнадцатеричное число buffer[1] = 0x88
console.log(buffer); // <Buffer 58 88 00 00 00 00 00 00>

Операции с буфером и файлом

1. Если в текстовом файле

• не указана кодировка символов, он не будет декодирован и будет возвращен исходный buffer . , который является результатом двоичного числа в кодировке utf-8

const fs = require('fs')
fs.readFile('./a.txt', (ошибка, данные) => {
  console.log(данные); // <Буфер e5 93 88 e5 93 88>
})

• Кодирование и декодирование используют utf-8, правильный контент можно получить в файле

const fs = require('fs')
// кодировка указывает кодировку символов, используемую для декодирования, по умолчанию используется кодировка utf-8
fs.readFile('./a.txt', { кодировка: 'utf-8' }, (ошибка, данные) => {
  console.log(data); // Ха-ха})

• Если кодировка символов, используемая для кодирования и декодирования, различна, окончательное прочитанное содержимое будет искажено

const fs = require('fs')
// В кодировке используется кодировка символов utf16le, а в декодировании используется формат utf-8. Должно быть, декодирование неправильное. fs.readFile('./a.txt', {coding: 'utf16le' }, (err. , данные) => {
  console.log(данные); // Ошибка })
// Приведенный выше код аналогичен следующему коду const msg = 'Ха-ха'
const buffer = Buffer.from(msg, 'utf-8')
console.log(buffer.toString('utf16le')); //

2. Файл изображения

• копирует кодировку изображения для достижения цели копирования изображения.

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

const fs = require('fs').

fs.readFile('./logo.png', (ошибка, данные) => {
  console.log(data); // Выводится двоичная кодировка, соответствующая файлу изображения // Мы также можем записать кодировку изображения в другой файл, что эквивалентно копированию изображения fs.writeFile(' ./bar .png', данные, ошибка => {
    console.log(ошибка); 
  })
})

• Чтобы перевернуть и обрезать изображения, вы можете использовать библиотеку sharp

const Sharp = require('sharp')

// Обрезаем изображение logo.png до размера 200x300 и копируем его в файл bax.png Sharp('./logo.png')
  .resize(200, 300)
  .toFile('./bax.png', (ошибка, информация) => {
    console.log(ошибка);
  })

// Вы также можете сначала преобразовать файл изображения в буфер, а затем записать его в файл. Вы также можете скопировать изображение Sharp('./logo.png')
  .resize(300, 300)
  .toBuffer()
  .then(данные => {
    fs.writeFile('./baa.png', данные, ошибка => {
      console.log(ошибка);
    })
  })

Процесс создания буфера

• На самом деле, когда мы создаём Buffer , мы не будем часто обращаться к памяти из операционной системы. По умолчанию он сначала будет обращаться к памяти размером 8 * 1024 байт, то есть 8kb ,
• пока не освободится память. недостаточно или почти израсходовано. Только тогда мы применим новый

цикл событий памяти и асинхронный ввод-вывод.

Что такое цикл событий?

• Что такое цикл событий?

  • Фактически, я понимаю цикл событий как мост между JS который мы пишем, и браузером или Node .

• Цикл событий браузера — это связь между кодом JS который мы пишем, и вызовами API браузера ( setTimeout , AJAX ,监听事件и т. д.). ) Мосты взаимодействуют через функции обратного вызова.
• Цикл событий Node — это мост между кодом JS, который мы пишем, и системными вызовами ( file system , networ и т. д.). Мосты также взаимодействуют через функции обратного вызова.

Процесс и поток

Процесс и поток — это две концепции в операционной системе:

• процесс ( process ): программа, которую компьютер запускает
• поток ( thread ): наименьшая единица, с которой операционная система может запускать расписание вычислений, поэтому CPU может работать напрямую. поток, который

звучит очень абстрактно, давайте объясним это интуитивно:

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

Давайте на ярком примере объясним

• ,
• что операционная система похожа на фабрику.
• мастерские на фабрике.Этот цех — это процесс.В
• каждом цехе может быть более одного работника.На фабрике этот работник — это

многопроцессная многопоточная

операционная система.Как можно выполнять несколько процессов (при прослушивании музыки, написании кода). , и проверка информации) работают одновременно?

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

Браузеры и JavaScript

• Мы часто говорим, что JavaScript является однопоточным, но поток JS должен иметь собственный процесс-контейнер Node

• Является ли браузер или браузер Node процессом?

  • Большинство современных браузеров на самом деле являются многопроцессными. Когда мы открываем tab , запускается новый процесс. Это необходимо для предотвращения зависания одной страницы и зависания всех страниц. Необходимо принудительно закрыть
  • каждую
  страницу.
  • page. В процессе присутствует много потоков, в том числе потоков, выполняющих код JavaScript.

• Однако выполнение кода JavaScript выполняется в отдельном потоке.

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

процесса выполнения JavaScript

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

const message = 'Hello World'.

console.log(сообщение);

функция сумма (число1, число2) {
  вернуть число1 + число2
}

функция Фу() {
  константный результат = сумма (20, 30)
  console.log(результат);
}

foo()

• На самом деле наш JS-код можно рассматривать как исполняемый в main функции, как и в других языках программирования
• . Во-первых, нам нужно поместить основную функцию в стек вызовов функций,
• определить переменную message
• и выполнить функцию log . Функция будет помещена. Введите стек вызовов функций. После выполнения извлеките стек
• и вызовите функцию foo . Функция foo помещается в стек вызовов функций. Однако функцию sum необходимо вызвать во время выполнения,
• поэтому функция sum будет помещена. помещается в стек вызова функции. Функция sum После завершения выполнения
извлекается из стека
• . В это время функция foo также получает значение, возвращаемое функцией sum, и выполняет операцию присваивания. функцию журнала снова,
• поэтому она должна поместить функцию журнала в стек вызовов. После выполнения функции журнала она извлекается из стека. После выполнения функции foo функция foo извлекается из стека
• . выполняется функция foo, выполняется весь js код, а основная функция выскакивает из

цикла событий браузера

. Что делать, если во время выполнения JS кода происходят асинхронные операции?

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

Затем функция передается в функцию setTimeout

(мы называем это функцией timer ), когда она будет выполнена?

• Фактически, setTimeout вызывает web api . Браузер заранее сохранит функцию обратного вызова. В подходящее время функция таймера будет добавлена ​​в очередь событий.
• Функция в очереди событий будет помещена в стек вызовов функций.

Почему setTimeout не блокирует выполнение кода,

• когда он выполняется в стеке вызовов

Это потому, что браузер поддерживает очень, очень важную вещь —

• браузер цикла событий поможет нам каким-то образом сохранить функцию обратного вызова в setTimeout. Более распространенный метод — сохранить ее в красно-черном дереве

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

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

синхронизации

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

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

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

Макрозадачи и микрозадачи.

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

• пока не

• macrotask queue

• ajax

• setTimeout , setInterval , мониторинг DOM , UI Rendering и другие
• очереди микрозадач ( microtask queue ): then вызов Promise , Mutation Observer API , queueMicrotask() и т. д.

Итак, каков приоритет двух очередей в цикле событий?

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

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

.

Тестовые точки: main stcipt , setTimeout , Promise , then , queueMicrotask

setTimeout(() => {
  console.log('set1');4
  новое обещание (решить => {
    решать()
  }).then(решить => {
    новое обещание (решить => {
      решать()
    }).then(() => {
      console.log('then4');
    })
    console.log('then2');
  })
})

новое обещание (решить => {
  console.log('pr1');
  решать()
}).then(() => {
  console.log('then1');
})

setTimeout(() => {
  console.log('set2');
})

консоль.журнал(2);

очередьМикротаск(() => {
  console.log('queueMicrotask');
})

новое обещание (решить => {
  решать()
}).then(() => {
  console.log('then3');
})

// пр1
// 2
//тогда1
//очередьМикрозадача
//тогда3
// набор1
//тогда2
//тогда4
// set2

• setTimeout будет немедленно помещен в стек вызова функции и будет извлечен из стека сразу после выполнения. Его функция timer будет помещена в очередь задач макроса.

• Функция, переданная в класс Promise , будет выполнена немедленно. Это не функция обратного вызова, поэтому будет напечатан pr1 , и поскольку метод resolve будет выполнен, статус Promise немедленно изменится на fulfilled , так что при выполнении функции then будет выполнена соответствующая функция обратного вызова. быть помещен в очередь микрозадач

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

• , когда она встретит оператор console.log . После того, как функция будет помещена в стек, 2 распечатывается, а затем выскакивает.

• Здесь функция привязана к queueMicrotask , и функция будет помещена. После входа в очередь микрозадач

• был обнаружен новый оператор Promise, но он сразу же изменил статус обещания на выполненное, поэтому обратный вызов соответствующая функции then также была помещена в очередь микрозадач.

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

• Первая микрозадача — напечатать then1 , вторая микрозадача — напечататьqueueMicrotask, а третья микрозадача — напечатать then3 . После этого выполнение завершается. начать выполнение макрозадачи.

• Первая макрозадача более сложная. Сначала она выведет set1 , а затем выполнит new promise , который немедленно изменит состояние. Затем обратный вызов будет помещен в очередь микрозадач. Очередь не пуста, поэтому необходимо выполнить очередь микрозадач с более высоким приоритетом, что эквивалентно немедленному выполнению обратного вызова then. Это тот же новый оператор Promise, и соответствующий ему обмен then помещается в очередь микрозадач. Обратите внимание, что после нового оператора Promise есть console функция. Эта функция будет выполнена сразу после выполнения нового оператора Promise, то есть вывода then2 . В сопоставлении микрозадач все еще есть задача, поэтому следующим шагом будет печать. then4 . На данный момент очередь микрозадач пуста, и очередь макрозадач может продолжать выполняться

• , поэтому будет напечатан следующий set2 макрозадач2. После выполнения макрозадачи

• результат печати всего кода: pr1 -> 2 -> then1 -> queueMicrotask -> then3 -> set1 -> then2 -> then4 -> set2

Вопросы для собеседования <2>

Тестовые точки: main script , setTimeout , Promise , then , queueMicrotask , await async

дополнение к асинхронным знаниям: async, await — это синтаксический сахар for Promise . При возникновении проблем с циклом событий

мы можем
• рассматривать
• код, выполняемый после ключевого слова await, как код, заключенный в new Promise((resolve,rejcet) => { 函数执行})
• как код в then(res => {函数执行}) в предыдущем Promise

async function async1() {
  console.log('async1 start');
  дождитесь асинхронного2()
  console.log('конец async1');
}

асинхронная функция async2() {
  console.log('async2');
}

console.log('запуск скрипта');

setTimeout(() => {
  console.log('setTimeout');
}, 0)

асинхронный1()

новое обещание (решить => {
  console.log('обещание1');
  решать()
}).then(() => {
  console.log('обещание2');
})

console.log('конец сценария');

// запуск скрипта
// начало асинхронного1
// асинхронный2
// обещание1
// конец скрипта
// конец асинхронного1
// обещание2
// setTimeout

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

• для обнаружения первой функции setTimeout , которая соответствует timer будет помещен в очередь задач макроса

• , и будет выполнена функция async1. Сначала будет напечатан async1 start , а затем будет выполнена функция async2 после оператора await . Поскольку, как упоминалось ранее, функция после ключевого слова await считается new Promise , эта функция будет выполнена немедленно, поэтому будет распечатан async2, но код после оператора await эквивалентен помещению в then. обратный вызов, то есть console.log('async1 end') Эта строка кода помещается в очередь микрозадач

• , и код продолжает выполняться. Он встречает новый оператор Promise, поэтому функция promise1 немедленно выводится. затем обратный вызов помещается в очередь микрозадач для

• выполнения последней консольной функции для script end , код синхронизации будет выполнен. Цикл событий перейдет к очередям макро-задач и микро-задач для выполнения задач

• . Очередь задач будет выполнена, что означает, что будет напечатан async1 end , а затем напечатано promise2 . В это время очередь микрозадач пуста, и начинаются задачи в очереди макрозадач. быть выполнено.

• Будет напечатано значение setTimeout, соответствующее функции таймера. В это время также выполняется макрозадача, и окончательная последовательность печати: script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout