Я слышал, что собеседование год назад было лучшим временем для прохождения собеседования.Пользуясь тем, что в эти несколько дней у меня достаточно времени дома, я встретился с несколькими крупными фабриками, и, наконец, некоторые из них получили предложения. Итоговая тема выглядит следующим образом
01 Как добиться горизонтального и вертикального центрирования элемента
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:01 Как добиться горизонтального и вертикального центрирования элемента
Чтобы предоставить менее упомянутый метод, используйтеgrid, он создает двухмерный макет, но когда есть только один дочерний элемент, одномерный макет такой же, как и двумерный макет. комбинироватьjustify-content/justify-itemsа такжеalign-content/align-itemsЕсть четыре варианта
Эффект можно увидетьcodepen
.container {
display: grid;
justify-content: center;
align-content: center;
}
.container {
display: grid;
justify-content: center;
align-items: center;
}
.container {
display: grid;
justify-items: center;
align-content: center;
}
.container {
display: grid;
justify-items: center;
align-items: center;
}
02 Как внедрить фиксированный css 300px слева и адаптивный макет справа
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:02 Как внедрить фиксированный css 300px слева и адаптивный макет справа
использоватьflexмакет, слева300px,Верноflex-grow: 1.pugкод иcssПример кода выглядит следующим образом
.container
.left
.main
.container {
display: flex;
}
.left {
flex-basis: 300px;
}
.main {
flex-grow: 1;
}
Это кажется относительно полным, но на самом деле есть один недостаток:Что делать, если область .main слишком велика, чтобы сжать область .left, так же нужно добавить запрет на выдавливание
.left {
flex-basis: 300px;
flex-shrink: 0;
}
Суммировать
использоватьflexСделайте следующий макет
.container
.left
.main
.container {
display: flex;
}
.left {
flex-basis: 300px;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}
03 В чем разница между кодами статуса http 502 и 504
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:03 В чем разница между кодами статуса http 502 и 504
Эти два ненормальных кода состояния относятся к шлюзу Gateway.Во-первых, разъясняются две концепции
- Прокси (шлюз), уровень обратного прокси или уровень шлюза. Nginx обычно используется для этой роли в корпоративных приложениях.
- Приложение (вышестоящий сервер), служба прикладного уровня, как восходящая служба прокси-уровня. Серверные приложения, написанные в компании на разных языках, таких как Go/Java/Python/PHP/Node и т. д.
На данный момент разница между 502 и 504 очевидна.
-
502 Bad Gateway.一般表现为你自己写的应用层服务(Java/Go/PHP)挂了，网关层无法接收到响应 -
504 Gateway Timeout. Как правило, время ожидания службы прикладного уровня (восходящего потока) истекает. Например, операция поиска в базе данных занимает десять минут, что превышает время ожидания, настроенное Nginx.
04 Как использовать хуки реагирования для реализации useFetch для запроса данных
Подробнее: Например, он разработан в виде `useFetch`, как должен быть разработан его API
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:04 Как использовать хуки реагирования для реализации useFetch для запроса данных
может относиться кHow to fetch data with React Hooks?
05 Как React использует компонент Render Prop для запроса данных
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:05 Как React использует компонент Render Prop для запроса данных
Ссылаться на:Woohoo. Робин попросил IE войти. /react-fetch…
06 Что такое виртуальный DOM и в чем преимущества его внедрения
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:06 Что такое виртуальный DOM и в чем преимущества его внедрения
Дальнейшее разделение данных и пользовательского интерфейса, что также больше способствует SSR.
07 На основе чего формируется Last-Modified статических файлов в сервисе http?
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:07 На основе чего формируется Last-Modified статических файлов в сервисе http?
файл обычно выбираетсяmtime, указывающее время модификации содержимого файла
nginxЭто также обрабатывается таким образом, см. исходный код:ngx_http_static_module.c
r->headers_out.status = NGX_HTTP_OK;
r->headers_out.content_length_n = of.size;
r->headers_out.last_modified_time = of.mtime;
О том, зачем использоватьmtimeвместоctime, вы можете обратиться к#116
08 Совместно ли используется информация о cookie-файлах localhost:3000 и localhost:5000
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:08 Совместно ли используется информация о cookie-файлах localhost:3000 и localhost:5000
общий
09 Что означает, если в заголовке ответа http используется тип содержимого application/octet-stream
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:09 Что означает, если в заголовке ответа http используется тип содержимого application/octet-stream
Представляет двоичный поток, обычно используемый для загрузки файлов.
10 В чем разница между Date и Last-Modified в заголовке HTTP-ответа и на что следует обратить внимание при развертывании веб-сайта
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:10 В чем разница между Date и Last-Modified в заголовке HTTP-ответа и на что следует обратить внимание при развертывании веб-сайта
-
Date: время генерации сообщения на исходном сервере, по которому можно проверить, как долго сообщение кэшировалось. -
Last-Modified: время последней модификации ресурса на исходном сервере.
LM-Factorсвязанные с ними.
Короче говоря, статический ресурс не установленCache-ControlОбязательное время кэширования устанавливается с помощью этих двух заголовков ответа:(Date - LastModified) * nИ не напрямую договаривайте кэш. При включении CDN производительность более очевидна, и интерфейс не обновляется после обновления развертывания кода.
11 Какая функция keep-alive в http 1.1
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:11 Какая функция keep-alive в http 1.1
существуетhttp 1.1, указанный в заголовке ответаkeep-aliveМожет отправлять несколько HTTP-запросов по одному TCP-соединению.
- Избегает накладных расходов на повторное открытие TCP-соединений
- Избегает накладных расходов на повторное установление SSL-соединения при обновлении.
- Предотвращено слишком большое количество подключений к серверу при слишком большом количестве запросов в секунду.
Используйте заголовки ответов на стороне сервераkeep-alive
Connection: Keep-Alive
Keep-Alive: timeout=5, max=1000
12 Если используется SSR, можно ли получить доступ к localStorage в created/componentWillMount
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:12 Если используется SSR, можно ли получить доступ к localStorage в created/componentWillMount
Нет, когда created/componentWillMount не смонтирован, код все еще выполняется на сервере, и в это время нет среды браузера, поэтому доступ к localStorage в это время сообщит об ошибке
13 Для чего нужен CSP?
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:13 Для чего нужен CSP?
CSP Разрешить загрузку только указанных скриптов и стилей,максимально предотвратитьXSSатака, является оптимальным решением для XSS. CSP устанавливается в соответствии с заголовками ответа http при загрузке страницы.Content Security PolicyКонтролируется на стороне сервера.
- Внешние скрипты можно ограничить, указав доменное имя:
Content-Security-Policy: script-src 'self',selfПредставляет только текущее доменное имя для загрузки - Если сайт должен загружать встроенный скрипт, вы можете предоставить
nonceЧтобы выполнить сценарий, злоумышленник не может внедрить сценарий для атаки.Content-Security-Policy: script-src 'nonce-xxxxxxxxxxxxxxxxxx'
пройти черезdevtools -> networkВидно, что конфигурация CSP github выглядит следующим образом:
Content-Security-Policy: default-src 'none';
base-uri 'self';
block-all-mixed-content;
connect-src 'self' uploads.github.com www.githubstatus.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com cdn.optimizely.com logx.optimizely.com/v1/events wss://alive.github.com;
font-src github.githubassets.com;
form-action 'self' github.com gist.github.com;
frame-ancestors 'none';
frame-src render.githubusercontent.com;
img-src 'self' data: github.githubassets.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com;
manifest-src 'self';
media-src 'none';
script-src github.githubassets.com;
style-src 'unsafe-inline' github.githubassets.com;
worker-src github.com/socket-worker.js gist.github.com/socket-worker.js
Ссылки по теме
- Руководство по началу работы с политикой безопасности контента - Ruan Yifeng
- Content Security Policy - w3
14 Кратко опишите специфику css
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:14 Кратко опишите специфику css
css specificityТо есть вес селектора в css, по очереди спускаются следующие три типа селекторов
-
idселектор, например#app -
class,attributeа такжеpseudo-classesселектор, например.header,[type="radio"]а также:hover -
typeСелекторы тегов и селекторы псевдоэлементов, такие какh1,pа также::before
где селектор подстановочных знаков*, комбинированный селектор+ ~ >, отрицая селектор псевдокласса:not()Не влияет на приоритет
Встроенные стили<div class="foo" style="color: red;"></div>а также!important(самый высокий) имеет больший вес
:notПриоритетное влияние - codepenКак можно заметить:notНе влияет на приоритет селектора
15 позиция: как работает липкость и где она работает
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:15 позиция: как работает липкость и где она работает
position: stickyможно понимать какrelativeа такжеfixedкомбинация
16 Когда будет отправлен запрос OPTIONS
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:16 Когда будет отправлен запрос OPTIONS
Отправлено, когда запрос является перекрестным происхождением и не простой запросOPTIONSпросить
Простой запрос выполняется, если выполняются следующие условия:
-
Method: Метод запросаGET,POSTа такжеHEAD -
Header: заголовок запросаContent-Type,Accept-Language,Content-LanguageЖдать -
Content-Type: тип запросаapplication/x-www-form-urlencoded,multipart/form-dataилиtext/plain
Пока в проекте распространеноContent-Type: application/jsonа такжеAuthorization: <token>для типичногоне простой запрос, который часто включается при отправке запросаOptions
Для получения более подробной информации см.CORS - MDN
17 Кратко опишите процесс рукопожатия TLS
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:17 Кратко опишите процесс рукопожатия TLS
Подробный процесс рукопожатия TLS можно посмотреть на следующем рисунке:
Приведенные выше фотографии взяты изhigh-performance-browser
отwiresharkЗахват пакета, вы также можете увидеть подробный процесс рукопожатия.Рекомендуется захватить пакет, чтобы укрепить ваше понимание.Ниже приведен захват пакетаhttps://q.shanyue.techпроцесс рукопожатия
пройти черезcurl -vvv --headДля просмотра информации о рукопожатии:
$ curl -vvv --head https://q.shanyue.tech
* Trying 111.6.180.235...
* TCP_NODELAY set
* Connected to q.shanyue.tech (111.6.180.235) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
* CAfile: /etc/ssl/cert.pem
CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* ALPN, server accepted to use h2
* Server certificate:
* subject: CN=q.shanyue.tech
* start date: Dec 2 00:00:00 2019 GMT
* expire date: Dec 1 12:00:00 2020 GMT
* subjectAltName: host "q.shanyue.tech" matched cert's "q.shanyue.tech"
* issuer: C=US; O=DigiCert Inc; OU=www.digicert.com; CN=Encryption Everywhere DV TLS CA - G1
* SSL certificate verify ok.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* Using Stream ID: 1 (easy handle 0x7f95ba80dc00)
Рукопожатие
В TLS 1.2 для процесса протокола рукопожатия требуется два RTT, процесс выглядит следующим образом.
- [OUT] Client Здравствуйте, клиент выбирает номер версии TLS, который он поддерживает,
cipher suites, случайное число, SessionId отправляется на сервер (есть возможность взять Session) - [IN] Сервер Здравствуйте, сервер выбирает версию TLS, поддерживаемую обеими сторонами,
cipher suite, случайное число, SeesionId клиенту - [IN] Сертификат, сервер отправляет сертификат клиенту для аутентификации и открытого ключа
- [IN] Server Key Exchange, сервер отправляет клиенту некоторые параметры алгоритма обмена ключами
- [IN] Server Finished
- [OUT] Обмен ключами клиента, клиент отправляет некоторые параметры алгоритма обмена ключами на сервер, вычисляет предварительный мастер-ключ и передает его серверу в виде случайного числа (это случайное число является безопасным). Обе стороны генерируют секретный ключ в симметричном шифровании на основе трех случайных чисел.
- [OUT] Измените спецификацию шифрования, сообщите другой стороне, что будущие сообщения будут зашифрованы с использованием протокола уровня записи TLS.
- [OUT] Готово, отправить первое зашифрованное сообщение и проверить целостность
- [IN] Изменить спецификацию шифра, чтобы сообщить, что будущие сообщения будут шифроваться с использованием протокола уровня записи TLS.
- [IN] Готово, отправить первое зашифрованное сообщение и проверить целостность
Ссылки по теме
18 Чем TLS1.3 отличается от TLS1.2
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:18 Чем TLS1.3 отличается от TLS1.2
Следующее взято изRFC 5246: TLS 1.2
Client Server
ClientHello -------->
ServerHello
Certificate*
ServerKeyExchange*
CertificateRequest*
<-------- ServerHelloDone
Certificate*
ClientKeyExchange
CertificateVerify*
[ChangeCipherSpec]
Finished -------->
[ChangeCipherSpec]
<-------- Finished
Application Data <-------> Application Data
Figure 1. Message flow for a full handshake
* Indicates optional or situation-dependent messages that are not
always sent.
Следующее взято изRFC 8446: TLS 1.3
Client Server
Key ^ ClientHello
Exch | + key_share*
| + signature_algorithms*
| + psk_key_exchange_modes*
v + pre_shared_key* -------->
ServerHello ^ Key
+ key_share* | Exch
+ pre_shared_key* v
{EncryptedExtensions} ^ Server
{CertificateRequest*} v Params
{Certificate*} ^
{CertificateVerify*} | Auth
{Finished} v
<-------- [Application Data*]
^ {Certificate*}
Auth | {CertificateVerify*}
v {Finished} -------->
[Application Data] <-------> [Application Data]
+ Indicates noteworthy extensions sent in the
previously noted message.
* Indicates optional or situation-dependent
messages/extensions that are not always sent.
{} Indicates messages protected using keys
derived from a [sender]_handshake_traffic_secret.
[] Indicates messages protected using keys
derived from [sender]_application_traffic_secret_N.
Figure 1: Message Flow for Full TLS Handshake
- Время рукопожатия было уменьшено с предыдущего 2RTT до 1RTT на
Pre shared-keyУменьшен один RTT, потребляемый отдельными ServerKeyExchange и ClientKeyExchange. - 0-RTT Resumption
19 Какие интерфейсные инструменты анализа производительности вы использовали?
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:19 Какие интерфейсные инструменты анализа производительности вы использовали?
Двумя наиболее распространенными и полезными инструментами повышения производительности являются:
-
lighthouse: может использоваться непосредственно в инструментах разработки Chrome для анализа целевых веб-сайтов в соответствии с личными устройствами и сетями и предоставления различных предложений. -
webpagetest: Распределенный инструмент анализа производительности, который может анализировать ваш веб-сайт на ресурсах серверов в нескольких регионах по всему миру и генерировать соответствующие отчеты.
20 Как найти наиболее часто используемые теги HTML на текущей странице
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:20 Как найти наиболее часто используемые теги HTML на текущей странице
Это вопрос интервью с интерфейсом и навыками программирования:
- Если у вас есть прочная передняя часть, вы поймете
document.querySelector(*)Возможность перечислить все теги на странице - Если у вас есть сильные навыки программирования, вы можете быстро добиться того же эффекта с помощью рекурсии.
Существует три API для отображения всех тегов на странице:
-
document.querySelector('*'), реализация стандартной спецификации -
$$('*'), реализация инструментов разработки -
document.all, нестандартная каноническая реализация
> document.querySelectorAll('*')
< NodeList(593) [html, head, meta, meta, meta, meta, meta, meta, meta, title, link#favicon, link, link#MainCss, link#mobile-style, link, link, link, script, script, script, script, script, script, script, link, script, link, link, script, input#_w_brink, body, a, div#home, div#header, div#blogTitle, a#lnkBlogLogo, img#blogLogo, h1, a#Header1_HeaderTitle.headermaintitle.HeaderMainTitle, h2, div#navigator, ul#navList, li, a#blog_nav_sitehome.menu, li, a#blog_nav_myhome.menu, li, a#blog_nav_newpost.menu, li, a#blog_nav_contact.menu, li, a#blog_nav_rss.menu, li, a#blog_nav_admin.menu, div.blogStats, span#stats_post_count, span#stats_article_count, span#stats-comment_count, div#main, div#mainContent, div.forFlow, div#post_detail, div#topics, div.post, h1.postTitle, a#cb_post_title_url.postTitle2.vertical-middle, span, div.clear, div.postBody, div#cnblogs_post_body.blogpost-body, p, p, strong, p, p, p, strong, div.cnblogs_code, pre, span, span, span, span, span, p, span, strong, pre, strong, span, strong, br, br, br, div.cnblogs_code, pre, span, span, p, p, …]
[0 … 99]
[100 … 199]
[200 … 299]
[300 … 399]
[400 … 499]
[500 … 592]
__proto__: NodeList
использоватьdocument.querySelectorAllРеализация выглядит следующим образом
const maxBy = (list, keyBy) => list.reduce((x, y) => keyBy(x) > keyBy(y) ? x : y)
function getFrequentTag () {
const tags = [...document.querySelectorAll('*')].map(x => x.tagName).reduce((o, tag) => {
o[tag] = o[tag] ? o[tag] + 1 : 1;
return o
}, {})
return maxBy(Object.entries(tags), tag => tag[1])
}
использоватьelement.childrenРекурсивная итерация выглядит следующим образом (конечный результат больше документа)
function getAllTags(el = document) {
const children = Array.from(el.children).reduce((x, y) => [...x, ...getAllTags(y)], [])
return children
}
// 或者通过 flatMap 实现
function getAllTags(el = document) {
const children = Array.prototype.flatMap.call(el.children, x => getAllTags(x))
return [el, ...children]
}
21 Как настроить балансирование нагрузки в nginx
существуетIssueилимой веб-сайтОбмены и обсуждения в Китае:21 Как настроить балансировку нагрузки в nginx
пройти черезproxy_passа такжеupstreamМожно добиться простейшей балансировки нагрузки. Следующая конфигурация направит трафик равномерно172.168.0.1,172.168.0.2а также172.168.0.3три сервера
http {
upstream backend {
server 172.168.0.1;
server 172.168.0.2;
server 172.168.0.3;
}
server {
listen 80;
location / {
proxy_pass http://backend;
}
}
}
Существует примерно четыре типа стратегий балансировки нагрузки:
- round_robin, опрос
- weighted_round_robin, круговой взвешенный алгоритм
- ip_hash
- least_conn
Round_Robin
опрос,nginxСтратегия балансировки нагрузки по умолчанию — циклический.Предполагая, что три узла сервера — это A, B и C, результат загрузки каждого трафика — ABCABC.
Weighted_Round_Robin
Взвешенный опрос, настройте вес в соответствии с весом ключевого слова, следующим образом, в среднем четыре запроса, будет восемь попаданий на A, одно попадание на B и одно попадание на C
upstream backend {
server 172.168.0.1 weight=8;
server 172.168.0.2 weight=1;
server 172.168.0.3 weight=1;
}
IP_hash
Хэшируйте каждый IP-адрес, а затем выберите соответствующий узел.Таким образом, каждый запрос трафика пользователя будет попадать на фиксированный сервер, что способствует кэшированию и тестированию AB.
upstream backend {
server 172.168.0.1;
server 172.168.0.2;
server 172.168.0.3;
ip_hash;
}
Least Connection
Выберите серверный узел с наименьшим количеством подключений для определения приоритета нагрузки.
upstream backend {
server 172.168.0.1;
server 172.168.0.2;
server 172.168.0.3;
least_conn;
}
В конце концов,Эти стратегии балансировки нагрузки имеют решающее значение для разработчиков приложений, в то время как базовые разработчики уделяют больше внимания тому, как реализовать эти стратегии., например, как реализованы эти четыре алгоритма загрузки? Пожалуйста, обратитесь к будущим статьям