javascript статьи — 16 000 слов, которые вернут вас к забытым знаниям JS

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

По последним двум статьямhtml статьиа такжеCSS-статьиПосле этого эта статья связана с широко связаннымJavascriptЧасть контента была грубо интегрирована. Знания, заложенные в статье, довольно обширны, и редактор также рассмотрел их, разбирая.

Количество слов в статье1.5万+, длина относительно длинная, рекомендуется собирать и читать не спеша. Так называемый обзор старого и изучение нового, эта статья весьма полезна как обзор знаний (особенно полезна для тех, кто готов сменить работу хахахаха) 🥴.

PS: В тексте для удобства чтения редактор как всегда сделал разделительную черту.

1. 🤪Как это работает в JavaScript

Первый вjsсередина,thisОтносится к «владельцу» исполняемой функции или, точнее, к объекту, который имеет текущую функцию в качестве метода.

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

глобальная область

В глобальной области используйтеthisбудет указывать на глобальный объект（this->window）;

вызов метода объекта

здесьthisнаходится в объекте.Когда функция сохраняется как атрибут объекта, функция является методом объекта, в функцииthisСтоимость этого объекта.

Сначала рассмотрим пример:

const object = {
    a: 1, 
    func: function() {
        console.log(this.a)
    }
}

object.func()  //1  (this->object)

function func() {
     console.log(this.a)
}
const object = {
    a: 1, 
    b: func
}

object.b()  // 1 (this->object)

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

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

Использовать режим применения или звонка

См. следующий пример:

function func() {
     console.log(this.a)
}
const object = {
    a: 1, 
    b: func
}
const fun = object.b;

fun()  // undefined

В настоящее времяfun()Напечатанное значение не находится в объекте1, ноundefined. Из этого видно, чтоthisне указывает наobjectобъект. Добавим глобал в кодaВзгляните на ситуацию:

function func() {
     console.log(this.a)
}
const object = {
    a: 1, 
    b: func
}
const fun = object.b;

var a = 2;
fun()  // 2

В настоящее времяfuncТо, что напечатано, является значением глобальной переменной --2, указывая на то, чтоthisОтносится к внешней глобальной переменной. Это в основном потому, чтоПотеря этой привязки, вызванная неявной привязкой этого.

Мы можем понять это как:После выполнения "fun= object.b" результат вызова fun и object.b отличается, потому что процесс назначения этой функции не может передать привязку this к b.

Решающий путь:пройти черезthisПривязка дисплея устранена.

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

function func() {
     console.log(this.a)
}
const object = {
    a: 1, 
    b: func
}
var a = 2;
const fun = object.b;

fun.call(object) 或者  fun.apply(object) 或者  const funb = fun.bind(object) ; funb() // 1

В настоящее времяthisуказывает наobjectВнутреннийa, который решаетthisПроблема потери привязки.

🌈🌈Уведомление:

bindОн предоставляет исполняемую функцию, но сам он не выполняется, нам нужно выполнить его вручную;
callа такжеapplyОни предоставляют немедленно исполняемую функцию, которая привязана кthisПри этом функция будет выполнена немедленно. Вот почему мы в последнемbindМетод нужно вызывать снова отдельноfunb()причина метода.

вызов функции

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

вызвать конструктор

Давайте посмотрим на пример:

 function func(a) {
    this.b = a;
    console.log(b)
 }
 func(20);  // 20,此时的b是20
 
 const funb = new func(30)
 funb.b;  // 30

Видно, что при выполненииnewПри работе создается новый объект и конструкторthisУказывает на новый созданный объект.

2. Пожалуйста, объясните принцип прототипа наследования

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

3. Что такое замыкание, как его использовать и зачем его использовать

Есть раздел закрывающего пакета, также вЯдовитый куриный супотражено в.

4. В чем разница между синхронными и асинхронными функциями

Синхронизировать

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

асинхронный

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

разница: Наиболее очевидным является то, что нужно ждать и не нужно ждать.

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

5. Разница между хост-объектами JavaScript и нативными объектами и встроенными объектами

концепция

хост-объект: хост-объект не является собственным объектом движка, но регистрируется хост-платформой через какой-то механизм.jsобъекты в двигателе;
встроенные объекты: объект, созданный на этапе инициализации движка, является подмножеством собственного объекта;
родной объект: помимо встроенных объектов, он также включает в себя некоторые динамически создаваемые объекты во время выполнения;

содержание

родной объектвключать:Object, Function, Array, String, Boolean, Number, Date, RegExp, Error, EvalError, RangeError, ReferenceError, SyntaxError, Typerror, URLErrorЖдать;
встроенные объектывключать:Global(глобальный объект),Math; (обратите внимание, что все встроенные объекты являются нативными)
хост-объектВключает: объекты, предоставленные хостом, в браузереwindowобъект и все подобъекты под ним (например,domд.), вnodeЯвляетсяglobalи его дочерние объекты, которые также содержат пользовательские объекты класса.

разница

Встроенные объекты представляют собой подмножество собственных объектов: первые всегда создаются на этапе инициализации движка, а вторые также включают в себя некоторые объекты, динамически создаваемые во время выполнения;
Хост-объект — это не собственный объект движка, а объект, зарегистрированный хост-платформой в движке js через какой-то механизм;

6. Чем отличаются следующие коды: function Person(){}, var person = Person(), var person = new Person()

Первый:function Person(){}объявляетPersonФункция;
второй:var person = Person()вызывается напрямуюPersonфункцию и присвоить возвращаемое значение как значение переменнойperson;
в третьих:var person = new Person()создалPersonобъект экземпляра;

7. Что такое подъем объявления переменной (hoisting)

Сначала давайте рассмотрим пример:

console.log(num); //undefined
var num = 5;
console.log(num) // 5

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

утверждение-- Начните с создания новой переменной, например:var num;
инициализация- присвоение переменных для инициализации переменных, например:num = 5;
использовать-- использовать значение переменной, напримерconsole.log(num);

Приведенный выше пример фактически эквивалентен:

var num;
console.log(num); //undefined  因为变量num提升了，但是值并没有提升，所以打印出来是undefined
num = 5;
console.log(num) // 5

🌈🌈Уведомление: если переменная находится в области действия функции, то ее областью является область действия функции. В противном случае это глобальная область.

расширять

Функция расширения 1 имеет приоритет

