Вопросы и ответы по интерфейсу

$HTML, HTTP, проблемы веб-интеграции

1. На что SEO-специалистам следует обратить внимание на внешний интерфейс

разумныйtitle,description,keywords:Вес трех элементов в поиске уменьшается один за другим.Значение title может подчеркивать ключевые моменты.Важные ключевые слова не должны встречаться более 2 раз,и они должны быть на первом месте.Разные страницы.titleБыть другим;descriptionСодержание страницы должно быть кратко изложено, длина должна быть подходящей, а ключевые слова не должны располагаться чрезмерно друг над другом.descriptionразные;keywordsСписок важных ключевых слов
СемантическийHTMLКод, совместимый с W3C: семантический код упрощает понимание веб-страниц поисковыми системами.
важный контентHTMLCode First: поисковое сканированиеHTMLПорядок — сверху вниз.Некоторые поисковые системы имеют ограничения на продолжительность сканирования, чтобы обеспечить сканирование важного контента.
Не используйте важный контентjsВывод: рептилия не будет выполнять сбор контента js
бесполезныйiframe: поисковые системы не будут сканироватьiframeсодержание в
Должны быть добавлены недекоративные изображенияalt
Улучшите скорость сайта: скорость сайта является важным показателем для рейтинга в поисковых системах.

2. В чем разница между заголовком и альтом изображения

Обычно отображается, когда мышь находится над элементом
altда<img>Уникальный атрибут — это эквивалентное описание содержимого изображения, которое используется для отображения изображения, когда оно не может быть загружено, и для чтения изображения программой чтения с экрана. Это может улучшить высокую доступность картинок.Помимо чисто декоративных картинок должны быть заданы осмысленные значения, а поисковые системы сосредоточатся на анализе.

3. Использование нескольких методов запроса HTTP

1,GETметод
- Отправить запрос на получение ресурса на сервере
2,POSTметод
- КURLУказанный ресурс отправляет данные или добавляет новые данные
3.PUTметод
- а такжеPOSTМетод очень похож, и он также хочет отправить данные на сервер. Однако между ними есть различия. PUT указывает расположение ресурса на сервере, аPOSTнет
4.HEADметод
- Запрашивать только заголовок страницы
5.DELETEметод
- удалить ресурс на сервере
6.OPTIONSметод
- Используется для получения текущегоURLподдерживаемые методы. Если запрос выполнен успешно, появитсяAllowЗаголовок содержит что-то вроде“GET,POST”такая информация
7.TRACEметод
- TRACEЗапрос сообщений цикла используется для возбуждения удаленного метода, слой приложения
8,CONNECTметод
- Преобразование соединения запроса в прозрачноеTCP/IPряд

4. Шаги по вводу URL-адреса из адресной строки браузера для отображения страницы

браузер по запросуURLсдаватьDNSРазрешение доменного имени, найди правдуIP, инициировать запрос к серверу;
Сервер возвращает данные после завершения фоновой обработки, а браузер получает файл (HTML、JS、CSS, изображения и др.);
Браузер отвечает на ресурс, загруженный в (HTML、JS、CSSи т. д.) для выполнения анализа синтаксиса и создания соответствующих внутренних структур данных (таких какHTMLизDOM);
Загрузите проанализированный файл ресурсов, визуализируйте страницу и завершите работу.

5. Как оптимизировать работу сайта

contentаспект
1. уменьшатьHTTPЗапросы: объединить файлы,CSSэльфы,inline Image
2. уменьшатьDNSСпросите:DNSКэширование, распределение ресурсов на нужное количество имен хостов
3. уменьшатьDOMколичество элементов
Serverаспект
1. использоватьCDN
2. настроитьETag
3. Использование компонентовGzipкомпрессия
Cookieаспект
1. уменьшатьcookieразмер
cssаспект
1. Поместите таблицу стилей вверху страницы
2. Не используйтеCSSвыражение
3. использовать<link>Не используйте@import
Javascriptаспект
1. Поместите скрипт внизу страницы
2. Будуjavascriptа такжеcssимпортированный извне
3. компрессияjavascriptа такжеcss
4. удалить ненужные скрипты
5. уменьшатьDOMдоступ
Фотографий
1. Оптимизируйте изображения: выбирайте глубину цвета и сжатие в соответствии с реальными потребностями в цвете.
2. оптимизацияcssспрайт
3. УходитеHTMLсредняя растяжка

6. Коды состояния HTTP и их значения

1XX: Код статуса информации
- 100 Continueпродолжать, вообще отправкаpostПо запросу отправилиhttp headerПосле этого сервер вернет эту информацию для подтверждения, а затем отправит информацию о конкретном параметре.
2XX: код состояния успеха
- 200 OKнормальная информация о возврате
- 201 CreatedЗапрос был выполнен успешно, и сервер создал новый ресурс
- 202 AcceptedСервер принял запрос, но еще не обработал его
3XX: перенаправить
- 301 Moved PermanentlyЗапрошенная веб-страница была окончательно перемещена в новое место.
- 302 FoundВременная переадресация.
- 303 See OtherВременное перенаправление и всегда использоватьGETзапросить новыйURI.
- 304 Not ModifiedЗапрошенная страница не была изменена с момента последнего запроса.
4XX: ошибка клиента
- 400 Bad RequestСервер не понимает формат запроса, и клиент НЕ ДОЛЖЕН пытаться снова сделать запрос с тем же содержимым.
- 401 UnauthorizedЗапрос не авторизован.
- 403 ForbiddenНет доступа.
- 404 Not Foundне могу найти какURIсоответствующие ресурсы.
5XX:Ошибка сервера
- 500 Internal Server ErrorНаиболее распространенные ошибки на стороне сервера.
- 503 Service UnavailableСторона сервера временно не может обработать запрос (вероятно, из-за перегрузки или технического обслуживания).

7. Семантическое понимание

Делайте правильные вещи с правильным ярлыком!
htmlСемантическая — сделать содержимое страницы структурированным, что удобно для парсинга браузерами и поисковыми системами;
ни в каком стилеCSSДела также отображаются в формате документа и легко читаются.
Сканеры поисковых систем полагаются на теги для определения контекста и веса отдельных ключевых слов, что полезно дляSEO.
Упростите для людей, которые читают исходный код, разделение веб-сайта на части для удобства чтения, обслуживания и понимания.

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

Он в основном разделен на две части: движок рендеринга (layout engineerилиRendering Engine)а такжеJSдвигатель
Механизм рендеринга: отвечает за получение содержимого веб-страницы (HTML,XML, изображения и т. д.), упорядочивать сообщения (например, добавлятьCSSд.), и вычисляет, как отображается веб-страница, которая затем выводится на монитор или принтер. Разные ядра браузеров по-разному интерпретируют синтаксис веб-страниц, поэтому эффекты рендеринга также будут разными. Ядро требуется для всех веб-браузеров, почтовых клиентов и других приложений, которым необходимо редактировать и отображать веб-контент.
JSДвижок: разбор и выполнениеjavascriptДля достижения динамического эффекта веб-страницы
Изначально движок рендеринга иJSДвижок четко не выделяется, позже движок JS становился все более и более независимым, а ядро имело тенденцию ссылаться только на движок рендеринга.

9. Какие новые функции и элементы были удалены в html5?

HTML5не сейчас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，тт, ты
- Элементы, негативно влияющие на удобство использования:frame,frameset,noframes
служба поддержкиHTML5Новая вкладка:
- IE8/IE7/IE6поддержка черезdocument.createElementметка, созданная методом
- Вы можете использовать эту функцию, чтобы позволить этим браузерам поддерживать持HTML5новая вкладка
- После того, как браузер поддерживает новые вкладки, вам также необходимо добавить стиль вкладки по умолчанию.
Конечно, зрелые фреймворки также можно использовать напрямую, напримерhtml5shim

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

Когда пользователь не подключен к Интернету, к сайту или приложению можно получить доступ в обычном режиме, а файл кеша на компьютере пользователя обновляется, когда пользователь подключен к Интернету.
принцип:HTML5Автономное хранилище основано на недавно построенном.appcacheМеханизм кэширования (не технология хранения) для файлов, которые хранят ресурсы в автономном режиме через список разбора этого файла, который будет выглядеть какcookieто же самое хранилось. Позже, когда сеть отключена, браузер будет отображать страницу через данные, сохраненные в автономном режиме.
как использовать:
- Добавьте заголовок, как показано ниже.manifestхарактеристики;
- существуетcache.manifestРесурсы для записи файлов для автономного хранения
- В автономном режиме операцияwindow.applicationCacheОсуществлять реализацию требований

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

