Сборник вопросов для собеседований по фронтенд-разработке

Как вы понимаете семантизацию структуры HTML?

1. При удалении или потере стилей страница всё ещё может отображать чёткую структуру.
2. Скринридеры (если у посетителя есть нарушения зрения) будут «читать» вашу веб-страницу полностью на основе вашей разметки.
3. Такие устройства, как КПК и мобильные телефоны, могут быть неспособны отображать веб-страницы так же, как браузеры на обычных компьютерах (обычно потому, что эти устройства слабее поддерживают CSS).
4. Поисковые роботы также полагаются на разметку для определения контекста и веса каждого ключевого слова.
5. То, насколько легко вашу страницу понимают поисковые роботы, очень важно, поскольку роботы в значительной степени игнорируют разметку, используемую для представления, и обращают внимание только на семантическую разметку.
6. Облегчает командную разработку и поддержку.

Строгий режим и режим quirks объявления документа Doctype: как запускаются эти два режима и в чём смысл их различения?

1. Как запустить эти два режима

Добавление объявления XML-заголовка может запустить режим Quirks в браузере IE. После запуска браузер разбирает страницу так же, как IE5.5, с теми же ошибками и другими проблемами, что и IE5.5, и его поведение (JavaScript) тоже такое же.

2. Запуск в IE6: добавьте объявление XML перед XHTML DOCTYPE.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. Запуск в IE7: добавьте HTML-комментарий между XML-объявлением и XHTML DOCTYPE.

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4. Может срабатывать как в IE6, так и в IE7: добавьте HTML-комментарий в начале документа с DOCTYPE HTML 4.01.

<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5. Добавьте в верхней части страницы `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">` , вызовет "режим совместимости"

6. Если объявление DTD не используется или используется объявление DTD ниже HTML4 (не включая HTML4), практически все браузеры отображают страницу в режиме совместимости.

С точки зрения фронтенда, что, по вашему мнению, нужно учитывать, чтобы эффективно заниматься SEO?

1. Понимать, как поисковые системы сканируют и индексируют веб-страницы.
2. Оптимизация метатегов.
3. Как выбирать ключевые слова и размещать их на веб-страницах.
4. Понимать основные поисковые системы.
5. Основные интернет-каталоги.
6. Поисковые системы с оплатой за клик.
7. Регистрация/добавление в поисковые системы.
8. Обмен ссылками и ссылочная популярность.
9. Разумное использование тегов.

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

Существуют три наиболее часто используемых способа подключения CSS:

Первый: добавить в секции head<link rel="stylesheet" type="text/css" href="my.css.html"/>, чтобы подключить внешний CSS-файл.

Второй: добавить в секции head

<style type="text/css"> 
div{margin: 0;padding: 0;border:1px red solid;} 
</style>

Третий: напрямую добавить в теги страницы.<div style="border:1px red solid;">

Что такое CSS Sprite? Обсудите плюсы и минусы этой техники.

CSS-спрайты многие в Китае называют «css精灵». Это способ обработки изображений веб-страницы. Он позволяет включить все разрозненные изображения, задействованные на странице, в , сокращая количество запросов к серверу и повышая скорость доступа.

1. Преимущества:

(1) Использование CSS-спрайтов позволяет эффективно сократить количество HTTP-запросов веб-страницы, значительно повышая производительность страницы. Это также преимущество CSS-спрайтов и основная причина их широкого распространения и применения.
(2) Это решает проблему веб-дизайнеров с именованием изображений. Вам нужно назвать только одно объединённое изображение, а не давать имя каждому маленькому элементу, что повышает эффективность создания веб-страниц.
(3) Это удобно для изменения стилей. Вам нужно изменить цвет или стиль только одного или нескольких изображений, и стиль всей веб-страницы может быть изменён. Также это удобно для сопровождения.

2. Недостатки:

