В последних интервью всегда есть интервьюеры, которые спрашивают о разнице между let, const и var, о разнице между стрелочными функциями и обычными функциями и так далее.различные отличия, я могу ответить на один или два, ноЖаль, что я не мог ответить полностью, ответить по всем пунктам,а такжезаикаться, так что здесь я сделаю некоторые выводы по этому поводу (просматривая различные материалы, его можно только считать полным, а недостающие приходится дополнять комментариями каждого, и я буду их дорабатывать).
1. Отличие стрелочных функций от обычных функций
А. Стили стрелочных функций отличаются от обычных функций. Синтаксис стрелочных функций более лаконичный и понятный.=>Определите функцию, обычная функцияfunctionОпределите функцию.
б) Стрелочная функция зафиксирует значение this контекста, в котором оно находится, как собственное значение this, которое определяется и фиксируется при его определении.
в) Стрелочные функции нельзя использовать в качестве конструкторов, а также они не могут использовать новое ключевое слово (因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会改变,作为构造函数其的this要是指向创建的新对象).
г. Функция стрелок не имеет собственных аргументов. Аргументы функции доступа, фактически полученные стрелкой, являются внешней средой выполнения частичного значения (функции).
е. call, apply, bind не влияет на его указание.
е. Стрелочные функции не имеют прототипа.
г. Стрелочные функции нельзя использовать в качестве функций-генераторов и нельзя использовать ключевое слово yield.
2. Разница между var, let и const
из следующего三个方面Сказать.
Переменное продвижение: переменная, объявленная var, имеет продвижение переменной, то есть переменная может быть вызвана до объявления, а значение не определено.
С let и const (注意这个‘问题’后缀，其实是有提升的，只不过是let和const具有一个暂时性死区的概念，即没有到其赋值时，之前就不能用), то есть объявляемые ими переменные должны использоваться после объявления, иначе будет сообщено об ошибке.
аспект области действия блока: var не имеет блочной области видимости, let и const имеют блочную область видимости.
Аспекты декларации:var допускает повторное объявление переменных, а let и const не допускают повторного объявления переменных в одной и той же области видимости. Среди них const объявляет константу только для чтения (из-за этого при объявлении ей должно быть присвоено значение, иначе будет сообщено об ошибке). После объявления значение константы не может быть изменено.
Как сделать свойства объекта, объявленного const, неизменяемыми и доступными только для чтения?
Если const объявляет объект, свойства объекта могут быть изменены.
const obj={name:'蟹黄'};
obj.name='同学';
console.log(obj.name);//同学
Поскольку obj, объявленный const, содержит только свой объектсправочный адрес, пока адрес не изменится, ошибки не будет.
использоватьObject.freeze(obj)Заморозка obj может сделать свойства в нем неизменяемыми, но имеет ограничения, то есть если в объекте obj есть свойства, являющиеся объектами, свойства в объекте можно изменить.Чтобы быть неизменяемым, нужно использовать рекурсию и другие методы один за другим. Все слои заморожены.
3. Разница между Bigint и Number
Номер типа НомерИмеет ограничения по точности, точность значения может достигать только 53 двоичных цифр (эквивалентно 16 десятичным цифрам,正负9007199254740992), целые числа, превышающие этот диапазон, не могут быть представлены точно.
BigintКоличество цифр не ограничено, и целые числа с любым количеством цифр могут быть представлены точно.. Однако его можно использовать только для представления целых чисел, и, чтобы отличить его от числа, данные типа BigInt должны иметь суффикс n. BigInt может использовать знак минус (-), но не знак плюс (+).
Кроме того, числа типа number и числа типа Bigintне можемГибридные вычисления.
12n+12;//报错
4. Разница между базовыми типами данных и справочными типами данных
Основные типы данных:
А. Значение базового типа данных неизменяемо (переназначение относится к изменению указателя имени атрибута, а не к работе со значением), здесь вы можете подумать,是不是所有关于字符串和数字的方法все с返回值вместо изменения исходной строки или числа.
Например
let a='abc';
a.split('');
console.log(a);//abc
Б. Атрибуты и методы не могут быть добавлены к базовому типу данных.Хотя об ошибке не сообщается, он только мгновенно преобразуется в соответствующий объект упаковки, а затем после операции преобразуется обратно в исходный базовый тип данных, и результат не сохранится.
в) Присвоение базовых типов данных — это простое присваивание, а сравнение основных типов данных — это сравнение значений.
г. Основные типы данных хранятся в области стека
Справочный тип данных:
а. Значение типа ссылочного типа состоит в том, что объект можно изменить, например объект, может изменить объект, изменяя значение атрибута объекта.
б) Ссылочные типы могут добавлять свойства и методы.
в) Присвоение ссылочного типа — это ссылка на объект, то есть объявленный идентификатор переменной, который хранит только адрес указателя объекта.
г. Сравнение ссылочных типов — это ссылочный (指针地址)Сравнение.
д. Тип ссылки хранится в области стека и области кучи одновременно.Область стека содержит идентификатор переменной и адрес, указывающий на память кучи.
5. Разница между отсрочкой и асинхронностью
大家应该都知道在script标签内有这两个属性async和defer，例如<script src="./home.js" async defer></script>
defer：中文意思是延迟。用途是表示脚本会被延迟到整个页面都解析完毕后再运行。 Таким образом, в<script>Установка атрибута defer для элемента эквивалентна указанию браузеру на немедленную загрузку, но с задержкой выполнения.
Спецификация HTML5 требует, чтобы сценарии отображались так, как они появляются.先后顺序执行, поэтому первый отложенный скрипт выполняется раньше второго отложенного скрипта, но между выполнениями存在依赖，需要有执行的先后顺序时, вы можете использоватьdefer, отложить выполнение. Я думаю, что размещение скрипта внизу тела похоже на отсрочку.
async: по-китайски означает асинхронный, это свойство похоже на defer и используется для изменения поведения обработки скриптов. Как и в случае с defer, async работает только с внешними файлами сценариев и указывает браузеру немедленно загрузить файл. По мере того, как страница будет обрабатываться, скрипт будет выполняться. В отличие от defer, сценарии, помеченные как асинхронные, не гарантируют, что они будут выполняться в своем порядке.
Цель указания асинхронного атрибута состоит в том, чтобы не заставлять страницу ждать загрузки и выполнения двух скриптов, таким образом异步加载页面другой контент, это используется между互不依赖каждого скрипта.
Смотрите здесь, вы можете узнать некоторые из его эффектов
Когда веб-страница передается анализатору HTML браузера, она преобразуется в набор слов (токен). Интерпретатор строит узлы из слов, формируя DOM-дерево. Поскольку код JavaScript может изменить структуру дерева DOM, если узел является кодом JavaScript, создание текущего дерева DOM необходимо остановить, и создание дерева DOM не будет продолжаться до тех пор, пока ресурс JavaScript не будет загружен и выполнен с помощью движок JavaScript.
здесь будут производитьблокировать,появлятьсяпроблема с белым экраном(Есть много аспектов оптимизации проблемы белого экрана, вот небольшой момент, который блокирует скрипт), мы можем использоватьasync和deferатрибут для решения проблемы блокировки сценариев JavaScript.
Конечно, самый безопасный способ — разместить тег скрипта в нижней части тела, так как нет проблем с совместимостью, проблем с белым экраном и проблем с порядком выполнения.
Окончательное резюме:
- Если async="async": скрипт выполняется асинхронно относительно остальной части страницы (скрипт будет выполняться по мере продолжения анализа страницы)
- Если не использовать async и defer="defer": скрипт будет выполнен, когда страница завершит синтаксический анализ.
- Если не используются ни асинхронность, ни отсрочка: скрипт читается и выполняется непосредственно перед тем, как браузер продолжит парсить страницу.
6. Преимущества и недостатки асинхронного ожидания и обещания
Преимущества асинхронного/ожидания:
A. Он обеспечивает реальный метод последовательной синхронной записи, а чтение кода относительно простое.
б) Он совместим с условными операторами и другими операторами процесса и может быть записан непосредственно в условия оценки.
function a() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(222)
}, 2222)
})
};
async function f() {
try {
if ( await a() === 222) {
console.log('yes, it is!') // 会打印
}
} catch (err) {
// ...
}
}
c. Преимущества в ясности кода при работе со сложными процессами
Недостатки асинхронного/ожидания:
А. Не удается обработать объект отклонения, возвращенный обещанием, используйте try...catch...
Б. Использование await может привести к проблемам с производительностью, так как await блокирует код. Возможно, последующий асинхронный код не зависит от первого, но ему все равно нужно дождаться завершения первого, что приведет к потере параллелизма кода.
//promise
Promise.all([ajax1(), ajax2()])
c. Переменные внутри try...catch... не могут быть переданы в следующий try...catch..., переменные, определенные внутри Promise и then/catch, могут быть переданы следующему then/catch через параметры the then chain , но переменные внутри попытки async/await, если они определены с помощью let и const, их нельзя передать следующей попытке... поймать..., они могут быть определены только во внешней области.
Но async/await решает некоторые проблемы с промисами. Более гибкая обработка асинхронности
Некоторые проблемы с промисами:
А. После выполнения его нельзя отменить на полпути, а связанные вызовы не могут выйти из середины нескольких вызовов, а затем
б) Ошибки не могут быть перехвачены извне и могут быть предварительно оценены только внутри. Если функция обратного вызова не установлена, ошибки, возникающие внутри Promise, не будут отражаться во внешнем мире.
c. Трудно следить за тем, как обещание выполняется внутри: когда оно находится в состоянии ожидания, невозможно узнать, на каком этапе оно находится в данный момент (только что запущено или вот-вот завершится).
7. Разница между get и post
а. GET — записать параметры вURL 中 ? позади и использовать&Разделяйте различные параметры; в то время как POST хранит информацию вMessage Body, параметры «не будут» отображаться в URL-адресе (это имеет место в спецификации Restful, но сообщение может поместить параметры в URL-адрес, если это необходимо). Метод GET должен использовать Request.QueryString для получения значения переменной, а метод POST использует Request.Form для получения значения переменной. Другими словами, Get — передать значение через адресную строку, а Post — передать значение, отправив форму.
б) Данные, отправленные запросом GET, имеют ограничение по длине (Сам протокол HTTP не ограничивает URL и длину тела.Ограничения URL являются в основном причины браузера и серверов), Post-запросы не имеют ограничений длины содержимого.
в) запрос GET на возврат содержимого кэшированного браузера. И каждый отправляет запрос POST, браузер не кэширует содержимое POST-запроса для возврата.
г. GET запрашивает данные, а POST в основном добавляет, удаляет и изменяет данные! Проще говоря, GET доступен только для чтения, а POST — для записи.
е. Что касается безопасности, метод запроса GET может видеть параметры из URL-адреса браузера, поэтому post более безопасен, на самом деле, будь то GET или POST.не безопасны, поскольку протокол HTTP передается в виде открытого текста, при перехвате пакета можно легко получить важную информацию. Если вы хотите безопасно передавать данные, вы должны использовать SSL/TLS для запечатывания пакета, то есть HTTPS.
Так почему же рекомендуется использовать post для обработки конфиденциальных данных?
Поскольку запись get будет сохранена в браузере и журнале Интернета, а использование Post, поскольку данные не будут записаны в записи браузера и записи доступа к веб-сайту, он будет иметь большийбезопасность.
f.недоразумениеСкажем, GET создает один TCP-пакет, а POST — два TCP-пакета.
его требование: для запроса GET браузер отправит HTTP-заголовок и данные вместе, сервер ответит 200, и запрос будет успешным.
Для POST-запросов браузер сначала отправляет на сервер заголовок http, сообщая серверу о необходимости дождаться поступления данных, сервер ответит 100 continue, сообщая браузеру, что я готов получать данные, и браузер отправит сообщение. данные на сервер, сервер отвечает 200, запрос выполнен успешно.
назови это: В посте, упомянутом выше, будет на один tcp-пакет больше, чем в get, но это не очень строго. Часто отправляемое сообщение заголовка expect 100 continue имеет вид由客户端对http的post和get的请求策略决定Да, цель состоит в том, чтобы избежать траты ресурсов, таких как пропускная способность, время, затрачиваемое на передачу данных и т. д. Поэтому для определения пути при отправке заголовка клиент добавит ожидание 100. В случае сбоя ему не нужно продолжать отправку данных, тем самым уменьшая трату ресурсов. Таким образом, отправлять ли другой пакет, зависит от стратегии реализации клиента и не имеет ничего общего с получением/отправкой. Некоторые клиенты, такие как fireFox, отправляют только один пакет.
8. Разница между использованием фреймворка и не использованием фреймворка, разница между vue и react
Прежде всего, давайте поговорим о разнице между использованием фрейма и не использованием фрейма: (с точки зрения использования фрейма)
Преимущества фреймворка:
А. Используйте инструменты фреймворка для написания проектов, а код в браузере по-прежнему будет нативным HTML CSS JS. Фреймворк помогает разработчикам делать много вещей, а разработчики могут сосредоточиться только на бизнес-логике, что значительно ускоряет скорость разработки.
Например, интерфейсный фреймворк принципиально решенUI 与状态同步问题,频繁操作 DOM 性能低下.中间步骤过多,易产生 bug且不易维护,а также心智要求较高不利于开发效率ряд препятствий
b. 组件化: среди них компонентизация React является наиболее тщательной, и она может достигать даже атомарных компонентов на функциональном уровне.Высокая степень компонентизации может сделать наш проект простым в обслуживании и простым в объединении и расширении.
c. 天然分层: код в эпоху JQuery в основном представляет собой спагетти-код с серьезными связями.Современные фреймворки, будь то режим MVC, MVP или MVVM, могут помочь нам в многослойности, а развязку кода легче читать и писать.
d. 生态: Теперь основные интерфейсные фреймворки имеют свою собственную экологию, будь то архитектура управления потоками данных или библиотека пользовательского интерфейса, есть зрелые решения.
е. Будет добавлено. . . (Надеюсь, что раздел комментариев может предоставить ценную информацию)
Недостатки рамы:
А. Код раздут. Когда пользователи используют фреймворк, они вводят весь фреймворк, а фреймворк инкапсулирует множество функций и компонентов. Пользователи должны использовать его в соответствии с его правилами, но многие функции и компоненты не используются в реальной разработке.
б) Скорость итеративного обновления платформы очень высока, и требуется время, чтобы привыкнуть к ней.
в) будет добавлено. . . (Надеюсь, что раздел комментариев может предоставить ценную информацию)
Расскажите о разнице между Vue и React:
Вот разница в мышлении (ведь не обязательно во время собеседования прояснять разницу между двумя фреймворками, достаточно понять суть):
react整体是函数式的思想, компонент разработан как чистый компонент, а состояние и логика передаются через параметры, поэтому в реакции это односторонний поток данных;
vue的思想是响应式的, то есть на основе переменных данных, установив Watcher для каждого атрибута для мониторинга, когда атрибут изменяется, соответствующий виртуальный дом обновляется в ответ.
Подробнее о различиях см. в этой статье:Некоторые сравнения между Vue и React
9. Разница между файлами cookie и сеансом
a. 存储位置不同:Информация о данных файла cookie хранится в клиентском браузере, а информация о сеансе хранится на сервере.
b. 存储容量不同:Данные, сохраняемые одним файлом cookie, составляют менее 4 КБ, и сайт может сохранять до 20 файлов cookie, и нет верхнего предела для сеанса, но для производительности на стороне сервера не храните слишком много вещей в сеансе. и установите механизм удаления сеанса.
c. 存储方式不同:В файлах cookie могут храниться только строки ASCII, и они должны храниться в виде символов Unicode или двоичных данных путем кодирования. В сеансе могут храниться данные любого типа, включая, помимо прочего, строку, целое число, список, карту и т. д.
d. 隐私策略不同:Файл cookie виден клиенту, и люди со скрытыми мотивами могут проанализировать файл cookie, хранящийся локально, и выполнить обман файлов cookie, поэтому он не является безопасным, а сеанс хранится на сервере, который прозрачен для клиента, и нет утечка конфиденциальной информации риск.
e. 有效期上不同:Разработчики могут настроить свойства файлов cookie, чтобы добиться эффекта сохранения эффективности файлов cookie в течение длительного времени. Сеанс зависит от файла cookie с именем JSESSIONID, а время истечения срока действия файла cookie JSESSIONID по умолчанию равно -1. Простое закрытие окна сделает сеанс недействительным, поэтому сеанс не может обеспечить долгосрочные эффективные эффекты.
f. 服务器压力不同:Файл cookie хранится на стороне клиента и не занимает ресурсы сервера. Для сайтов с большим количеством одновременных пользователей файлы cookie являются хорошим выбором. Сессия хранится на стороне сервера, и каждый пользователь будет генерировать сессию. Если есть много пользователей, обращающихся одновременно, будет сгенерировано много сеансов, потребляющих много памяти.
g. 跨域支持上不同:Файлы cookie поддерживают междоменный доступ (домены второго уровня могут совместно использовать файлы cookie). Сеанс не поддерживает междоменный доступ.
10. В чем разница между макрозадачами и микрозадачами
И микрозадачи, и макрозадачи являются асинхронными задачами, и все они принадлежат очереди.Разница в том, что порядок их выполнения, цикл событий, направление и значения.
Некоторые назначения макрозадач и микрозадач
宏任务 浏览器 Node
I/O ✅ ✅
setTimeout ✅ ✅
setInterval ✅ ✅
setImmediate ❌ ✅
requestAnimationFrame ✅ ✅
微任务
process.nextTick ❌ ✅
MutationObserver ✅ ❌
Promise.then catch finally ✅ ✅
Порядок выполнения между макрозадачами и микрозадачами(Задача синхронизации -> микрозадача -> макрозадача)
Поговорим о том, как продолжить работу после выполнения задачи макроса
(Здесь указано, что весь код js является первой большой макрозадачей. Цикл событий начинается с этой первой макрозадачи, а затем отделяет микрозадачи. Здесь нужно понять разницу между выполнением микрозадач и макрозадачами. Пропустите этот первый слой)
说一个很有名的银行例子: Перед стойкой банка стоит очередь, все они вкладчики. Внесение денег относится к макрозадаче. Эта очередь является очередью макрозадач. Когда на его номер звонят «Великий Мастер», он поднимается и быть вызванным. Имея дело с депозитным бизнесом, «Дедушка Хонг»ВнезапныйХотите сделать микрофинансирование для ваших сбережений (微任务), тогда банковский служащий добавит свои потребности в свою очередь микрозадач, и дяде больше не придется стоять в очереди. есть кредитная карта, вы снова будете поставлены в очередь микрозадач.но еслиОткладывая деньги на этот раз, «дедушка Хун» сказал, что ему все еще нужно копить деньги, и это его жена хочет копить деньги, а также宏任务, но, извините, вам нужно поставить номер в очередь в конце очереди задач макросов (вот метод обработки создания микрозадач и макрозадач, когда макрозадача выполняется).
Объедините следующие темы, чтобы понять и понять (здесь не будет вводить особое место цикла событий среды узла, в основном в среде браузера, лучше всего прочитать рекомендуемые статьи ниже):
<script>
setTimeout(function () {//宏任务1
console.log('1');
});
new Promise(function (resolve) {
console.log('2');//同步任务1
resolve();
}).then(function () {//微任务1
console.log('3');
});
console.log('4');//同步任务2
setTimeout(function () {//宏任务2
console.log('5');//宏任务2中的同步任务
new Promise(function (resolve) {
console.log('6');//宏任务2中的同步任务
new Promise(function (resolve) {//宏任务2中的微任务
console.log('x1');
resolve();
}).then(function () {
console.log('X2');
});
setTimeout(function () {//宏任务2中的宏任务
console.log('X3');
new Promise(function (resolve) {//宏任务2中的宏任务中的同步任务
console.log('X4');
resolve();
}).then(function () {//宏任务2中的宏任务中的微任务
console.log('X5');
});
})
resolve();
}).then(function () {//宏任务2中的微任务
console.log('7');
});
})
setTimeout(function () {//宏任务3
console.log('8');
});
//（对于这段代码node环境和浏览器环境输出一致）
//输出答案：2,4,3,1,5,6,x1,x2,7,8,x3,x4,x5
</script>
Приведенный выше пример может быть немного длинным для проверки. . .
Дополнительные сведения о цикле событий см. в этой статье.
11. Разница между fetch, Ajax и axios
Что такое Ajax: Ajax — это аббревиатура от (асинхронный JavaScript и XML). Сегодня технология, которая позволяет браузеру связываться с сервером без необходимости обновлять текущую страницу, называется Ajax. основное использованиеXMLHttpRequestобъект.
Что такое axios: axios — это HTTP-клиент на основе Promise для браузеров и nodejs, по сути也是对原生XHR, за исключением того, что это версия реализации Promise, соответствующая последней спецификации ES.
Что такое выборка: Fetch известна как технология Ajax следующего поколения, которая использует Promise для обработки данных. Это лаконичный и понятный API, который проще и удобнее в использовании, чем XMLHttpRequest.
Таким образом, основное отличие состоит в том, что и axios, и fetch поддерживают API объекта Promise, а ajax может использовать только функции обратного вызова.
Подробнее см. в этой статьеПонимание ajax, fetch, axios за секунды
12. Разница между TCP и UDP
А. TCP ориентирован на установление соединения, а udp — без установления соединения, то есть нет необходимости устанавливать связь перед отправкой данных.
б) TCP обеспечивает надежный сервис. То есть данные, передаваемые по TCP-соединению, не содержат ошибок, не теряются, не дублируются и поступают по порядку; UDP обеспечивает максимальную эффективность, т. е. надежная доставка не гарантируется. И поскольку tcp надежен,
Ориентирован на соединение, без потери данных и поэтому подходит для обмена большими объемами данных.
в) TCP ориентирован на байты, UDP — на пакеты, и перегрузка сети не снизит скорость отправки (из-за
Это приведет к потере пакетов для приложений реального времени, таких как IP-телефония и видеоконференции).
г. TCP может быть только 1-к-1, в то время как UDP поддерживает 1-к-1, 1-ко-многим.
д. Заголовок TCP больше 20 байтов, а UDP — всего 8 байтов.
е. TCP — надежный транспорт, ориентированный на установление соединения, а UDP — ненадежный.
13. В чем разница между кучей и стеком, стеком и очередью в js
Разница между кучей и стеком:
куча: сначала очередь,первым прибыл, первым обслужен; Автоматически выделять и освобождать операционной системой, сохранять значение параметра функции, значение локальной переменной и т.д. Он работает как стек в структуре данных.
куча:первый вышел последним;Динамически выделяемое пространство обычно выделяется и освобождается программистом. Если программист не освобождает его, оно может быть освобождено ОС после завершения программы. Метод выделения аналогичен связанному списку.
Разница между стеком и очередью:
А. Стек позволяет вставлять и удалять только в хвостовой части списка, а очередь позволяет вставлять только в хвостовой части списка и удалять в начале списка.
б) Стек — первый пришел, последний вышел, а очередь — первый пришел, первый вышел.
14. В чем разница между WebSocket и HTTP
Та же точка
А. Все они основаны на TCP и являются надежными транспортными протоколами.
б) Оба являются протоколами прикладного уровня.
разница
A. WebSocket - это протокол двусторонней связи, аналоговый протокол Socket, который может отправлять или принимать информацию в двух направлениях. HTTP является односторонним.
б) WebSocket требует рукопожатия для установления соединения (по сравнению с HTTP, WebSocket является постоянным протоколом. Он завершит часть рукопожатия на основе протокола HTTP, а рукопожатие HTTP будет частично завершено, и протокол будет обновлен до Веб-сокет).
можете изучить эту статьюWebsocket на самом деле не так сложно
15. Разница между http и https
А. Передача открытого текста HTTP, данные не зашифрованы, а безопасность низкая.Процесс передачи данных HTTPS (SSL + HTTP) зашифрован, а безопасность лучше.
B. Использование протокола HTTPS необходимо для приложения сертификата CA (центр сертификации, центр сертификации), как правило, меньше бесплатных сертификатов, поэтомутребует плата.
C. Скорость ответа HTTP-страниц выше, чем у HTTPS, в основном потому, что HTTP использует трехстороннее рукопожатие TCP для установления соединения, а клиент и сервер должны обменяться 3 пакетами, а HTTPS необходимо добавить 9 пакетов, необходимых для ssl. рукопожатие в дополнение к трем пакетам пакета TCP, так что в общей сложности 12 пакетов.
г. http и https используют совершенно разные методы подключения и используют разные порты: первый — 80, а второй — 443.
е. HTTPS на самом деле представляет собой HTTP-протокол, построенный поверх SSL/TLS, поэтому HTTPS потребляет больше ресурсов сервера, чем HTTP.
16. Разница между px,em,rem,vw,vh
px: px — это сокращение от pixel, что означает пиксель. px — это наименьшая точка изображения, а растровое изображение состоит из тысяч таких точек.
em: Ссылка является родительским элементомРазмер шрифта имеет характеристики наследования. Если размер шрифта определяется и рассчитывается сам по себе (шрифт браузера по умолчанию равен 16px), 1em не является фиксированным значением на всей странице.
rem: css3 новый юнит,относительно корневого элемента htmlРазмер шрифта (веб-страниц) не зависит от размера шрифта родительского элемента, как это делает em, что вызывает путаницу.
vw: новая единица измерения CSS3, аббревиатура ширины точки обзора,ширина окна, 1vw равно 1% ширины окна.
Например: ширина браузера 1200 пикселей, 1 vw = 1200 пикселей/100 = 12 пикселей.
vh: новая единица измерения CSS3, аббревиатура высоты точки обзора,высота окна, 1vh равно 1% высоты окна.
Например: высота браузера 900 пикселей, 1 vh = 900 пикселей/100 = 9 пикселей.
17. Разница между погрузчиком и плагином в WePack
Что такое загрузчик?
Загрузчик — это загрузчик файлов, который может загружать файлы ресурсов, выполнять некоторую обработку этих файлов, такую как компиляция, сжатие и т. д., и, наконец, упаковывать их вместе в указанный файл.
Что такое плагин?
В течение жизненного цикла работы веб-пакета транслируются многие события, и плагины могут прослушивать эти события и изменять выходные результаты через API, предоставляемый веб-пакетом, в соответствующее время.
разница:
- Для загрузчика это преобразователь, который компилирует файл A для формирования файла B. Операция здесь — это файл, например, преобразование A.scss в A.css, простой процесс преобразования файла.
- Плагин представляет собой расширитель, который обогащает сам веб-пакет.Во время всего процесса упаковки веб-пакета после завершения работы загрузчика он не манипулирует файлами напрямую, а работает на основе механизма событий.Он отслеживает определенные узлы в процессе упаковки веб-пакета и выполняет широкий круг задач
18. Разница между вызовом привязки
А. Все три могут изменить этот объект, указывающий на функцию.
б. Первый параметр из трех — это объект, на который будет указывать this.Если такого параметра нет или параметр не определен или имеет значение null, по умолчанию он будет указывать на глобальное окно.
в) Все три могут передавать параметры, но apply — это массив, а call — список параметров, а apply и call — одноразовые входящие параметры, а bind можно разделить на несколько проходов.
г. привязка не будет выполняться сразу после изменения этой точки, а вернет функцию, которая навсегда изменит эту точку, которая будет вызвана позже; применить, вызов вызывается немедленно
19. В чем разница между 301 и 302
301 Moved Permanently: Запрошенный ресурс был окончательно перемещен в новое место, и любые будущие ссылки на этот ресурс ДОЛЖНЫ использовать один из нескольких URI, возвращаемых этим ответом. По возможности клиенты с возможностью редактирования ссылок должны
Когда запрошенный адрес автоматически изменяется на адрес, возвращенный с сервера. Если не указано иное, этот ответ также
кэшируется.
302 Found:Запрошенный ресурс теперь временно отвечает на запрос с другого URI. Поскольку такие перенаправления являются временными, клиент ДОЛЖЕН продолжать отправлять будущие запросы на исходный адрес. Этот ответ можно кэшировать, только если он указан в Cache-Control или Expires.
Буквальная разница в том, что 301 — это постоянное перенаправление, а 302 — временное перенаправление.
Наиболее распространенный сценарий 301 — использование перенаправления доменного имени. 302 используется для временных переходов, таких как пользователи, которые не вошли в систему, когда они посещают центр пользователей и перенаправляются на страницу входа.
20. Разница между потоками процессов
a. принципиальное отличие: Процесс — это основная единица распределения ресурсов операционной системы, а поток — это основная единица планирования и выполнения задач процессора.
b. накладные расходы ресурсов: каждый процесс имеет независимый код и пространство данных (программный контекст), и переключение между программами будет иметь большие накладные расходы; потоки можно рассматривать как легкие процессы, потоки одного типа совместно используют код и пространство данных, каждый поток имеет свою собственную независимую работу. стек и счетчик программ (ПК), а накладные расходы на переключение между потоками невелики.
c. отношения сдерживания: если в процессе несколько потоков, то процесс выполнения выполняется не одной строкой, а несколькими строками (потоками); поток является частью процесса, поэтому поток также называют облегченным процессом или легким процессом. -весовой процесс.
d. выделение памяти: потоки одного и того же процесса совместно используют адресное пространство и ресурсы процесса, а адресное пространство и ресурсы между процессами не зависят друг от друга.
e. отношения влияния: Поскольку процесс имеет независимое адресное пространство, после сбоя процесса он не повлияет на другие процессы в защищенном режиме, и между потоками нет отдельного адресного пространства.Смерть одного потока эквивалентна смерти всего процесса, поэтому многопроцессорность Более надежная, чем многопоточность.
Также см:
Простое объяснение потоков процесса от Руана Ифэна
Глубокое понимание процессов и потоков в Node.js
21. Разница между JavaScript и машинописным текстом
А. TypeScript расширяет объектную модель JavaScript с точки зрения основного языка и моделирования концепций классов.
б) Код JavaScript может работать с TypeScript без каких-либо изменений, а для преобразования кода TypeScript в JavaScript можно использовать компилятор.
в) TypeScript обеспечивает статическую проверку типов во время компиляции с помощью аннотаций типов.
г. Данные в TypeScript требуют явного типа, а JavaScript — нет.
е. TypeScript предоставляет значения параметров по умолчанию для функций.
е. TypeScript вводит понятие «классов», которых нет в JavaScript.
з) TypeScript представляет концепцию модулей, которые могут инкапсулировать объявления, данные, функции и классы в модули.
22. Разница между локальным хранилищем, сессионным хранилищем и файлами cookie
А. То же самое, что все они сохраняются на стороне браузера и имеют одно и то же происхождение.
б) данные cookie всегда передаются в http-запросе одного и того же источника (даже если это не требуется), т. е. cookie передается туда и обратно между браузером и сервером, в то время как sessionStorage и localStorage не будут автоматически отправлять данные на сервер, но сохраняйте их только локально. Данные cookie также имеют концепцию пути, которая может ограничить принадлежность cookie определенному пути.
c. Ограничение на размер хранилища также отличается. Размер данных cookie не может превышать 4 КБ. В то же время, поскольку каждый HTTP-запрос будет содержать файл cookie, файл cookie подходит только для хранения небольших данных, таких как идентификатор сеанса. Хотя sessionStorage и localStorage также имеют ограничения на размер хранилища, они намного больше файлов cookie и могут достигать 5 МБ и более.
г. Срок действия данных разный, sessionStorage: действителен только до закрытия текущего окна браузера; localStorage: действителен всегда, окно или браузер всегда сохраняются, поэтому они используются как постоянные данные; cookie: действительны только до закрытия текущего окна браузера. установить время истечения срока действия cookie, даже если окно закрыто или браузер закрыт
д. Разные области действия, sessionStorage не используется совместно в разных окнах браузера, даже на одной странице; localstorage используется во всех окнах одного и того же источника; файлы cookie также используются во всех окнах одного и того же источника.
f. webStorage(webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage) поддерживает механизм уведомления о событиях, который может отправлять слушателям уведомления об обновлениях данных.
ч. API-интерфейс webStorage более удобен в использовании
23. Разница между HTTP 1.0 / 1.1 / 2.0
http 1.0 (сборка для расширяемости)
Первоначальное применение HTTP было очень ограниченным, а быстрое распространение браузеров и серверов сделало его более полезным:
а. Информация о версии теперь отправляется с каждым запросом (HTTP1.0 добавляется к строке GET)
Б. Строка кода состояния также отправляется в начале ответа, позволяя самому браузеру понять успех или неудачу запроса и соответствующим образом скорректировать свое поведение (например, обновление определенным образом или использование локального кеша).
в) Представлена концепция заголовков HTTP как для запросов, так и для ответов, позволяющая передавать метаданные и делающая протокол очень гибким и расширяемым.
г. Заголовок Content-Type сообщает клиенту тип фактически возвращенного содержимого. Добавлена возможность передавать другие типы документов, помимо обычных текстовых файлов HTML, с помощью заголовка Content-Type.
HTTP 1.1 (стандартизированный протокол)
Различные реализации HTTP/1.0 несколько сбивают с толку, поскольку HTTP 1.1 является первой стандартизированной версией, ориентированной на исправление структурных недостатков в структуре HTTP:
А. Соединения можно использовать повторно, экономя время на многократное открытие для отображения ресурсов, встроенных в один исходный документ.
б) Увеличьте конвейерную обработку, чтобы второй запрос мог быть отправлен до того, как первый ответ будет полностью отправлен, чтобы уменьшить задержку связи.
C. Поддерживает фрагментацию ответов.
г. Внедрить дополнительные механизмы управления кешем.
д. Ввести согласование содержимого, включая язык, кодировку или тип, и разрешить клиентам и серверам согласовывать наиболее подходящий контент для обмена.
е. С помощью заголовка Host можно настроить разные доменные имена на серверах с одним и тем же IP-адресом.
г. Безопасность была улучшена
http 2.0 (для лучшей производительности)
HTTP/2 имеет несколько принципиальных отличий от HTTP/1.1:
HTTP2 — это двоичный протокол, а не текстовый протокол. Больше не удобочитаемое и беспроблемное ручное создание, теперь могут быть реализованы улучшенные методы оптимизации.
Это протокол мультиплексирования. Параллельные запросы могут обрабатываться в одном и том же соединении, что устраняет ограничения порядка и блокировки HTTP/1.x.
Сжатые ЗАГОЛОВКИ. Поскольку заголовки часто похожи в серии запросов, это устраняет затраты на повторение и передачу повторяющихся данных.
Это позволяет серверу заполнять клиентский кеш данными, запрашивая их заранее с помощью механизма, называемого проталкиванием сервера.
24. Разница между MongoDB и MySQL
Ставим прямо на сравнительную таблицу:
| база данных | MongoDB | MySQL |
|---|---|---|
| модель базы данных | нереляционный | Реляционный |
| способ хранения | Хранится в формате документа, похожем на JSON. | Разные двигатели имеют разные методы хранения |
| проверить предложение | Метод запроса MongoDB (функция, подобная JavaScript) | Оператор SQL |
| Метод обработки данных | Основываясь на памяти, горячие данные хранятся в физической памяти, чтобы обеспечить высокую скорость чтения и записи. | Разные двигатели имеют свои особенности |
| зрелость | Новые базы данных, менее зрелые | высокая зрелость |
| широта | Среди баз данных NoSQL, которые являются относительно полными и открытыми, число пользователей растет. | База данных с открытым исходным кодом, растущая доля рынка |
| транзакционный | Поддерживает только операции транзакций с одним документом, слабая согласованность | Поддержка транзакционных операций |
| занять место | Занимает много места | Маленький след |
| присоединиться к операции | MongoDB не имеет соединения | MySQL поддерживает соединение |
Надеюсь, что судьи укажут на ошибки, и я их исправлю! Просьба также изложить свое мнение по некоторым из этих вопросов. Вот лишь некоторые общие выводы.Если вы хотите получить наилучший эффект обучения, вы должны систематически изучать каждый пункт.
Автор также недавно готовится к собеседованиям и ищет места для стажировки! wx: xieHB-frontend-178, добавьте WeChat, чтобы учиться вместе😜, я также надеюсь, что большой парень может представить вводную и высказать свое мнение об обучении, спасибо. Ха-ха!