Об этих интервью

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

Точка знаний

Во фронтальных интервью есть много точек знаний, потому что фронтенд включает в себя множество аспектов. Когда я подошел к вопросам интервьюера, обдумывая все заново, я обнаружил, что меня пугают подробные вопросы интервьюера. Потому что я знаю в своем сердце, я не знаю, я просто повторяю это. Напоминает мне экзамены в старшей школе, и я также боюсь контрольных вопросов, потому что я не очень хорошо разбираюсь в концепциях и принципах. Прочитав так много прекрасных статей, у меня также есть некоторые собственные размышления. Я думаю, что для большинства младших фронтендов вы должны изменить свое отношение к этим точкам знаний, чтобы лучше понять принципы этих точек знаний.Если вы столкнетесь с интервьюером, даже если вы не понимаете, вы не будете быть ложным, потому что у вас будет собственное понимание этого ключевого слова. Точно так же, как на курсах в колледже, когда мышление первокурсника и второго года обучения еще незрело, столкновение с этими курсами решает, что они не влияют на мой код, и я мог бы также запомнить еще несколько API в то время. Позже, когда я рассматривал стиль, производительность, взаимодействие и т. д. при программировании, я обнаружил, что все курсы, которые я изучал раньше, были полезными, но способности программирования в то время не поспевают за ними, и не было никакой мотивации, побуждающей нас к пониманию. и использовать его. Так вот я тоже думаю, что то, что вы узнаете, полезно, но что-то из этого не сработает в свое время.

Некоторые знания о фронтенд-интервью

Что касается знаний, упомянутых в предварительном интервью, я немного взглянул на них.《webkit技术内幕》После этого, думаю, будет лучше разбираться по разным функциям в ядре браузера.

• Интернет
• Управление ресурсами
• Просмотр веб-страниц
• Javascript работает В соответствии с приведенными выше четырьмя основными функциями мы можем направлять знания, которые нам необходимо освоить.

Интернет

Сетевая часть включает в себяHTTP请求, потому что процесс нашего посещения веб-страницы осуществляется через определенныйURLдля получения соответствующего ресурса (данных или файла). Так оHTTPимеют

• Версия протокола
• Каковы значения атрибутов, содержащихся в заголовке запроса
• Разница между методами запроса
• Значение кода статуса ответа
• Настройка и доставка файлов cookie для управления состоянием.
• Протокол HTTP является реализацией протокола TCP и представляет собой протокол прикладного уровня, в то время как протокол TCP представляет собой протокол транспортного уровня. Его также можно проследить до протокола IP, четырехуровневой сетевой модели.

Управление ресурсами

Через предыдущий сетевой запрос мы можем получить соответствующие файлы, затем эти файлы сохраняются на локальном диске. И, как и загрузка файлов, хранилище файлов cookie и база данных, предоставляемая браузером, хранятся локально, и браузер предоставляет ряд API-интерфейсов для управления этими файлами.

• Место хранения куки, механизм удаления.
• Механизм обновления кэша
• API для файловых операций
• API для веб-хранилища данных (cookie, localstorage, sessiontroage, indexDB...)

просмотр веб-страниц

Когда мы получаем html-файл, мы начинаем парсить, сначала в соответствии с файлом<! doctype>оператор для анализа этой веб-страницы и построения дерева DOM, котороеcssтакже загружается, потому чтоcss层叠样式表, После успешной загрузки окончательный эффект CSS рассчитывается в соответствии с несколькими источниками, а затем объединяется с деревом DOM для формирования дерева рендеринга, а затем начинается отрисовка интерфейса браузера. При разборе веб-страницы, когда она встречает скрипт, он начинает выполнять соответствующий код, блокируя генерацию DOM-дерева. Затем в процессе участвуют:

• расчет css
• Генерация дерева домов
• Блокировка загрузки скриптов
• рисунок страницы
• Перерисовка и перекомпоновка

запуск javascript

Поскольку javascript является однопоточным интерпретируемым языком, он интерпретируется и выполняется сверху вниз. Но есть еще понятие асинхронности в js, которое ведет к понятию цикла событий:

• Цикл событий Цикл событий
• Макрозадача
• JS-операционный механизм
• потоки и процессы
• js область действия, среда выполнения

представление

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

• Уменьшите количество передач файлов HTTP за счет кэширования.
• Сокращение времени передачи за счет сжатия ресурсов
• Сократите время рендеринга в браузере благодаря хорошему дизайну CSS и структуры страницы.

SE0

С точки зрения SEO, наша главная цель — поднять наш сайт на высокие позиции в поиске. Тогда мы сможем понять поисковый робот и получим общее представление об оптимизации в этом отношении. Поисковые роботы через запись получают доступ ко многим URL-адресам, которые соответствуют правилам получения страниц, и сохраняют некоторую ключевую информацию, анализируя структуру тегов страниц. такие как веб-страницыheadв названии,metaописание, ключевые слова. Некоторый контент все же есть, но поскольку краулер — это не браузер, то вообще невозможно встретить скриптовые и ссылочные ресурсы, требующие дополнительных сетевых запросов, и парсить их, поэтому для большинства из них анализируются только статические страницы. Тогда мы можем знать:

• Стандартизируйте структуру HTML, чтобы упростить синтаксический анализ краулерами.
• Ключевые слова, заголовок, содержание и другая информация должны быть идеальными.
• Уменьшите использование содержимого вывода js
• доступ быстрее

Суммировать

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