(1) При объединении изображений нужно органично и разумно объединить несколько изображений в одно и оставить достаточно места, чтобы в разделах не появлялся ненужный фон. Это всё нормально; самое болезненное — это адаптивные страницы на широкоэкранных мониторах с высоким разрешением. Если ваше изображение недостаточно широкое, фон легко может поехать.
(2) CSS-спрайты сложны в разработке. Вам нужно использовать Photoshop или другие инструменты, чтобы измерить и вычислить точное положение каждого фонового блока. Это как вышивание; это несложно, но очень утомительно.
(3) CSS-спрайты сложны в сопровождении. Если есть небольшое изменение фона страницы, обычно нужно изменить объединённое изображение. Если менять не нужно, лучше его не трогать, чтобы не пришлось изменять больше CSS. Если оно не помещается в исходное положение, приходится (желательно) добавлять изображения ниже. Так размер изображения увеличивается, и вам также нужно изменять CSS.

Определите скруглённый угол (любого размера), распознаваемый браузерами с ядром webkit в соответствии со стандартом CSS3.

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

Что такое строчные элементы? Что такое блочные элементы? Что такое блочная модель CSS?

К строчным элементам относятся: a b span I em img input select strong
К блочным элементам относятся: div ul ol li dl dt dd h1 h2 h3 h4 p
Блочная модель: margin border padding width

Из каких трёх слоёв состоит фронтенд-страница? Что это за слои и какова роль каждого из них?

Веб-страница делится на три уровня, а именно: структурный уровень, уровень представления и уровень поведения.

1. Структурный уровень веб-страницы создается языками разметки, такими как HTML или XHTML. Теги, то есть слова, которые появляются в угловых скобках, отвечают за семантическое значение содержимого веб-страницы. Эти теги не содержат никакой информации о том, как отображать соответствующее содержимое. Например, тег P выражает семантическое значение: «Это текстовый абзац.»
2. Уровень представления веб-страницы создается с помощью CSS. CSS отвечает на вопрос «как отображать соответствующее содержимое».
3. Уровень поведения веб-страницы отвечает на вопрос «как содержимое должно реагировать на события». Это область, в которой доминируют язык JavaScript и DOM.

В HTML в чем разница между методами GET и POST для action в форме?

1. GET используется для получения данных с сервера, а POST — для отправки данных на сервер.
2. GET добавляет данные формы к URL, указанному в action, в виде variable=value, при этом URL и данные соединяются с помощью «?», а переменные — с помощью «&». POST помещает данные формы в тело данных формы и передает их в URL, указанный в action, таким образом, что переменные сопоставляются со значениями.
3. Get небезопасен, потому что во время передачи данные помещаются в URL запроса, и многие существующие серверы, прокси-серверы или пользовательские агенты будут записывать URL запроса в файлы журналов и где-то его сохранять, поэтому некоторая приватная информация может стать видна третьим лицам. Кроме того, пользователи могут напрямую видеть отправленные данные в браузере, и некоторые внутренние системные сообщения также будут отображаться пользователю. Все операции Post невидимы для пользователя.
4. Get передаёт небольшой объём данных, в основном потому, что он ограничен длиной URL. Post может передавать большие объёмы данных, поэтому только Post можно использовать для загрузки файлов (конечно, есть ещё одна причина, о которой будет сказано позже).
5. Get ограничивает значения набора данных Form символами ASCII. Post поддерживает весь набор символов ISO10646.
6. Get — это метод Form по умолчанию.

В чём разница между атрибутами id и class элементов HTML?

id и class — два распространённых атрибута на веб-страницах. Они работают вместе, чтобы сделать всю страницу насыщенной и красочной. Когда мы определяем стили для элемента, можно использовать оба, но есть ли различия?

