Байт вопросы для интервью видел в интернете, пишу ответы своими силами

предисловие

Я проснулся сегодня утром, чтобы продолжить писатьDo Do Byte Серия вопросов для интервьюстатьи, получив навыки верстки (绯红主题真香), предыдущую статью стало невыносимо смотреть прямо, недаром объем чтения не высок.

В это время должны быть какие-то друзья, которые будут шептаться: вам не кажется, что ваш набор текста хорош, а объем чтения высок? И ваша типографика тоже не выглядит хорошо. Ха-ха, не торопитесь, Имин пока еще новичок, пока у него хороший менталитет, он не может читать слишком низко!

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

Нажмите здесь, чтобы просмотреть исходный текст

Как решить проблему 1px [как можно больше]

Причина появления 1px заключается в том, что 1px на карте дизайна относится к пикселям устройства, а не пикселям CSS. Концепция DPR, экрана сетчатки, была впервые предложена Apple, а формула расчета такова: DPR = пиксели CSS / пиксели устройства.

В случае iPhone 6, DPR = 750/375 = 2, в экране 2 в DPR, физический пиксель 1px 2px вылезет, чтобы отрендерить здесь несколько идей:

Мы можем использовать пиксели CSS размером 0,5 пикселя;
Изменить область просмотра
Псевдокласс +масштаб, сначала установите ширину псевдокласса 200%, а затем преобразуйте: масштабY(0,5)

Самое действенное, что как бы дизайнер нас не призывал, мы его просто не меняем! Ха-ха, шучу, раньше я мало знал об этой проблеме. Если Йимин столкнется с такой ситуацией на работе, Йимин будет больше общаться с дизайнером. Если общение не удастся, его можно будет только изменить, плача~

(Дизайнер: Вы это видели? Пока вы заставляете его меняться, он будет меняться, как Имин, так что все кончено!)

Разница между Less и CSS. Вы поняли функцию Less?

less — это препроцессор css, который позволяет нам писать простой в сопровождении код css, но Yiming использует его только для объявления глобальных переменных на работе, вот ссылка на официальный сайт: http://lesscss.cn/functions

Каков общий процесс ввода URL-адреса в браузере?

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

Когда мы нажимаем клавиатуру в адресной строке браузера, браузер запускает алгоритм фильтрации панели закладок и истории в соответствии с введенными нами буквами и отображает URL-адрес, который мы можем посетить.
Когда мы выберем URL-адрес и нажмем Enter, браузер начнет строить строку запроса, а затем проверит, является ли доменное имя законным, Если оно является законным, эта задача будет передана потоку сетевых запросов.
После того, как строка запроса будет построена, она проверит, действителен ли сильный кеш (этот шаг не будет отправлять сетевой запрос). Если он недействителен, он начнет вызывать протокол DNS для разрешения доменного имени. Если URL-адрес был к которому вы обращались ранее, браузер разрешит DNS. Последний IP-адрес сохраняется, и следующее посещение будет выполнено напрямую (может быть сохранено около 50–200 мс), если нет, вам нужно обратиться к сетевому оператору или DNS-серверу, чтобы найти Это
После того, как DNS разрешит IP-адрес, он создаст HTTP-запрос и запустит трехстороннее рукопожатие TCP для установления стабильного соединения: клиент отправляет SYN (код последовательности синхронизации) на сервер, и сервер возвращает новый SYN + ACK (в ответном сообщении, сгенерированном после вычисления первого SYN), клиент отвечает ACK после его получения, и устанавливается трехстороннее рукопожатие. Почему три раза? Два мало, четыре много
После установления трехстороннего рукопожатия протокол TCP будет разрезать и кодировать HTTP-сообщение в пакеты данных для удобства передачи, а затем передавать его на сетевой уровень.
После того, как сетевой уровень получает эти пакеты данных, он использует IP-адрес, взаимодействует с протоколом ARP, чтобы узнать MAC-адрес, и начинает передавать данные. После того, как сервер получает данные, он восстанавливает сегментированные пакеты в протоколе транспортного уровня TCP до полных, в это время он обычно проверяет, есть ли разрешение, установлен ли кеш и не истек ли срок его действия. Если кеш согласования установлен, будет возвращен код состояния 304, чтобы уведомить браузер о необходимости использования кеша согласования (здесь также могут быть упомянуты поля кеша согласования), в противном случае будет запущен ответ. После завершения ответа сервер определит, является ли поле Connection активным (значение по умолчанию в HTTP 1.1), в противном случае оно будет отключено.
Следующим шагом является то, что браузер начинает синтаксический анализ запрошенного файла, сначала вызывая поток графического интерфейса для параллельного анализа файлов HTML и CSS, используя алгоритмы токенизации и построения дерева для файла HTML и создавая дерево DOM в соответствии с в файле Файлы форматируются и нормализуются для создания дерева CSSOM, которое, наконец, объединяется в составное дерево. Обратите внимание, что синтаксический анализ файлов HTML и CSS не влияет друг на друга, но повлияет на скорость окончательной генерации дерева синтеза, поэтому не помещайте @import в файл CSS, он всегда загружает соответствующие ресурсы после файла CSS. проанализировано
Кроме того, поток графического интерфейса пользователя и поток JS являются взаимоисключающими.При анализе тега скрипта в файле HTML поток графического интерфейса будет приостановлен, тем самым блокируя рендеринг, поэтому не пишите асинхронность в теге скрипта, это всегда загружается асинхронно, а затем сразу же выполняется, но можно написать и отложить После получения дерева композиции, чтобы повысить эффективность рендеринга, поскольку сложные слои всегда рисуются только с помощью графического процессора (с ускорением графического процессора) и не будут влиять на другие слои, поэтому начните создавать дерево слоев. Обычный документооборот можно рассматривать как сложный слой. Кроме того, такие элементы, как absolute, transform, opacity и canvas, могут образовывать сложные слои. Поэтому лучше всего размещать анимацию на таких элементах, как absolute, и использовать transform вместо left /верх.
Браузер генерирует инструкцию по рисованию этих слоев, а затем передает ее в пул синтеза для рисования, генерирует плитки и растровые изображения и, наконец, отображает текущую страницу.

