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

Базовые знания

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

связанные с HTML
связанные с CSS
JAVASCRIPT связанные
связанные с DOM
HTTP связанные
связанные с веб-пакетом

Html

html

В соответствии со структурой контента (семантика контента) выбор соответствующих тегов (семантика кода) удобен для разработчиков, чтобы они могли читать и писать более элегантный код, позволяя при этом сканерам браузера и машинам хорошо анализировать. При выборе этикеток придерживайтесь следующих рекомендаций: 1. Используйте как можно меньше бессемантических меток div и span; 2. Когда семантика не очевидна, когда можно использовать div или p, попробуйте использовать p, потому что p по умолчанию имеет верхний и нижний интервалы, что полезно для совместимости со специальными терминалами; 3. Не используйте теги чистого стиля, такие как: b, font, u и т. д., вместо этого используйте настройки css. 4. Текст, который необходимо выделить, можно включить в теги strong или em (стиль браузера по умолчанию, можно указать с помощью CSS, и они не используются), стиль strong по умолчанию — полужирный (не используйте b), em выделено курсивом (i не используется); 5. При использовании таблицы используйте заголовок для заголовка, thead для заголовка, tbody для основной части и tfoot для хвоста. Заголовок и общие ячейки следует различать, заголовок — th, а ячейка — td; 6. Поле формы должно быть обернуто тегом fieldset, а тег легенды должен использоваться для описания назначения формы; 7. Текст описания, соответствующий каждому тегу ввода, должен использовать тег метки, а путем установки атрибута id для ввода и настройки for=someld в теге метки связать текст описания с соответствующим вводом.

2 meta viewport

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/>       页面描述
<meta name=”keywords” content=””/>      页面关键词
<meta name=”author” content=”name, email@gmail.com”/>    网页作者
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏
<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏
<meta name=”full-screen” content=”yes”>              UC强制全屏
<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏
<meta name=”browsermode” content=”application”>   UC应用模式
<meta name=”x5-page-mode” content=”app”>    QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

3 canvas

Общие API: 1.fillRect(x,y,width,height) сплошной прямоугольник 2.strokeRect(x,y,width,height) полый прямоугольник 3.fillText("Привет мир",200,200); сплошной текст 4.strokeText("Hello world",200,300) пустой текст

CSS

1. Блочная модель

①т.е. блочная модель учитывает границы, отступы и саму себя (не поля), стандарт учитывает только размер своей формы Способ настройки css следующий:

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

②Несколько способов получить ширину и высоту:

dom.style.width/heightЭтот метод может получить только ширину и высоту, установленные встроенным стилем элемента dom, то есть, если стиль узла установлен в теге стиля или во внешнем файле CSS, dom не может быть получен этим метод широкий и высокий. dom.currentStyle.width/height Этот метод позволяет получить результат после рендеринга страницы, то есть независимо от того, каким образом задан стиль, его можно получить. Но этот метод поддерживается только браузером IE. window.getComputedStyle(dom).width/height Принцип этого метода такой же, как и 2. Этот метод совместим с большим количеством браузеров и более универсален. dom.getBoundingClientRect().width/height Этот метод получает ширину и высоту в соответствии с абсолютным положением элемента в окне просмотра. dom.offsetWidth/offsetHeight Этому нечего сказать, наиболее часто используемый также лучше всего совместим.

2. В чем разница между сбросом css и normalize.css

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

####3, очистить поплавок Непонятно, что флоат рухнет по высоте: высота родительского элемента у плавающего элемента адаптивная (когда родительский элемент не пишет высоту, после того, как дочерний элемент напишет флоат, высота родительского элемента рухнет )

очистить, чтобы очистить поплавок (добавить пустой метод div), чтобы добавить пустой div под плавающий элемент, и написать стиль css для элемента:{clear:both;height:0;overflow:hidden;}
Установите высоту родительского плавающего элемента;
Родитель плавает одновременно (необходимо добавить плавание к родительскому родственному элементу);
Для родителя задан встроенный блок, а его метод автоматического центрирования margin: 0 недействителен;
Используйте атрибут clear тега br;
Добавьте overflow:hidden к родителю, чтобы очистить плавающий метод;
Универсальный метод очистки после плавающей очистки псевдокласса (текущий основной метод, рекомендуется);