Объявления функций и выражения функций синтаксически эквивалентны, но с одним отличием:jsДвигатели нагружают их по-разному. Проще говоря: объявления функций поднимаются наверх своей области видимости, а выражения функций — нет.

В частности, вы можете увидеть следующие два момента:

Объявления функций поднимаются, но тела функциональных выражений не поднимаются;
функцияjavascriptГраждане первого класса , когда имя переменной совпадает с именем функции, объявление функции имеет приоритет над объявлением переменной, а объявления переменных с тем же именем игнорируются.

расширение 2 let, const и var

Короче говоря, в общем, этоletа такжеconstДекларация формируется на уровне блока, переменная отсутствует и не может быть снята повторным объявлением той же самой переменной (или константы). а такжеvarОбъявленная переменная будет смонтирована вwindow, есть подъем переменных и можно назвать дублирование.

8. Что такое «use strict»? Преимущества и недостатки его использования

“use strict”-- строгий режим,ES5Режим работы добавлен, чтобы бытьjavascriptработают в более жестких условиях.

Преимущества (цель, для которой она была создана)

ликвидироватьjsНекоторые необоснованные и неточные грамматические моменты уменьшают некоторые странности поведения;
Устранить некоторые ненадежности работы кода и обеспечить безопасность работы кода;
Улучшить эффективность компиляции и увеличить скорость работы;
для будущих версийjavascriptподготовить землю;

🌈🌈Уведомление: проверено, на данный моментIE6-9Ни один из них не поддерживает строгий режим.

недостаток

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

9. Что такое цикл событий (event loop)

javascriptОн однопоточный и выполняется сверху вниз. существуетjsОн разделен на две задачи: макрозадачи и микрозадачи. В нормальных условиях макрозадача выполняется первой (то есть первый раз выполняется весь синхронный код), при встрече с микрозадачей она сначала добавляется в очередь, а затем микрозадача выполняется после макрозадачи. казнен. После выполнения микрозадачи макрозадача выполняется вниз, а все микрозадачи выполняются снова после выполнения.

Простое понимание: макрозадача -> микрозадача -> макрозадача -> микрозадача;

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

10. Разница между связыванием, вызовом и применением

сходства

Их первый параметрthisобъект, на который нужно указать;
используются для изменения функцииthisуказал на;
может использовать последующие параметры для передачи параметров;

разница

Аспекты реализации:использоватьcallа такжеapplyЗатем функция может выполняться автоматически, но с использованиемbindнужно выполнять вручную;
прием параметра:callа такжеapplyПервый полученный параметр — это область, в которой должна выполняться функция, разница в том, что при получении второго параметраapplyполучает массив иcallТо, что получено, является списком параметров, который должен быть во взаимно однозначном соответствии с функцией.

🌈🌈Уведомление:callа такжеapplyРасширьте область действия функции.

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

Если вам не нужно заботиться о том, сколько параметров передается в функцию (или когда параметров много), вы можете выбратьapply;
Если определено, сколько параметров может быть функцией приема (или несколько параметров в этом случае), и тому подобное, чтобы выразить параметр и параметр объектно-реляционного взгляда, можно выбратьcall;
Если вы хотите вызвать метод в будущем и вам не нужно немедленно получать возвращаемый результат функции, вы можете выбратьbind;

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

11. 🤥 Что такое делегирование событий и как всплывающие события и события по умолчанию предотвращают

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

Метод блокировки пузырьков:использоватьevent.cancelBubble = trueилиevent.stopPropgation()(ниже, чем IE9).

Метод блокировки событий по умолчанию:e.preventDefault(); илиreturn false;.

12. Как проверить, является ли число целым

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

function isInt(number) {
    return number % 1 === 0;
};

console.log(isInt(2.1));  // false
console.log(isInt(2));  // true

13. Что такое IIFE (выражение немедленно вызываемой функции)

Это немедленно вызываемое функциональное выражение, сокращенноIIFE. Относится к функции, выполняемой сразу после ее создания. См. код ниже:

(function IIFE(){
 console.log( "Hello!" );
})();    

// "Hello!"

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

14. Шаблоны прототипирования

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

Шаблон прототипа полезен для инициализации бизнес-объектов, значения которых соответствуют значениям по умолчанию базы данных. Значения по умолчанию в объекте-прототипе копируются во вновь созданный бизнес-объект. В настоящее времяjsЭтот шаблон используется при конструировании новых объектов и их прототипов.

Режим архетипа содержит следующих основных персонажей:

абстрактный класс-прототип: указывает интерфейс, который должен реализовать конкретный объект-прототип;
конкретный класс прототипа: реализует абстрактный класс-прототипclone()методы, которые являются копируемыми объектами;
класс доступа: использовать конкретный класс прототипа вclone()Способ скопировать новый объект;

15. Принцип jsonp и почему это не настоящий ajax

Принцип Jsonp: браузер может динамически вставлять фрагмент кода JS и выполнять его;

Почему не настоящий AJAX

первый,ajaxа такжеjsonpurl, а затем обработать данные, возвращенные сервером), ноajaxа такжеjsonpпринципиально разные вещи;
где отличается? Ядро другое!ajaxЯдро проходит черезXmlHttpRequestПолучайте контент вне страницы, в то время какjsonpСуть в том, чтобы динамически добавлять<script>теги для вызова, предоставляемые серверомjsсценарий;
Кроме того, следует отметить, что,ajaxа такжеjsonpРазница не в том, является ли он междоменным. потому чтоajaxКросс-доменный также может быть достигнут через прокси-сервер на стороне сервера,jsonpЭто не исключает получения данных в том же домене. И естьjsonpявляется способом или необязательным соглашением, какajaxТак же не должно бытьjsonpформат для передачи данных;
jsonpтолько поддержкаgetпросить,ajaxслужба поддержкиgetа такжеpostпросить.

16. Что представляет собой модель потока событий Javascript?

«Бурлирование событий»: Когда событие узла запускается, оно начинается с текущего узла и запускает события того же типа, что и его узлы-предки, в свою очередь, до тех пор, покаDOMкорневой узел. (шаг за шагом вверх)
«Захват события»: Когда событие узла запускается, оно начинается сDOMНачиная с корневого узла, по очереди запускаются события того же типа, что и его узлы-предки, до самого текущего узла. (Шаг вниз)
"Поток событий DOM":domПоддерживаются обе модели событий, но захват событий начинается первым, начиная сdocumentначинается и заканчивается сdocument,domМодели уникальны тем, что текст также может запускать события. Проще говоря, он делится на три этапа:захват событий,целевой этап,всплывающее окно событий