11. Как браузер управляет ресурсами автономного хранилища HTML5 и загружает их?

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

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

cookieЧтобы отметить, что сайт - это данные пользователя, хранящиеся на локальном терминале пользователя (сторона клиента) (обычно зашифрованы)
Данные cookie всегда передаются в HTTP-запросах одного и того же источника (даже если они не нужны) и передаются туда и обратно между браузером и сервером.
sessionStorageа такжеlocalStorageДанные не будут автоматически отправляться на сервер, а будут храниться только локально
Размер хранилища:
- cookieРазмер данных не может превышать 4k
- sessionStorageа такжеlocalStorageХотя есть ограничение на размер хранилища, но отношениеcookieГораздо больше, может достигать 5 м и более
Период:
- localStorageХраните постоянные данные, данные не будут потеряны после закрытия браузера, если данные не будут активно удалены.
- sessionStorageДанные автоматически удаляются после закрытия текущего окна браузера
- cookieзадаватьcookieДействителен до истечения срока действия, даже если окно или браузер закрыты

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

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

14. Что такое стандарты WEB и стандарты W3C?

Закрытые теги, строчные теги, отсутствие произвольной вложенности, использование внешних ссылокcssа такжеjs, разделение структурного поведения

15. В чем разница между xhtml и html?

Одна из них — функциональное отличие.
- в основномXHTMLСовместимость с основными браузерами, мобильными телефонами иPDA, а браузер так же быстро и корректно компилирует страницу
Кроме того, разница в привычках письма
- XHTMLЭлементы должны быть правильно вложены, закрыты, регистрозависимы, а документ должен иметь корневой элемент.

16. Какова роль Doctype Как отличить строгий режим от неразборчивого режима? Что они имеют в виду?

Когда страница загружается,linkбудет загружаться одновременно, а@imortКогда страница загружается,linkбудет загружаться одновременно, а@importцитируетсяCSSБудет ждать, пока страница загрузится перед загрузкой
importтолько вIE5можно определить по вышеизложенному иlinkдаXHTMLЯрлыки, нет проблем с совместимостью
linkВес стиля пути выше, чем@importвес
<!DOCTYPE>Декларация находится в верхней части документа, в<html>перед этикеткой. Сообщите синтаксическому анализатору браузера, какую спецификацию типа документа использовать для анализа этого документа.
Типографика строгого режима иJSРежим работы должен работать на самом высоком стандарте, поддерживаемом браузером.
В неразборчивом режиме страницы отображаются в свободной обратной совместимости. Эмулирует поведение старых браузеров, чтобы сайты не работали.DOCTYPEНесуществующий или неправильно отформатированный документ отображается в неразборчивом режиме.

17. Что такое встроенные элементы? Что такое блочные элементы? Что такое пустые (void) элементы? В чем разница между встроенными элементами и элементами блочного уровня?

Встроенные элементы:a b span img input select strong
Элементы уровня блока:div ul ol li dl dt dd h1 h2 h3 h4…p
Пустой элемент: <hr> <img> <input> <link> <meta>
Встроенные элементы не могут устанавливать ширину и высоту и не занимают одну строку.
Элементы уровня блока могут иметь ширину и высоту, исключая одну строку

18. Что такое глобальные атрибуты HTML?

class: Установите идентификатор класса для элемента.
data-*: добавление настраиваемых атрибутов к элементам.
draggable: Установленные элементы пересекаются
id: элементid, уникальный в пределах документа
lang: язык содержимого элемента
style: в линиюcssстиль
title: Предлагаемая информация об элементе

19, Холст и SVG В чем разница?

svgКаждый нарисованный графический элемент независимDOMУзлы можно легко привязать к событиям или использовать для их изменения.canvasНа выходе - целое полотно
svgВыходная графика представляет собой векторную графику, и параметры могут быть изменены для свободного увеличения и уменьшения масштаба на более позднем этапе без искажений и алиасинга. а такжеcanvasВыходной скалярный холст, как и изображение, масштабирование будет искажено или сглажено.

20. Почему HTML5 нужно только писать?

HTML5Не на основеSGML, так что не надоDTDцитировать, но нужноdoctypeрегулировать поведение браузера
а такжеHTML4.01на основеSGML, поэтому необходимоDTDСсылки делаются, чтобы сообщить браузеру, какой тип документа использует документ.

21. Как реализовать круглую интерактивную область на странице?

svg
border-radius
чистыйjsРеализация требует простого алгоритма, чтобы определить, находится ли точка на окружности, получить координаты мыши и т. д.

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

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

Раздел $CSS

1. Что такое css спрайт и каковы его преимущества и недостатки

Концепция: сшивание нескольких маленьких картинок в одну картинку. пройти черезbackground-positionи настройка размера элемента должна отображать фоновый рисунок.
преимущество:
- уменьшатьHTTPКоличество запросов, значительно повышающих скорость загрузки страницы
- Увеличьте количество повторений информации об изображении, улучшите коэффициент сжатия и уменьшите размер изображения.
- Удобно изменить стиль, просто измените цвет или стиль на одном или нескольких изображениях, чтобы добиться
недостаток:
- Проблемы со слиянием изображений
- Обслуживание проблематично, изменение изображения может потребовать изменения макета всего изображения, стиля

2. Разница между отображением: нет и видимостью: скрыто;

Контакт: они оба делают элемент невидимым
разница:
- display:none; заставит элемент полностью исчезнуть из дерева рендеринга и не занимать места при рендеринге;visibility: hidden; не приводит к исчезновению элемента из дерева рендеринга, элемент рендерера продолжает занимать место, но содержимое не видно
- display: none; является ненаследуемым атрибутом, узел-потомок исчезает, поскольку элемент исчезает из дерева рендеринга и не может быть отображен путем изменения атрибута узла-потомка；visibility: hidden;Это унаследованное свойство, и узел-потомок исчезает из-за наследования.hidden, установивvisibility: visible;Вы можете сделать дочерние узлы явными
- Измените элементdisplayОбычно вызывает перестановку документа. ИсправлятьvisibilityАтрибуты вызывают только перерисовку этого элемента.
- Программы чтения с экрана не читаютdisplay: none;Содержимое элемента;будет читатьvisibility: hidden;содержимое элемента

3. Разница между ссылкой и @import

linkдаHTMLСпособ,@importэто способ CSS
linkМаксимальная поддержка параллельных загрузок,@importСлишком большая вложенность приводит к последовательной загрузке, появляющейсяFOUC
linkв состоянии пройтиrel="alternate stylesheet"Укажите стили-кандидаты
пара браузеровlinkподдержку раньше, чем@import,можно использовать@importСкрыть стили для старых браузеров
@importДолжны быть перед правилами стиля, на другие файлы можно ссылаться в файле css.
В основном:linkлучше чем@import

4. Что такое FOUC и как этого избежать

Flash Of Unstyled Content: Браузер использует стиль по умолчанию для отображения документа перед загрузкой пользовательской таблицы стилей.После загрузки и отображения пользовательского стиля документ отображается снова, что приводит к мерцанию страницы.
Решение: Поместите таблицу стилей в папку документа.head

5. Как создать контекст форматирования блока (контекст форматирования блока), какая польза от BFC

Создайте правило:
- корневой элемент
- плавающий элемент (floatнетnone)
- Абсолютно позиционированные элементы (positionстоимостьabsoluteилиfixed)
- displayстоимостьinline-block,table-cell, table-caption,flex, inline-flexодин из элементов
- overflowнетvisibleЭлементы
эффект:
- Может содержать плавающие элементы
- не покрыт плавающими элементами
- Блокировка родительских и дочерних элементовmarginскладывать

6. Взаимосвязь между отображением, поплавком и позицией

еслиdisplayдляnone,Такpositionа такжеfloatни один из них не работает, в этом случае элемент не создает поле
В противном случае, еслиpositionзначениеabsoluteилиfixed, коробка абсолютно позиционирована,floatрассчитывается какnone,displayВнесите коррективы в соответствии с таблицей ниже.
В противном случае, еслиfloatнетnone, коробка плавает,displayОтрегулируйте в соответствии с таблицей ниже
В противном случае, если элемент является корневым,displayОтрегулируйте в соответствии с таблицей ниже
в других случаяхdisplayзначение указанного значения
Подводить итоги:Абсолютное позиционирование, плавающие, корневые элементы — все это необходимо настроить.display

7. Есть несколько способов очистки поплавка, их преимущества и недостатки

Отецdivопределениеheight
пусто в концеdivЭтикеткаclear:both
Отецdivопределять псевдоклассы:afterа такжеzoom
Отецdivопределениеoverflow:hidden
ОтецdivТакже плавает, нужно определить ширину
добавить в концеbrЭтикеткаclear:both
Лучше использовать третий способ, которым пользуются многие сайты.