.float_div:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.float_div{
    zoom:1
}

4. Нарисуйте треугольник

#item {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid transparent;
    border-bottom: 50px solid blue;
    background: white;
}

JavaScript

1. Что такое функция немедленного исполнения? Какова цель использования непосредственной функции?

常见两种方式
1.(function(){...})()
  (function(x){
      console.log(x);
  })(12345)
2.(function(){...}())
  (function(x){
      console.log(x);
  }(12345))
作用 不破坏污染全局的命名空间，若需要使用，将其用变量传入如
（function(window){...}(window)）

2. асинхронно/ожидание

Асинхронная функция, предложенная ES7, наконец, дает JavaScript идеальное решение для асинхронных операций. Нет больше ада обратного вызова. Асинхронные функции — это синтаксический сахар для функций-генераторов. Используйте ключевое слово async, чтобы указать асинхронность, и используйте await внутри функции, чтобы указать асинхронность. По сравнению с генератором, улучшение асинхронной функции заключается в следующих четырех моментах:

Встроенный привод. Выполнение функции Generator должно полагаться на исполнителя, а функция Aysnc имеет своего исполнителя, а вызывающий метод такой же, как и у обычной функции;
лучшая семантика. async и await более семантичны, чем * и yield;
более широкая применимость. Согласно соглашению о модуле co, за командой yield может следовать только функция Thunk или объект Promise. За командой await асинхронной функции может следовать обещание или значение примитивного типа (число, строка, логическое значение, но это эквивалентно синхронной операции);
Возвращаемое значение — обещание. Возвращаемое значение асинхронной функции — это объект Promise, который более удобен, чем объект Iterator, возвращаемый функцией Generator, и может быть вызван непосредственно с помощью метода then().

Вот пример использования:

作用：异步代码的新方式
promise示例
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}
async/await示例
const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

HTTP

Общие коды состояния

2 в начале (запрос успешен) указывает на код состояния успешной обработки запроса

200 (Успех) Сервер успешно обработал запрос. Как правило, это означает, что сервер обслуживал запрошенную веб-страницу.
201 (Создано) Запрос выполнен успешно, и сервер создал новый ресурс.
202 (Принято) Сервер принял запрос, но еще не обработал его.
203 (Неавторизованная информация) Сервер успешно обработал запрос, но возвращенная информация могла быть получена из другого источника.
204 (Нет содержимого) Сервер успешно обработал запрос, но не вернул содержимого.
205 (Сброс содержимого) Сервер успешно обработал запрос, но не вернул содержимого.
206 (Частичное содержимое) Сервер успешно обработал частичный запрос GET.

3 в начале (запрос перенаправлен) указывает, что для выполнения запроса требуются дальнейшие действия. Обычно эти коды состояния используются для перенаправления.

300 (множественный выбор) Сервер может выполнять различные действия над запросом. Сервер может выбрать действие на основе запрашивающей стороны (пользовательского агента) или предоставить запрашивающей стороне список действий на выбор.
301 (Перемещено навсегда) Запрошенная веб-страница была окончательно перемещена в новое место. Когда сервер возвращает этот ответ (на запрос GET или HEAD), он автоматически перенаправляет запросчика в новое место.
302 (Временно перемещено). В настоящее время сервер отвечает на запрос с веб-страницы из другого места, но отправитель запроса должен продолжать использовать исходное расположение для будущих запросов.
303 (см. Другие местоположения) Сервер возвращает этот код, когда запрашивающая сторона должна использовать отдельные запросы GET для разных местоположений для получения ответа.
304 (не изменено) Запрошенная страница не была изменена с момента последнего запроса. Когда сервер возвращает этот ответ, содержимое веб-страницы не возвращается.
305 (использовать прокси). Запрашивающая сторона может использовать только прокси для доступа к запрошенной веб-странице. Если сервер возвращает этот ответ, это также указывает, что запрашивающая сторона должна использовать прокси.
307 (временное перенаправление). В настоящее время сервер отвечает на запрос с веб-страницы из другого места, но отправитель запроса должен продолжать использовать исходное расположение для будущих запросов.