Этот ответ может быть более подробным, брат Мэн, вы можете спуститься и добавить его самостоятельно!

Опишите процесс рендеринга страницы браузера

см. предыдущий вопрос

Что вызывает белый экран браузера

Здесь я отвечу с двух сторон:

Например, на сетевом этапе IP-адрес, соответствующий DNS, не кэшируется при первом посещении, на веб-сайте установлена переадресация 301 и т. д.
этап рендеринга. Мы знаем, что браузер будет анализировать файлы в соответствующих DOM и CSSOM после их получения.Есть два аспекта: первый аспект, потому что поток рендеринга GUI браузера и поток JS являются взаимоисключающими, поэтому, когда встречается тег скрипта, Файл JS будет разобран первым, что заблокирует рендеринг, поэтому обратите внимание на позицию записи; во-вторых, если в файле CSS есть @import, он будет загружен после того, как будет разобран CSS, что также вызовет блокировка.

Можно продолжать и продолжать~

Разница между файлами cookie для хранения в браузере, localStorage и sessionStorage

Cookie

Поскольку HTTP является протоколом прикладного уровня без сохранения состояния, сервер не может запомнить операцию пользователя-клиента, а файл cookie в основном используется для записи идентификационной информации пользователя, его размер составляет всего 4 КБ, независимо от того, должен ли сервер использовать его или нет. , он всегда передается туда и обратно (но не поддерживает междоменный), он такой же, как кеш HTTP, и он также может определять время истечения срока действия, устанавливая поля max-age и expires.

С точки зрения безопасности, поскольку сценарии JS могут читать файлы cookie, мы должны отключить чтение JS, установив httpOnly в Set-Cookie, чтобы предотвратить атаки XSS. Кроме того, файлы cookie не должны использоваться для передачи конфиденциальной информации.

所以可以看出Cookie主要是用来维持状态，而不是做本地存储的

localStorage

Недавно предложенная технология веб-хранилища в H5 имеет размер 5 МБ, что намного больше, чем размер файла cookie. Поскольку он сохраняется на стороне браузера, мы можем вызвать его напрямую через API:

Сохранить: localStorage.setItem("ключ","значение")
Возьмите: localStorage.getItem("ключ")

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

sessionStorage

Как и localStorage, это не только технология веб-хранилища, предложенная H5, но и использование и размер пространства очень похожи.Есть два основных отличия:

Жизненный цикл sessionStorage заключается в том, что текущая вкладка закрыта
Не удается получить доступ к вкладкам, то есть Tab

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

Если вам интересно, вы можете увидеть этого большого парня: https://juejin.cn/post/6844903812092674061

Как устанавливается cookie и какие значения может изменить JS?

Чтобы понять это, мы должны сначала посмотреть, какие значения хранит cookie?

name

Это имя файла cookie, поэтому файлы cookie с тем же доменным именем будут перезаписаны тем же значением имени.

value

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

domain

Это относится к имени домена. Вот небольшая точка знаний. Только имя домена может совместно использовать файл cookie. Например, www.manice.com и play.mdnice.com не могут совместно использовать файл cookie, но вы можете установить домен как доменное имя верхнего уровня может быть обнародовано, и каждый может искать подробности в Baidu.