17. Что именно делает новый оператор?

Первое, что нам нужно понять, это:newОсновная функция ключевых слов —наследовать.

дляconst a = new Foo();,newСделать. Следующий код:

const obj = new Object();   // 声明一个新的空对象obj
obj.__propto__ = Person.prototype;  // 让obj的__proto__指向函数原型的prototype

Person.call(obj); // this指向obj对象

person = obj; // 将obj对象赋值给person对象

Тогда давайте возьмем инсульт,newСколько этапов он прошел? (4)

создать пустой объект;
установить цепочку прототипов;
ПозволятьFuncизthisнаправлениеobjи выполнитьFuncтело функции;
судитьFunc(конструктор) тип возвращаемого значения;

18. Какие есть способы ленивой загрузки js?

deferсвойства (страницаloadпосле выполнения): скрипт будет отложен до тех пор, пока вся страница не будет проанализирована перед выполнением. Если установленоdeferатрибут, что эквивалентно указанию браузеру немедленно загрузить, но отложить выполнение. УведомлениеdeferСвойства применяются только к внешним файлам сценариев.
asyncсвойства (страницаloadперед выполнением): Чтобы не заставлять страницу ждать загрузки и выполнения скрипта, загружайте страницу и другой контент асинхронно.asyncТакже работает только для внешних файлов (не влияет на загрузку страниц, но не контролирует порядок загрузки).
динамически созданныйDOMСпособ;
использоватьjQueryизgetScript()метод;
использоватьsetTimeoutметод задержки;
ПозволятьjsФайл загружается последним.

19. Преимущества и недостатки Flash и ajax, и как выбрать между ними

Для вспышки:flashэто инструмент для работы с мультимедиа, векторной графикой и доступа к машинам; но дляCSS, обработка текста недостаточна, и искать его непросто;
Для Аякса:AjaxправильноCSS, имеет хорошую поддержку обработки текста, а также поддерживает поиск, но его недостаточно для мультимедиа, векторной графики и доступа к машинам;

точки соприкосновения:

Доставка сообщений на сервер и с сервера без сброса;
Может определять оффлайн и онлайн статус пользователей;
может работатьDOM;

20. Как файлы cookie хранятся на клиенте

cookiesСервер временно на наших компьютерных текстовых файлах, поэтому наш сервер для идентификации компьютера.

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

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

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

21. 🤨Что такое Json

jsonэто облегченный формат обмена данными;
Независимо от языковых платформ парсеры и библиотеки поддерживают множество различных языков программирования;
Его синтаксис представляет три типа значений: простые значения (number,string,boolean,null), массив, объект;

22. Разница между потоком и процессом

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

разница:

Поток запускается под процессом и не может работать в одиночку (одна каретка не может работать);
Процесс может содержать несколько потоков (в поезде много вагонов);
Сложность обмена данными между различными процессами (пассажирам сложно пересаживаться с одного поезда на другой во время движения поезда);
Удобен обмен потоками данных в рамках одного процесса (удобно пересаживать пассажиров из одного вагона в другой в одном поезде);
Процессы требуют больше компьютерных ресурсов, чем потоки (машина просто едет, или для ее работы требуется питание, что требует больше усилий);
Процессы не влияют друг на друга, но если есть проблема с одним потоком в этом же процессе, это вызовет проблемы во всем процессе (если у вагона класса проблема, например, пожар, это вызовет поезд приостановить);
Процессы могут быть расширены на несколько машин, а потоки могут быть расширены максимум на несколько ядер.cpu. (Разные поезда могут двигаться по разным путям, а вагоны одного поезда могут находиться только на пути текущего поезда);
Адрес памяти, используемый процессом, может быть заблокирован, то есть, когда поток использует какую-то разделяемую память, другие потоки должны дождаться его окончания, прежде чем использовать эту память. (например, использование туалета в поезде — «мьютекс»);
Адрес памяти, используемый процессом, может ограничивать объем использования (например, спящий в поезде, максимальное количество людей, которым разрешено спать, если расположение заполнено, вам нужно подождать, и вы можете войти только тогда, когда есть свободные койки - "семафор");

23. Что следует учитывать, если веб-контент должен поддерживать несколько языков

Применить выбор набора символов, выбрать кодировку utf-8;
Языковые и письменные привычки и структура навигации;
веб-сайт на основе базы данных;

24. Некоторые принципы написания JavaScript

Не объявляйте несколько переменных в одной строке;
использовать===а также!==сравнивать;
Используйте литералы для создания массивов и объектов вместоnew Arrayэта форма;
switchПредложения должны содержатьdefaultветвь;
fon-inпеременные в цикле, используйтеvarКлючевые слова описывают объем и предотвращают переменное загрязнение;
Вместо этого используйте троичные выраженияif..else..Условные операторы;
Сравните следующие типы данных6Ситуацияfalse,false,"",0,null,undefined,NaN; остальные естьtrue;
Определение типа данныхtypeofinstanceof;
Загружать сторонний контент асинхронно;

...

25. Что такое закрытие, какие у него характеристики и какое влияние оно оказывает на страницу

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

26. Разница между нагрузкой на документ и готов

document load: находится в структуре и стиле, внешнийjsjs выполняется после загрузки изображения;
document ready: ДаdomМетод для выполнения при создании дерева, изначально такого метода нет.

как прервать запрос ajax

установить тайм-аутajaxавтоматическое отключение;
Ручная остановкаajaxзапрос, ядром которого является вызовXMLобъектabortметод,ajax.abort();

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

Задача макроса: задача, выполняемая в текущем стеке вызовов, называется задачей макроса. Включить общий кодscript,setTimeout,setInterval;
Микрозадачи: после выполнения текущей (в этом цикле событий) макрозадачи задачи, которые необходимо выполнить до запуска следующей макрозадачи, являются микрозадачами. содержит события обратного вызова,Promise,process.nextTick(узел.js);

🌈🌈Уведомление: События в задаче макроса помещаются вcallback queue, поддерживаемый потоком, инициируемым событием; события микрозадач помещаются в очередь микрозадач, котораяjsОбслуживание резьбы двигателя.

29. Разница между get и post