4 (Ошибка запроса) Эти коды состояния указывают на то, что запрос мог быть выполнен неправильно, что помешало серверу его обработать.

400 (неверный запрос) Сервер не понимает синтаксис запроса.
401 (Неавторизованный) Запрос требует аутентификации. Сервер может вернуть этот ответ для веб-страниц, требующих входа в систему.
403 (Запрещено) Сервер отклонил запрос.
404 (не найдено) Сервер не может найти запрошенную веб-страницу.
405 (метод отключен) Отключает метод, указанный в запросе.
406 (не принято). На запрошенную веб-страницу не удалось ответить с запрошенными атрибутами содержимого.
407 (Требуется авторизация прокси-сервера) Этот код состояния похож на 401 (Неавторизовано), но указывает, что инициатор запроса должен авторизовать использование прокси-сервера.
408 (Тайм-аут запроса) Время ожидания сервера истекло во время ожидания запроса.
409 (Конфликт) Сервер обнаружил конфликт при выполнении запроса. Сервер ДОЛЖЕН включать в ответ информацию о конфликте.
410 (удалено) Сервер возвращает этот ответ, если запрошенный ресурс был безвозвратно удален.
411 (требуется допустимая длина). Сервер не принимал запросы без поля заголовка с длиной полезной нагрузки.
412 (Предварительное условие не выполнено) Сервер не выполнил одно из предварительных условий, установленных запрашивающей стороной в запросе.
413 (Слишком большой объект запроса) Сервер не может обработать запрос, так как объект запроса слишком велик для обработки сервером.
414 (Запрошенный URI слишком длинный) Запрошенный URI (обычно URL) слишком длинный для обработки сервером.
415 (неподдерживаемый тип носителя) Запрошенный формат не поддерживается запрошенной страницей.
416 (Запрошенный диапазон не соответствует требованиям) Сервер возвращает этот код состояния, если страница не может предоставить запрошенный диапазон.
417 (Ожидаемое значение не выполнено) Сервер не соответствует требованиям для поля заголовка запроса «Ожидается».

5 (Ошибка сервера) Эти коды состояния указывают на внутреннюю ошибку сервера при попытке обработать запрос. Эти ошибки могут быть ошибками самого сервера, а не запроса.

500 (Внутренняя ошибка сервера) Сервер обнаружил ошибку и не смог выполнить запрос.
501 (еще не реализовано) Сервер не может выполнить запрос. Этот код может быть возвращен, например, когда сервер не распознает метод запроса.
502 (Bad Gateway) Сервер, выступающий в роли шлюза или прокси, получил недопустимый ответ от вышестоящего сервера.
503 (Сервис недоступен) Сервер в настоящее время недоступен (из-за перегрузки или простоя на техническое обслуживание). Обычно это лишь временное состояние.
504 (Время ожидания шлюза) Сервер действует как шлюз или прокси, но своевременно не получил запрос от вышестоящего сервера.
505 (версия HTTP не поддерживается) Сервер не поддерживает версию протокола HTTP, используемую в запросе.

Разница между GET и POST

Строка запроса, заголовок запроса, детали тела запроса

Среди них 1, 2, 3 представляют строки запроса, 4 тела запроса и 5 тел запроса.

webpack

Объем упаковки

Для уменьшения упаковочного объема упаковки оптимизация может быть проведена по следующим аспектам:

Извлекайте сторонние библиотеки или импортируйте сторонние библиотеки, ссылаясь на внешние файлы.
Плагин сжатия кода UglifyJsPlugin
Сервер включает сжатие gzip
Загружать файлы ресурсов по запросу
Оптимизация исходной карты в devtool
Разделите файл css и упакуйте его отдельно
Удаление ненужных подключаемых модулей обычно вызвано тем, что один и тот же набор файлов конфигурации используется в среде разработки и в производственной среде.

Эффективность упаковки

Среда разработки создается поэтапно, что позволяет выполнять горячие обновления.
Среда разработки не выполняет бессмысленной работы, такой как извлечение css и вычисление хэша файла и т. д.
настроить инструмент разработки
Выберите соответствующий загрузчик, отдельный загрузчик для открытия кеша, например, babel-loader
Сторонняя библиотека использует метод импорта
Извлечь общедоступный код
Оптимизировать путь поиска при построении
Модульное введение необходимых деталей

Loader

Загрузчик — это модуль узла, который выводит функцию. Эта функция вызывается, когда ресурс необходимо преобразовать с помощью этого загрузчика. Кроме того, эта функция может получить доступ к API загрузчика через предоставленный ей контекст this.

module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join(''); 
  //返回JavaScript源码，必须是String或者Buffer
  return `module.exports = '${result}'`;
}
使用
{
    test: /\.txt$/,
    use: [
        {
            './path/reverse-txt-loader'
        }
    ]
},

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

Общие вопросы интервью

1. Как добавлять, удалять, перемещать, копировать, создавать и находить узлы?

① Создайте новый узел

createDocumentFragment  //创建新DOM片段
createElement //创建一个元素
createTextNode //创建一个文本节点

②Добавить удалить заменить вставить

appendChild() //添加
removeChild //移除
replaceChild //替换
insertBofore //插入

③Найти

getElementsByTagName() //通过标签名查找
getElementsByName() //通过元素的name属性查找
getElementById() //通过元素的id查找

2. Как понимать замыкания

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

Роль замыканий: ① Чтение переменных внутри других функций ②Переменные хранятся в памяти

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

3. Разница между sessionStorge, localStorge, cookie, веб-хранилищем

① Размер хранилища данных куки: 4kb веб-хранилище: 5 МБ

② Срок хранения данных cookie: в соответствии с установленным вами временем sessionStorage: недействительно после закрытия окна

localStorage: действует постоянно, если js не удален или браузер не удален. ③Область Файлы cookie и localStorage совместно используются в одном окне и браузере, а sessionStorage — только на одной вкладке.

4. Укажите разницу между загрузкой документа и готовностью документа?

готово: структура документа страницы загружена, за исключением нетекстового содержимого, такого как изображения и видео. load: загружаются все элементы страницы готовность быстрее загрузки

5. Оптимизация производительности сайта

Оптимизация производительности веб-сайта в основном оптимизируется по следующим аспектам: ① Сжатие слияния изображений js css файла ресурсов ②Сократите операции со страничным домом.Если операций много, вы можете рассмотреть возможность использования виртуального дома ③Сократить HTTP-запросы ④ Используйте cdn для ускорения Роль cdn: cdn может обрабатывать 70-95% трафика всего веб-сайта, тем самым решая параллелизм веб-сайта.Проще говоря, кэшировать контент в разных местах, а затем направлять запросы пользователей в ближайший кеш. с помощью таких технологий, как балансировка нагрузки. Контент получается с сервера для повышения скорости отклика пользователей, обращающихся к веб-сайту. ⑤ Уменьшить размер файла cookie

6. Кратко опишите действия по вводу URL из адресной строки браузера для отображения страницы

Основными процессами или этапами являются: ① В соответствии с запрошенным URL-адресом браузер отправляет его в DNS для разрешения доменного имени, находит реальный IP-адрес и передает его для разрешения доменного имени. ② Сервер передает данные, возвращенные после завершения внутренней обработки, а браузер получает файлы HTML, CSS, изображения JS и т. д. ③ Браузер анализирует загруженные ресурсы и устанавливает соответствующую внутреннюю структуру данных. ④Разбор html, создание дерева домов, порядок сверху вниз ⑤ Анализ css, приоритет: настройка браузера по умолчанию

