Вопросы для фронтенд-интервью и их краткое изложение

внешний интерфейс

HTML5 не основан на SGML, поэтому ссылка на DTD не требуется, но для регулирования поведения браузера требуется тип документа.

Поэтому есть только один html5: Но html4.01 имеет три вида, а именно: строгий (не содержит презентационных и устаревших элементов, набор фреймов не разрешен), переходный (содержит презентационные и устаревшие элементы, набор фреймов не разрешен), набор фреймов (разрешен набор фреймов)

3. Что такое встроенные элементы? Что такое блочные элементы? Что такое пустые (void) элементы?

Общие встроенные элементы: a, b, span, img (я думал, что это блок), input, strong, select

Общие элементы блочного уровня: div, ul (неупорядоченный), ol (упорядоченный), li, p и т. д.

Общие пустые элементы:<br><hr><link><script>

Определение пустого элемента: содержимое элемента html — это содержимое между двумя его тегами, поэтому пустой элемент — это пустой элемент, если между тегами нет содержимого.

4. В чем разница между использованием link и @import при импорте стилей на страницу

На письме:

<link rel="stylesheet" href="路径" />

<style type="text/css">
    @import '路径'
</style>

По сути: ссылка — это XHTML-тег, который помимо загрузки css также может определять RSS, определять атрибуты соединения rel и т. д. И @import предоставляется css и может использоваться только для загрузки css

Анализ: ссылка загружается одновременно с загрузкой страницы, но @import будет ждать загрузки страницы перед загрузкой.

Совместимость: @import IE5 или выше может быть распознан, без ограничений

5. Расскажите о своем понимании ядра браузера?

В основном он делится на две части:

  • Рендеринг двигателя
  • JS-движок

Механизм рендеринга: получить содержимое веб-страницы (html, xml, изображения), построить cssom-дерево, рассчитать режим отображения веб-страницы, например ширину и высоту каждого элемента, а затем вывести его на монитор или принтер.

js engine: анализируйте и выполняйте javascript для достижения динамических эффектов веб-страниц.

6. Каковы общие ядра браузера (запоминание)?

  • Ядро Trident: IE, MaxThon, TT, The World, 360, браузер Sogou и др. [он же MSHTML]
  • Ядро Gecko: Netscape6 и выше, FF, MozillaSuite/SeaMonkey и т. д.
  • Ядро Presto: Opera7 и выше. [Исходный код ядра Opera: Presto, сейчас: Blink;]
  • Ядро Webkit: Safari, Chrome и т. д. [Chrome: Blink (форк WebKit)]

* Blink используется Chrome, упрощенной версией webkit, но эффективность была повышена по сравнению с предыдущими версиями.

Подробная статья:Анализ и сравнение ядер браузеров

7. Какие новые функции и элементы были удалены в html5? Как решить проблемы совместимости браузера с новыми вкладками HTML5? Как отличить HTML от HTML5?

Реализация: h5 больше не является подмножеством SGML.

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

如：

绘画canvas

用于媒介回放的video和audio元素

本地离线存储localStorage，长期存储，浏览器关闭之后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search;

新的技术webworker, websocket, Geolocation;

移除的元素：
  纯表现的元素：basefont，big，center，font, s，strike，tt，u;
  对可用性产生负面影响的元素：frame，frameset，noframes；

Обращение с совместимостью: IE8/IE7/IE6 поддерживает теги, сгенерированные методом document.createElement. Вы можете использовать эту функцию, чтобы эти браузеры поддерживали новые теги HTML5. После того, как браузеры поддерживают новые теги, вам необходимо добавить стиль тегов по умолчанию.

Вы также можете использовать html5shim, который позволяет IE9 или более ранним версиям поддерживать html5.

 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

Как отличить HTML5: объявление DOCTYPE \ новые структурные элементы \ функциональные элементы

8. Понимание семантики html (понимание)

  • Делайте правильные вещи с правильным ярлыком.
  • Семантика HTML делает содержимое страницы структурированным, структура более понятной, и ее легко анализировать для браузеров и поисковых систем;
  • Семантика HTML делает содержимое страницы структурированным, структура более понятной, и ее легко анализировать для браузеров и поисковых систем;
  • Сканеры поисковых систем также полагаются на теги HTML для определения контекста и веса каждого ключевого слова, что хорошо для SEO;
  • Сделайте так, чтобы людям, читающим исходный код, было проще разделить сайт на блоки, чтобы их было легко читать, поддерживать и понимать.

9. Как использовать автономное хранилище HTML5, можете объяснить принцип работы?

Когда пользователь не подключен к Интернету, к сайту или приложению можно получить обычный доступ, а когда пользователь подключен к Интернету, файл кэша на компьютере пользователя обновляется. Принцип: автономное хранилище HTML5 основано на механизме кэширования (а не на технологии хранения) вновь созданного файла .appcache. Ресурсы хранятся в автономном режиме через список синтаксического анализа в этом файле, и эти ресурсы будут храниться как файлы cookie. Позже, когда сеть отключена, браузер будет отображать страницу через данные, сохраненные в автономном режиме.

