[Еженедельно-2] Трехлетний интервьюер на крупной фабрике - предварительные вопросы интервью (сложные)

предисловие

Я проработал в Дачанге 6 лет и был фронтенд-интервьюером 3 года.Я собрал вопросы и ответы, часто задаваемые Дачангом, на моем Github. Я надеюсь, что это будет полезно для вас и поможет вам войти в свой идеальный бизнес.

Адрес проекта:GitHub.com/ Эрели сонный/мы...

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

Подборка вопросов для интервью

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

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

Вопрос 1: Как перехватить HTTPS-запросы и дать идеи

Сложность: Али p6+ ~ p7

Многие люди искали в Google «интервью перед интерфейсом + подробное объяснение https» и запоминали ответы, но когда они спрашивали, как перехватить запросы https, они были сбиты с толку, потому что они все еще находились на теоретической стадии https.

Что я хочу вам сказать, так это то, что даже https не является абсолютно безопасным.Следующее дает простую идею локального перехвата HTTPS-запросов.

Смоделируйте атаку «человек посередине» на примере Baidu.

• Сначала используйте OpenSSL для просмотра сертификата и напрямую вызовите библиотеку openssl, чтобы определить набор шифров SSL/TLS, поддерживаемый целевым сервером.

    openssl s_client -connect www.baidu.com:443

• Используйте sslcan для выявления ошибок конфигурации SSL, устаревших протоколов, устаревших наборов шифров и алгоритмов хеширования.

    sslscan -tlsall www.baidu.com:443

• Сертификат деталей анализа

    sslscan -show-certificate --no-ciphersuites www.baidu.com:443

• сгенерировать сертификат

    openssl req -new -x509 -days 1096 -key ca.key -out ca.crt

• включить маршрутизацию

    sysctl -w net.ipv4.ip_forward=1

• Напишите правила переадресации для переадресации портов 80 и 443 на порты 8080 и 8443.

    iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 8080 
    iptables -t nat -A PREROUTING -p tcp --dport 443 -j REDIRECT --to-ports 8443

• Наконец, используйте arpspoof для спуфинга arp

Если у вас есть лучшие идеи или вопросы, пожалуйста, оставьте сообщение под github, соответствующее этой теме:GitHub.com/Ай Руи спать/мы…

Вопрос 2: Как оптимизировать SEO во внешнем интерфейсе

Сложность: Али p5

• Разумный заголовок, описание, ключевые слова: вес трех элементов в поиске уменьшается один за другим, а значение заголовка может подчеркивать ключевые моменты; описание очень резюмирует содержание страницы, а ключевые слова не должны быть чрезмерно сложены; ключевые слова перечисляют важные ключевые слова.
• Семантический HTML-код, соответствующий спецификациям W3C: семантический код упрощает понимание веб-страниц поисковыми системами.
• HTML-код важного контента размещается первым: поисковые системы сканируют HTML сверху вниз, что гарантирует сканирование важного контента.
• Не используйте js для вывода важного контента: сканер не будет выполнять js для получения контента
• Используйте фреймы экономно: поисковые системы не будут сканировать контент в фреймах.
• Недекоративные изображения должны быть альтернативными
• Улучшите скорость сайта: скорость сайта является важным показателем для рейтинга в поисковых системах.

Если у вас есть лучшие ответы или идеи, пожалуйста, оставьте сообщение на github, соответствующее этой теме:GitHub.com/Ай Руи спать/мы…

Вопрос 3: Как проводить SEO для проектов с разделенными интерфейсом и интерфейсом

Сложность: Али p6 ~ p6+

• Используйте пререндеринг. Но отвечая на пререндер, интервьюер обязательно спросит вас, если вам не нужен пререндер, пусть вы это сделаете напрямую, ладно, смотрите второй ответ ниже.
• Иди первымwww.baidu.com/robots.txtНайдите общие сканеры, а затем оцените по nginx, является ли пользовательский агент пользователя, который обращается к странице, сканером.Если это сканер, используйте nginx для прокси на наш собственный сервер сканера, реализованный с помощью nodejs + puppeteer, а затем используйте свой краулер Сервер сканирует свою собственную страницу внешнего интерфейса проекта, отделенную от внешнего и внутреннего интерфейса, увеличивает задержку получения страницы и обеспечивает возврат данных интерфейса асинхронного рендеринга. получены и возвращены посещающему сканеру.

Если у вас есть лучшие ответы или идеи, пожалуйста, оставьте сообщение на github, соответствующее этой теме:GitHub.com/Ай Руи спать/мы…

Вопрос 4: Простая реализация асинхронных функций в async/await

Сложность: Али p6 ~ p6+

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

function spawn(genF) {
    return new Promise(function(resolve, reject) {
        const gen = genF();
        function step(nextF) {
            let next;
            try {
                next = nextF();
            } catch (e) {
                return reject(e);
            }
            if (next.done) {
                return resolve(next.value);
            }
            Promise.resolve(next.value).then(
                function(v) {
                    step(function() {
                        return gen.next(v);
                    });
                },
                function(e) {
                    step(function() {
                        return gen.throw(e);
                    });
                }
            );
        }
        step(function() {
            return gen.next(undefined);
        });
    });
}

Если у вас есть лучшие ответы или идеи, пожалуйста, оставьте сообщение на github, соответствующее этой теме:GitHub.com/Ай Руи спать/мы…

Вопрос 5: Задача на 1000 делений

Сложность: Али p5 ~ p6

• Вставка 1000 div за раз, как оптимизировать производительность вставки
  • Использование фрагментов

    var fragment = document.createDocumentFragment();
    fragment.appendChild(elem);

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