7. Общие коды состояния HTML и их значения

1XX: Код статуса информации 100 Продолжить Продолжить, как правило, при отправке почтового запроса сервер возвращает эту информацию после отправки заголовка http, указывающего на подтверждение, а затем отправляет информацию о конкретном параметре.

2XX: код состояния успеха 200 OK Нормальная информация о возврате 201 Created Запрос выполнен успешно, и сервер создал новый ресурс 202 Accepted Сервер принял запрос, но еще не обработал его.

3XX: перенаправление 301 Перемещено навсегда Запрошенная страница была окончательно перемещена в новое место. 302 Найдено временное перенаправление. 303 См. Другое Временное перенаправление и всегда используйте GET для запроса нового URI. 304 Not Modified Запрошенная страница не была изменена с момента последнего запроса.

4XX: ошибка клиента 400 Bad Request Сервер не понимает формат запроса, и клиент НЕ ДОЛЖЕН пытаться снова сделать запрос с тем же содержимым. 401 Unauthorized Запрос не авторизован. 403 Запрещено Запрещено. 404 Not Found Ресурс не найден, как сопоставить URI.

5ХХ: ошибка сервера 500 Internal Server Error Самая распространенная ошибка на стороне сервера. 503 Служба недоступна Сервер временно не может обработать запрос (возможно, из-за перегрузки или технического обслуживания).

8. Понимание ядра браузера

В основном делится на движок рендеринга и движок js. Механизм рендеринга: он в основном отвечает за получение веб-страниц (html, xml, изображения и т. д.), организацию информации и рендеринг страниц с помощью css, а также расчет режима отображения веб-страниц.Разные ядра браузеров интерпретируют синтаксис веб-страниц по-разному, поэтому эффект рендеринга тоже будет другим, поэтому нам нужно сделать обработку совместимости.

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

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

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

Добавлен холст, видео, аудио, навигация, раздел, нижний колонтитул, заголовок и другие элементы. Элементы управления формы, календарь, дата, время, электронная почта, URL-адрес, поиск Технология хранения: localStorage, sessionStorage и т. д. Новые технологии: вебворкер, вебсокет, геолокация

10. Недостатки iframe

①iframe заблокирует событие загрузки страницы ②Поисковые системы не могут интерпретировать страницы iframe, что не способствует поисковой оптимизации. ③ iframe и главная страница имеют общий пул соединений, но у браузера есть ограничения на ссылки одного домена, поэтому это повлияет на параллельную загрузку страницы. ④Если вы хотите обойти две вышеупомянутые проблемы, вы можете добавить значение src в iframe через динамическое восстановление js.

11. Веб-стандарты и стандарты w3c

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

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

Разница между TML и XHTML в основном делится на два аспекта: разница в функциях и разница в привычках письма.

Что касается функциональной разницы, основная причина заключается в том, что XHTML совместим с основными браузерами, мобильными телефонами и КПК, и браузеры могут быстро и правильно компилировать веб-страницы.

Поскольку синтаксис XHTML более строгий, если вы пишете HTML и привыкли к свободной структуре, вам нужно обратить внимание на правила XHTML.

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

Doctype находится в начале документа и используется для указания парсеру браузера типа документа. Строгий режим js запускается и верстается в соответствии с самыми высокими стандартами, поддерживаемыми браузерами. Неразборчивый режим — это режим совместимости.Если совместимость страницы плохая, вы можете выбрать этот режим, чтобы макет страницы не разбрасывался и не мог работать на сайте.

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

Встроенный элемент: a b span img input select strong Элементы уровня блока: div ul li ol dl dt dd h1 h2 h3 p Пустой элемент: мета-ссылка br hr Элементы блочного уровня находятся в одной строке, а встроенные элементы объединены в одну строку.

15. Что такое глобальные атрибуты html