getМетод передачи параметра передается через URL адресной строки, которую можно увидеть напрямуюgetпереданные параметры,postURL-адрес параметра метода передачи параметра не виден.getвведите запрошенные данные вURLпроходить после?подключиться через&Выполните сегментацию параметров.psotсохранить параметры вHTTPтело пакета;
getданные проходят черезURLПри передаче длина передаваемых данных зависит отURLограничение по размеру,URLМаксимальная длина2048персонажи.postнет ограничения по длине;
getОткат не имеет значения,postОткат приведет к повторной отправке;
getзапросы могут кэшироваться,postнельзя кэшировать;
getтолько запросURLкодирование,postПоддержка нескольких методов кодирования;
getтолько поддержкаASCIIперсонаж,postПредставлено без ограничений по типу символов;
getЗапрошенная запись остается в истории,postЗапросы не остаются в истории;

30. Общие коды ответов HTTP и их значения

(1), 1xx (временный ответ)

100: запрашивающая сторона должна продолжить выполнение запроса.
101(протокол переключения): запрашивающая сторона попросила сервер переключить протоколы, и сервер подтвердил и готов к переключению.

(2), 2xx (успех)

200: запрос выполнен успешно, и возвращается правильный результат интерфейса;
201: указывает, что ресурс был создан правильно.
202: запрос правильный, но результат обрабатывается.В это время клиент может продолжить запрос с помощью таких механизмов, как опрос.
203: Несанкционированная информация, сервер успешно обработал запрос, но возвращенная информация может быть получена из другого источника;
204: нет контента, сервер успешно обработал запрос, но ничего не вернул;
205: Сброс содержимого, сервер успешно обработал запрос, и содержимое сброшено;
206: часть контента сервер успешно обработал часть запроса;

(3), 3xx (перенаправлено)

300: запрос выполнен успешно, но возвращено несколько результатов;
301: Запрос выполнен успешно, но ресурс передан безвозвратно;
302: Временно переместиться, запрошенная веб-страница временно переходит на другие страницы, то есть временно перенаправляет;
303: Используйте get для доступа к новому адресу для получения ресурса;
304: запрошенный ресурс не был изменен;
305: использовать прокси, запрашивающая сторона должна использовать прокси для доступа к странице;
306: временное перенаправление, запрошенный ресурс временно отвечает из других местоположений;

(4), 4xx (ошибка запроса)

400: В запросе есть ошибка, например заголовок запроса не равен;
401: Данные аутентификации не предоставлены. не принесли по просьбеTokenЖдать;
402: Код состояния зарезервирован для будущих нужд;
403: Запрошенный ресурс не имеет доступа, нет разрешения;
404: Посещенная страница не существует;
405: метод отключен, сервер отключает метод, указанный в запросе;
406: неприемлемо, невозможно ответить на запрошенную страницу с запрошенным содержимым;
407: запрашивающая сторона должна использовать авторизацию через прокси;
408: время запроса сервера истекло;
409: Сервер противоречит при выполнении запроса;
410: запрошенный ресурс удален навсегда;
411: требуется допустимая длина. Сервер не принимает запросы без поля заголовка длины полезной нагрузки;
412: сервер не соответствует одному из предварительных условий, установленных запрашивающей стороной в запросе;
413: объект запроса слишком велик и превышает возможности обработки сервера;
414: URL-адрес запроса слишком длинный для обработки сервером;
415: формат запроса не поддерживается запрашиваемой страницей;
416: страница не может предоставить запрошенный объем;
417: сервер не соответствовал требованиям к ожидаемым полям заголовка запроса;

(5), 5xx (ошибка сервера)

500: Внутренняя ошибка сервера, невозможно выполнить запрос;
501: Запрос не был реализован, и сервер не имеет полной функции запроса;
502: Bad gateway, сервер, выступающий в роли шлюза или прокси, получил недопустимый ответ от вышестоящего сервера;
503: услуга недоступна;
504: Тайм-аут шлюза, сервер действует как шлюз или прокси. Но запрос не был получен от вышестоящего сервера вовремя;
505:HTTPВерсия не поддерживается, сервер не поддерживает версию, используемую в запросеHTTPВерсия протокола.

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

31. 😤 Разница между потоком событий IE и DOM

Из порядка исполнения:IEИспользуется всплывающее событие, в то время какDOMЭто первый захват, а затем всплывающее событие;

Мы можем увидеть пример:

<body> 
<div> 
<button>点击</button> 
</div> 
</body> 

// 冒泡型事件模型： button->div->body (IE事件流) 
// 捕获型事件模型： body->div->button (Netscape事件流) 
// DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)

По параметрам, нижняя версияieНет функции обратного вызова, только всплытие;
Добавлять ли "on" из первого параметра, младшая версия IE не поддерживаетaddEventListener(),служба поддержкиattachEvent, нужно добавить первый параметрon;
Из наводящего вопроса об этом,IEнаправлениеwindows, не указывает на запущенную функцию;

32. Что за язык javascript

Интерпретируемый язык сценариев, код не может быть предварительно скомпилирован;
в основном используется дляhtmlДобавьте интерактивное поведение на страницу;
может быть непосредственно встроен вhtmlстраницу или отдельно написанный в виде js-файла. Рекомендуется написать отдельный файл, который способствует разделению структуры и поведения и упрощает обслуживание;
Кроссплатформенный, поддерживается большинством браузеров, может работать на нескольких платформах, таких какwindows,linuxЖдать;

33. Что такое DOM и BOM

Сначала нам нужно знать:JavaScript состоит из трех частей: ECMAScript, DOM и BOM..

ECMAScriptэто язык, описание указанного синтаксиса, операций, ключевых слов, операторов,javascriptДостигнутоECMAScript;
DOMЭто объектная модель документа, которая включает в себя три аспекта: получение элементов, изменение стилей и манипулирование элементами.Это также наиболее часто используемая операция, предоставляющая множество совместимых методов написания;
BOMэто объектная модель браузера, включая некоторые операции браузера,window.onload, window.openДождитесь времени браузера, отслеживайте изменения окнаonresize, слушать события прокруткиonscrollЖдать;

34. Как реализовать связь между несколькими тегами

вызов локального хранилища;

(1), использовать внутри тегаlocalStorage.setItem(key, value)добавлять (удалять или изменять) контент;

(2), монитор на другой вкладкеstorageмероприятие;

(3), получитьlocalStorageСохраненное значение может реализовать связь между разными страницами.

вызвать cookie+setInterval();

(1), сохранить информацию для передачи вcookie, вы можете установить время для чтенияcookieинформацию, вы можете получить информацию, которую вы хотите доставить в любое время.

использовать вебворкер;