1. При написании в таблице стилей CSS префикс селектора id должен быть '#', а префикс селектора class — '.'
2. Атрибут id может использоваться на странице только один раз, тогда как class можно использовать многократно.
3. Как тег элемента, id используется для различения разных структур и содержимого, тогда как class, как стиль, может применяться к любой структуре и содержимому.
4. Общие принципы при вёрстке: id сначала определяет структуру и содержимое, затем для него определяются стили. class — наоборот: сначала определяется стиль, затем стиль применяется к разным структурам и содержимому в соответствии с различными потребностями на странице.
5. Современные браузеры допускают, чтобы на одной странице присутствовало несколько id с одинаковым значением атрибута, и обычно они отображаются нормально. Однако, когда JavaScript использует id для управления элементами, могут возникать ошибки.
6. В практических приложениях class часто используется для текстовых разделов и оформления страницы, тогда как id в основном применяется для крупных макетов и стилей для оформления содержащих блоков или контейнеров.

Что такое Ajax?

Ajax — это не единая технология; на самом деле это несколько технологий, каждая со своими уникальными особенностями. Объединённые вместе, они становятся мощной новой технологией. Ajax включает:

1. XHTML и CSS
2. Использование объектной модели документа (DOM) для динамического отображения и взаимодействия.
3. Использование XML и XSLT для обмена данными и манипулирования ими.
4. Использование XMLHttpRequest для асинхронного приёма данных.
5. Использование JavaScript для связывания их вместе.

В каких браузерах вы тестировали свои страницы? Какие движки рендеринга у этих браузеров? С какими проблемами совместимости браузеров обычно сталкиваются? Почему они возникают? Каковы решения?

1. DOCTYPE влияет на обработку CSS.
2. FF: после установки padding div увеличивает свою высоту и ширину, а IE — нет. Поэтому нужно использовать !important, чтобы задать дополнительную высоту и ширину.
3. FF поддерживает !important, а IE его игнорирует. Можно использовать !important, чтобы задать специальные стили для FF.
4. Проблема вертикального центрирования div: vertical-align: middle; увеличьте высоту строки до той же высоты, что и весь div, line-height: 200px; затем вставьте текст, и он будет выровнен по вертикали по центру. Недостаток в том, что нужно контролировать содержимое, чтобы оно не переносилось.
5. Интерпретация BOX-модели в Mozilla Firefox и IE неодинакова, что приводит к разнице в 2px. Решение: div{margin:30px!important;margin:28px;} Обратите внимание, что порядок этих двух margin нельзя менять местами. IE не распознаёт атрибут !important, а другие браузеры могут.

Офлайн-хранилище HTML5

Важной особенностью HTML5 является офлайн-хранилище. Так называемое офлайн-хранилище — это сохранение некоторых файлов ресурсов локально, чтобы при последующих перезагрузках страницы использовались локальные файлы ресурсов, а веб-приложение оставалось доступным в автономном режиме. В то же время с помощью определенных методов (обновление связанных файлов или использование соответствующих API) можно выполнять такие операции, как обновление и удаление офлайн-хранилища.

Офлайн-хранилище HTML5 использует файл манифеста, чтобы указать, какие файлы нужно сохранить, используя, например,<html manifest='offline.manifest'>чтобы подключить файл манифеста. Путь к этому файлу может быть относительным или абсолютным. Если у вас много веб-приложений и вы хотите централизованно управлять файлами манифеста, то хорошим выбором будет статический файловый сервер.

Каковы плюсы и минусы iframe?

1. Недостатки:

Самый большой недостаток использования фреймовой структуры на веб-страницах заключается в том, что программы-«пауки» поисковых систем не могут интерпретировать такие страницы. Когда программа-паук встречает веб-страницу, состоящую из нескольких фреймов, она видит только фреймы и не может найти ссылки, поэтому считает сайт мертвым и быстро уходит. Для веб-сайта это не что иное, как катастрофа. Если вы хотите продавать товары, вам нужны клиенты; чтобы получить клиентов, вы должны сначала позволить людям посещать ваш сайт, а для этого вам не остается ничего другого, кроме как полагаться на поисковые системы. Вы тратите много времени, усилий и денег, чтобы открыть интернет-магазин, но затем намеренно мешаете поисковым системам индексировать вас. Это похоже на открытие розничного магазина, в котором все окна закрашены черным и не выставлена никакая вывеска.

2. Преимущества:

