1. Алгоритм вопроса: Реализуя ссылку, вы можете добавлять узлы и удалять узлы
function insert(head, n ,val) {
var node = {
val: val,
next: null
}
if (head == null) {
return node
}
if (n === 0) {
node.next = head;
return node;
}
var p = head;
for(var i=0; i<n-1; i++){
p = p.next;
}
node.next = p.next;
p.next = node;
return head;
}
function remove(head, n) {
if (!head) {
return null;
}
if (head === 0) {
return head.next;
}
var p = head;
for(var i=0; i<n-1; i++) {
p = head.next;
}
p.next = p.next.next;
return head;
}
2. Реализуйте метод instanceof
function myInstanceOf(left, right) {
if (typeof left !== 'object' || left == null) {
return false;
}
let pro = Object.getPrototypeOf(left);
while(true) {
if (pro === null) {
return false;
}
if (pro === right.prototype) {
return true;
}
pro = Object.getPrototypeOf(pro);
}
}
3. Как реализовать адаптивный макет rem layout flex layout
rem
(function(doc, win) {
var docE1 = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docE1.clientWidth;
if (!clientWidth) return;
docE1.style.fontSize = clientWidth / 7.5 + 'px';
}
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
4. Механизм цикла событий
- 1. В начале весь скрипт выполняется как первая задача макроса
- 2. В процессе выполнения синхронный код выполняется напрямую, макрозадача входит в очередь макрозадач, а микрозадача входит в очередь микрозадач.
- 3. Текущая задача макроса выполняется и удаляется из очереди, проверьте очередь микрозадач и, если она есть, выполняйте ее последовательно, пока очередь микрозадач не опустеет.
- 4. Выполнение работы по рендерингу в потоке пользовательского интерфейса браузера.
- 5. Проверьте, есть ли рабочая веб-задача, и выполните ее, если она есть.
- 6. Выполните новую макрозадачу во главе группы, вернитесь к шагу 2 и циклически выполняйте ее до тех пор, пока очереди макрозадач и микрозадач не опустеют.
5. Шаблоны проектирования: разница между шаблоном наблюдатель-подписчик и шаблоном наблюдателя
6. https-процесс
Протокол HTTPS = протокол HTTP + протокол SSL/TLS.В процессе передачи данных необходимо использовать протокол SSL/TLS для шифрования и расшифровки данных, а для передачи зашифрованных данных необходимо использовать HTTP.Сделано совместно с SSL/TLS.
- Чтобы сбалансировать безопасность и эффективность, HTTPS использует как симметричное, так и асимметричное шифрование.
- Данные передаются с симметричным шифрованием, процесс симметричного шифрования требует от клиента ключа. Чтобы гарантировать безопасную передачу ключа на сервер, для шифрования передачи ключа используется асимметричное шифрование.
- Как правило, данные шифруются симметрично, а ключи, используемые при симметричном шифровании, передаются посредством асимметричного шифрования.
Зачем использовать симметричное шифрование?
Причина: асимметричное шифрование основано на операциях с большими числами, такими как большие простые числа или эллиптические кривые. Помимо того, что он медленный, недостатком может быть потребность в большем количестве битов, а симметричный ключ той же силы короче, чем асимметричный ключ. Симметричные ключи обычно бывают 128-битными и 256-битными, а RSA обычно 2048-битными, но эллиптическая кривая будет короче.
7. Точки оптимизации http2
-
Сжатие заголовка: Используя алгоритм HPACK, на обоих концах клиента и сервера создается «словарь», а повторяющиеся строки представляются порядковыми номерами. Кодирование Хаффмана также используется для сжатия целых чисел и строк, что позволяет достичь высокой степени сжатия 50%-90%.
-
Мультиплексирование: При передаче бинарных кадров нет отношения приоритета, поэтому не будет ожидания в очереди и не будет HTTP. проблема блокировки головы к голове. Обе стороны связи могут отправлять бинарные кадры пополам, и эта последовательность двунаправленной передачи двоичных кадров также называется потоком. HTTP/2 использует потоки для передачи кадров данных по TCP-соединению, что является концепцией мультиплексирования.
-
Установить приоритет запроса: В бинарном фрейме есть и другие поля, реализующие такие функции, как приоритет и управление потоком.
-
Пуш сервера 服务器不再是完全被动地响应请求，也可以新建“流”主动向客户端发送消息。
8. Представьте csrf и меры противодействия
CSRF-атаки — это хакеры, которые используют статус входа пользователя в систему и совершают плохие действия через сторонние сайты.
Контрмеры:
-
1. В полной мере используйте атрибут SameSite файлов cookie. Мы можем установить для некоторых ключевых файлов cookie строгий или нестрогий режим в зависимости от реальной ситуации. Таким образом, эти критически важные файлы cookie не будут отправляться на сервер во время межсайтовых запросов, что делает CSRF-атаку хакера неэффективной.
-
- Проверьте исходный сайт запроса.
Атрибуты Referer и Origin в заголовках HTTP-запросов Политика сервера заключается в том, чтобы отдавать приоритет оценке Origin. Если заголовок запроса не содержит атрибут Origin, Затем решите, следует ли использовать значение Referer в соответствии с реальной ситуацией.
-
- CSRF Token
На первом этапе, когда браузер инициирует запрос к серверу, сервер генерирует токен CSRF. Токен CSRF на самом деле представляет собой строку, сгенерированную сервером, а затем имплантированную в возвращаемую страницу. На втором этапе, если вы хотите инициировать запрос на передачу на стороне браузера, вам необходимо внести токен CSRF на страницу. Затем сервер проверяет, что токен действителен. Если запрос сделан со стороннего сайта, Тогда значение токена CSRF не будет получено, поэтому, даже если будет сделан запрос, Сервер также отклонит запрос, поскольку токен CSRF неверен.
9. Оптимизируйте способ белого экрана
- Извлеките сторонние библиотеки, сторонние файлы зависимостей и файлы пакетов на сервер CDN.
- Ленивая загрузка маршрутов
- Добавьте скелетный экран или загрузите белый экран домашней страницы (просто для оптимизации работы)
- Оптимизируйте веб-пакет, чтобы уменьшить размер пакета модуля, разделите загрузку кода по требованию.
- Рендеринг на стороне сервера, предварительная сборка html, необходимого для домашней страницы, на стороне сервера.
- Включить сжатие gzip на сервере
- Фреймворки пользовательского интерфейса, такие как element-ui, вводятся по запросу.
- Подпакет файла пакета, извлечь пакет общедоступного файла
- Используйте имя файла, чтобы увеличить имя хеша, чтобы решить проблему, которая нужна новой версии для очистки зависимостей.
- сжатие кода
- Сжимайте файлы изображений, чтобы уменьшить размер файла
- Ресурсы изображения помещаются на сервер CDN.
- Использование спрайтов CSS
10. Преимущества и недостатки наследования и композиции
11. HTTP-кеш
1. Сначала определите, действует ли сильный кэш: Поля, управляющие сильным кешем, это Expires и Cache-Control (более высокий приоритет),
Expires：是HTTP/1.0控制网页缓存的字段， 值为服务器返回该请求结果缓存的到期时间
即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
到了HTTP/1.1，Expire已经被Cache-Control替代
Cache-Control：主要取值
。 public:所有内容都将被缓存（客户端和代理服务器都可缓存）
。 private: 所有内容只有客户端可以缓存，Cache-Control的默认取值
。 no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
。 no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
。 max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
内存缓存(from memory cache)和硬盘缓存(from disk cache)
。内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性：
。快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，
占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
。时效性：一旦该进程关闭，则该进程的内存则会清空。
。硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，
读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。
在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，
那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；
而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
2. Согласовать кеш
Согласованное кэширование означает, что после принудительного отказа кеша браузер инициирует запрос к серверу с идентификатором кеша.
Процесс, с помощью которого сервер решает, использовать ли кеш на основе идентификатора кеша.
控制协商缓存的字段分别有：Last-Modified/If-Modified-Since 和 Etag/If-None-Match(优先级高)
Last-Modified / If-Modified-Since：
Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间。
If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，
通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。
服务器收到该请求，发现请求头含有If-Modified-Since字段，
则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，
若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；
否则则返回304，代表资源无更新，可继续使用缓存文件
Etag / If-None-Match ：
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)。
If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，
通过此字段值告诉服务器该资源上次请求返回的唯一标识值。
服务器收到该请求后，发现该请求头中含有If-None-Match，
则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，
继续使用缓存文件；不一致则重新返回资源文件，状态码为200，
总结：
强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，
若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，
协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，
重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存
12. Разница между require и import
- 1. Собственные браузеры не поддерживают требование/экспорт. Вы можете использовать инструменты упаковки, такие как Browsersify и webpack, которые поддерживают спецификацию модуля CommonJS. Они преобразуют требование/экспорт в код, который можно использовать в браузере.
- 2. ИМПОРТ/ЭКСПОРТ нельзя использовать прямо в вашем браузере, нам нужно ввести модули
- 3. Даже если Node.js 13.2+ уже поддерживает импорт/экспорт, Node.js официально не рекомендует использовать его в формальной среде.В настоящее время вы можете использовать babel для компиляции системы модулей ES6 в спецификацию CommonJS (примечание: синтаксис то же самое, но конкретная реализация по-прежнему требует/экспортирует)
-
- require/exports динамически загружаются во время выполнения, а import/export компилируются статически.
-
- require/export выводит копию значения, а модуль импорта/экспорта выводит ссылку на значение
-
- Модули ES6 могут использовать модули перед операторами импорта ссылок, в то время как на CommonJS необходимо ссылаться перед использованием.
-
- импорт/экспорт можно использовать только на верхнем уровне модуля, и на него нельзя ссылаться в блоках кода, таких как функции и операторы суждений;
-
- Использовать ли строгий режим
- Модули, экспортированные с помощью импорта/экспорта, по умолчанию вызывают строгий режим.
- require/exports не использует строгий режим по умолчанию, вы можете настроить, использовать ли строгий режим
13. Реализация стрелочных функций
14. Двусторонняя привязка vue
-
- Данные преобразуются в форму геттера/установщика наблюдателем для отслеживания изменений.
-
- Когда внешний мир считывает данные через Watcher, геттер срабатывает, чтобы добавить Watch в зависимость.
-
- Когда данные изменяются, сеттер будет запущен для отправки уведомления зависимостям (например, Watcher) в Dep.
-
- После того, как Наблюдатель получит уведомление, он отправит уведомление во внешний мир.После того, как уведомление об изменении будет отправлено во внешний мир, может быть запущено обновление представления.
две стороны
1. Причина ухода
2. Использование ТС
3. Режим наблюдателя
4. Одноэлементный шаблон
5. Сортировка слиянием
function mergeSort(arr) {
const len = arr.length;
if (len <= 1 ) {
return arr;
}
let mid = Math.floor(len / 2);
let leftArr = mergeSort(arr.slice(0,mid));
let rightArr = mergeSort(arr.slice(mid, len));
arr = mergeArr(leftArr, rightArr);
return arr;
}
function mergeArr(arr1, arr2){
let i = 0;
let j = 0;
let len1 = arr1.length;
let len2 = arr2.length;
let res = [];
while(i<len1 && j<len2) {
if (arr1[i] < arr2[j]) {
res.push(arr1[i])
i++;
} else {
res.push(arr2[j])
j++;
}
}
if (i<len1) {
return res.concat(arr1.slice(i));
} else {
return res.concat(arr2.slice(j));
}
}
6. Быстрая сортировка
function quickSort(arr, left=0; right=arr.length - 1) {
if (arr.lenth > 1) {
const lineIndex = partition(arr,left, right);
if (left < lineIndex -1) {
quickSort(arr,left,lineIndex -1);
}
if (right > lineIndex) {
quickSort(arr,lineIndex,right);
}
}
return arr;
}
function partition(arr, left, right) {
let i = left;
let j = right;
let pivotValue = arr[Math.floor(left + (right-left)/2)];
if (i<=j) {
while(arr[i] < pivotValue) {
i++
}
while(arr[j] > pivotValue) {
j++
}
if (i<=j) {
swap(arr,i,j);
i++;
j--;
}
}
return i;
}
function swap(arr,i,j){
[arr[i],arr[j]] = [arr[j],arr[i]];
}
7. Использование этого
- 1. Используйте это в обычных функциях, это представляет окно глобального объекта.
- 2. Как вызов метода объекта this относится к объекту, который его вызывает.
- 3. Вызывается как конструктор, в это время this относится к новому объекту.
- 4.вызов вызова, функция метода вызова заключается в изменении вызывающего объекта функции, первым параметром этого метода является объект, который вызывает функцию после изменения, это относится к первому параметру, если параметр не передан , значение по умолчанию относится к окну глобального объекта.
8. понимание HTTP3
Используя протокол QUIC: HTTP/3 выбрал способ компрометации — протокол UDP, Основанный на UDP, он реализует такие функции, как несколько потоков данных и надежность передачи, аналогичные TCP, Мы называем этот набор функций протоколом QUIC.
Протокол QUIC в HTTP/3 сочетает в себе следующие функции:
- 1. Реализовать функции управления потоком и надежностью передачи, аналогичные TCP
- 2. Встроенная функция шифрования TLS
-
- Реализует функцию мультиплексирования в HTTP/2.
9.Оптимизация http2
(см. выше)
10. Сетевые атаки и защита 1. Каковы основные проблемы 2. На какие символы Xss в основном ориентируется для конвертации
1.Хсс: Атака XSS — это хакер, внедряющий вредоносные скрипты на страницу, а затем загружающий некоторые важные данные страницы на вредоносный сервер. Три распространенных режима атаки: 1. Хранимая XSS-атака 2. Отражающая XSS-атака 3. XSS-атака на основе DOM
Существует три основных стратегии профилактики: Во-первых, фильтровать или перекодировать входящий контент через сервер. Во-вторых, в полной мере использовать CSP, Третий — использовать HttpOnly для защиты важной информации о файлах cookie.
2. Csrf (см. выше)