(1),webworkerВ качестве новой функции браузера можно предоставить дополнительный поток для выполнения некоторого кода js, не влияя на пользовательский интерфейс браузера;

(2), обычныйWebworkerиспользоватьnew worker()можно создать, этоwebworkerисключительно для текущей страницы. Тогда есть общий享worker(SharedWorker), что может иметь несколько вкладок,iframeобщего пользования;

Использование SharedWorker;

(1),SharedWorkerможет быть несколькоwindowОбычно используется, но необходимо убедиться, что эти вкладки имеют одинаковое происхождение (один и тот же протокол, хост и номер порта);

35. Какие операции вызовут утечку памяти

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

Следующие моменты вызывают утечки памяти:

Чрезмерное использование замыканий может вызвать утечку памяти (решение: определить обработчик событий снаружи, освободить замыкание или во внешней функции, определяющей обработчик событий, удалитьdomцитаты);
Журнал консоли (решение: не забудьте удалить лишние отпечатки консоли после завершения проекта);
Циркулярный, то есть два объекта ссылаются друг на друга и удерживают друг друга;
setTimeoutЕсли первым параметром является строка, а не функция, это также вызовет утечку памяти (решение: постарайтесь не определять первый параметр как строку);
Непредвиденные глобальные переменные также могут вызвать утечку памяти (решение: во избежание используйте строгий режим).
не очищенныйDOMэлемент(решить: удалить вручную);

36. Несколько способов сборки мусора js

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

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

пометить как очищенный

принцип: Когда переменная входит в среду, пометьте эту переменную как «входящую в среду». Когда переменная покидает среду, она помечается как "выходящая из среды". Память восстанавливается, если отмечено «выйти из среды».

процесс работы:

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

подсчет ссылок

принцип: Отслеживайте количество ссылок на каждое значение, объявляйте переменную и присваивайте тип ссылки этой переменной, а затем количество ссылок на это значение.+1Ссылка, когда значение переменной в другое, то значение количества-1, когда количество ссылок на значение равно0когда он перерабатывается.

процесс работы:

Объявляется переменная и ей присваивается значение ссылочного типа, количество ссылок на это ссылочное значение равно1;
Снова то же значениеназначить наДругая переменная, количество ссылок на значение этого ссылочного типа в данный момент.+1;
Когда вызывается переменная, содержащая значение этого ссылочного типаназначить какдругое значение, затем количество ссылок на это ссылочное значение-1;
Когда количество ссылок становится равным 0, это означает, что значение в настоящее время недоступно;
Когда сборщик мусора запускается в следующий раз, он освобождает ссылки столько раз, сколько0Память, занятая значением;

37. Что помещается в память? Что не врезается в память?

основной тип(Boolean, String, Number, Null, Undefined, Symbol(новое)) значениехранится в памяти. Присвоение значения примитивного типа одной переменной другой создает копию значения;
ссылочный тип данных (object) значение является объектом,хранится в куче памяти.

🌈🌈Уведомление:

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

38. Разница между кучей и стеком

(1),Разница между распределением кучи и стека

Куча (операционная система): обычно выделяется и освобождается программистом.Если программист не освобождает ее, она может быть освобождена ОС в конце программы.Метод выделения аналогичен связанному списку;
Стек (операционная система): он автоматически выделяется и освобождается операционной системой и хранит значение параметра функции, значение локальной переменной и т. д. Его работа аналогична стеку в структуре данных;

(2),Разница между кучей и кешем стека

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

(3),Разница между кучей и структурой стека

Куча (структура данных): Куча может рассматриваться как дерево, например: сортировка кучи;
Стек (структура данных): это структура данных «первым пришел — последним вышел»;

39. Что происходит в процессе ввода URL в браузере, чтобы вся страница отображалась перед пользователем (подробное объяснение)

(1),разрешение DNS

Проверьте собственный браузерDNSкеш;
Если нет, найдите собственный файл операционной системы.DNSкеш;
Если нет, попробуй прочитатьhostsдокумент;
Если нет, его можно настроить в соответствии с локальными предпочтениями.DNSСервер инициирует запрос;
.winЕсли система не подходит, вы можете найти операционную системуNetBIOS name cacheили запросwinsНайдите сервер или трансляцию или прочитайте файл LMHOSTS;

(Если ничего из вышеперечисленного, синтаксический анализ не выполняется)

(2),Трехстороннее рукопожатие TCP

(3),Браузер отправляет http запрос на сервер

После созданияTCPСвязь,webбраузер будетwebСервер отправляет команду запроса.

(4),Браузер отправляет информацию заголовка запроса

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

(5),Сервер обрабатывает запрос

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

(6),сервер отвечает

После того, как клиент отправляет запрос на сервер, сервер отвечает клиенту.

(7),Сервер отправляет информацию заголовка ответа

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

(8),сервер отправляет данные

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

(9),Закрытие TCP (четыре волны)

Как правило, однаждыwebСервер отправляет данные запроса в браузер, он вот-вот закроетсяtcpСвязь. Если браузер или сервер включает в свой заголовокConnection:keep-alive , он будет поддерживать длительное состояние соединения, то есть ссылка TCP остается открытой после отправки, и браузер может продолжать отправлять запросы по ссылке Fairchild.

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

40. Какие существуют способы наследования

Наследование цепочки прототипов;
наследование конструктора;
наследование экземпляра;
наследование композиции;
копировать наследование;
Наследование паразитарного состава;

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

41. 🥴Что быстрее JavaScript или ASP-скрипты

В основном,javascriptбудет быстрее.javascriptявляется клиентским языком, поэтому он не требуетwebс помощью сервера. с другой стороны,ASPэто серверный язык, поэтому он всегда лучше, чемjavascriptмедленный. Но следует отметить, что:javascriptТеперь также доступно для серверных языков (например,nodejs).

42. Разница между Java и JavaScript

первый,javaявляется очень полным и зрелым языком программирования; в отличие отjavascriptможно импортироватьHTMLЯзык программирования страницы. Два языка не полностью взаимозависимы, но действительно предназначены для разных целей.
Второй,javaэто объектно-ориентированное программирование (OOPS) или язык структурированного программирования, напримерC++а такжеC;а такжеjavascriptэто язык сценариев на стороне клиента, он называется неструктурированным программированием.

43. Что такое отрицательная бесконечность

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

44. Что такое необъявленные и неопределенные переменные

