Небольшое озарение: после прохождения всех стажировок на крупных фабриках

Хотя июль не сезон сбора урожая, это очень жаркий месяц. Я не знаю, сколько таких друзей, как я, бегают по солнцу в путешествии по различным интервью. Интервью — это долгий процесс. Но это также процесс, который позволяет вам быстро совершенствоваться. В нем бесчисленное количество крови и слез. Прежде чем идти на собеседование, надо сначала иметь прочные базовые знания и достаточно богатый проектный опыт (в моем случае это почти три полных проектных опыта, а совокупное время почти год). Затем идет умение выражаться, вы должны уметь четко описывать свои ответы интервьюеру, обратите внимание на профессиональную лексику, что значительно улучшит впечатление интервьюера о вас!

предисловие

Учиться, не думая, бесполезно, думать, не учась, опасно. Пройдясь практически по всем крупным фабрикам, я обнаружил, что каждая компания больше внимания уделяет проверке базовых возможностей, только когда основы освоены, все фронтенд-знания можно разложить по сериям. Таким образом, независимо от того, какой вопрос на собеседовании, вы можете легко ответить на него. Это сделано для того, чтобы объяснить некоторые основные принципы всех вопросов, на которые я брал интервью, и не буду описывать вопросы, с которыми я столкнулся в ходе интервью. Таким образом, с одной стороны, это может помочь вам освоить основы js, а также помочь мне углубить свое понимание. Далее я объясню каждый пункт знаний в модулях. Это слишком долго, пожалуйста, наберитесь терпения! ! !

1. CSS-интервью

1. Коробчатая модель

Блочные модели в CSS включают блочную модель IE и стандартную блочную модель W3C. Блочная модель по-прежнему приписывается свойству box-sizing, а соответствующие точки блочной модели — это border-box и content-box. Так называемая стандартная блочная модель (border-box): ширина = левая и правая граница + левое и правое заполнение + ширина содержимого, в то время как наша блочная модель IE (border-box): ширина = содержимое+padding+border Любые указанные отступы и границы элемент будет рисовать в пределах заданной ширины и высоты.

2. Проблема с одним пикселем переднего плана (нарисуйте линию 0,5 пикселя)

Метод 1: transform:scaleY (0.5) Используйте псевдоэлементы, чтобы установить границу в 1 пиксель, а затем масштабируйте границу (scaleY) Идеи реализации:

1. Установите контрольную позицию целевого элемента
2. Добавьте псевдоэлемент до или после целевого элемента и установите абсолютное позиционирование.
3. Добавьте границу в 1 пиксель к псевдоэлементу
4. Используйте свойство box-sizing: border-box, чтобы обернуть границу по ширине и высоте.
5. Установите ширину и высоту на 200%
6. Вся боксовая модель уменьшена до 0.5
7. Скорректируйте положение блочной модели, приняв левый верхний угол за точку отсчета transform-origin: 0

Способ 2: border-image Установите границу изображения

3. Разница между переходом и анимацией

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

4. DIV переменной высоты центрируется

1. Используйте гибкость

在父盒子设置display: flex; justify-content: center;align-items: center

2. Используйте CSS-преобразование

父盒子设置:display:relative
	Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

3.display: таблица-ячейка

父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
	Div 设置: display:inline-block;vertical-align:middle;

5. ПлавающийСоответствующая ссылка

Особенности: Плавающие элементы влияют не только на самих себя, но и на окружающие элементы, чтобы окружить их.
Зачем очищать поплавки? (Решить проблему коллапса высоты родительского элемента) Если для блочного элемента не задана высота, его высота растягивается за счет дочернего элемента.После того, как для дочернего элемента используется float, дочерний элемент будет отделен от потока документа.То есть нет содержимое в родительском элементе и элементе, который может растягиваться по высоте, так что высота родительского элемента игнорируется. Это называется коллапс высоты
Как очистить поплавок

1.给父级元素定义高度 
2.让父级元素也浮动 
3.父级定义display:table 
4.父元素设置overflow:hidden 
5.clearfix:使用内容生成的方式清除浮动
	.clearfix:after {  // :after选择器向选定的元素之后插入内容
   		    content:""; // 生成内容为空
   		    display: block; // 块级元素显示
   		    clear:both; // 清除前面元素
	}
不破坏文档流，没有副作用

6, классификация селектора css

基本的：
	1.id选择器（id="name"）
	2.类选择器（class="head"）
	3.标签选择器（body, div, ul, li）
	4.全局选择器（*）
复杂的：
	1.组合选择器（.head .head_logo）
	2.后代选择器 （#head .nav ul li 从父集到子孙集）
	3.群组选择器 (div, span, img {color:Red} 具有相同样式的标签分组显示)
	4.继承选择器
	5.伪类选择器（链接样式，a元素的伪类）
	6.子选择器（div>p, 带大于号>）
	7.CSS相邻相邻兄弟选择器（h1+p, 带加号+）

приоритет:

Различные уровни: Сводная сортировка: !important > Встроенные стили > Селектор идентификаторов > Селектор классов > Теги > Подстановочные знаки > Наследовать > Свойства браузера по умолчанию