Из вышесказанного можно понять, что недостаток использования фреймворка iframe заключается в том, что он не может быть просканирован и проиндексирован поисковыми системами. Но у всего есть две стороны. Этот недостаток может быть и его преимуществом. Воспользовавшись этим, мы можем с помощью фреймворка iframe отображать на нашем сайте контент, который должны видеть наши пользователи, но который не нужно индексировать поисковым системам. Таким образом, iframe действительно сможет сыграть свою роль, а код на нашем сайте также можно значительно упростить. Например, как упоминалось выше автором, добавление информации о прямой трансляции Weibo. Нам не нужно предоставлять эту информацию Weibo поисковым системам; нам нужно обеспечить интерактивное взаимодействие с посетителями, как показано на рисунке ниже. Если мы используем фреймворк iframe для встраивания информации Weibo, мы можем не только легко добавить на сайт платформу прямой трансляции Weibo, но и увидеть, что код очень лаконичен.

iframe хорош тем, что может отображать исходную веб-страницу полностью без изменений, но если использовать его на главной странице, это то, что поисковые системы ненавидят больше всего. Тогда как бы хорошо ни был сделан ваш сайт, он не будет хорошо ранжироваться! Если это динамическая страница, использование include немного лучше! Но вы должны удалить из неё теги <html><head><title><body>!

Преимущества фреймов

При перезагрузке страницы не нужно перезагружать всю страницу; достаточно перезагрузить только одну фреймовую страницу внутри страницы (сокращается объём передаваемых данных и повышается скорость загрузки страницы).
Упрощает создание панелей навигации.

Недостатки фреймов

Это порождает множество страниц, которыми трудно управлять.
Неудобно печатать.
Кнопка «Назад» в браузере перестаёт работать.
Код сложен, и некоторые поисковые системы не могут его индексировать.
Большинство небольших мобильных устройств (КПК-телефонов) не могут полностью отображать фреймы.
Страницы с несколькими фреймами увеличивают количество HTTP-запросов к серверу.
Из-за множества вышеперечисленных недостатков это не соответствует концепции стандартного веб-дизайна и было отвергнуто стандартным веб-дизайном.

Совет: в настоящее время все преимущества фреймов можно полностью реализовать с помощью Ajax, поэтому больше нет необходимости использовать фреймы.

Принцип блочной модели CSS

1. Область действия блочной модели W3C включает margin, border, padding и content, при этом часть content не включает другие части.
2. Область действия блочной модели IE также включает margin, border, padding и content. Отличие от стандартной блочной модели W3C заключается в том, что часть content блочной модели IE включает border и padding.

Разница между CSS display:none и visibility:hidden

visibility:hidden скрывает элемент, но сохраняет его позицию при просмотре.
display:none рассматривает элемент как несуществующий и не загружает его.

Что такое jQuery?

jQuery — это повторно используемая библиотека JavaScript, написанная на JavaScript.

Код JavaScript для установки текста UI без использования jQuery выглядит следующим образом:

document.getElementById("txt1").value = "hello";

Код JavaScript после использования библиотеки классов jQuery выглядит следующим образом:

$("#txt1").val("Hello");

Видно, что код JavaScript после использования библиотеки классов jQuery значительно более лаконичен и лучше соответствует особенностям IT-индустрии: кратко, просто и быстро.

Какова связь между jQuery и JavaScript? Заменит ли jQuery JavaScript?

JavaScript: Это самый популярный язык сценариев в Интернете.
jQuery: Это отличный JavaScript-фреймворк. Это легковесная JS-библиотека. Он совместим с CSS3, а также совместим с различными браузерами (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).

jQuery не предназначен для замены JavaScript. Использование jQuery делает веб-разработку простой.

Как использовать библиотеку jQuery?

Скачайте файл jquery.js с сайта jquery.com (последняя версия jQuery V1.11.1 или V2.1.1). Правило именования файлов jQuery, например "jquery-1.4.1.js", где 1.4.1 — это номер версии JS-файла.

Перед разработкой веб-программы подключается необходимый JavaScript, как показано в коде ниже:

<script src="../code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