как пользоваться:

1. Добавьте атрибут манифеста в заголовок страницы следующим образом;

2. Записать ресурсы автономного хранилища в файл cache.manifest; КЭШ МАНИФЕСТ #v0.11 КЭШ: js/app.js css/стиль.css СЕТЬ: ресурс/логотип.png ОТСТУПАТЬ: //офлайн.html

3, когда автономный режим отключен, Window.ApplicationCache выполняет реализацию запроса.

10. Как браузер управляет ресурсами автономного хранилища HTML5 и загружает их? (это важнее предыдущего)

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

В автономном режиме браузер напрямую использует ресурсы, хранящиеся в автономном режиме.

11. Пожалуйста, опишите разницу между файлами cookie, sessionStorage и localStorage?

Файл cookie — это данные (обычно зашифрованные), которые хранятся на локальном терминале пользователя (на стороне клиента) веб-сайтом для идентификации пользователя.

  • Данные cookie всегда передаются в HTTP-запросах одного и того же источника (даже если они не нужны) и передаются между браузером и сервером.
  • sessionStorage и localStorage не отправляют данные на сервер автоматически, а только сохраняют их локально.

Размер хранилища:

  • Размер данных cookie не может превышать 4 КБ.
  • Хотя sessionStorage и localStorage также имеют ограничения на размер хранилища, они намного больше, чем файлы cookie, и могут достигать 5 МБ и более.

Период:

  • localStorage хранит постоянные данные, данные не будут потеряны после закрытия браузера, если данные не будут активно удалены;
  • Данные SessionStorage автоматически удаляются после закрытия текущего окна браузера.
  • Файл cookie устанавливает срок действия файла cookie досрочно, даже если окно или браузер закрываются.

12. Каковы недостатки iframe?

  • iframe заблокирует событие Onload главной страницы;
  • Поисковая программа поисковой системы не может интерпретировать такие страницы, что не способствует поисковой оптимизации;
  • iframe и главная страница делят пул подключений, а в браузере есть ограничения на подключение одного и того же домена, поэтому это повлияет на параллельную загрузку страницы.
  • Эти два недостатка необходимо учитывать перед использованием iframe. Если вам нужно использовать iframe, желательно через javascript
  • Динамически добавляйте значение атрибута src в iframe, что позволяет обойти две вышеуказанные проблемы.

13. Какова функция ярлыка? Как это используется?

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

использование:

14. Как отключить функцию автозаполнения формы HTML5?

Автозаполнение: когда вы вводите содержимое в поле ввода, браузер находит аналогичное содержимое из истории предыдущего поля ввода с тем же именем и перечисляет его под полем ввода.

Установите autocomplete=off для формы или ввода.

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

15. Как реализовать связь (на Али) перед несколькими вкладками в браузере?

WebSocket, SharedWorder (нужно попробовать)

Вы также можете вызывать методы локального хранения, такие как localstorage и файлы cookie.

16. Как webSocket совместим с младшими браузерами? (Али) (еще не реализовано)

Adobe Flash Socket, ActiveX HTMLFile (IE), отправка XHR на основе составного кодирования, XHR на основе длительного опроса

17. Как можно использовать Page Visibility API?

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

использовать:

  • Определить, видна ли страница в данный момент, с помощью значения visibleState, времени открытия страницы и т. д.;
  • Автоматически приостанавливать воспроизведение музыки или видео при переключении страницы на другие фоновые процессы;

Подробности можно увидеть:Page Visibility (видимость страницы) Введение в API, микро-расширение

18. Как реализовать круглую кликабельную область на странице? (будет только второй, остальные нужно реализовать)

1. карта+область или svg

2. пограничный радиус

3. Реализация на чистом js требует простого алгоритма для точки не на окружности, получения координат мыши и т.д.

19. Чтобы нарисовать линию высотой 1 пиксель без использования границы, она может сохранять тот же эффект в стандартном режиме и странном режиме разных браузеров.

<div style="height:1px;overflow:hidden;background:red"></div>

20. Что такое проверочный код веб-страницы и какую проблему безопасности он должен решить?

Общедоступная полностью автоматическая программа, которая различает, является ли пользователь компьютером или человеком. Это может предотвратить злонамеренный взлом паролей, считывание билетов и флуд на форуме;

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

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

Разница между title и h1, разница между b и strong, разница между i и em?

Этот вопрос затрагивает проблему семантики

Атрибут title не имеет четкого значения, а означает только заголовок, H1 означает заголовок с четкой иерархией, которая в основном влияет на поисковые роботы и SEO.

Сильный — это указание ключевого содержания, что означает усиление тона.При использовании читающего устройства для чтения в Интернете:<strong>будет перечитываться, пока<B>заключается в том, чтобы показать ударение.

i содержимое отображается курсивом, em означает выделенный текст

Элементы физического стиля -- теги естественного стиля: b, i, u, s, pre

Элементы семантического стиля -- Теги семантического стиля: strong, em, ins, del, code

Предпочитайте использовать теги естественного стиля, когда не уверены.

(...продолжение следует)

Категории