я
Верю в такую прекрасную тебя
уже приколол меня
Золото три серебро четыре, это снова пиковый период смены работы, я считаю, что многие друзья-программисты с душой готовятся к собеседованиям, поэтому сегодня я собрал и отправил статью о вопросах интервью, надеясь помочь всем, и я надеюсь, что все может преуспеть в интервью Войдите в свою идеальную компанию.
Ниже текст
1. Что произошло в процессе от ввода URL до загрузки страницы и отображения страницы? (Чем подробнее процесс, тем лучше)
1. Введите адрес доменного имени 2. Отправьте на DNS-сервер и получите IP-адрес веб-сервера, соответствующий доменному имени 3. Установите TCP-соединение с веб-сервером 4. Постоянный ответ перенаправления сервера (с http с ://example.com на http: //www.example.com) 5. Браузер отслеживает адрес перенаправления 6. Сервер обрабатывает запрос 7. Сервер возвращает ответ HTTP 8. Браузер отображает HTML9. Браузер отправляет запрашиваемые ресурсы (такие как изображения, аудио, видео, CSS, JS и т. д.) 10. Браузер отправляет асинхронный запрос
2. Как работают браузеры
1. Пользовательский интерфейс 2. Сеть 3. Серверная часть пользовательского интерфейса 4. Хранилище данных 5. Механизм браузера 6. Механизм рендеринга 7. Интерпретатор js
3. Процесс парсинга в браузере:
Процесс: анализировать html для построения дерева dom -> строить дерево рендеринга -> дерево рендеринга макета -> рисовать дерево рендеринга
4. Расскажите о своем понимании ядра браузера?
В основном он разделен на две части: механизм рендеринга (верстальщик или механизм рендеринга) и механизм JS. Механизм рендеринга: отвечает за получение содержимого веб-страницы (HTML, XML, изображения и т. д.), организацию информации (например, добавление CSS и т. д.), вычисление метода отображения веб-страницы и последующий ее вывод. к монитору или принтеру.
Разные ядра браузеров по-разному интерпретируют синтаксис веб-страниц, поэтому эффекты рендеринга также будут разными. Ядро требуется для всех веб-браузеров, почтовых клиентов и других приложений, которым необходимо редактировать и отображать веб-контент.
Движок JS: анализируйте и выполняйте javascript для достижения динамических эффектов веб-страниц. Сначала движок рендеринга и движок JS не были четко разделены, но позже движок JS становился все более и более независимым, и ядро имело тенденцию ссылаться только на движок рендеринга.
5. Каковы распространенные ядра браузеров?
Ядро Trident: IE, 360, Maxthon, Sogou, Window of the World, Tencent и др. [также известное как MSHTML] Ядро Gecko: Netscape6 и выше, FF, MozillaSuite/SeaMonkey и другое ядро Presto: Opera7 и выше. [Раньше ядро Opera было: Presto, теперь: Blink;] Ядро Webkit: Safari, Chrome и т. д. [Chrome: Blink (форк WebKit)]
6. Пожалуйста, опишите разницу между файлами cookie, sessionStorage и localStorage?
Файл cookie — это данные (обычно зашифрованные), которые хранятся на локальном терминале пользователя (на стороне клиента) веб-сайтом для идентификации пользователя, и эти данные передаются между браузером и сервером. sessionStorage и localStorage не отправляют данные на сервер автоматически, а только сохраняют их локально. Размер хранилища:
Размер данных cookie не может превышать 4 КБ. Хотя sessionStorage и localStorage также имеют ограничения на размер хранилища, они намного больше, чем файлы cookie, и могут достигать 5 МБ и более.скопировать кодПериод:
localStorage хранит постоянные данные, данные не будут потеряны после закрытия браузера, если данные не будут активно удалены;
Данные sessionStorage автоматически удаляются после закрытия текущего окна браузера.
Файл cookie действителен до установленного срока действия файла cookie, даже если окно или браузер закрыты.
скопировать код7. Пожалуйста, кратко опишите ограничения на доступ к файлам cookie на следующей странице.
Междоменная проблема, установлен HttpOnly.
8. Как реализовать связь между несколькими вкладками в браузере? (Али)
Вызывать локальные методы хранения, такие как localstorge и куки.
9. Для каких целей используется Page Visibility API?
Определить, видна ли страница в данный момент, с помощью значения visibleState, времени открытия веб-страницы и т. д.; когда страница переключается на другие фоновые процессы, воспроизведение музыки или видео автоматически приостанавливается
10. Что делает код подтверждения веб-страницы и какую проблему безопасности он решает?
Общедоступная полностью автоматическая программа, которая различает, является ли пользователь компьютером или человеком. Это может предотвратить злонамеренный взлом паролей, считывание билетов и заполнение форумов; эффективно предотвратить постоянные попытки хакеров войти в систему для определенного зарегистрированного пользователя с помощью определенного метода взлома программы методом грубой силы.
11. Зачем использовать несколько доменных имен для хранения ресурсов веб-сайта?
Кэширование CDN более удобно, нарушает ограничение параллелизма браузера, экономит пропускную способность файлов cookie, экономит количество подключений к основному доменному имени, оптимизирует скорость отклика страницы, предотвращает ненужные проблемы с безопасностью.
12. Расскажите о своем понимании веб-стандартов и важности органов, устанавливающих стандарты.
Стандарты веб-страниц и организации, устанавливающие стандарты, призваны сделать веб-разработку более «здоровой», разработчики следуют единым стандартам, снизить сложность разработки, стоимость разработки, SEO также будет лучше и не будет вызывать различные ошибки из-за злоупотребления кодом, проблемы безопасности. , и в конечном итоге улучшить удобство использования веб-сайта.
13. Знаете ли вы, что такое микроформаты?
Микроформаты — это набор машиночитаемого семантического словаря XHTML, открытый стандарт для структурированных данных. это специальный формат для специальных приложений
Плюсы: Добавляет интеллектуальные данные на веб-страницы, позволяя контенту сайта отображать дополнительные подсказки в результатах поиска.
14. На странице много картинок, и загрузка очень медленная. Какие методы вы используете для оптимизации загрузки этих картинок, чтобы сделать их более удобными для пользователей?
(1) Ленивая загрузка изображений, событие полосы прокрутки может быть добавлено в невидимую область на странице для определения расстояния между положением изображения и верхней частью браузера и расстоянием до страницы.Если первое меньше, чем последний, он будет загружен первым. (2) Если это слайд-шоу, фотоальбом и т. д., вы можете использовать технологию предварительной загрузки изображений, чтобы сначала загрузить предыдущее и следующее изображения отображаемого в данный момент изображения. (3) Если изображение слишком велико, вы можете использовать специально закодированное изображение, и сначала будет загружено сжатое миниатюрное изображение, чтобы улучшить взаимодействие с пользователем. (4) Если область отображения изображения меньше реального размера изображения, сжатие изображения выполняется на стороне сервера в соответствии с потребностями бизнеса, а размер сжатого изображения соответствует отображению.
15. Поговорите о том, что нужно учитывать, чтобы хорошо работать в SEO (поисковая система) с точки зрения внешнего интерфейса?
Разумное использование тегов, основные интернет-каталоги, обмен ссылками и широта ссылок.
16. Пожалуйста, напишите несколько способов оптимизации производительности интерфейса, чем больше, тем лучше
1. Сокращение операций с dom 2. Перед развертыванием сжатие изображений, сжатие кода 3. Оптимизация структуры кода js, уменьшение избыточного кода Ленивая загрузка изображений
17. Опишите разницу между прогрессивным улучшением и постепенной деградацией?
Разница: «мягкая деградация» начинается со сложного статус-кво и пытается сократить предоставление пользовательского опыта, в то время как прогрессивное улучшение начинается с очень базовой функциональной версии и продолжает расширяться для удовлетворения потребностей будущих сред. Понижение (упадок) означает оглядывание назад, прогрессивное совершенствование означает взгляд вперед, сохраняя при этом свои корни в безопасной зоне.
18. Как webSocket совместим с младшими браузерами? (Али)
Adobe Flash Socket, ActiveX HTMLFile (IE), отправка XHR на основе составного кодирования, XHR на основе длительного опроса
19. Какие существуют методы отслеживания сессий в веб-разработке
1.cookie 2.session
2.переписать url 4.скрыть ввод 5.ip адрес
20.HTTP method
1. Чтобы сервер был совместим с HTTP 1.1, ему нужно только реализовать методы GET и HEAD для ресурсов.
2.GET — наиболее часто используемый метод, обычно используемый для запроса сервера на отправку определенного ресурса.
3. HEAD похож на GET, но сервер возвращает в ответе заголовок, а не тело сущности.
4. PUT указывает серверу использовать тело запроса для создания нового документа, названного запрошенным URL-адресом, или, если этот URL-адрес уже существует, заменить его телом.
5.POST изначально использовался для ввода данных на сервер. Фактически, он часто используется для поддержки HTML-форм. Данные, заполненные в форме, обычно отправляются на сервер, который затем отправляет их туда, куда они идут.
6. TRACE инициирует диагностику замыкания на себя на целевом сервере, и сервер на последней остановке возвращает ответ TRACE и передает исходное сообщение запроса, которое он получил, в теле ответа. Метод TRACE в основном используется в диагностических целях, чтобы убедиться, что запрос проходит по цепочке запрос/ответ, как предполагалось.
7. Метод OPTIONS запрашивает у веб-сервера информацию о различных функциях, которые он поддерживает. Вы можете запросить, какие методы поддерживает сервер или какие методы поддерживаются для некоторых специальных ресурсов.
8. DELETE запрашивает сервер удалить ресурс, указанный URL-адресом запроса.
21. Какова структура ответного HTTP-сообщения?
Он определен в rfc2616:
1. Первая строка — это строка состояния, включающая: версию HTTP, код состояния, описание состояния, за которым следует CRLF.
2. После первой строки идут несколько строк заголовков ответа, в том числе: общий заголовок, заголовок ответа, заголовок объекта
3. Разделите заголовок ответа и объект ответа пустой строкой CRLF.
22. Коды состояния HTTP и их значения
Тип кода состояния Код состояния Категория Фраза причины 1XX Информация Полученный запрос обрабатывается 2XX Success (код состояния успеха) Запрос обработан нормально 3XX Redirection (код состояния перенаправления) Дополнительные действия, необходимые для выполнения запроса 4XX Client Error (код состояния ошибки клиента) Сервер не удалось обработать запрос 5XX Ошибка сервера (код состояния ошибки сервера) Сервер обработал запрос с ошибкой 204: Сервер обработал успешно, но не вернул содержимое. 304: Не изменено Не изменено. Запрошенный ресурс не был изменен, и ресурс не будет возвращен, когда сервер вернет этот код состояния. Клиенты обычно кэшируют посещенные ресурсы, предоставляя заголовок, указывающий, что клиент хочет вернуть только ресурсы, измененные после указанной даты 400: Bad Запрос Неверный синтаксис запроса клиента, и сервер не может понять 403: Запрещено Сервер понимает запрос запрашивающего клиента, но отказывается выполнять запрос 404: Не найден Сервер не может найти ресурс (веб-страницу) согласно запрос клиента. С помощью этого кода веб-дизайнеры могут настроить персонализированную страницу с надписью «запрошенный вами ресурс не найден».
23. То же происхождение: тот же протокол, то же доменное имя, тот же порт
Цель политики единого источника — обеспечить безопасность пользовательской информации и предотвратить кражу данных вредоносными веб-сайтами. В общей сложности три поведения ограничены, если они негомологичны. (1) Файлы cookie, LocalStorage и IndexDB не могут быть прочитаны. (2) DOM не может быть получен. (3) Запросы AJAX не могут быть отправлены.
24. О защите безопасности сайта
О: Это необходимо для предотвращения атак XSS, CSRF, SQL-инъекций и DDOS-атак. Концепция XSS: переводится как атака с использованием межсайтовых сценариев, в частности, относится к злоумышленнику, вставляющему вредоносный скрипт Script в веб-страницу, когда пользователь просматривает веб-страницу, код скрипта будет выполняться, тем самым проводя вредоносные атаки. Предотвращение XSS: установите проверку ввода httpOnly для ключевых полей cookie, специальных символов / & и т. д., экранируйте их и сохраните. Концепция CSRF: по сути, хакеры предсказывают все параметры, которые необходимо передать в http-интерфейсе, а затем любым , он может вызывать ваш интерфейс произвольно в соответствии со своей целью и реализовывать CURD для сервера. CSRF Предотвращение: используйте капчу, более продвинутое использование Turing для проверки концепций SQL: обычно без какой-либо фильтрации, напрямую сохраняйте параметры в операторе SQL. Предотвращение SQL: основной способ предотвращения SQL-инъекций — параметризация запроса или выполнение лексического анализа. Концепция DDOS: использовать принцип бочки, чтобы найти узкое место системных приложений; блокировка и исчерпание; текущая проблема: пропускная способность пользователя меньше масштаба атаки, а пропускная способность шумового доступа становится короткой доской бочки. Предотвращение DDOS: наиболее эффективно использовать комбинацию программного и аппаратного обеспечения для защиты
25. Понимание фронтенд-инжиниринга
1. Спецификация разработки 2. Модульная разработка 3. Компонентная разработка 4. Хранилище компонентов 5. Оптимизация производительности 6. Развертывание проекта 7. Процесс разработки 8. Инструменты разработки
26. Что такое AMD и CMD? Каковы их различия?
AMD и CMD — это две спецификации определения модуля. Сейчас используется модульное программирование, AMD — определение асинхронного модуля, CMD — определение общего модуля. AMD зависит от фронта, CMD зависит от ближайшего. API CMD несет единственную ответственность, и нет никаких глобальных требований.API AMD можно использовать для различных целей.
27.MVC BFC
MVC — это аббревиатура от model-view-controller, парадигмы разработки программного обеспечения.Цель использования MVC — разделить код реализации M и V, чтобы одна и та же программа могла использовать разные выражения. MVC соответствует Html, CSS, js.
Полное название BFC — «контекст блочного форматирования», что на китайском языке означает «контекст блочного форматирования». Характеристики жидкости: блочные горизонтальные элементы, такие как элементы div (то же самое ниже), по умолчанию (неплавающие, абсолютное позиционирование и т. д.), горизонтальное направление автоматически заполняет внешний контейнер; принцип работы характеристик элементов BFC заключается в следующем. внутренние подэлементы Не влияет на внешние элементы.
28. Как вы оптимизируете файлы и ресурсы сайта?
Ожидаемые решения включают в себя: слияние файлов, минимизацию/сжатие файлов, использование кэширования на CDN (несколько доменов для обеспечения кэширования) и другие.
29. Если веб-контент должен поддерживать несколько языков, что вы будете делать?
1. Выбор набора символов приложения, выберите кодировку UTF-8 2. Привычки написания языка и структура навигации 3. Веб-сайт, управляемый базой данных
30. Если в дизайне используется нестандартный шрифт, как вы это реализуете?
Так называемые стандартные шрифты — это шрифты, которые доступны на большинстве компьютеров или могут быть заменены шрифтами по умолчанию, даже если это не так. Метод: Используйте изображения для замены веб-шрифтов на онлайн-шрифты, такие как Google Webfonts, Typekit и т. д.; http://www.chinaz.com/free/20...; @font-face, веб-шрифты (службы шрифтов, такие как Google Веб-шрифты, Typekit и т.д. и т.п.)
31. Как выучить новый язык программирования
(1) Понимать базовые знания: историю, статус-кво, характеристики, области применения, тенденции развития (2) Построить среду разработки и написать HelloWorld (3) Объявить переменные и константы (4) Типы данных (5) Операторы (6) Логическая структура ( 7) Общие апплеты (8) Функции и объекты (9) Сторонние библиотеки, компоненты, фреймворки (10) Утилиты
32. Что такое хэш-таблица?
Хеш-таблица (также называемая хеш-таблицей) — это структура данных, доступ к которой осуществляется напрямую в соответствии со значением ключа. То есть он обращается к записям, сопоставляя значение ключа с местоположением в таблице, чтобы ускорить поиск. Эта функция отображения называется хеш-функцией, а массив записей называется хеш-таблицей.
33. Разница между статическими веб-страницами и динамическими веб-страницами:
Статический: содержимое веб-страницы остается неизменным, и любой может получить к нему доступ в любое время.
HTML/CSS/JS/视频/音频
скопировать кодДинамический: доступ к веб-контенту может быть разным для разных людей в разное время.
JSP/PHP/ASP.NET/Node.JSскопировать код34. Классификация операторов SQL
DDL: оператор определения данных CREATE/DROP/ALTER…DCL: оператор управления данными GRANT…DML: оператор операции INSERT/UPDATE/DELETEDQL: оператор запроса SELECT
35. Что такое гибкий макет?Решите макет «дочерних элементов» в элементе, чтобы обеспечить максимальную гибкость макета. После установки гибкого макета свойства float, clear и vertical-align дочерних элементов будут недействительными!!! display:flex; Свойство align-self определяет положение дочернего элемента.
36. Пишите отзывчиво?1. Объявите метатег области просмотра 2. Используйте макет потока 3. Используйте относительный размер для всех контейнеров, а не абсолютный размер 4. (Самый важный принцип) Используйте технологию CSS3 Media Query
37. Распространенные проблемы совместимости браузеров?1. Внутренние и внешние патчи тегов по умолчанию в разных браузерах разные. * {margin: 0; padding: 0;} 2. Изображение имеет интервал по умолчанию и использует атрибут float для макета img 3. Проблема с центрированием (и FF по умолчанию имеет выравнивание по левому краю) margin: 0 auto; 4. CSS-совместимый префикс - ms- IE- moz- Firefox-o- Opera-webkit- Chrome 5. Используйте CSS Hack, например: +: префикс IE6,7
-:IE6的前缀скопировать код38.H5 новые функции:(1) Рисование холста (2) Рисование SVG (3) Геолокация (4) Веб-воркер Веб-воркер — это JS, работающий в фоновом режиме, независимый от других скриптов, и он не влияет на производительность страницы. (5) Веб-хранилище 1. Технология cookie (хорошая совместимость, данные не могут превышать 4 КБ, сложная операция) 2. (плохая совместимость, данные 8 МБ, простая работа) sessionStorage 3. localStorage (6) Web Socket протокол сетевой протокол. Он реализует полнодуплексную связь между браузером и сервером, позволяя серверу активно отправлять информацию клиенту.
39.C3 новые функции:1. Сложные селекторы 2. Гибкие макеты 3. Анимации
40. Что такое машинопись1. Это надмножество JavaScript, которое, по сути, добавляет к языку необязательную статическую типизацию и объектно-ориентированное программирование на основе классов. 2. TypeScript расширяет синтаксис JavaScript, поэтому любая существующая программа JavaScript может работать под TypeScript без изменений. TypeScript предназначен для разработки больших приложений и во время компиляции создает JavaScript для обеспечения совместимости.
41. Разница между тремя фреймворками:У Angular есть относительно сильное эксклюзивное предложение React — это концепция функционального программирования, а навязчивость не так сильна, как у Angular, в основном потому, что это мягкое вторжение. Vue прогрессивный
42. Спа-приложениеПреимущества: хороший пользовательский опыт, хорошее разделение интерфейса и сервера. Недостатки: 1. Не годится для SEO. 2. Начальное время загрузки относительно увеличено. 3. Навигация недоступна.Если вам нужно перемещаться, вам нужно реализовать движение вперед и назад самостоятельно.
43. Что такое модульное программирование?Внутри каждого модуля переменная модуля представляет текущий модуль. Эта переменная является объектом, чьим свойством exports (т.е. module.exports) является внешний интерфейс. Загрузка модуля фактически загружает свойство module.exports модуля.
44. Оптимизация производительности?1. Используйте CDN 2. Ленивая загрузка изображений 3. Используйте внешний JavaScript и CSS 4. Сжимайте JavaScript, CSS, шрифты, изображения и т. д. 5. Оптимизируйте CSS Sprite 6. Уменьшите количество HTTP-запросов 7. Уменьшите количество DNS-запросов 8. Уменьшите количество элементов DOM 9. Уменьшите количество операций с DOM 10. Поместите скрипт внизу страницы
45. Что такое протокол HTTP:HTTP — это клиентский и серверный стандарт запросов и ответов (TCP). Разница между протоколами HTTP1.1 и 2.0: HTTP1.1 не поддерживает сжатие данных заголовков, а 2.0 поддерживает
Есть замечательные вещи, которые вы хотите увидеть
Система знаний веб-интерфейса упрощена
Тенденции фронтенда 2018 года: последовательнее, проще
[JavaScript от начинающего до опытного] Урок 30 Регулярные выражения в JS
Спасибо за внимание. Если вы считаете, что мой официальный аккаунт неплох, пожалуйста, помогите мне порекомендовать его своим друзьям. Спасибо.
Любители больших коров:Передовая техническая статья каждый день, а передняя галантерея отправляется время от времени.
Добро пожаловать, нажмите и удерживайте (отсканируйте) QR-код, чтобы следовать: Front-end энтузиасты Daniel
Благосостояние: Ответь на "1" в официальном аккаунте и получи мои лекции бесплатно【Видео Node.js】видео, Стоимость 998 юаней.