8. Зачем инициализировать стили CSS?

Из-за проблем совместимости браузеров разные браузеры имеют разные значения по умолчанию для некоторых тегов.CSSИнициализация имеет тенденцию показывать различия в отображении страниц между браузерами.
Конечно, стиль инициализации будетSEOЕсть определенное влияние, но вы не можете иметь оба, но постарайтесь инициализировать с наименьшим влиянием

9. Какие новые возможности CSS3?

добавить различныеcssСелектор
закругленные углыborder-radius
Многоколоночный макет
тени и отражения
текстовые эффектыtext-shadow
Линейный градиент
вращатьtransform

Какие новые псевдоклассы появились в CSS3?

p:first-of-typeВыбирает первый элемент, принадлежащий его родителюкаждый из элементовэлемент.
p:last-of-typeвыбирает последний элемент, который принадлежит его родителюкаждый из элементовэлемент.
p:only-of-typeВыборки, которые уникальны для его родительского элементакаждый из элементовэлемент.
p:only-childВыбирает каждый элемент, который является единственным дочерним элементом своего родительского элемента.элемент.
p:nth-child(2)Выбирает каждый элемент, который является вторым дочерним элементом его родительского элемента.элемент.
:afterДобавляет содержимое перед элементом, также может использоваться для очистки поплавков.
:beforeдобавить содержимое после элемента
:enabled
:disabledУправляет отключенным состоянием элемента управления формы.
:checkedПереключатели или флажок установлен

10. Какие значения отображения? объяснить их роль

blockОтображается как элемент блочного типа.
noneЗначение по умолчанию. Выглядит как встроенные типы элементов.
inline-blockОтображается как встроенный элемент, но его содержимое отображается как блочный элемент.
list-itemОтображается как элемент блочного типа и добавляет стилизованные теги списка.
tableЭтот элемент будет отображаться в виде таблицы блоков
inheritУказывает, что он должен наследовать от родительского элементаdisplayстоимость имущества

11. Представляете стандартную блочную модель CSS? Чем отличается блочная модель младших версий IE?

Есть два вида,IEкоробочная модель,W3Cкоробочная модель;
Блочная модель: содержимое (содержание), заполнение (padding),граница(margin), граница (border);
разница:IEсontentчастично положитьborderа такжеpaddingрасчетный;

12. Как рассчитывается алгоритм приоритета CSS?

Приоритетом является принцип близости, в случае одинакового веса преобладает наиболее близкое определение стиля.
Стиль загрузки основан на последнем загруженном позиционировании.
Приоритет:!important > id > class > tag importantболее высокий приоритет, чем встроенный

13. Как вы понимаете спецификацию BFC?

Он определяет, как расположены элементы, а также их отношения и взаимодействие с другими элементами.

14. Поговорите о поплавках и очистке поплавков

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

15. Значение положения, относительного и абсолютного начала позиционирования

absolute: Создание абсолютно позиционированных элементов относительноstaticРазместите первый родительский элемент, отличный от позиционирования
fixed: генерировать абсолютно позиционированные элементы, расположенные относительно окна браузера.
relative: Создает относительно позиционированный элемент, расположенный относительно его нормального положения.
staticПо умолчанию. Без позиционирования элемент появляется в обычном потоке
inheritуказывает наследование от родительского элементаpositionстоимость имущества

16. Когда display:inline-block не будет отображать пробел? (Поездка)

удалить пробелы
использоватьmarginотрицательное значение
использоватьfont-size:0
letter-spacing
word-spacing

17. Разница между PNG, GIF и JPG и как выбрать

GIF
- 8битовые пиксели,256цвет
- сжатие без потерь
- Поддержка простой анимации
- служба поддержкиbooleanПрозрачный
- Подходит для простых анимаций.
JPEG
- Цвета ограничены256
- сжатие с потерями
- Контролируемое качество сжатия
- Прозрачность не поддерживается
- подходит для фотографий
PNG
- имеютPNG8а такжеtruecolor PNG
- PNG8аналогичныйGIFЦвет крышки есть256, маленький файл, поддержкаalphaПрозрачность, отсутствие анимации
- Подходит для иконок, фонов, кнопок

18. Становится ли встроенный элемент элементом уровня блока после float:left?

После плавала встроенные элементы не становятся массивными элементами, но может быть предусмотрена ширина и высота. Стать массивной линией элементами в элементе, на линию, напрямуюdisplay:block;. Но если элемент установлен, установите его обратно.display:block; он не займет ни одной строки.

19. Следует ли использовать на веб-страницах четные или нечетные шрифты? Зачем?

Четные числа относительно легче масштабировать с остальной частью веб-дизайна.

20. В чем разница между двойным двоеточием и одинарным двоеточием в ::before и :after? Объясните роль этих двух псевдоэлементов.

одно двоеточие (:) для псевдоклассов CSS3 двойное двоеточие (::) дляCSS3псевдоэлемент
Используется для отличия псевдоклассов от псевдоэлементов.

21. Если вам нужно вручную писать анимацию, как вы думаете, какой минимальный интервал времени и почему? (Али)

Частота по умолчанию для большинства мониторов60Hz,Прямо сейчас1Обновить в считанные секунды60раз, поэтому теоретический минимальный интервал равен1/60＊1000ms ＝ 16.7ms

22. Метод слияния CSS

избегать использования@importимпортировать несколькоcssфайл, вы можете использоватьCSSинструмент будетCSSсливаться в одинCSSфайл, например, используяSass\CompassЖдать

23. Вес разных селекторов CSS (правила каскадирования CSS)

！importantПравила важнее других правил
Правила встроенного стиля, а также1000
для каждого из заданных селекторовIDзначение атрибута плюс100
Для каждого атрибута класса, селектора атрибута или селектора псевдокласса, заданного в селекторе, добавьте10
Добавьте 1, чтобы выбрать каждый селектор тега элемента, указанный в нем.
Если веса совпадают, они применяются в соответствии с порядком правил стиля, и более поздние значения переопределяют более ранние.

24. Перечислите свойства, которые, как вы знаете, могут изменить макет страницы.