Если у вас есть лучшие ответы или идеи, пожалуйста, оставьте сообщение на github, соответствующее этой теме:GitHub.com/Ай Руи спать/мы…

Вопрос 6: (открытый вопрос) Проблема с 20 000 мячей: на стороне браузера используйте js для хранения информации о 20 000 мячей, включая размер, положение, цвет и т. д. Информация о мяче для оптимального поиска и хранения

Сложность: Али p7

Вы берете интервью у Ali и Tencent, и сможете ли вы попасть на p7 и t31, зависит от того, насколько глубоко и широко вы сможете ответить на открытые вопросы.

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

Если вы просто используете объект массива для хранения информации о 20 000 мячей, а затем используете цикл for для обхода и индексации, этого недостаточно.

В этом вопросе нужно разобраться немного глубже и использовать специальные структуры данных и алгоритмы для хранения и индексации.

Затем выполните компромисс и сравнение памяти и скорости и, наконец, предложите оптимальное решение, которое вы считаете.

Предлагаю несколько идей, которые могут достичь уровня Ali p7 и Tencent t31:

• Используйте ArrayBuffer для достижения экстремального хранения
• Кодирование Хаффмана + дерево запросов к словарю для улучшения индексации
• Реализуйте скрининг больших данных с помощью растрового изображения
• Простой и быстрый поиск с хэш-индексом
• Использование IndexedDB для реализации динамического хранилища для расширения виртуальной емкости браузера
• Используйте уязвимость iframe, чтобы реализовать неограниченное хранилище localStorage на стороне браузера и реализовать хранение 20 миллионов информации о маленьких шариках.

Ответ на такой открытый вопрос не уникален, и вам не нужно будет набирать код на месте, чтобы реализовать его, но идея должна работать, и это идея, которая может произвести впечатление на интервьюера. идея получше, добро пожаловать в мой Добавлено в github:GitHub.com/Ай Руи спать/мы…

Вопрос 7: (Открытый вопрос) В связи с предыдущим вопросом, как максимально плавно реализовать 20 000 мячей в браузере и отобразить их с динамическим эффектом линейного движения.

Сложность: Али p6+ ~ p7

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

Но использовали ли вы расширенный API браузера?

Вы все еще используете анимационный движок браузера?

Или вашу практику и оптимизацию 3D можно показать интервьюеру.

Предложите несколько идей:

• Использовать аппаратное ускорение графического процессора
• использовать вебGL
• Используйте сборку, чтобы помочь в расчетах, а затем управляйте частотой кадров анимации на стороне браузера.
• Используйте веб-воркеры для реализации многопоточности javascript и обработки небольших шариков блоками.
• Использование алгоритма односвязного дерева списков и механизма Ctrip для достижения динамического разделения задач и приостановки задач, возобновления, отката, динамического рендеринга и обработки маленьких шариков

Если у вас есть идея получше, вы можете добавить ее на мой гитхаб:GitHub.com/Ай Руи спать/мы…

Вопрос 8: (открытый вопрос) Проблема сортировки 10 миллиардов: недостаточно памяти, позволяет загружать и обрабатывать только 100 миллионов единиц данных за раз, как сортировать 10 миллиардов единиц данных.

Сложность: Али p6+ ~ p7

Этот вопрос представляет собой вопрос, который исследует комбинацию алгоритмов и практических проблем.

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

Итак, как эффективно работать с этими данными, можно изучить с помощью этого вопроса.

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

фактически. . . Брат, чтобы сказать вам правду, когда вам нужно использовать crc32, поиск объединения, дерево словарей, кодирование Хаффмана, LZ77 и тому подобное во внешнем интерфейсе

Он уже задействован на уровне реализации фреймворка и экстремальной оптимизации.

В это время вы достигли еще одного высокоуровневого внешнего мира.

Так что не спорьте с алгоритмом, может это просто наше текущее видение и способность, мы еще не касались этого уровня

Я уже объявил ответы на два открытых вопроса, и я полагаю, что вы уже кое-чему научились. Я думаю, что в процессе обдумывания открытых вопросов будет много неожиданного прироста, поэтому я предлагаю каждому попробовать подумать над этим вопросом самостоятельно. Ответ на этот вопрос будет размещен на моем github в пятницу. Соответствующий адрес github:GitHub.com/Ай Руи спать/мы…

Вопрос 9: (открытый вопрос) a.b.c.d или a['b']['c']['d'], что более эффективно

Сложность: Али p7 ~ p7+

Не смотрите на этот вопрос, вы можете понять каждое слово в заголовке, но задействованные знания скрыты

Этот вопрос должен идти глубже, и он будет включать абстрактное синтаксическое дерево ast, принцип компиляции и реализацию нативного js в ядре v8.

Непосредственно сравнив ранги Ali p7 ~ p7+ и Tencent t31 ~ t32, я думаю, что этот вопрос является самым сложным вопросом в этой статье, поэтому я поставил его на последний вопрос в открытом вопросе.

Задумайтесь, все, ответ на этот вопрос будет опубликован на моем гитхабе в пятницу

Соответствующий адрес github:GitHub.com/Ай Руи спать/мы…

Вопрос 10: Проблема с машиной времени git

Сложность: Али p5 ~ p6+

Сейчас все большие фабрики используют git, а svn практически никто не использует.

Многие кандидаты на собеседование будут только коммитить, тянуть и отправлять в git

Но использовали ли вы reflog, cherry-pick и т. д., они могут отражать вашу гибкость в управлении кодом и управлении качеством кода.

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

Эпилог

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

Адрес проекта блога:GitHub.com/Эрик сонный/был бы…

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