class: установить идентификатор класса для элемента data-**: добавить пользовательские атрибуты к элементам draggable: установите, можно ли перетаскивать элемент id: идентификатор элемента, этот же идентификатор уникален в пределах документа стиль: стиль элемента заголовок: переместите мышь вверх, чтобы отобразить информацию

16. Разница между холстом и svg

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

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

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

преимущество:①Уменьшить количество HTTP-запросов и значительно повысить скорость загрузки страниц; ② Увеличьте количество повторений информации об изображении, улучшите степень сжатия и уменьшите размер изображения; ③Изменять стиль удобно, для этого вам нужно только изменить цвет или стиль на одном или нескольких изображениях;

недостаток:① Объединять изображения проблематично; ②Сложно поддерживать, изменение изображения может потребовать изменения макета всего изображения и стиля;

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

Как правило, их роль заключается в том, чтобы сделать элемент невидимым. Разница в том, что: display:none заставляет элемент полностью исчезнуть из дерева dom и не занимать места при рендеринге. видимость: скрыто не приведет к тому, что элемент исчезнет из дерева рендеринга, и он по-прежнему будет занимать определенное место, но содержимое не будет видно.

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

1.link — это способ html, @import — способ css 2.link в наибольшей степени поддерживает параллельную загрузку, а слишком большая вложенность @import приводит к последовательной закачке 3. ссылка может указать стили-кандидаты через rel="alternate stylesheet" 4. В целом: ссылка лучше, чем @import

20. Несколько способов очистить поплавок

1.clear:оба, добавить пустой div метки 2. Родительский div определяет псевдоклассы: after и zoom 3. Родительский div определяет overflow: hidden 4. Родительский div также является плавающим, и необходимо определить ширину 5. Добавьте тег br в конце clear:both

Например:

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{display:inline-table}
.clearfix{height:1%}
.clearfix{display:block;*zoom:1}

21. Зачем инициализировать стиль css

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

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

Основные новые функции:

Добавлены различные селекторы css
закругленный радиус границы
Многоколоночный макет
тени и отражения
Текстовые эффекты
Линейный градиент
вращать преобразование
эффект анимации

23. Представьте блочную модель css

Есть два типа: блочная модель IE, блочная модель W3C; Блочная модель: содержимое, отступы, поля, границы; Отличие: содержательная часть IE (младшая версия) учитывает границы и отступы;

24. Каков приоритетный алгоритм css

Приоритет: !important > id > class > tag И важный имеет более высокий приоритет, чем встроенный.

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

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

26. Расскажите о своем понимании действия по цепочке

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

27. js прототип, каковы характеристики цепочки прототипов

Каждый объект будет инициализировать свойство внутри, прототип (прототип).Когда мы обращаемся к свойству объекта, если у объекта нет этого свойства, то он пойдет к прототипу, чтобы найти его, и тогда у прототипа есть свой собственный прототип , просто продолжайте искать его, это концепция цепочки прототипов.

28. Что такое делегирование события, делегирование события

Если у нас есть список ul с 4 li в нем, мы можем привязать событие click к li, но мы также можем привязать его к их родительскому узлу ul, который привязывает событие к родительскому узлу, а не к методу события дочернего узла: называется делегированием событий.

29. Расскажите о своем понимании этого

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

30. Что такое событийная модель

Существует 3 этапа процесса, в котором происходят события, определенные в w3c: Фаза захвата (захват), фаза цели (targetin), фаза барботирования (пузырь)

31. Преимущества и недостатки ajax

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

недостаток:Вопросы безопасности AJAX раскрывает детали взаимодействия с сервером. Поддержка поисковых систем относительно слабая. Не легко отлаживать.

32. Как решить междоменные проблемы

К междоменным проблемам можно получить доступ из jsonp, iframe,window.name, window.postMessage, настройка прокси страницы на сервере и т.д. Как правило, междоменный доступ разрешен фоновыми настройками.

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

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

Кратко опишите vue, react, angular