HttpOnly

Это должно быть знакомо всем.Чтобы предотвратить XSS-атаки, после установки значения true JS-скрипт не может прочитать значение в файле cookie.

Есть еще такие как path, secure и т.д. Я не буду повторять их по порядку, так JS-скрипт может прочитать куки, так что его можно изменить

Описать кеширование браузера

Об этом разделе можно много говорить:

Сильный кеш

Нет необходимости отправлять HTTP-запрос, строится только строка запроса, которая делится на два типа по HTTP-протоколу:

Истекает в HTTP 1.0, время истечения, потенциальная проблема заключается в том, что время сервера и время клиента несовместимы.

Для Cache-Control в HTTP 1.1 вы можете установить max-age, чтобы установить время действия кеша. Если период времени превышен, вам необходимо повторно инициировать запрос. Cache-Control имеет много атрибутов:

max-age: максимальное время действия ресурса
no-cache: без кеша, но по факту каждый раз при запросе статического ресурса на сервер будет отправляться просроченный запрос аутентификации, который нужно согласовывать с ETag или last-modified
no-store: всегда обращаться к серверу для запроса последних ресурсов с наивысшим приоритетом.
private/public: при запросе ресурсов он может проходить через некоторые промежуточные прокси-серверы CND и Nginx.Если установлен private и по истечении max-age, даже если промежуточный сервер подскажет, что можно использовать ресурсы локального кэша, он все равно будет отправляется на исходный сервер.запрос, а публичный наоборот

Согласовать кеш

Тег необходимо добавить в заголовок запроса, и сервер определяет, использовать ли кеш в соответствии с тегом, поэтому он называется согласованным кешем. Тег делится на два типа: Last-Modified и ETag.

Last-Modified

Последнее изменение. После завершения первого запроса заголовок ответа, возвращаемый сервером браузеру, будет содержать Last-Modified, а браузер будет содержать If-Modified-Since в следующем запросе, указывая время последней модификации ресурса сервера, и, наконец, выполнить соответствующую операцию. В противном случае он вернет 304, но это может быть только в секундах, поэтому он недостаточно точен (можно не заботиться о разнице в этих секундах).

ETag

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

Сравните два:

ETag имеет более высокий приоритет, чем Last-Modified, потому что он может точно определить, нужно ли его обновлять. Хотя и не так производительно, как Last-Modified

расположение кеша

Расположение надежного кэша и кэша согласования в порядке приоритета:

Service Worker

Используя Web Worker, пусть JS работает вне основного потока, вне окна браузера, чтобы он не мог получить доступ к DOM, но это может помочь нам реализовать автономное кэширование, сетевой прокси и другие функции.

Memory Cache

кеш памяти. Самый быстрый доступ, но короткий срок службы

Disk Cache

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

Push Cache

Нажмите кэш. Содержимое HTTP 2.0 сохраняется только в сеансе, оно будет выпущено, когда сеанс завершится, и будет сохранено только в течение 5 минут в браузере Chrome.

Механизм политики cookie

Это аутентификация между сервером и клиентом.Когда сервер возвращает этот файл cookie, то каждый раз, когда запрашивается ресурс (даже вторичное доменное имя также будет приносить), он будет приносить этот файл cookie, И если вы не установите время истечения срока действия файлов cookie, пока вы закроете браузер, файлы cookie не будут работать, поэтому вы можете установить max-agnge.

Кроме того, из соображений безопасности нам необходимо установить httpOnly для файла cookie и установить безопасный файл cookie.Файл cookie будет записан только в приложении / файле cookie в рамках службы https.

побочный эффект

Иногда кеш мешает, потому что браузер автоматически кеширует html-файл, поэтому лучше установить его при совместной отладке:

<meta http-equiv='Cache-Control' content='no-cache' />

Суммировать

Во-первых, Cache-Control решит, что можно использовать сильное кэширование.

Если нет, используйте согласованный кеш.Сервер оценивает, обновлен ли ресурс, оценивая If-Modified-Since и If-None-Match в заголовке запроса?

Обновление: вернуться к 200 и последним
Нет обновления: вернуть 304 и использовать кешированный ресурс

Более безопасная практика

Давайте сначала поговорим о проблеме сильного кеша и кеша согласования:

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

Тогда лучшее решение — сотрудничать с Webpack:

Файлы HTML: используйте согласованное кэширование
CSS, JS и изображения: используйте сильное кеширование и прикрепляйте хеш-значения к именам файлов

Суть contentHash

При изменении хэша файла css изменится и хеш файла js, поэтому мы можем использовать contentHash при упаковке через webpack.