Необъявленные переменные — это переменные, которые не существуют в программе и объявлены. Если программа попытается прочитать значение объявленной переменной, операция сообщит об ошибке;

conosle.log(b);

// Uncaught ReferenceError: conosle is not defined
    at <anonymous>:1:1

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

let c;
console.log(c);  // undefined

45. В javascript есть несколько видов таймеров и как они работают

Таймер используется для выполнения фрагмента кода в установленное время или для повторения этого кода через заданный интервал времени. по функцииsetTimeout,setIntervalа такжеclearIntervalЧто нужно сделать.

setTimeout(function,delay) функция используется для перемещения таймера, который вызывает определенную функцию после указанной задержки;
setInterval(function,delay) функция используется для повторного выполнения данной функции с указанной задержкой и может быть остановлена только при отмене;
clearInterval(id) функция указывает таймеру остановиться;

🌈🌈Уведомление: таймер работает в потоке, поэтому для выполнения событий может потребоваться поставить их в очередь;

46. В чем разница между ViewState и SessionState

ViewState: относится к странице в сеансе;
SessionState: специально для доступных вwebДанные пользователя доступны на всех страницах приложения;

47. Какова функция оператора удаления

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

48. Каков результат 5 + 8 + «7» и 5 + «8» + 7?

console.log(5 + 8 + '7');  // 137
console.log(5 + '8' + 7);  // 587

Это можно понять так: последовательные целые числа можно складывать напрямую, а строки можно напрямую соединять.

49. Каковы недостатки использования innerHTML в JavaScript

Контент доступен везде;
не может быть похоже на «добавить кinnerHTML' использовать то же самое;
даже использовать+=like "innerHTML = innerHTML + 'html'", старый контент останетсяhtmlзаменять;
весьinnerHTMLКонтент повторно обрабатывается и встраивается в элементы, поэтому он намного медленнее;
innerHTMLНе обеспечивает проверки, поэтому может вставлять действительные и деструктивныеHTMLи прервать его;

50. В JavaScript есть несколько типов ошибок

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

(1), несколько распространенных типов ошибок

SyntaxError: синтаксическая ошибка, обычно относится к синтаксической ошибке, возникающей при синтаксическом анализе кода;
ReferenceError: ошибка ссылки, обычно относится к ошибке, возникающей, когда переменная не существует.
TypeError: Ошибка типа. Обычно ошибка возникает, когда переменная или параметр не соответствует ожидаемому типу.
EvalError eval(): Ошибка выполнения функции, обычно относится кeval()Когда функция выполняется неправильно, она выдаетevalErrorошибка;
RangeError: ошибка диапазона, обычно относится к ошибке, которая возникает, когда значение выходит за пределы допустимого диапазона.

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

51. 🥱Отложенный скриптинг в JavaScript

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

Так что будет такая ситуация, то есть, когда скорость сервера очень низкая или скрипт очень тяжелый, это вызовет задержку веб-страницы. В использованииDeferКогда выполнение скрипта будет отложено доhtmlПарсер работает до завершения. Это значительно сокращает время загрузки и повышает скорость отображения.

52. Что такое decodeURI() и encodeURI()

encodeURI()дляURLпреобразуется в шестнадцатеричное кодирование иdecodeURI()используется для кодированияURLпреобразовать в нормальныйURL.

53. Что такое хэш-стол

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

54. Есть несколько типов узлов

В общем, узел имеет по крайней мереnodeType(тип узла),nodeName(имя узла) иnodeValue(значение узла).

nodeTypeСвойство возвращает постоянное значение типа узла. Разные типы соответствуют разным постоянным значениям, 12 типов соответствуют постоянным значениям от 1 до 12, а именно:

узел элемента:Node.ELEMENT_NODE(1);
узел свойств:Node.ATTRIBUTE_NODE(2);
Текстовый узел:Node.TEXT_NODE(3);
Узел CDATA:Node.CDATA_SECTION_NODE(4);
Узел имени ссылки на сущность:Node.ENTRY_REFERENCE_NODE(5);
Узел имени объекта:Node.ENTITY_NODE(6);
Узлы инструкций по обработке:Node.PROCESSING_INSTRUCTION_NODE(7);
Узел комментариев:Node.COMMENT_NODE(8);
Узел документа:Node.DOCUMENT_NODE(9);
Узел типа документа:Node.DOCUMENT_TYPE_NODE(10);
Узел фрагмента документа:Node.DOCUMENT_FRAGMENT_NODE(11);
Узел объявления DTD:Node.NOTATION_NODE(12);

(Эта часть представляет собой расширенный контент, контент от Du Niang🌻🌻)

55. Разница между innerHTML и externalHTML

innerHTML(содержимое, содержащееся внутри элемента);
outerHTML(я и содержимое внутри элемента);

56. Разница между offsetWidth offsetHeight и clientWidth clientHeight

offsetWidth/offsetHeight(contentширина/высота +paddingширина/высота +borderШирина высота);
clientWidth/clientHeight (contentширина/высота +paddingШирина высота);

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

компрессияCSS,JSдокумент;
сливатьсяCSS,JSфайл, уменьшитьhttpпросить;
внешнийJS,CSSразмещается внизу;
уменьшатьDOMоперации, используйте как можно больше переменных вместо ненужныхDOMдействовать;
Оптимизируйте файлы изображений, чтобы уменьшить их размер, особенно миниатюры;
Используйте несколько доменных имен для загрузки нескольких файлов и изображений на веб-страницу;
Сервер включенgzipсжатие;

58. Опишите, как работает AJAX

Шаг 1: СоздайтеAJAXобъект (XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp));
Шаг 2: ИспользуйтеopenОткройте соединение в форматеopen(метод запроса, «путь запроса», синхронизация/асинхронность);
Шаг 3: Отправитьsend();
Шаг четвертый: когдаajaxСубъект завершает шаг 4（onreadystatechange）, прием данных завершен. Переоценка кода состояния объекта(readystate)Когда код состояния является успешно полученным кодом состояния,HTTPОтвет получен полностью. судить сноваhttpстатус ответа (200-300между или304), (кэш) выполнить функцию обратного вызова и преобразовать полученные данные в строковый формат(responseText).

недостаток:

Не дружелюбен к поисковым системам;
Ограничения на междоменные вопросы;
достигатьajaxСтоимость прямой и обратной функций относительно велика;

Как добиться из кэша в Cache Message 59. HTTP и 200 Состояние

имея в виду

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

Роль кэша