1. Добавление !import после того, как атрибут переопределит стиль элемента, определенный в любом месте страницы.
2. Стиль, записанный в элементе как атрибут стиля
3. селектор идентификатора
4. Селектор класса
5. Селектор тегов
6. Селектор подстановочных знаков (*)
7. Настройка браузера или наследование

На том же уровне: более поздние записи перезаписывают более ранние

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

7. Строчные и блочные элементы

блочный элемент	встроенный элемент
Блочный элемент сам по себе будет занимать строку. По умолчанию его ширина будет автоматически соответствовать ширине родительского элемента. Линейный элемент не будет занимать строку и всегда будет расположен в строке до тех пор, пока линия больше не может быть размещена. .	Линейные элементы не имеют атрибутов ширины и высоты, а элементы уровня блока все равно будут занимать одну строку, даже если задана ширина.
Элементы уровня блока: div p forn ul li h1-h6	Встроенный элемент: span img input a i

блочный элемент

встроенный элемент

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

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

Элементы уровня блока: div p forn ul li h1-h6

Встроенный элемент: span img input a i

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

8. Как нарисовать треугольник

设置宽高，然后用border去画
  		width: 0;
        	height: 0;
        	border-bottom: 100px solid cyan;
        	border-left: 50px solid transparent;
        	border-right: 50px solid transparent;

9. Способы заставить элементы исчезнуть

видимость: скрыта, отображение: нет, z-index=-1, непрозрачность: 0

1.opacity: 0, элемент скрыт, но макет страницы не будет изменен, и если элемент связан с некоторыми событиями, такими как событие клика, он также может быть вызван
2.visibility:hidden, элемент скрыт, но макет страницы не изменится, но событие, к которому был привязан элемент, не сработает
3.display:node, скрывает элемент и изменяет макет страницы, что можно понимать как удаление элемента на странице

10. Почему css вверху, а js сзади?

1. После того, как браузер предварительно загрузит CSS, он может отображать страницу, не дожидаясь загрузки HTML.
2. На самом деле рендеринг HTML не ждет полной загрузки страницы для рендеринга страницы, а рендеринг выполняется во время разбора DOM.
3. js пишется в конце, в основном потому, что js в основном играет функцию обработки событий, с одной стороны многие операции выполняются уже после рендеринга страницы. С другой стороны, это может сократить время загрузки, ускорить загрузку страницы и улучшить взаимодействие с пользователем.

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

Схема интервью

1. гибкий гибкий макет

Вы можете просто центрировать элемент (как по горизонтали, так и по вертикали) в макете системы сетки, загрузочной сетке

2. Три столбца — это макет

Три столбца макет (два столбца с обеих сторон имеют фиксированную ширину, а средний столбец имеет адаптивную ширину)

Вариант 1: position (метод абсолютного позиционирования) центральный элемент div необходимо разместить сзади Принцип метода абсолютного позиционирования использует абсолютное позиционирование по левой и правой сторонам, потому что абсолютное позиционирование выносит его из потока документа, к ним естественным образом перетекает следующий центр, а затем атрибут поля, оставляя ширину поля левая и правая стороны. Его можно адаптировать.
Вариант 2: сам поплавок плавает, центральный div должен быть помещен позади Принцип самоплавающего метода заключается в использовании float:left и float:right для левого и правого элементов и float для исключения левого и правого элементов из потока документа. margin, чтобы указать левое и правое внешние поля для их размещения.
Вариант 3 (макет «Святой Грааль»): принцип заключается в методе отрицательной маржи. Чтобы использовать макет Holy Grail, вам сначала нужно включить div вне центрального элемента.Включенный div должен установить атрибут float для формирования BFC, и эта ширина соответствует отрицательному значению поля.

3. Фиксированная ширина слева, адаптивная справа