Вы также можете перейти на Nuggets, чтобы увидеть более подробное решение.

Что такое коды состояния HTTP

Давайте поговорим о более часто используемом Yiming.

1XX

100: Ожидание последующей обработки, например, когда запрос POST отправляет данные большого объекта.

2XX

200: Запрос успешно обработан и запрошенные данные возвращены.
204: Запрос успешно обработан, но часть объекта не возвращена.

3XX

301: Постоянный переход по редиректу (переадресация может замедлить скорость открытия страницы)
302: Временный переход с перенаправлением (поскольку это временный переход, он не будет кэшироваться)
304: Нет обновления ресурса, друзья, знакомые с кэшированием, должны знать этот код состояния

4XX

401: требуется аутентификация, этот код состояния будет использоваться во внешней аутентификации.
403: Нет прав доступа к текущему ресурсу
404: Ресурс не запрошен.

5XX

502: Сервер в порядке, но произошла неизвестная ошибка. Этот код состояния появится, если учетная запись пользователя или пароль введены неправильно.
503: Сервер отключен на техническое обслуживание, то есть не включен.

Для получения дополнительных кодов состояния см.:

https://juejin.cn/post/6844903519447678990

Что содержит заголовок HTTP-запроса?

Ха~ Еще один очень длинный ответ, вот некоторые часто используемые Yiming:

Соединение: указывает, требуется ли постоянное соединение. По умолчанию в HTTP/1.1 установлено значение keep-alive, а поле закрытия можно настроить на закрытие.
Cache-Control: указывает механизм кэширования, который имеет несколько полей, таких как no-cache, no-store и т. д.
Файл cookie: используется для хранения состояния, чтобы устранить недостаток, заключающийся в том, что состояние пользователя не может быть сохранено в протоколе HTTP.Независимо от того, требуется ли это в запросе или нет, все файлы cookie, сохраненные в текущем домене, будут переданы на сервер
Есть также кэш согласования, связанный с If-None-Match, If-Match, If-Modified-Since, If-Unmodified-Since.
Referer: источник запроса, который можно использовать для предотвращения атак CSRF.
Обновление: укажите определенный протокол, такой как указание использования связи WebSocket Protocol

Подробнее: https://segmentfault.com/a/1190000006689767

Какие есть способы решения междоменных

Ответов тоже много.Я использовал в своей работе только CORS и обратный прокси Nginx, поэтому не буду здесь вдаваться в подробности.Если вам это не не нравится, вы также можете прочитать мою статью:

https://juejin.cn/post/6844904148022870023

Описать принцип JSONP

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

// 接收三个参数，要发起请求的URL、请求的参数、回调函数
function jsonp({ url, params, cb }) {
    // 这里是拼接参数的方法
    let createUrl = () => {
        // 申明一个字符串
        let dataStr = ''
        // for...in循环遍历参数
        for (let k in params) {
            // 进行拼接
            dataStr += `${k}=${params[k]}&`
        }
        // 最后将回调函数也加上去
        dataStr += `callback=${cb}`
        // 返回最终的结果
        return `${url}?${dataStr}`
    }
    // 返回一个Promise对象
    return new Promise((resolve, reject) => {
        // 在页面上创建script标签
        let script = document.createElement('script')
        // 将script标签中的src属性设置为上面函数返回的参数
        script.src = createUrl()
        // 将script标签插入到body中
        document.body.appendChild(script)
        // 添加回调
        window[cb] = data => {
            // 成功的回调，会将我们要请求的参数作为参数传入
            resolve(data)
            // 执行完毕后移除script标签
            document.body.removeChild(script)
        }
    })
}

Описать процесс CORS

CORS обрабатывается серверной частью, но клиентская часть также должна понимать. КОРС переводится какCross-Origin-Resource-Shared, то есть междоменное совместное использование ресурсов, оно делится на простые запросы и сложные запросы, а сложные запросы отправят еще один предварительный запрос, но предварительные запросы не обязательно безопасны, все же обратите вниманиеCSRF攻击

Сервер установленAccess-Control-Allow-Origin, то есть,资源控制允许源(Как-то странно это переводить), CORS будет включен, и каждый раз, когда браузер отправляет запрос, он будет приносить его с собой.Origin字段, который состоит из协议、域名和端口号состав, например:

Origin: https://127.0.0.0:8080

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

https://juejin.cn/post/6844904094973296654

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

Это заканчивается здесь,Спасибо за просмотр. Хотя есть еще много тем, которые не были написаны, учитывая, что эти темы имеют относительно большое золотое содержание, я хотел бы начать с源码的角度Перейти к ответу (естественно длина будет не такой большой~)

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

В этой статье используетсяmdniceнабор текста