Уменьшите задержку, ускорьте работу веб-сайта и улучшите взаимодействие с пользователем;
Избегайте перегрузки сети, уменьшите объем запросов и уменьшите выходную пропускную способность;

средства реализации

cache-controlсерединаmax-ageсостоит в том, чтобы реализовать содержаниеcacheОбычно используются три стратегии:

max-ageа такжеETagКомбинация;
Толькоmax-age;
max-ageа такжеLast-Modified(Если-Изменено-С) комбинация;

расширять

Вот, развернитеПринудительно кэшировать(200) иСогласовать кеш(304) раздел.

Принудительное кэширование (также называемое сильным кэшированием), что означает, что когда браузер запрашивает файл, серверrespone headerДля этого файла есть конфигурация кеша. Заставить кеш не отправлять запрос на сервер, читать ресурс напрямую из кеша, вchromeприставкаnetworkВы можете увидеть в опциях, что возвращает запрос200код состояния;
Согласовать кеш: Заставьте кэш, чтобы установить время срока действия ресурса. Когда он не истечет, можно сказать, что самодостаточен для пользователя. Однако, когда ресурс истекает, необходимо запросить сервер. В это время процесс запрашивания сервера может быть установлен для договоров к кэше. Переговоры о кэше требуют взаимодействия между клиентом и сервером. Кэш переговоров будет кэшировать информацию вEtagа такжеLast-ModifiedОтправьте запрос на сервер, проверьте его сервером и верните код состояния304, браузер может напрямую использовать кеш.

точки соприкосновения: Оба читают данные с клиента;

разница: Сильный кеш не будет делать запросы, согласованный кеш будет делать запросы.

Параметры заголовка (head) в кеше:

(1), принудительный кеш:

Expires(обычно используется):response headerКогда браузер снова загружает ресурс, если он находится в пределах этого времени истечения срока действия, он попадет в сильный кеш.
Cache-Control(Общий): когда установлено значениеmax-age=120когда запрос возвращается правильно (браузер также зафиксирует это)2Если ресурс снова загружается в течение нескольких минут, сильный кеш будет поражен.
no-cache: не использовать локальный кеш. Согласование кэша необходимо использовать, чтобы проверить, истек ли срок его действия;
no-store: не кэшируется;
public: и клиент, и прокси-сервер могут кэшироваться;
private: может быть только кэширование на стороне клиента;

(2) Кэш согласования

Etag: то есть файлhash, уникальный для каждого файла.webКогда сервер отвечает на запрос, сообщает браузеру текущие ресурсы (правило генерации определяется сервером), что однозначно идентифицирует сервер;
If-None-Match: когда ресурс истекает (используяCache-Controlидентифицированныйmax-age), обнаружил, что ресурс имеетEtagдекларации, затем снова вwebзаголовки по запросу сервераIf-None-Match(значение Etag).webПосле того, как сервер получает запрос, он обнаруживает, что есть заголовокIf-None-MatchЗатем он сравнивается с соответствующей контрольной строкой запрошенного ресурса, чтобы решить, нужно ли обращаться к кэшу согласования;
Last-Modify/If-Modify-Since: время модификации файла с точностью до секунды. Когда браузер запрашивает ресурс в первый раз, сервер возвращаетheaderдобавитLast-Modify,Last-modifyэто время, которое определяет время последней модификации ресурса; когда браузер снова запрашивает ресурс,requestЗаголовок запроса будет содержатьIf-Modify-Since, значение, возвращаемое перед кешемLast-Modify. сервер получаетIf-Modify-SinceПосле этого оцените попадание в кеш по времени последней модификации ресурса;

🌈🌈Уведомление:

Etagлучше чемLast-Modified;
В приоритете проверка сервера имеет приоритетEtag;
С точки зрения производительности,Etagменьше, чемLast-Modified.

60. Что такое виртуальный DOM, зачем его использовать и чем он отличается от реального DOM

Значение и использование

Здесь редактор понимает: виртуальныйDOMправдаDOMПредставление памяти , является концепцией программирования, шаблоном. его роль - судитьDOMНужно ли менять и какие части нужно перерендерить. Таким образом, нет необходимости манипулировать реальнымDOM, при этом значительно улучшаяReactпредставление.

виртуальныйDOMиспользоватьdiffАлгоритм, когда мы много раз модифицируем содержимое определенной части, сначала в виртуальнойDOMДерево сравнивается на том же уровне сверху вниз (не влияет на реальныеDOM), верхний слой меняется, а нижний слой перерисовывается до завершения окончательной модификации, а затем в реальномDOMсредний рендеринг.

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

разница

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

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

61. 🤫Кросс-домены и решения

Различные протоколы, доменные имена и номера портов — междоменные (это также можно понимать как один и тот же протокол, доменное имя и номер порта — политика одного и того же происхождения)

Несколько способов решения междоменной:

document.domain + iframe(доступно только в том случае, если основной домен тот же);
динамически созданныйscript;
location.hash + iframe;
window.name + iframe;
postMessage(HTML5серединаXMLHttpRequest Level 2серединаAPI);
CORS(междоменное совместное использование ресурсов);
jsonp;
websockets;

62. Общие CSRF и XSS

XSS (межсайтовый скриптинг)

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

Меры предосторожности:

Необходимое экранирование результатов ввода и вывода;
использовать как можно большеpost,правильноgetПри использовании старайтесь ограничивать длину пути;
использоватьhttponlyКак хакеры получают пользователей через скриптыcookieданные.
Для самих клиентов вырабатывайте хорошие привычки, будьте бдительны и не переходите случайным образом по незнакомым ссылкам;

CSRF (подделка межсайтовых запросов)

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

Меры предосторожности:

используйте проверочный код;
использоватьtoken idжетон;
оценить запросreFererправильно это или нет;

разница

CSRFВам необходимо войти в систему, чтобы работать,XSSненужный;
CSRFэто страница запросаapiдля достижения незаконных операций,XSSвнедряется в текущую страницуjsСкрипт для изменения содержимого страницы.

63. Как посмотреть на AMD и CommonJS

Модульная спецификация программирования для асинхронного на стороне браузера и синхронного на стороне сервера.

CommonJS: это решитьJavaScriptФорма модуля, определенная с точки зрения области видимости, позволяет каждому модулю выполняться в своем собственном пространстве имен. Суть спецификации в том, что модуль должен пройтиmodule.exportsЭкспортировать внешние переменные или интерфейсы черезrequire()импортировать вывод других модулей в область действия текущего модуля,moduleОпределите сам модуль.