Вариант 1: Установите плавающую позицию слева и установите ширину справа на 100% .left{float:left} .right:{width:100%}
Вариант 2. Установите значение float слева и используйте cacl для заполнения вычисления ширины справа .left{float:left} .right:{width:cacl(100vw-200px}
Вариант 3: Родительский контейнер устанавливает display: flex, правая часть должна установить flex: 1
Вариант 4: правый div оборачивает пакет, а передний, левый и двойной плавающие элементы пакета

4. Горизонтально по центру

行内元素居中（父元素text-align:center）
	块状元素居中（块状元素没发用text-align）
		1.宽度一定：margin:auto
		2.宽度不定：块级变行内，然后在父上text-aligin

5. БФК

理解：BFC是css布局的一个概念，是一块独立的渲染区域，一个环境，里面的元素不会影响到外部的元素
如何生成BFC：（脱离文档流）
	     【1】根元素，即HTML元素（最大的一个BFC）
	     【2】float的值不为none
	     【3】position的值为absolute或fixed
	     【4】overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
	     【5】display的值为inline-block、table-cell、table-caption
BFC布局规则：1.内部的Box会在垂直方向，一个接一个地放置。
	     2.属于同一个BFC的两个相邻的Box的margin会发生重叠
	     3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float
	     4.BFC的区域不会与float box重叠。
	     5.计算BFC的高度，浮动元素也参与计算
BFC作用：1.自适应两栏布局
	 2.可以阻止元素被浮动元素覆盖
	 3.可以包含浮动元素---清除内部浮动 原理:：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
	 4.分属于不同的BFC时，可以阻止margin重叠

Три статьи с интервью по js

1. Внешний поток событий

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

1. Этап захвата события: фактический целевой div не будет принимать события на этапе захвата, то есть на этапе захвата событие останавливается от документа до прибытия.
2. В целевой фазе: событие происходит и обрабатывается в div, но обработка события будет рассматриваться как часть фазы всплытия.
3. Фаза всплытия: событие распространяется обратно в документ.

阻止冒泡事件event.stopPropagation()
 		  function stopBubble(e) {
   		if (e && e.stopPropagation) { // 如果提供了事件对象event 这说明不是IE浏览器
  		e.stopPropagation()
    		} else {
  		window.event.cancelBubble = true //IE方式阻止冒泡
    	      }
  		   }
阻止默认行为event.preventDefault()
	 function stopDefault(e) {
	    if (e && e.preventDefault) {
         e.preventDefault()
        } else {
            // IE浏览器阻止函数器默认动作的行为
            window.event.returnValue = false
        }
    }

Как события сначала перехватываются, а затем всплывают:

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

Какие события не поддерживают всплывающие события:

鼠标事件：mouserleave  mouseenter
焦点事件：blur focus
UI事件：scroll resize

2. Делегирование событий (улучшает производительность)

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

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

3. Что делает новый оператор js?

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

4. Смысл этого

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

4.1 Принцип работы стрелки такой:

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

4.2 Как изменить наведение этого?

1. Используйте стрелочные функции es6 2. Используйте that = this внутри функции 3. Используйте apply, call, bind 4. Новый экземпляр объекта

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

Измените эту точку функции через применение и вызов.Первый параметр двух функций один и тот же, указывая на объект, который необходимо изменить.Второй параметр, применение представляет собой массив, а вызов является arg1, arg2... эта форма . Один из bind — вернуть функцию, и она не будет выполняться сразу, второй — взять параметры (это первый параметр, на который нужно указать, а следующие параметры используются для передачи

5. Глубокое и поверхностное копированиеСсылка на ссылку

базовый тип	тип ссылки
Основные типы: undefined, null, Boolean, String, Number, Symbol занимают фиксированный размер в памяти и хранятся в памяти стека.	Тип ссылки: Объект, Массив, Дата, Функция, RegExp и т. д. Значением ссылочного типа является объект, который хранится в куче памяти, а в стековой памяти хранится переменный идентификатор объекта и адрес хранения объект в куче памяти.
Копирование базовых типов: Фактически создается новая копия для присвоения этого значения новой переменной, изменение значения старого объекта не изменит	Копирование ссылочных типов: Фактически копируется указатель, который в конечном итоге будет указывать на тот же объект, и новый объект также изменится, если изменить его значение

базовый тип

тип ссылки

Основные типы: undefined, null, Boolean, String, Number, Symbol занимают фиксированный размер в памяти и хранятся в памяти стека.

Тип ссылки: Объект, Массив, Дата, Функция, RegExp и т. д. Значением ссылочного типа является объект, который хранится в куче памяти, а в стековой памяти хранится переменный идентификатор объекта и адрес хранения объект в куче памяти.

Копирование базовых типов: Фактически создается новая копия для присвоения этого значения новой переменной, изменение значения старого объекта не изменит

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

Примечание: сравнение примитивных типов == выполнит преобразование типов

мелкая копия	глубокая копия
Он просто копирует ссылку, не влияет на операции друг друга, slice() concat() object.assign	Перераспределение памяти в куче, разные адреса, одно и то же значение, JSON.parse() сериализует js-объект в json-строку JSON.stringify() десериализует json-строку в js Expand {...} объекта es6
Пересоздавайте память в стеке, и базовые типы объектов до и после копирования не влияют друг на друга. Копируется только один слой, а подобъекты копировать нельзя.	Рекурсивно копировать подобъекты в объект, и два объекта до и после копирования не влияют друг на друга

6. Механизм setTimeout и setInterval

Потому что js однопоточный. Когда браузер встречает etTimeout и setInterval, он сначала выполнит текущий блок кода. Перед этим он поместит таймер в очередь ожидания выполнения браузера. очередь событий, задача, если есть, выполнить код в таймере

7. Междоменные проблемы внешнего интерфейса

Политика одного и того же происхождения (протокол + номер порта + доменное имя должны быть одинаковыми)

1, междоменный jsonp (только получить) Принцип: динамически создавайте тег скрипта. Использование атрибута src тега script не ограничено политикой одного и того же источника, поскольку все атрибуты src и атрибуты href не ограничены политикой одного и того же происхождения, и можно запрашивать содержимое ресурсов стороннего сервера.

	步骤：1.去创建一个script标签
		      2.script的src属性设置接口地址
		      3.接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
		      4.通过定义函数名去接受返回的数据

2. Базовое доменное имя document.domain такое же, но имя поддомена другое.
3. window.name используется в окне браузера, и все загружаемые доменные имена имеют общее имя window.name.
4. Поддержка настроек сервера для CORS Принцип: после того, как сервер установит HTTP-заголовок ответа Access-Control-Allow-Origin, браузер разрешит междоменные запросы.
Воспользуйтесь новой функцией h5 window.postMessage().

iframe元素创建包含另外一个文档的内联框架（行内框架）(setTimeout进行异步加载)
      解释：浏览器中的浏览器！用于设置文本或者图形的浮动图文框或容器
      它和跨域
        1、document.domain 实现主域名相同，子域名不同的网页通信
          都设置为超域：document.domain = 'demo.com'
        2、window.postMessageht(data, url)，h5的API，启动跨域通信

8. Предварительная загрузка изображений и отложенная загрузка

8.1. Предварительная загрузка:

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

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

Решения для устранения пустых страниц: 1. Предварительная загрузка

2. Используйте изображение сайта в формате svg, чтобы быстро построить некоторые структуры, дождаться поступления запрошенных данных и заменить текущий заполнитель.

Способы реализации предзагрузки:

		1.使用html标签
		2.使用Image对象
		3.使用XMLHTTPRequest对像，但会精细控制预加载过程

8.2, ленивая загрузка (lazyload)

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

Принцип: Сначала атрибуту src картинки на странице задаем пустую строку, а реальный путь картинки задаем атрибутом data-original.При прокрутке страницы нужно прослушивать событие прокрутки. обратный вызов события прокрутки, Определить, входит ли наше лениво загруженное изображение в видимую область.Если изображение находится в видимой области, установите атрибут src изображения в значение data-original, чтобы можно было достичь ленивой загрузки .

9. Функция дросселирования и анти-тряски

Стабилизатор	дросселирование
Одно и то же событие срабатывает несколько раз за короткий промежуток времени, только в последний раз, или в начале, а не в середине. Например, когда вы садитесь в автобус, вам приходится ждать, пока в автобус сядет последний пассажир.	Регулирование — это процесс непрерывного запуска событий для выполнения функции через равные промежутки времени. Дросселирование разбавит вашу частоту выполнения, например, каждую 1 секунду функция будет выполняться только один раз, независимо от того, сколько раз событие срабатывает в эту 1 секунду

Стабилизатор

дросселирование

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

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

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

10. js механизм сборки мусора

1.JS具有自动垃圾收集的机制
2.JS的内存生命周期（变量的生命）
	1.分配你所需要的空间 var a = 20
	2.使用分配带的内存（读写） alert（a + 10）
	3.不适用的时候，释放内存空间 a = null 
3.JS的垃圾收集器每隔固定的时间就执行一次释放操作，通用的是通过标记清除的算法
4.在局部作用域中，垃圾回收器很容易做出判断并回收，全局比较难，因此应避免全局变量

   标记清除算法：js最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将他标记为'进入环境'，
		 当变量离开（函数执行完后），就其标记为'离开环境'。垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，
		 然后去掉环境中的变量以及被环境中该变量所引用的变量（闭包）。在这些完成之后仍存在标记的就是要删除的变量了

11. Некоторые методы проверки

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

typeOf() — это Boolean, Number, symbol, undefined, String, который определяет базовый тип. Для ссылочных типов: за исключением функции, все возвращают объект null и возвращают объект.
installOf() используется для определения того, является ли A экземпляром B, а installof проверяет прототип.
toString() является прототипом метода Object.Для объектов Object прямой вызов toString() вернет [Object Object] . Для других объектов его необходимо вызывать через call/apply, чтобы вернуть правильную информацию о типе.
Метод hasOwnProperty() возвращает логическое значение, указывающее, имеет ли объект указанное свойство в своих собственных свойствах.Этот метод игнорирует свойства, унаследованные от цепочки прототипов.
Метод isProperty() проверяет, существует ли объект в цепочке прототипов другого объекта.
valueof: все объекты имеют valueof, если есть какое-либо примитивное значение, он преобразует объект в примитивное значение, которое представляет его по умолчанию. Если объект является составным значением, и большинство объектов не могут реально представлять примитивное значение, метод valueof() по умолчанию просто возвращает сам объект, а не примитивное значение.

12. Разница между splice и slice, map и forEach, filter(), reduce()

 1.slice(start,end):方法可以从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组方法
	注意：该方法不会更新原数组，而是返回一个子数组
 2.splice():该方法想或者从数组中添加或删除项目，返回被删除的项目。（该方法会改变原数组）
	splice(index, howmany,item1,...itemx)
		·index参数：必须，整数规定添加或删除的位置，使用负数，从数组尾部规定位置
		·howmany参数：必须，要删除的数量，
		·item1..itemx:可选，向数组添加新项目
3.map()：会返回一个全新的数组。使用于改变数据值的时候。会分配内存存储空间数组并返回，forEach（）不会返回数据
4.forEach(): 不会返回任何有价值的东西，并且不打算改变数据，单纯的只是想用数据做一些事情，他允许callback更改原始数组的元素
5.reduce(): 方法接收一个函数作为累加器，数组中的每一个值（从左到右）开始缩减，最终计算一个值，不会改变原数组的值
6.filter(): 方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。它里面通过function去做处理

13. блокировка js\css

блокировка js	css блокировка
Когда все браузеры загружают JS, они блокируют все другие действия, такие как загрузка других ресурсов, рендеринг контента и так далее. Пока JS не будет загружен, проанализирован и выполнен, он будет продолжать загружать другие ресурсы параллельно и отображать контент. Чтобы улучшить взаимодействие с пользователем, браузеры нового поколения поддерживают параллельную загрузку JS, но загрузка JS по-прежнему будет блокировать загрузку других ресурсов (таких как .images, файлы css и т. д.).	Поскольку браузеры поддерживают порядок css и js в html, таблицы стилей должны быть загружены и проанализированы до выполнения встроенного JS. Встроенный JS заблокирует последующую загрузку ресурсов, поэтому приведенный выше CSS заблокирует загрузку.

блокировка js

css блокировка

Когда все браузеры загружают JS, они блокируют все другие действия, такие как загрузка других ресурсов, рендеринг контента и так далее. Пока JS не будет загружен, проанализирован и выполнен, он будет продолжать загружать другие ресурсы параллельно и отображать контент. Чтобы улучшить взаимодействие с пользователем, браузеры нового поколения поддерживают параллельную загрузку JS, но загрузка JS по-прежнему будет блокировать загрузку других ресурсов (таких как .images, файлы css и т. д.).

Поскольку браузеры поддерживают порядок css и js в html, таблицы стилей должны быть загружены и проанализированы до выполнения встроенного JS. Встроенный JS заблокирует последующую загрузку ресурсов, поэтому приведенный выше CSS заблокирует загрузку.

14. Создание и наследование классов

(es6) класс, расширяет

14.1 Наследование:

Наследование цепочки прототипов: function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; Нельзя реализовать множественное наследование
Конструктивное наследование: используйте конструктор родительского класса для улучшения экземпляра дочернего класса. function Cat(name){Animal.call(this);this.name = name || 'Tom';} Невозможно наследовать свойства цепочки прототипов родительского класса и метод installof для проверки
Наследование экземпляра: добавьте новые функции в экземпляр родительского класса в качестве возврата экземпляра дочернего класса.
Копировать наследование: копировать свойства и методы родительского элемента.
Комбинаторное наследование: сочетание конструктивного наследования + прототипное наследование
Паразитическое комбинированное наследование: Паразитически добавить к структурному наследованию функцию Super (без экземпляров и методов), чтобы ее цепочка прототипов указывала на цепочку прототипов родительского класса и обрезала атрибуты экземпляра родительского класса, поэтому что при двойном вызове родительского класса при построении методы/свойства экземпляра не инициализируются дважды

14.2. Имея два конструктора A и B, как реализовать A, наследующий B (Object.prototype)

	function A(....){} A.prototype...
	function B(....){} B.prototype...
	A.prototype = Object.create(B.prototype)  再A的构造函数里new B(props)		
	
   使用new一个函数的话，函数里的构造函数的参数就为undefined，里面的一些函数可能执行错误，因为this改变了	
	Object.create =  function (o) {
		var F = function () {};
		F.prototype = o;
		return new F();
		};

15. Замыкания и прототипы

15.1 Понимание замыканий

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

15.2 Дефекты укупорочных средств:

1.闭包的缺点就是常驻内存会增大内存使用量，并且使用不当容易造成内存泄漏
2.如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。

15.3, понимание памяти

Переполнение памяти и утечка памяти (недостаточно задано | не возвращается при использовании)

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

15.4 Область применения

Область действия: (состоит из ряда переменных объектов в текущей среде и среде верхнего уровня!!! Убедитесь, что в текущей среде выполнения переменные и функции, имеющие к ней доступ, находятся в порядке, а переменные цепочки областей видимости могут быть только доступ вверх)

Определение: он состоит из ряда объектов переменных в текущей среде и среде верхнего уровня (вложенные функции функций, внутренний доступ к переменным или объектам в упорядоченном порядке вверх)

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

作用域：一套规则，管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称
	查找变量（标识符就是变量或者函数名）（只用全局作用域和局部作用域）（作用域在它创建的时候就存在了）

代码执行分为两个阶段：
	1.代码编译阶段：有编译器完成，将代码翻译可执行的代码，这个阶段会被确定
	2.代码执行阶段：有js引擎完成，主要执行可执行的大妈，这个阶段执行上下文被创建（对象被创建）

执行上下文：一个看不见得对象，存在若干个属性和变量，它被调用的时候创建的。函数被调用查看的this指向的object，object就是上下文（只有被调用的时候创建）

15.5 Цепочка областей действияСсылка на ссылку

    · 当代码在一个环境中执行时，会创建变量对象的一个作用域链,
	举例子：var name ="Tom"
		function sayHi () {
		    alert('Hi,'+name)
		}
		sayHi()  //Hi, Tom
	函数sayHi()的执行环境为全局环境，所以它的变量对象为window。当函数执行到name时，先查找局部环境，找到则换回，否则顺着作用域查找，在全局环境中，
	找到name返回，这一查找变量的有序过程的依据就是作用域。

    · 作用域链是保证执行环境有权访问的所有变量和函数的有序访问

15.6 Цепочка прототипов

Цепочка прототипов: конструктор объекта цепочки прототипов функции по умолчанию указывает на саму функцию.В дополнение к атрибуту прототипа объект-прототип также имеет указатель цепочки прототипов _proto_ для достижения наследования, который указывает на объект-прототип функции. верхний слой и верхний слой Структура объекта-прототипа остается аналогичной. Следовательно, вы можете использовать _proto_, чтобы всегда указывать на объект-прототип Object, а объект-прототип Object использует Object.prototype.proto=null означает вершину цепочки прототипов. Это формирует цепочку прототипов наследования js. При этом все js объекты имеют базовую защиту Object

В-четвертых, интервью на стороне сервера

1. Код состояния

2XX（成功处理了请求状态）
          200 服务器已经成功处理请求，并提供了请求的网页
          201 用户新建或修改数据成功
          202 一个请求已经进入后台
          204 用户删除成功
3XX（每次请求使用的重定向不要超过5次）
          304 网页上次请求没有更新，节省带宽和开销
4XX（表示请求可能出错，妨碍了服务器的处理）
          400 服务器不理解请求的语法
          401 用户没有权限（用户名，密码输入错误）
          403 用户得到授权（401相反），但是访问被禁止
          404 服务器找不到请求的网页，
5XX（表示服务器在处理请求的时候发生内部错误）
          500 服务器遇到错误，无法完成请求
          503 服务器目前无法使用（超载或停机维护）

2. Принцип кэширования 304 (добавьте тег Etag .last-modified)

1. Сначала сервер генерирует Etag, который сервер может использовать позже, чтобы определить, была ли изменена страница. По сути, клиент передает этот токен обратно на сервер, чтобы попросить сервер проверить (кэш клиента)
2.304 — это код состояния HTTP, который используется сервером для определения того, что файл не был изменен и не возвращает содержимое.Браузер перейдет к файлу, кэшированному браузером, после получения этого кода состояния.
3. Процесс: клиент запрашивает страницу А. Сервер возвращает страницу A, добавляет к A клиент Tage для отображения страницы и сохраняет Tage в кэше. Клиент снова запрашивает страницу A и передает серверу последний запрошенный ресурс вместе с ETage. Сервер проверяет Tage и определяет, что страница не изменялась с момента последнего запроса клиента. вернуть 304 напрямую

last-modified: когда клиент запрашивает ресурс, существует атрибут last-modified, чтобы отметить время последнего изменения файла на сервере.Когда клиент запрашивает этот URL-адрес во второй раз, он основан на протоколе http . Браузер отправит на сервер заголовок If-Modified-Since, запрашивая, был ли файл изменен после события, и никакие изменения не вернут 304.

 有了Last-Modified，为什么还要用ETag？
  1、因为如果在一秒钟之内对一个文件进行两次更改，Last-Modified就会不正确（Last—Modified不能识别秒单位的修改）
  2、某些服务器不能精确的得到文件的最后修改时间
  3、一些文件也行会周期新的更改，但是他的内容并不改变（仅仅改变修改的事件），这个时候我们并不希望客户端认为文件被修改，而重新Get

ETag，为什么还要用Last-Modified？
  1、两者互补，ETag的判断的缺陷，比如一些图片等静态文件的修改
  2、如果每次扫描内容都生成ETag比较，显然要比直接比较修改时间慢的多。


ETag是被请求变量的实体值（文件的索引节，大小和最后修改的时间的Hash值）
  1、ETag的值服务器端对文件的索引节，大小和最后的修改的事件进行Hash后得到的。

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

1. Полученные данные сохраняются после URL-адреса с ? Разделите URL-адрес и передайте данные, а также соедините параметры с &; метод публикации заключается в том, чтобы поместить отправленные данные в тело http-пакета.
2. Размер данных, отправляемых методом get, ограничен (поскольку у браузера есть ограничение на длину URL-адреса), а данные, отправляемые методом post, не ограничены.
3.get требуется request.queryString для получения значения переменной, а метод post получает значение переменной через request.from
4. Отправка данных методом get вызовет проблемы с безопасностью, например, когда вы входите на страницу и отправляете данные методом get, имя пользователя и пароль будут отображаться в URL-адресе.

4. Резюме http и https

4.1. Понимание протокола http

1.超文本的传输协议，是用于从万维网服务器超文本传输到本地资源的传输协议
2.基于TCP/IP通信协议来传递数据（HTML，图片资源）
3.基于运用层的面向对象的协议，由于其简洁、快速的方法、适用于分布式超媒体信息系统
4.http请求信息request：
	请求行（request line）、请求头部（header）,空行和请求数据四部分构成

	请求行，用来说明请求类型,要访问的资源以及所使用的HTTP版本.
	请求头部，用来说明服务器要使用的附加信息
	空行，请求头部后面的空行是必须的
	请求数据也叫主体，可以添加任意的其他数据。
5.http相应信息Response
	状态行、消息报头、空行和响应正文

	状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成
	消息报头，用来说明客户端要使用的一些附加信息
	空行，消息报头后面的空行是必须的
	响应正文，服务器返回给客户端的文本信息。

4.2, разница между http и https

http	https
Это безопасный HTTP-канал, просто безопасная версия HTTP, зашифрованная с помощью SSL.	Протокол передачи гипертекста. Это клиентский и серверный стандарт запросов и ответов (tcp), который делает браузер более эффективным и снижает передачу данных по сети.

4.3, разница между http1.0, 1.1, 2.0

Разница между 1.0 и 1.1:

Длинное соединение: HTTP1.0 должен использовать параметр keep-alive, чтобы указать серверу установить длинное соединение, в то время как HTP1.1 поддерживает длинное соединение по умолчанию.

Экономьте пропускную способность: HTTP1.1 поддерживает отправку только одной информации заголовка (без какой-либо информации тела)

хост-домен (установите виртуальный сайт, то есть несколько виртуальных сайтов на веб-сервере могут использовать один и тот же IP-порт): HTTP1.0 не имеет хост-домена

Разница между 1.1 и 2.0:

1. Двоичный текст, используемый http2 для передачи данных, а не текстовый формат http1, двоичный лучше подходит для анализа и расширения протокола
2. Сжатие данных: информационный заголовок сжимается и передается с использованием HPACK, что экономит сетевой трафик, создаваемый информационным заголовком.
3. Мультиплексирование: соединение может обрабатывать несколько запросов одновременно.
4. Проталкивание сервера: когда мы запрашиваем данные с веб-сервера, поддерживающего HTTP2.0, сервер, между прочим, направляет клиенту некоторые ресурсы, необходимые клиенту, чтобы клиент не создавал соединение снова и не отправлял запрос на сервер для его получения. Этот метод очень подходит для загрузки статических ресурсов.

5. Веб-резюме

5.1, веб-кеш

1.web缓存就是存在于客户端与服务器之间的一个副本、当你第一个发出请求后，缓存根据请求保存输出内容的副本
2.缓存的好处
        （1）减少不必要的请求
	（2）降低服务器的压力，减少服务器的消耗
	（3）降低网络延迟，加快页面打开速度（直接读取浏览器的数）

5.2 Общие принципы веб-безопасности и защиты

1. Принцип внедрения sql: команда sql вставляется в веб-форму для отправки или ввода, чтобы выжить, чтобы обмануть сервер для выполнения вредоносной команды sql. Предотвращение: 1. Проверка ввода пользователя 2. Не применимо к динамическому сплайсингу sql
2. XSS (атака с использованием межсайтовых сценариев): вставка вредоносных тегов html или кода js в веб-страницы. Пример: Размещение безопасной ссылки на форуме для кражи информации о пользователе из файлов cookie. Предотвращение: 1. Попробуйте использовать публикацию вместо отправки формы. 2. Избегайте утечки пользовательских имплицитов в файлах cookie
3. CSRF (маскировка межсайтовых запросов): путем маскировки запросов от доверенных пользователей. Например: данные музыкального запроса веб-приложения г-на Хуан И должны использовать маскировку межсайтового запроса CSRF для получения данных музыки QQ. Предотвращение: добавьте псевдослучайные числа на страницу обслуживания клиентов, чтобы передать код подтверждения.
Разница между XSS и CSRF: 1. XSS — это получение информации без предварительного знания кода и пакетов данных других страниц пользователя 2. CSRF подменяет пользователя для выполнения указанного действия и должен знать код и пакеты данных других страниц

5.3. CDN (сеть доставки контента)

1.尽可能的避开互联网有可能影响数据传输速度和稳定性的瓶颈和环节。使内容传输的更快更稳定。
2.关键技术：内容存储和分发技术中
3.基本原理：广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对的地区或者网络中。当用户访问网络时利用全局负载技术
	    将用户的访问指向距离最近的缓存服务器，由缓存服务器直接相应用户的请求（全局负载技术）

6. Процесс внешнего рендеринга (трехстороннее рукопожатие TCP, рендеринг дерева DOM)

6.1. Полный процесс от ввода URL до получения страницыСсылка на ссылку

1.查询NDS(域名解析),获取域名对应的IP地址  查询浏览器缓存
2.浏览器与服务器建立tcp链接（三次握手）
3.浏览器向服务器发送http请求(请求和传输数据）
4.服务器接受到这个请求后，根据路经参数，经过后端的一些处理生成html代码返回给浏览器
5.浏览器拿到完整的html页面代码开始解析和渲染，如果遇到外部的css或者js，图片一样的步骤
6.浏览器根据拿到的资源对页面进行渲染，把一个完整的页面呈现出来

6.2, трехстороннее рукопожатие TCP

Клиентская сторона отправляет запрос на подключение к серверной стороне для подтверждения, и серверная сторона также инициирует подтверждение соединения, а клиентская сторона подтверждает.

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

6.3 Принцип и процесс рендеринга в браузере DOM -> CSSOM -> рендер -> макет -> печать

流程：解析html以及构建dom树 -> 构建render树 ->  布局render树 -> 绘制render树
	概念：1.构建DOM树： 渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树
	      2.构建渲染树： 解析对应的css样式文件信息（包括js生成的样式和外部的css）
	      3.布局渲染树：从根节点递归调用，计算每一个元素的大小，位置等。给出每个节点所在的屏幕的精准位置
	      4.绘制渲染树：遍历渲染树，使用UI后端层来绘制每一个节点
   
	重绘：当盒子的位置、大小以及其他属性，例如颜色、字体大小等到确定下来之后，浏览器便把这些颜色都按照各自的特性绘制一遍，将内容呈现在页面上
		触发重绘的条件：改变元素外观属性。如：color，background-color等
		重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
	注意：table及其内部元素需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多发时间，要尽量避免使用table布局
	
	重排（重构/回流/reflow）： 当渲染书中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就是回流。
		每个页面都需要一次回流，就是页面第一次渲染的时候
	重排一定会影响重绘，但是重绘不一定会影响重排

7. Сводка внешнего хранилища

7.1 Способ хранения и способ передачи

1. indexBD: это локальный репозиторий h5. Он хранит некоторые данные в браузере. Без сети браузер может читать данные отсюда и использовать их в автономном режиме. 5м
2.Cookie: подтвердите личность пользователя с помощью информации о записи браузера, максимум 4 КБ, что также ограничивает передаваемые данные, и это повлияет на производительность запроса.
3.Session: механизм, используемый сервером для записи состояния клиента (session_id существует в set_cookie, отправляется клиенту и сохраняется в виде файла cookie)
4. localStroage: локальное хранилище h5, данные постоянно хранятся на стороне обслуживания клиентов.

    1、cookie，sessionStorage，localStorage是存放在客户端，session对象数据是存放在服务器上
       实际上浏览器和服务器之间仅需传递session id即可，服务器根据session-id找到对应的用户session对象
        session存储数据更安全一些，一般存放用户信息，浏览器只适合存储一般的数据
    2、cookie数据始终在同源的http请求中携带，在浏览器和服务器来回传递，里面存放着session-id
       sessionStorage，localStorage仅在本地保存
    3、大小限制区别，cookie数据不超过4kb，localStorage在谷歌浏览中2.6MB
    4、数据有效期不同，cookie在设置的（服务器设置）有效期内有效，不管窗口和浏览器关闭
      sessionStorage仅在当前浏览器窗口关闭前有效，关闭即销毁（临时存储）
      localStorage始终有效

7.2 Разница между SessionStorage и localStorage:

1.sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在用一个会话的页面中才能被访问（也就是说在第一次通信过程中）
   并且在会话结束后数据也随之销毁，不是一个持久的本地存储，会话级别的储存
2.localStorage用于持久化的本地存储，除非主动删除数据，否则不会过期

7.3 Понимание токена, файла cookie и сеанса

1. Токен — это токен.Например, когда вы авторизуете (входите) в программу, это является основанием для суждения, авторизовали ли вы программное обеспечение (наилучшая аутентификация личности, хорошая безопасность и единственный способ проверить подлинность пользователя). личность).
2. Файл cookie записывается в текстовом файле на стороне клиента, который включает в себя регистрационную информацию и тому подобное, поэтому при следующем входе на веб-сайт он автоматически вызывает файл cookie для автоматического входа на сервер имен пользователей. чтобы сгенерировать, отправить его в браузер и сохранить в браузере, следующий запрос снова отправляется на сервер (сохраняет информацию для входа)
3. Сессия — это тип решения, используемого для сохранения состояния между клиентом и сервером.Сессия уничтожается (представляет собой сессию между сервером и клиентом).Идентификатор сессии сохраняется в файле cookie, и запрос будет отправлять этот идентификатор. . Сеанс создается из-за объекта запроса.

7.3 Аутентификация на основе токенов: (самый простой токен: уникальный идентификатор пользователя uid + отметка времени текущего события + подпись подписи)

  1、用户通过用户名和密码发送请求
  2、服务器端验证
  3、服务器端返回一个带签名的token，给客户端
  4、客户端储存token，并且每次用于发送请求
  5、服务器验证token并且返回数据
  每一次请求都需要token
 cookie与session区别
  1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
  2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
  3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
  4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

7.4, разница между сеансом и токеном

1. Аутентификация сеанса хранит только простую информацию о пользователе в сеансе.Идентификатор сеанса непредсказуем, что является методом аутентификации. Существует только на стороне сервера и не может использоваться совместно с другими веб-сайтами и сторонними приложениями.
2. Токен — это токен oAuth, который обеспечивает аутентификацию и авторизацию. Аутентификация предназначена для пользователей, а авторизация — для приложения. Цель — разрешить приложению доступ к информации пользователя. Токены уникальны, и их нельзя передавать другим приложениям или другим пользователям. (применимо к приложению)
3. Состояние сеанса существует на стороне сервера, у клиента есть только идентификатор сеанса, а состояние токена хранится на стороне клиента.

7.5 Каковы недостатки файлов cookie? ? ? (Преимущество: сохранить данные клиента, разделить нагрузку на серверное хранилище)

  1、数量和长度的限制。每个特定的域名下最多生成20个cookie（chorme和safari没有限制）
  2、安全性问题。

5. Напишите это сзади

Из-за длины я подготовил текстовый документ с дополнительными основами интерфейса. В том числе Vue, React, node, структуры данных и т. д., которые здесь не упоминались. Укажите мой адрес документаЧиты по боевым искусствам на предварительном интервью, обучение всегда требует непрерывного накопления и обобщения. Цель написания этой статьи также очень ясна.Если резюме не очень хорошее, укажите это и прокомментируйте ниже, или если вы считаете, что хорошее знание не было обобщено, я надеюсь поделиться им, чтобы помочь всем и улучшить себя. .