position,display,float,width,heighон,margin,padding,top,left,right,`

25, практика CSS с точки зрения оптимизации производительности

cssсжать и объединить,Gzipкомпрессия
cssфайл вheadвнутри не использовать@import
Используйте как можно больше сокращений, избегайте фильтров и используйте селекторы с умом.

26. Анимация CSS3 (реализация простой анимации, например поворот и т.д.)

полагаться наCSS3Три свойства, предложенные в:transition,transform,animation
transition: определяет, как выглядит элемент в процессе изменения, в том числеtransition-property,transition-duration,transition-timing-function,transition-delay.
transform: определить результат изменения элемента, включаяrotate,scale,skew,translate.
animation: Анимация определяет каждый кадр действия (@keyframes) имеет какое-либо влияние, в том числеanimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction

27. Принцип и преимущества и недостатки base64

Преимущества могут быть зашифрованы,httpпросить
Недостаток в том, что требуетсяCPUкодек

28. Несколько распространенных макетов CSS

плавный макет

.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: blue;
    }
    .main {
        margin-left: 120px;
        margin-right: 220px;
        height: 200px;
        background: green;
    }

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

Макет Святого Грааля

.container {
            margin-left: 120px;
            margin-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height:300px;
            background: green;
        }
        .left {
            position: relative;
            left: -120px;
            float: left;
            height: 300px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

Двухстворчатая компоновка

 .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background: green;
        }
        .main::after {
            content: '';
            display: block;
            font-size:0;
            height: 0;
            zoom: 1;
            clear: both;
        }
        .left {
            float:left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

29. Разница между stylus/sass/less

Все они имеют пять основных характеристик: «переменная», «смешение», «вложение», «наследование» и «смешение цветов».
Scssа такжеLESSГрамматика строже,LESSНеобходимо использовать фигурные скобки "{}",Scssа такжеStylusИерархические и вложенные отношения могут быть представлены отступом
Scssнет понятия глобальных переменных,LESSа такжеStylusСовокупная концепция, аналогичная другим языкам
Sassосновывается наRubyязык иLESSа такжеStylusможет основываться наNodeJS NPMСкачав соответствующую библиотеку, скомпилируйте ее;

30. Роль postcss

Интуитивно это можно понять так: это платформа. Зачем называть это платформой? Поскольку мы используем его напрямую, кажется, что мы ничего не можем сделать, но если вы позволите некоторым плагинам работать на нем, это будет очень мощно.
PostCSSпредоставляет анализатор, который преобразуетCSSРазобрать в абстрактное синтаксическое дерево
вPostCSSНа этой платформе мы можем разработать некоторые плагины для обработки нашихCSS, такие как популярные:autoprefixer
postcssможет быть обработан sasscssОбработка самых распространенныхautoprefixer

$JavaScript

1. Закрытие

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

Расскажите мне о своем понимании замыканий

Замыкания в основном используются для разработки частных методов и переменных. Преимущество замыкания в том, что оно позволяет избежать загрязнения глобальных переменных. Недостаток в том, что замыкание будет находиться в памяти, что увеличит объем используемой памяти. Неправильное использование может легко привести к утечке памяти. В js функции являются замыканиями, и только функции генерируют концепцию области видимости.
Есть два самых больших применения замыканий: одно — чтение переменных внутри функции, а другое — постоянное хранение этих переменных в памяти.
Другое использование замыканий — инкапсуляция частных свойств и частных методов объекта.
выгода: Включить упаковку и кеш и т. Д.;
вред: Это проблема потребления памяти и неправильного использования, которая вызовет переполнение памяти.

Примечания по использованию замыканий

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

2. Расскажите о своем понимании цепочки задач

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

3. Прототип JavaScript, цепочка прототипов, каковы характеристики?

Каждый объект инициализирует внутри себя свойство, котороеprototype(прототип), когда мы обращаемся к свойству объекта
Если этого свойства внутри этого объекта нет, то он уйдет вprototypeнайти это свойство в个prototypeбудет иметь свой собственныйprototype, поэтому мы продолжаем его искать, что и является концепцией цепочки прототипов, которую мы обычно называем
связь:instance.constructor.prototype = instance.__proto__
Функции:
- JavaScriptОбъекты передаются по ссылке, и каждая новая объектная сущность, которую мы создаем, не имеет собственной копии прототипа. Когда мы модифицируем прототип, связанные с ним объекты также наследуют изменение
Когда нам нужен атрибут,JavascriptДвижок сначала увидит, есть ли это свойство в текущем объекте, если нет
найдет егоPrototypeБыл ли извлечен объект с этим атрибутом и т. д. рекурсивноObjectвстроенные объекты

4. Пожалуйста, объясните, что такое брокер событий

Брокер событий (Event Delegation), также известный как делегирование события. даJavaScriptОбщие методы связывания событий, обычно используемые в . Как следует из названия, «прокси событий» должен делегировать события, которые необходимо привязать к родительскому элементу, и позволить родительскому элементу взять на себя роль мониторинга событий. Принцип делегирования событий — всплытие событий DOM-элементов. Преимущество использования брокера событий заключается в том, что он может повысить производительность.
Это может сэкономить много памяти и уменьшить количество регистраций событий, например, вtableВсе на агентеtdизclickсобытие отличное
Можно добиться того, чтобы при добавлении дочернего объекта его не нужно было связывать снова.

5. Как Javascript реализует наследование?

Конструктивное наследование
прототипное наследование
наследование экземпляра
копирование наследства
прототипprototypeмеханизм илиapplyа такжеcallМетод относительно прост в реализации, рекомендуется использовать смесь конструкторов и прототипов.

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent，通过原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被继承的属性
  }

6. Расскажите о понимании этого объекта

thisвсегда относится к прямому вызывающему объекту функции (а не к косвенному вызывающему)
Если естьnewключевые слова,thisнаправлениеnewобъект, который вышел
В случае,thisУказывает на объект, вызвавший это событие, в частности,IEсерединаattachEventсерединаthisвсегда указывает на глобальный объектWindow

7. Модель событий

W3CВозникновение событий, определенных вcapturing), целевой этап (targetin), стадия пузырения (bubbling)

Всплывающие события: при использовании всплывающих событий сначала срабатывает дочерний элемент, а затем родительский элемент.
Захваченные события: когда вы используете захват событий, родительский элемент срабатывает первым, а дочерний элемент срабатывает позже.
DOMПотоковая передача событий: поддерживает обе модели событий: захват событий и всплывающие события.
Хватит булькать: вW3cв использованииstopPropagation（）Метод; устанавливается в IEcancelBubble = true
Блокировать захват: блокирует поведение событий по умолчанию, например.click - <a>Прыгай следом. существуетW3cв использованииpreventDefault（）метод, вIEв настройкахwindow.event.returnValue = false

8. Что именно делает новый оператор?

создает пустой объект иthisПеременная ссылается на объект, а также наследует прототип функции.
Свойства и методы добавляются вthisв указанном объекте
Вновь созданный объект создаетсяthisссылается и, наконец, неявно возвращаетсяthis

9. Принцип Аякса

AjaxПринцип заключается в простом добавлении промежуточного слоя между пользователем и сервером (AJAXдвигатель), черезXmlHttpRequestобъект для отправки асинхронных запросов на сервер, получения данных с сервера, а затем использованияjavascripт работатьDOMИ обновить страницу. Асинхронные действия пользователя и ответы сервера. Наиболее важным шагом в этом является получение данных запроса с сервера.
AjaxВ процессе участвуют толькоJavaScript,XMLHttpRequestа такжеDOM.XMLHttpRequestдаajaОсновной механизм x

 // 1. 创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 连接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }

Каковы преимущества и недостатки ajax?

преимущество:
- Благодаря асинхронному режиму пользовательский опыт улучшается.
- Оптимизируйте передачу между браузером и сервером, уменьшите количество ненужных циклов передачи данных и уменьшите использование полосы пропускания.
- AjaxЗапуск на стороне клиента берет на себя часть работы, изначально взятой на себя сервером, что снижает нагрузку на сервер при большом количестве пользователей.
- AjaxМожет быть достигнуто динамическое отсутствие обновления (частичное обновление).
недостаток:
- безопасный вопросAJAXРаскрывает детали взаимодействия с сервером.
- Поддержка поисковых систем относительно слабая.
- Не легко отлаживать.

10, как решить междоменные проблемы?

jsonp,iframe,window.name,window.postMessage, Установить прокси-страницу на сервере

11. Как сделать модульную разработку?

Выполнение функции немедленно, без раскрытия закрытых членов

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

12. Какие есть способы асинхронной загрузки JS?

отложить, только поддерживаетIE
async:
Создайтеscript, вставленный вDOM, после загрузкиcallBack

13. Какие операции вызовут утечку памяти?

Утечка памяти — это любой объект, который сохраняется после того, как он вам больше не нужен или больше не нужен.
setTimeoutИспользование строки вместо функции в качестве первого параметра приведет к утечке памяти
Неправильное использование замыканий

14. В чем разница между XML и JSON?

объем данных
- JSONотносительно于XMLДругими словами, чем меньше размер данных, тем выше скорость передачи.
- JSONJavaScript
- JSONXML
- JSONXML

15. Расскажите о своих мыслях о webpack

WebPackэто инструмент для упаковки модулей, вы можете использоватьWebPackУправляйте зависимостями модулей и компилируйте статические файлы, необходимые для экспорта модулей. Управляется, хорошо упаковываетWebиспользуется в разработкеHTML,Javascript,CSSИ различные статические файлы (изображения, шрифты и т.д.), чтобы сделать процесс разработки более эффективным. Для разных типов ресурсов,webpackИмеется соответствующий загрузчик модулей.webpackУпаковщик модулей проанализирует зависимости между модулями и, наконец, сгенерирует оптимизированные и объединенные статические ресурсы.

16. Расскажите о своем понимании AMD и Commonjs

CommonJSспецификация серверного модуля,Node.jsпринял эту спецификацию.CommonJSКанонический загрузочный модуль является синхронным, то есть только после завершения загрузки можно выполнять последующие операции.AMDСпецификация заключается в асинхронной загрузке модулей, что позволяет указывать функции обратного вызова.
AMDРекомендуемый стиль - возвращать объект как объект модуля,CommonJSстиль по парамmodule.exportsилиexportsНазначение атрибута для достижения цели предоставления объекта модуля

17. Общие принципы веб-безопасности и защиты

sqlПринцип впрыска
- поставивSQLВставить команду вWebОтправьте форму или введите строку запроса доменного имени или запроса страницы и, наконец, обманите сервер для выполнения вредоносных команд SQL.
В общем есть следующие
- Никогда не доверяйте вводу пользователя. Чтобы проверить ввод пользователя, вы можете использовать регулярные выражения или ограничить длину одинарных и двойных кавычек."-"конвертировать и т.д.
- Никогда не используйте динамическую сборку SQL, используйте параметризованныйSQLИли напрямую используйте хранимые процедуры для доступа к данным
- Никогда не используйте подключения к базе данных с правами администратора, используйте отдельные подключения к базе данных с ограниченными правами для каждого приложения.
- Не храните конфиденциальную информацию в открытом виде, зашифруйте илиhashСбросьте пароли и конфиденциальную информацию

Принцип XSS и предотвращение

Xss(cross-site scripting)Атака означает, что злоумышленникWebВставка злонамеренного намерения на страницуhtmlэтикетка илиjavascriptкод.比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookieПользовательская личная информация; или злоумышленник добавил форум злонамеренной формы, когда пользователь представляет форму, но передаю информацию на сервер злоумышленника, а не изначально подумал пользователь доверенных сайтов

Методы предотвращения XSS

Прежде всего, необходимо тщательно проверить места ввода пользователем и переменные в коде на предмет длины и совпадения.”<”,”>”,”;”,”’”Дождитесь фильтрации символов, во-вторых, любой контент должен быть закодирован перед записью на страницу, чтобы избежать случайной записиhtml tagПолучить это. Успех на этом уровне может по крайней мере заблокировать более половины XSS-атак.

Есть ли разница между XSS и CSRF?

XSSЭто получение информации без предварительного знания кода и пакетов данных других пользовательских страниц.CSRFЭто заключается в том, чтобы завершить указанное действие от имени пользователя и необходимо знать код и пакеты данных других страниц пользователей. завершить один разCSRFатака, жертва должна последовательно выполнить два шага
Войдите на надежные сайтыAи генерировать локальноCookie
без выходаAбез посещения опасных сайтовB

Защита CSRF

серверная частьCSRFСпособов и способов много, но общая идея одна, то есть добавление псевдослучайных чисел на страницу клиента
Как пройти код подтверждения

18. Какие шаблоны проектирования вы использовали?

Заводской узор:
- Фабричный шаблон решает проблему повторного создания экземпляров, но есть и другая проблема — проблема идентификации, потому что нет способа
- Основным преимуществом является то, что связь между объектами может быть устранена, используя инженерные методы вместоnewключевые слова
Шаблон конструктора
- Метод использования конструктора не только решает проблему повторной инстанциации, но и решает проблему распознавания объектов Отличие этого режима от фабричного заключается в том, что
- Назначайте свойства и методы непосредственноthisобъект;

19. Почему существует ограничение по гомологии?

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

20. Разница между offsetWidth/offsetHeight, clientWidth/clientHeight и scrollWidth/scrollHeight

offsetWidth/offsetHeightвозвращаемое значение содержитcontent + padding + border, эффект такой же, как у e.getBoundingClientRect()
clientWidth/clientHeightВозвращаемое значение содержит толькоcontent + padding, если есть полосы прокрутки, такжеНе включает полосы прокрутки
scrollWidth/scrollHeightвозвращаемое значение содержитсодержимое + заполнение + размер переполняющего содержимого

21. Какие методы есть в javascript для определения объектов?

Литералы объекта:var obj = {};
Конструктор:var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

22. Распространенные проблемы совместимости?

png24В браузере iE6 появляются фоновые изображения, решение состоит в том, чтобы сделатьPNG8
браузер по умолчаниюmarginа такжеpaddingразные. Решение состоит в том, чтобы добавить глобальный*{margin:0;padding:0;}Объединить, но общая эффективность очень низкая, как правило, решается следующим образом:

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

IEВниз,eventобъект имеетx,yсвойства, но нетpageX,pageYАтрибуты
FirefoxВниз,eventобъект имеетpageX,pageYсвойства, но нетx,yАтрибуты.

22. Расскажите мне о своем понимании обещаний

согласно сPromise/A+Определение,PromiseЕсть четыре состояния:
- pending:исходное состояние, неfulfilledилиrejected.
- fulfilled:Успешная операция.
- rejected:неудачная операция.
- settled: PromiseБылfulfilledилиrejected, и неpending
Кроме того,fulfilledа такжеrejectedколлективноsettled
Promiseобъект используется для отложенного (deferred) и асинхронный (asynchronous) рассчитать

Конструктор обещаний

построитьPromise, самое основное использование выглядит следующим образом:

var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

Promiseэкземпляр владеетthenметод (сthenметод объекта, обычно называемыйthenable). Он используется следующим образом:

promise.then(onFulfilled, onRejected)

Получает две функции в качестве параметров, одну вfulfilledназывается, когдаrejectedвызывается, когда полученный параметрfuture,onFulfilledвести перепискуresolve, onRejectedвести перепискуreject

23. Как вы думаете, где лучше всего писать исходный код jQuery?

jqueryИсходный код инкапсулируется в самовыполняющееся окружение анонимной функции, что помогает предотвратить глобальное загрязнение переменных, а затем передается вwindowпараметр объекта, вы можете сделатьwindowОбъекты используются как локальные переменные, преимущество в том, что когдаjqueryдоступ вwindowобъекта, нет необходимости возвращать цепочку областей видимости в область видимости верхнего уровня, чтобы к объекту окна можно было получить доступ быстрее. Так же пройти вundefinedпараметр для сокращения поискаundefinedцепочка прицелов
jqueryНекоторые свойства и методы прототипа инкапсулированы вjquery.prototype, в целях сокращения имени ему присвоеноjquery.fn, что является очень образным способом написания
Есть некоторые методы массива или объекта, которые можно часто использовать,jQueryсохранить его как локальную переменную для более быстрого доступа
jqueryРеализованные цепные вызовы могут сэкономить код, и все они возвращают один и тот же объект, что может повысить эффективность кода.

24. vue, реагировать, угловой

Vue.js
один для созданияwebБиблиотека интерактивных интерфейсов, оптимизированнаяMVVM. Он использует двустороннюю привязку данных кViewслой иModelслои связаны. действительныйDOMИ инкапсуляция, и формат вывода абстрагируются отDirectivesа такжеFilters
AngularJS
является относительно полным интерфейсомMVVMFramework, включая шаблоны, двустороннюю привязку данных, маршрутизацию, модульность, сервисы, внедрение зависимостей и другие функции.Angularинструкция
react
ReactТолько чтоVIEWслойfacebookКомпания. Тот, что запущен для строительстваUIБиблиотека, обеспечивающая рендеринг на стороне сервера. использовалvirtual dom, так что производительность хорошая.

25. Сценарии применения Node

Функции:
- 1. ЭтоJavascriptРабочая среда
- 2. зависит отChrome V8движок для интерпретации кода
- 3. Ориентированность на события
- 4. НеблокирующийI/O
- 5, один процесс, один поток
преимущество:
- Высокий параллелизм (наиболее важное преимущество)
недостаток:
- 1. Поддерживать только одиночные核CPU, используется не полностьюCPU
- 2. Низкая надежность: при выходе из строя определенного звена кода рушится вся система.

26. Расскажите о своем понимании AMD и CMD.

CommonJSспецификация серверного модуля,Node.jsпринял эту спецификацию.CommonJSКанонический загрузочный модуль является синхронным, то есть только после завершения загрузки можно выполнять последующие операции.AMDСпецификация заключается в асинхронной загрузке модулей, что позволяет указывать функции обратного вызова.
AMDРекомендуемый стиль - возвращать объект как объект модуля,CommonJSстиль по парамmodule.exportsилиexportsНазначение атрибута для достижения цели предоставления объекта модуля

27. Какие операции вызовут утечку памяти?

Утечка памяти — это любой объект, который сохраняется после того, как он вам больше не нужен или больше не нужен.
setTimeoutИспользование строки вместо функции в качестве первого параметра приведет к утечке памяти
Замыкания, журналы консоли, циклы (цикл возникает, когда два объекта ссылаются друг на друга и сохраняют друг друга)

28. Какие есть методы отслеживания сессий в веб-разработке

cookie
session
urlпереписать
Спрятатьinput
ipадрес

29. Познакомьтесь с основными типами данных js

Undefined,Null,Boolean,Number,String

30. Какие есть встроенные объекты js?

ObjectдаJavaScriptродитель всех объектов в
Объект класса инкапсуляции данных:Object,Array,Boolean,Numberа такжеString
Другие объекты:Function,Arguments,Math,Date,RegExp,Error

31. Расскажите несколько основных правил написания JavaScript?

Не объявляйте несколько переменных в одной строке
пожалуйста, используйте===/!==сравниватьtrue/falseили числовое значение
Используйте замену литерала объектаnew Arrayэта форма
не используйте глобальные функции
Switchзаявление должно иметьdefaultветвь
IfОператоры должны использовать фигурные скобки
for-inСледует использовать переменную в циклеvarКлючевые слова явно ограничивают область действия, чтобы избежать ее загрязнения.

32, JavaScript есть несколько типов стоимости? Можете ли вы сделать карту памяти?

стек: примитивный тип данных (Undefined,Null,Boolean,Numbeдень,String)
Куча: ссылочные типы данных (объекты, массивы и функции)
Разница между двумя типами заключается в следующем: место хранения отличается;
Примитивные типы данных хранятся непосредственно в стеке (stack) в простом сегменте данных, который занимает мало места и имеет фиксированный размер, а также является часто используемыми данными, поэтому хранится в стеке;
Ссылочные типы данных хранятся в куче (heap) у объекта, занимающего большое пространство, размер не фиксирован, если хранить в стеке, это повлияет на производительность программы; эталонный тип данных хранит указатель в стеке, указатель указывает на начальный адрес сущность в куче. Когда интерпретатор ищет ссылочное значение, он сначала извлекает его
Адрес в стеке, получить сущность из кучи после получения адреса

33. Сколько способов javascript создает объекты?

javascriptПроще говоря, создание объектов — это не что иное, как использование встроенных объектов или различных пользовательских объектов.Конечно, вы также можете использоватьJSON; но есть много способов написать это, а также можно смешивать

Буквальный способ объекта

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

использоватьfunctionдля имитации конструктора без аргументов

 function Person(){}
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

использоватьfunctionЧтобы смоделировать конструктор параметров для достижения (сthisключевое слово определяет атрибут контекста конструкции)

function Pet(name,age,hobby){
       this.name=name;//this作用域：当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法

Использовать фабричный метод для создания (встроенный объект)

var wcDog =new Object();
     wcDog.name="旺财";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

Создание с прототипированием

function Dog(){

     }
     Dog.prototype.name="旺财";
     Dog.prototype.eat=function(){
     alert(this.name+"是个吃货");
     }
     var wangcai =new Dog();
     wangcai.eat();

Создать с помощью микса

 function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我现在卖"+this.price+"万元");
      }
    var camry =new Car("凯美瑞",27);
    camry.sell();

34. Что делает eval?

Его функция состоит в том, чтобы разобрать соответствующую строку наJSкод и запустить
следует избегатьeval, небезопасно, очень требовательно к производительности (2раз, после анализа вjsоператор, выполненный один раз)
Зависит отJSONМожет использоваться при преобразовании строк в объекты JSON.eval，var obj =eval('('+ str +')')

35. В чем разница между null и undefined?

undefinedУказывает, что это значение не существует.
undefined: это необработанное значение, означающее «нет» или «отсутствующее значение», то есть здесь должно быть значение, но оно еще не определено. вернется при попытке прочитатьundefined
Например, когда переменная объявлена, но ей не присвоено значение, она равнаundefined
nullУказывает, что объект определен и значение равно null.
null: это объект (пустой объект, без свойств и методов)
Например, как параметр функции означает, что параметр функции не является объектом;
Проверятьnull, обязательно используйте===,потому что==неразлучныйnullа также undefined

36. Каков ответ ["1", "2", "3"].map(parseInt)?

[1, NaN, NaN]потому чтоparseIntтребует два параметра(val, radix),вradixУказывает систему счисления, используемую для синтаксического анализа.
mapпрошел дальше3индивидуальный(element, index, array),соответствующийradixОшибка синтаксического анализа.

37. Что означает "использовать строго" в коде javascript? В чем разница между его использованием?

use strictэтоECMAscript 5Добавлен (строгий) режим запуска, который заставляет Javascript выполняться в более строгих условиях, что делаетJSкодирует более нормализованный шаблон, устраняяJavascriptНекоторые необоснованные и неточные грамматические моменты уменьшают некоторые странности поведения

38. Понимание JSON?

JSON(JavaScript Object Notation)это облегченный формат обмена данными
это основано наJavaScriptПодмножество. Формат данных прост, удобен для чтения и записи и занимает небольшую полосу пропускания.
JSONПреобразование строки в объект JSON:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

JSONОбъект преобразован в строку JSON:

var last=obj.toJSONString();
var last=JSON.stringify(obj);

39. Какие есть способы ленивой загрузки js?

deferа такжеasync, динамически созданныйDOMметод (наиболее используемый), асинхронная загрузка по запросуjs

40, синхронная и асинхронная разница?

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

41. Прогрессивное улучшение и изящная деградация

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

42. отложить и асинхронно

deferпараллельная загрузкаjsфайл, будет следовать инструкциям на страницеscriptПоследовательное выполнение тегов
asyncпараллельная загрузкаjsфайл, загрузка завершается и выполняется немедленно и не следует инструкциям на страницеscriptПоследовательное выполнение тегов

43. Расскажите об ограничениях строгого режима

Переменные должны быть объявлены перед использованием
Параметры функции не могут иметь атрибуты с одинаковыми именами, иначе будет сообщено об ошибке
нельзя использоватьwithутверждение
запретитьthisуказывает на глобальный объект

44. В чем разница между атрибутом и свойством?

attributeдаdomэлемент в документе какhtmlАтрибут метки;
propertyто естьdomэлемент вjsв собственности, как объект имеет.
дляhtmlДля стандартных свойств ,attributeа такжеpropertyОн синхронизирован, он будет обновляться автоматически
Но для пользовательских свойств они не синхронизированы.

45. Расскажите о своем понимании ES6

Новая строка шаблона (дляJavaScriptПредусмотрена простая интерполяция строк)
стрелочная функция
for-of(Используется для перебора данных — например, значений в массиве.)
argumentsОбъекты можно прекрасно заменить неопределенными параметрами и параметрами по умолчанию.
ES6поставь пromiseобъектов в спецификацию, предоставляя собственныйPromiseобъект.
повысилсяletа такжеconstкоманда, используемая для объявления переменных.
Добавлена область действия блока.
letКоманда фактически добавляет область на уровне блоков.
Также происходит введениеmoduleконцепция модуля

46. Как написать класс в ECMAScript6, почему появляется что-то вроде класса?

Этот синтаксический сахар позволяет иметьOOPПростые люди приступают к работе быстрееjs, хотя бы официальная реализация
но знаком сjsна людей эта штука не оказывает большого влияния;Object.creat()Получить наследство, чемclassгораздо яснее

47. Что такое объектно-ориентированное программирование и процедурное программирование, их сходства и различия, преимущества и недостатки.

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

48. Идеи объектно-ориентированного программирования

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

49. Понимание веб-стандартов, удобство использования, доступность

Юзабилити: насколько продукт прост в использовании, может ли пользователь выполнить задачу, насколько он эффективен и насколько хорош субъективный опыт пользователя в процессе — это качество продукта с точки зрения пользователя. Хорошее удобство использования означает высокое качество продукции и является основой конкурентоспособности предприятия.
Доступность: удобочитаемость и понимание веб-контента для пользователей с ограниченными возможностями.
Ремонтопригодность (Maintainability): обычно включает два уровня, один — это стоимость быстрого обнаружения и решения проблемы, когда в системе возникла проблема, а низкая стоимость означает хорошую ремонтопригодность. Во-вторых, легко ли понять код, легко ли его модифицировать и улучшить.

50. Как судить о массиве через JS?

instanceofметод
- instanceofОператоры — это свойства, используемые для проверки того, находится ли объект в конструкторе прототипов цепочки прототипов.

var arr = []; 
arr instanceof Array; // true

constructorметод
- constructorСвойство возвращает ссылку на функцию массива, создавшую этот объект, которая является конструктором, соответствующим возвращаемому объекту.

var arr = []; 
arr.constructor == Array; //true

Самый простой способ
- Это написаниеjQueryВ настоящее время используется

Object.prototype.toString.call(value) == '[object Array]'
// 利用这个方法，可以写一个返回数据类型的方法
var isType = function (obj) {
     return Object.prototype.toString.call(obj).slice(8,-1); 
}

ES5новый методisArray()

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

51. Расскажите о разнице между let и var?

letДля команды нет подъема переменной, если вletЕсли использовать раньше, это вызовет ошибку
Если блок существуетletа такжеconstкоманда, она сформирует объемлющую область
Повторяющиеся объявления не допускаются, поэтому параметры не могут быть повторно объявлены внутри функции.

52. В чем разница между map и forEach?

Метод forEach является самым основным методом, который заключается в обходе и цикле.По умолчанию есть три параметра: элемент содержимого пройденного массива, индекс индекса массива и текущий массив пройденного массива.
Основное использование метода map такое же, как и для forEach, но другое, он возвращает новый массив, поэтому в обратном вызове должно быть возвращаемое значение, если нет, он вернет undefined

53. Расскажите о функциональном программировании, которое вы понимаете?

Проще говоря, «функциональное программирование» — это «парадигма программирования», то есть методология написания программ.
Он имеет следующие свойства: замыкания и функции высшего порядка, ленивые вычисления, рекурсия, функции являются «первоклассными гражданами», используются только «выражения».

54. Расскажите о разнице между стрелочными функциями и обычными функциями?

Объект this в теле функции — это объект, в котором он определен, а не объект, в котором он используется.
Нельзя использовать как конструктор, то есть нельзя использовать новую команду, иначе будет выброшена ошибка
Вы не можете использовать объект arguments, которого нет в теле функции. Если вы хотите использовать его, вы можете вместо этого использовать параметры Rest.
Команду yield нельзя использовать, поэтому функции стрелок нельзя использовать в качестве функций генератора.

55. Говорите об указании this в функции?

Указание this не может быть определено, когда функция определена.Только когда функция выполняется, можно определить, на кого this указывает.Фактически, конечная точка this - это объект, который ее вызвал.
«Сущность языка Javascript», вероятно, выражена в четырех вызовах:
шаблон вызова метода
шаблон вызова функции
Шаблон вызова конструктора

graph LR
A-->B

применить/вызов режима вызова

56. Как реализовано асинхронное программирование?

Перезвоните
- Достоинства: Простой, понятный
- Недостатки: неудобен в обслуживании, высокая связанность кода
Мониторинг событий (с использованием режима управления временем, в зависимости от того, происходит ли событие):
- Преимущества: простота понимания, можно связать несколько событий, для каждого события можно указать несколько функций обратного вызова.
- Недостатки: событийный, процесс недостаточно ясен
Публикация/подписка (шаблон Observer)
- Аналогично мониторингу событий, но вы можете использовать «центр сообщений», чтобы узнать, сколько сейчас издателей и подписчиков.
Объект обещания
- Преимущества: метод then можно использовать для записи цепочки, функция обратного вызова при ошибке может быть записана;
- Недостатки: относительно сложно написать и понять
Функция генератора
- Достоинства: обмен данными внутри и вне тела функции, механизм обработки ошибок
- Недостаток: управление процессом неудобно
асинхронная функция
- Преимущества: встроенный исполнитель, лучшая семантика, более широкая применимость, возврат Promise, четкая структура.
- Недостаток: механизм обработки ошибок

57. Знание нативного Javascript

Типы данных, операции, объекты, функции, наследование, замыкания, области действия, цепочки прототипов, события,RegExp,JSON,Ajax,DOM,BOM, утечка памяти, междоменный доступ, асинхронная загрузка, шаблонизатор, внешний интерфейсMVC, маршрутизация, модульность,Canvas,ECMAScript

58. Разница между анимацией Js и анимацией CSS и соответствующая реализация

CSS3Преимущества анимации
- Будет немного лучше по производительности, браузер будетCSS3Сделайте некоторые оптимизации для анимации
- Код относительно прост
недостаток
- Недостаточно гибкий в управлении анимацией
- плохая совместимость
JavaScriptАнимация просто компенсирует эти два недостатка, возможность управления очень сильна, ею можно управлять и преобразовывать в одном кадре, она хорошо написана и полностью совместима.IE6, и мощный. Для некоторых сложных управляемых анимаций используйтеjavascriptбудет надежнее. При реализации некоторых небольших интерактивных эффектов учитывайте большеCSSБар

59. Методы обхода массивов и объектов JS и сравнение нескольких методов

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

for inцикл
forцикл
forEach
- здесьforEachДва параметра обратного вызова:value,index
- forEachНе могу перебрать объект
- IE не поддерживает этот метод;Firefoxа такжеchromeслужба поддержки
- forEachНедоступноbreak,continueвырваться из цикла и использоватьreturnэто пропустить этот цикл
Эти два метода должны быть очень распространены и часто использоваться. Но на практике оба метода имеют проблемы с производительностью.
В первом методеfor-inнужно проанализироватьarrayДля каждого свойства эта операция требует больших затрат производительности. используется вkeyОчень неэкономичен на известных массивах. Так что постарайтесь не использоватьfor-in, если вы не знаете, с какими свойствами иметь дело, например.JSONтакой объект
В режиме 2 длина массива проверяется при каждом выполнении цикла. Чтение свойств (длины массива) происходит медленнее, чем чтение локальных переменных, особенно когдаarrayхранятся вDOMэлементы, потому что каждое чтение будет сканировать связанные с селектором элементы на странице, скорость будет значительно снижена

60. Что такое глоток?

gulpЭто инструмент построения кода на основе потока в процессе разработки интерфейса и инструмент для создания проектов автоматизации; он может не только оптимизировать ресурсы веб-сайта, но и автоматизировать многие повторяющиеся задачи в процессе разработки с использованием правильных инструментов.
Основные концепции Gulp: потоки
Поток, говоря простым языком, представляет собой абстрактный инструмент для обработки данных, основанный на объектно-ориентированном подходе. В потоке определены некоторые основные операции по обработке данных, такие как чтение данных, запись данных и т. д. Программист выполняет все операции над потоком, не заботясь о реальном потоке данных на другом конце потока.
Gulp пытается максимально упростить задачу написания задач с помощью стратегии потока и кода вместо конфигурации.
Особенности глотка:
- легко использовать: Благодаря стратегии кода вместо конфигурации gulp делает простые задачи простыми, а сложные задачи управляемыми.
- Стройте быстроиспользоватьNode.jsБлагодаря возможностям потоковой передачи вы можете быстро создавать проекты и сокращать частыеIOдействовать
- легко учитьчерез наименьшееAPI,владелецgulpС легкостью встраивайте управление: как ряд потоковых конвейеров

61. Расскажите о принципе двусторонней привязки данных Vue.

vue.jsОн использует метод захвата данных в сочетании с моделью «издатель-подписчик».Object.defineProperty()захватить каждое имуществоsetter,getter, публиковать сообщения подписчикам при изменении данных и запускать соответствующие обратные вызовы прослушивателя.

$jQuery

1. Как вы думаете, где лучше всего писать исходный код jQuery или zepto?

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

 (function( window, undefined ) {

         //用一个函数域包起来，就是所谓的沙箱

         //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

         //把当前沙箱需要的外部变量通过函数参数引入进来

         //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

        window.jQuery = window.$ = jQuery;

    })( window );

jQuery инкапсулирует некоторые свойства и методы прототипа в jquery.prototype.Чтобы сократить название, ему присвоен jquery.fn.Это очень яркий способ написания.
Есть некоторые методы массивов или объектов, которые часто используются, и jQuery сохраняет их как локальные переменные для повышения скорости доступа.
Сцепленные вызовы, реализованные jquery, могут сэкономить код, и все они возвращают один и тот же объект, что может повысить эффективность кода.

2. Как работает jQuery?

(function(window, undefined) {})(window);
jQueryиспользоватьJSФункция области действия, которая оборачивает себя выражением немедленного вызова, решает проблему загрязнения пространства имен и переменных.
window.jQuery = window.$ = jQuery;
Привяжите jQuery и $ к окну в закрытии, тем самым выставив jQuery и $ как глобальные переменные

3. К какому объекту относится this, возвращаемый методом инициализации jQuery.fn? Зачем возвращать это?

this, возвращаемый методом инициализации jQuery.fn, является объектом jQuery.
Пользователи могут использовать jQuery() или $() для инициализации объекта jQuery, нет необходимости динамически вызывать метод инициализации.

4. В чем разница между jQuery.extend и jQuery.fn.extend?

$.fn.extend()а также$.extend()даjQueryДля подключаемых модулей расширения предусмотрено два метода.
$.extend(object); // Добавляем "статический метод" (служебный метод) в jQuery

$.extend({
　　min: function(a, b) { return a < b ? a : b; },
　　max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3); //  2
$.max(4,5); //  5

$.extend([true,] targetObject, object1[ object2]);//Расширить целевой объект

var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"};
$.extend(settings, options);  // 注意：不支持第一个参数传 false
// settings == {validate:true, limit:5, name:"bar"}

$.fn.extend(json); // Добавляем «функцию-член» (метод экземпляра) в jQuery

$.fn.extend({
   alertValue: function() {
      $(this).click(function(){
        alert($(this).val());
      });
   }
});

$("#email").alertValue();

5. Каков принцип реализации копии атрибута jQuery (расширения) и как реализовать глубокую копию?

Неглубокая копия (копировать только ссылку на исходный объект)
var newObject = $.extend({}, oldObject);
Глубокая копия (рекурсивное копирование объекта, на который ссылается исходное свойство объекта)
var newObject = $.extend(true, {}, oldObject);

6. Как реализована очередь jQuery? Где можно использовать очереди?

В ядре jQuery есть набор методов управления очередью,queue()/dequeue()/clearQueue()Он состоит из трех методов.
В основном используется вanimate(),ajax, среди прочих событий, которые должны быть выполнены в хронологическом порядке

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}

// 入栈队列事件
$('#box').queue("queue1", func1);  // push func1 to queue1
$('#box').queue("queue1", func2);  // push func2 to queue1

// 替换队列事件
$('#box').queue("queue1", []);  // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);  // replace queue1

// 获取队列事件（返回一个函数数组）
$('#box').queue("queue1");  // [func3(), func4()]

// 出栈队列事件并执行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整个队列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue

7. В чем разница между bind(), live(), delegate() и on() в jQuery?

bindпривязать непосредственно к целевому элементу
liveРаспространение событий путем всплытия, по умолчаниюdocument, поддерживает динамические данные
delegateБолее точное мелкомасштабное использование прокси-сервера событий, производительность лучше, чем в реальном времени.
onявляется последним1.9Версия объединяет новый механизм привязки событий предыдущих трех способов.

8. Знаете ли вы пользовательские события? Что означает функция огня в jQuery и когда ее следует использовать?

События — это режим «публикация/подписка», пользовательские события — «публикация сообщений», а мониторинг событий — «подписка».
JS изначально поддерживает пользовательские события, примеры:

  document.createEvent(type); // 创建事件
  event.initEvent(eventType, canBubble, prevent); // 初始化事件
  target.addEventListener('dataavailable', handler, false); // 监听事件
  target.dispatchEvent(e);  // 触发事件

Функция огня в jQuery используется для вызова событий в пользовательском списке событий jQuery.

9. Каким методом jQuery объединяется с селектором Sizzle?

Sizzleселектор взятьRight To LeftСоответствующий шаблон , сначала поиск всех соответствующих тегов, а затем определение его родительского узла.
jQueryпройти через$(selecter).find(selecter);а такжеSizzleкомбинация селекторов

10. Как преобразовать массив в строку JSON в jQuery, а затем преобразовать его обратно?

// 通过原生 JSON.stringify/JSON.parse 扩展 jQuery 实现
 $.array2json = function(array) {
    return JSON.stringify(array);
 }

 $.json2array = function(array) {
    // $.parseJSON(array); // 3.0 开始，已过时
    return JSON.parse(array);
 }

 // 调用
 var json = $.array2json(['a', 'b', 'c']);
 var array = $.json2array(json);

11. Один объект jQuery может одновременно связывать несколько событий, как это реализовано?

  $("#btn").on("mouseover mouseout", func);

  $("#btn").on({
      mouseover: func1,
      mouseout: func2,
      click: func3
  });

12. Метод оптимизации для jQuery?

Кэшировать частые операцииDOMобъект
использовать как можно большеidселектор вместоclassСелектор
всегда из#idселектор для наследования
Максимально используйте цепные операции
использовать делегирование времениonпривязать событие
использоватьjQueryвнутренняя функцияdata()хранить данные
Используйте последнюю версиюjQuery

13. Анимация jQuery slideUp, когда мышь срабатывает в быстрой последовательности, анимация будет отставать и выполняться повторно, как с этим бороться?

Событие в инициирующем элементе настроено на отложенную обработку: используйтеJSРоднойsetTimeoutметод
Заранее остановите все анимации, когда сработает событие элемента, а затем выполните соответствующее событие анимации:$('.tab').stop().slideUp();

14. Как пользовательский интерфейс jQuery настраивает компоненты?

Через$.widget()Передайте имя компонента и объект-прототип для завершения
$.widget("ns.widgetName", [baseWidget], widgetPrototype);

15. В чем разница между jQuery и jQuery UI и jQuery Mobile?

jQueryдаJSБиблиотека, совместимая с различными браузерами ПК, в основном используется для более удобной обработкиDOM, события, анимация,AJAX
jQuery UIУстановленоjQueryНабор взаимодействий пользовательского интерфейса, эффектов, виджетов и тем в библиотеке.
jQuery MobileкjQueryФреймворк для создания «мобильных веб-приложений»

16. В чем разница между jQuery и Zepto? их соответствующие сценарии использования?

jQueryОсновная цель состоит в том, чтобыPC, совместимый со всеми основными браузерами. На мобильных устройствах `jQuery Mobile был запущен отдельно
Zeptoс начала位移动设备，相对更轻量级。它的API 基本兼容jQuery`, но не идеален для совместимости с браузером ПК

17. Особенности объектов jQuery

ТолькоJQueryобъект для использованияJQueryметод
JQueryобъект является объектом массива

$вопросы по программированию

1, напишите функцию общего слушателя событий

 // event(事件)工具集，来源：github.com/markyun
    markyun.Event = {
       
        // 视能力分别使用dom0||dom2||IE方式 来绑定事件
        // 参数： 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        }

2. Как определить, является ли объект массивом

function isArray(arg) {
    if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
    }
    return false;
}

3. Пузырьковая сортировка

Каждый раз сравнивайте два соседних числа, если последнее меньше первого, меняйте местами

var arr = [3, 1, 4, 6, 5, 7, 2];

function bubbleSort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for(var j = 0; j < arr.length - i - 1; j++) {
            if(arr[j + 1] < arr[j]) {
                var temp;
                temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

console.log(bubbleSort(arr));

4. Быстрая сортировка

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

var arr = [3, 1, 4, 6, 5, 7, 2];

function quickSort(arr) {
    if(arr.length == 0) {
        return [];    // 返回空数组
    }

    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }

    return quickSort(l).concat(c, quickSort(r));
}

console.log(quickSort(arr));

5. Напишите метод для определения длины строки в байтах.

Допущение: английский символ занимает один байт, а китайский — два байта.

function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

6. Использование привязки, и как реализовать функцию привязки и моменты, на которые следует обратить внимание

bindроль иcallа такжеapplyто же самое, разницаcallа такжеapplyзаключается в немедленном вызове функции, в то время какbindОн возвращается в функцию, а затем выполняется при ее вызове.
ПростойbindФункция реализована следующим образом

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

$другое

1. Расскажите о своем понимании рефакторинга

Рефакторинг веб-сайта: упростите структуру и улучшите читаемость без изменения внешнего поведения, сохраняя при этом согласованное поведение на интерфейсе веб-сайта. То есть оптимизировать веб-сайт без изменения пользовательского интерфейса и поддерживать согласованный пользовательский интерфейс при расширении.
Для традиционных веб-сайтов рефакторинг обычно заключается в следующем:
- лист(table) макет изменен наDIV+CSS
- Сделать внешний интерфейс веб-сайта совместимым с современными браузерами (для несовместимыхCSS, как и для IE6)
- Оптимизирован для мобильных платформ
- Таргетинг наSEOоптимизировать

2. Какой интерфейсный код хорош

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

3. Как вы понимаете должность front-end инженера? Как будет выглядеть его будущее?

Front-end — это программист, который ближе всего к пользователю, ближе, чем back-end, база данных, менеджер по продукту, эксплуатация и безопасность.
- Реализовать интерфейсное взаимодействие
- Улучшить пользовательский опыт
- С Node.js внешний интерфейс может реализовать некоторые вещи на стороне сервера.
Фронтенд — это тот программист, который находится ближе всего к пользователю, его способность — сделать так, чтобы продукт развивался с 90 баллов до 100 баллов или даже лучше.

с членами команды,UIДизайн, общение с продакт-менеджерами;
Хорошо сделанная структура страницы, рефакторинг страницы и пользовательский опыт;

4. В чем, по вашему мнению, отражается ценность предварительного проектирования?

Предоставление технической поддержки для упрощения использования пользователями (интерактивная часть)
Обеспечивает поддержку совместимости с несколькими браузерами.
Обеспечить поддержку улучшения скорости просмотра пользователей (производительность браузера)
Обеспечьте поддержку кросс-платформенных или других приложений, основанных на webkit или других механизмах рендеринга.
Обеспечить поддержку отображения данных (интерфейс данных)

5. Как вы обычно управляете своим проектом?

Ранняя команда должна определить глобальный стиль (globe.css), режим кодирования (utf-8) Ждать;
Привычки письма должны быть последовательными (например, основаны на унаследованном типе написания, написали один стиль линии);
Писатель стиля аннотации, каждый модуль размечается по времени (маркировка места вызова ключевого стиля);
Страницы аннотируются (например, начало и конец модуля страницы);
CSSа такжеHTMLПодпапки хранятся параллельно, и имена должны быть унифицированы (например,style.css);
JSХранить в подпапках, названных в честь этогоJSПреобладает английский перевод функции.
Изображение интегрированоimages.png png8Использование файлов формата — попробуйте интегрировать их вместе для дальнейшего управления