AMD: определяется глобально, немедленно выполняет указанную функциюmoduleа такжеexportsДве внешние переменные модуля помещаются в эту функцию немедленного исполнения. Выходное значение модуля помещается вmodule.exportsТаким образом осуществляется загрузка модуля.

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

Определите функцию обратного вызова;
немедленно выполнить функцию;
как функция, возвращающая значение;
Способ использованияvar func = function() {};определенная функция;

65. Разница между null, undefined или undeclared и как определить

разница:

null: неопределенное свойство;
undefined: определено, но назначено какundefined;
undecleared: javascriptAccess не будет сообщать об ошибках;

Метод обнаружения:

nullэто особыйobject, что означает отсутствие значения;

console.log(typeof null);  // object

const a = null;
if(!a && typeof(a) !== 'undefined' && a!==0) {
    alert('a is null')
} else {
     alert('a is not null')
}

undefined: переменная объявлена, но не назначена;

const a = undefined;
if(typeof(a) === 'undefined') {
    alert('a is undefined')
} else {
     alert('a is not undefined')
}

undeclared:undeclaredявляется синтаксической ошибкой, а не типом данных, необъявленной и неназначенной переменной.

🌈🌈УведомлениеJavaScriptПри обращении движок js не сообщит об ошибке, а будет трактовать ее как глобальную переменную, то есть как свойство окна.

67. Разница между переменной (Musable) и неизменным (неизмеренным) объектом

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

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

Promiseэто решение для асинхронного программирования, по сравнению с традиционными решениямиФункции обратного вызова и событияРазумнее и сильнее. Он был впервые предложен и реализован сообществом,ES6Он написан в соответствии со стандартом языка, унифицированным использованием и изначально предоставленPromiseобъект.

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

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

ноPromiseЕсть и некоторые недостатки, такие как:

Первое: нельзя отменитьPromise, как только он будет создан, он будет выполнен немедленно и не может быть отменен на полпути;
Второе: если вы не установите функцию обратного вызова,PromiseОшибки, возникающие внутри, не будут отражаться снаружи;
Третье: когда вPendingКогда он находится в состоянии, невозможно узнать, на каком этапе он находится в данный момент (только что начат или вот-вот завершится).

69. Разница между обнаружением функций браузера, выводом функций и анализом строк браузера UA

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

70. Понимание Function.prototype.bind

Function.prototype.bindметод создает новую функцию, и когда эта новая функция вызывается, ееthisзначение передаетсяbind()Первый параметр, его параметрыbind()Другие параметры и их оригинальные параметры.

71. Продолжайте обновлять🍀🍀

⏳⏳

......

напиши в конце

оjavascriptЧасть сортировки, давайте сначала разберемся здесь, и она будет постоянно обновляться. СвязанныйОптимизация производительности разработкиРедактор еще разбирается, но из-за недавнего давления проекта, возможно немного задержится (жизнь непростая и дорожите ею 🌻🌻).

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

1. 🤪Как это работает в JavaScript

глобальная область

вызов метода объекта

Использовать режим применения или звонка

вызов функции

вызвать конструктор

2. Пожалуйста, объясните принцип прототипа наследования

3. Что такое замыкание, как его использовать и зачем его использовать

4. В чем разница между синхронными и асинхронными функциями

Синхронизировать

асинхронный

5. Разница между хост-объектами JavaScript и нативными объектами и встроенными объектами

концепция

содержание

разница

6. Чем отличаются следующие коды: function Person(){}, var person = Person(), var person = new Person()

7. Что такое подъем объявления переменной (hoisting)

расширять

Функция расширения 1 имеет приоритет

расширение 2 let, const и var

8. Что такое «use strict»? Преимущества и недостатки его использования

Преимущества (цель, для которой она была создана)

недостаток

9. Что такое цикл событий (event loop)

10. Разница между связыванием, вызовом и применением

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

11. 🤥 Что такое делегирование событий и как всплывающие события и события по умолчанию предотвращают

12. Как проверить, является ли число целым

13. Что такое IIFE (выражение немедленно вызываемой функции)

14. Шаблоны прототипирования

15. Принцип jsonp и почему это не настоящий ajax

16. Что представляет собой модель потока событий Javascript?

17. Что именно делает новый оператор?

18. Какие есть способы ленивой загрузки js?

19. Преимущества и недостатки Flash и ajax, и как выбрать между ними

20. Как файлы cookie хранятся на клиенте

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

21. 🤨Что такое Json

22. Разница между потоком и процессом

23. Что следует учитывать, если веб-контент должен поддерживать несколько языков

24. Некоторые принципы написания JavaScript

25. Что такое закрытие, какие у него характеристики и какое влияние оно оказывает на страницу

26. Разница между нагрузкой на документ и готов

как прервать запрос ajax

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

29. Разница между get и post

30. Общие коды ответов HTTP и их значения

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

31. 😤 Разница между потоком событий IE и DOM

32. Что за язык javascript

33. Что такое DOM и BOM

34. Как реализовать связь между несколькими тегами

35. Какие операции вызовут утечку памяти

36. Несколько способов сборки мусора js

пометить как очищенный

подсчет ссылок

37. Что помещается в память? Что не врезается в память?

38. Разница между кучей и стеком

39. Что происходит в процессе ввода URL в браузере, чтобы вся страница отображалась перед пользователем (подробное объяснение)

40. Какие существуют способы наследования

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

41. 🥴Что быстрее JavaScript или ASP-скрипты

42. Разница между Java и JavaScript

43. Что такое отрицательная бесконечность

44. Что такое необъявленные и неопределенные переменные

45. В javascript есть несколько видов таймеров и как они работают

46. ​​В чем разница между ViewState и SessionState

47. Какова функция оператора удаления

48. Каков результат 5 + 8 + «7» и 5 + «8» + 7?

49. Каковы недостатки использования innerHTML в JavaScript

50. В JavaScript есть несколько типов ошибок

🚚................................................................ ............... ..ᴅᴜᴅᴜ!

51. 🥱Отложенный скриптинг в JavaScript

52. Что такое decodeURI() и encodeURI()

53. Что такое хэш-стол

54. Есть несколько типов узлов

55. Разница между innerHTML и externalHTML

56. Разница между offsetWidth offsetHeight и clientWidth clientHeight

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

58. Опишите, как работает AJAX

46. В чем разница между ViewState и SessionState