Что такое CDN (Content Delivery Network)?

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

Одним из ключевых факторов, ограничивающих пользовательский опыт, является размер веб-файлов, загружаемых браузером, включая *.html, изображения, *.js, *.css и другие файлы.

Для максимального повторного использования и экономии пропускной способности появился CDN: его основная идея — максимально избегать узких мест и звеньев в Интернете, которые могут повлиять на скорость и стабильность передачи данных, делая передачу контента быстрее и стабильнее. Его цель — позволить пользователям получать необходимый контент поблизости, решить проблему перегрузки Интернета и повысить скорость отклика пользователей при доступе к веб-сайтам.

Как использовать jQuery CDN?

(1) Рекомендуется использовать официальные узлы CDN, код использования выглядит следующим образом:
```
<script src="../code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="../code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
```

(2) Также есть CDN jQuery, предоставляемый Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

(3) Microsoft также предоставляет CDN-узлы jQuery:

<script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>

Как можно автоматически получить доступ к файлу jQuery сайта, когда сеть CDN недоступна?

Обычно узлы сети CDN надёжны. Но иногда они могут отказать. Поэтому, чтобы обеспечить двойную страховку, можно проверить, не удалась ли загрузка CDN, и затем автоматически загрузить jQuery с сайта. Пример кода выглядит следующим образом:

<script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
if (typeof jQuery == 'undefined')  
{  
    document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js.html' type='text/javascript'%3E%3C/script%3E"));  
}
</script>

В чём разница между файлами jQuery.js и jQuery.min.js одной и той же версии?

Сходство: оба файла предоставляют одинаковую функциональность jQuery, то есть в вызовах функций нет разницы.
Различие: файл jQuery.js подходит для чтения программистами. Файл jQuery.min.js сжат, и все пробелы удалены для экономии пропускной способности и места, что делает файл меньше для передачи по сети, но не подходит для чтения программистами.

Когда следует использовать jquery.js, а когда jquery.min.js?

В сценариях разработки и отладки: используйте файл jQuery.js, потому что вы хотите отлаживать и иметь возможность видеть код JavaScript.
В среде производственного развёртывания: используйте файл jQuery.min.js, который может уменьшить сетевой трафик и ускорить загрузку страницы.

Что такое файл jQuery.vsdoc.js?

Файл *.vsdoc.js используется в среде разработки Microsoft Visual Studio для удобного получения IntelliSense для jQuery. Когда вы вводите функцию jQuery, он автоматически подсказывает тип функции, инструкции по использованию функции, параметры функции и т. д. Если вы используете jQuery для разработки веб-программ в VS, файл vsdoc.js значительно повысит эффективность разработки.

Как объяснить базовый синтаксис jQuery?

Структуру синтаксиса jQuery можно разделить на четыре части:

1. По умолчанию все команды jQuery начинаются с символа "$".
2. Затем идёт выбор HTML-элементов. Например, ниже мы выбираем текстовое поле HTML по ID "txt1".
3. Затем разделяется точкой (.). Этот оператор разделяет элемент и действие элемента (функцию).
4. Наконец, какую функцию (действие) применить.

Что обозначает символ "$" в jQuery?

В jQuery символ "$" является псевдонимом jQuery, и библиотека jQuery по умолчанию начинается с $.

Зачем использовать jQuery.noConflict()?

Существует много библиотек, похожих на jQuery, таких как MooTools, Backbone, Sammy, Cappuccino, Knockout. Некоторые из этих библиотек также используют символ $. При совместном использовании это вызовет конфликты имён.

Чтобы решить этот конфликт, нужно использовать jQuery.noConflict(), чтобы не зависеть от символа $ по умолчанию. Например:

jQuery.noConflict();  
(function($){

})(jQuery);

Можно ли загрузить несколько событий document.ready на одной странице?

Да.

Связанные учебники:

Учебник HTML:https://www.example.com/html/
Учебник CSS:https://www.example.com/css/
Учебник JavaScript:https://www.example.com/js/
Учебник jQuery:https://www.example.com/jquery/