1. Угловые особенности: Реализуйте набор правил компиляции шаблонов самостоятельно, изменения данных зависят от грязных проверок, Основные свойства включают в себя: двустороннюю привязку данных, базовые директивы шаблона, пользовательские директивы, проверку формы, операции маршрутизации, внедрение зависимостей, фильтры, встроенные службы, настраиваемые службы, компоненты и модули. Низкая эффективность работы, метод обнаружения изменений данных. Изучение angular вынуждает вас изучать определенные предварительные загрузки, это стоит дорого, и код выглядит чистым. Внедрение зависимостей — шаблон, в котором один объект предоставляет зависимости другому объекту (клиенту). Приводит к большей гибкости и чистоте кода. Angular лучше всего подходит для одностраничных приложений (SPA), поскольку он может быть слишком раздутым для микросервисов. Фреймворк относительно раздут, и каждый раз, когда вы используете функцию, нужно вводить множество вещей. Подсказки об ошибках Angular недостаточно ясны и очевидны.Младшим разработчикам трудно понять подсказки об ошибках Angular. (Лично я считаю это самым большим недостатком. Я столкнулся со многими ямами, когда узнал об этом), и трудно найти ошибки. Идея объектно-ориентированного программирования, Angular — это интерфейсный фреймворк, разработанный бэкенд-разработчиками. Подробное сравнение: разница между React и Vue

2. Особенности реакции: Односторонняя привязка: сначала обновляется модель, затем визуализируются элементы пользовательского интерфейса, и данные передаются в одном направлении, что упрощает отладку. Код избыточен, различные жизненные циклы слишком громоздки, и его трудно запомнить в начале. Используется виртуальный DOM. (Я не очень хорошо понимал эту концепцию в начале моего понимания виртуального DOM. Я предлагаю вам прочитать книгу [Углубленный технологический стек REACT] для хорошего объяснения) Лучше для больших приложений и лучшей тестируемости Универсальное веб-приложение и приложение для мобильных устройств Большая экосистема, больше поддержки и лучшие инструменты

3. Возможности Vue Гибкий выбор шаблонов и функций рендеринга Простой синтаксис и конфигурация проекта Более быстрый рендеринг и меньший размер четырехугольника

35.Что такое оценка

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

36. Разница между null и undefined

undefine: Указывает, что значение не существует, если переменная объявлена без присвоения.null: Переменная определена и назначена, но когда она пуста, нет метода и значения атрибута. При проверке null обязательно используйте === , потому что == не может отличить null от undefined

37. Расскажите о своем понимании json

JSON — это аббревиатура от JavaScript Object Notation или JavaScript Object Notation, который представляет собой облегченный формат обмена данными, который легко читать и писать, а также легко анализировать и генерировать на машине. JSON — это синтаксис для хранения и обмена текстовой информацией, аналогичный XML. JSON использует полностью независимый от языка текстовый формат, и его языковой формат аналогичен языковому семейству C. Эти функции также делают JSON идеальным языком обмена данными.

Преобразование строки 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);

38. Разница между синхронным и асинхронным

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

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

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

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

атрибут — это атрибут, который элемент dom имеет в документе в виде html-тега; Свойство — это свойство, которое элемент dom имеет как объект в js.

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

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

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

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

async/await — это новый способ написания асинхронного кода, предыдущий метод имеет функции обратного вызова и обещания. async/await реализован на основе Promise, его нельзя использовать для обычных callback-функций. async/await, как и Promises, неблокирует. async/await делает асинхронный код похожим на синхронный код, где и происходит его волшебство.

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

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

43. Расскажите о своем понимании промисов.

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

Объекты промисов имеют следующие две характеристики:

На состояние объекта не влияет внешний мир.Объект Promise представляет собой асинхронную операцию и имеет три состояния: Pending (в процессе), Resolved (завершено, также известное как Fulfilled) и Rejected (сбой).
Однажды состояние изменилось, оно больше не изменится, и этот результат можно получить в любой момент.