Front End от начального до среднего (с ответами)

опрос

В последнее время я брал интервью у многих фронтендов 1-2 года, у меня есть несколько вопросов и ответов в интернете и я их разослал, надеясь всем помочь~

CSS-статьи

Шрифт для мобильного браузера IOS

Измените свойство -webkit-font-smoothing.

оказаться:-webkit-font-smoothing: none: 无抗锯齿-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

Как сделать текст поддержки Chrome меньше 12 пикселей?

Наш подход:

Для ядра Google Chrome добавьте префикс webkit и используйтеtransform:scale()Это свойство масштабируется!p span {font-size:10px;-webkit-transform:scale(0.8);display:block;}

Препроцессор CSS (Sass/Less/Postcss)

Принцип препроцессора CSS: Это CSS-подобный язык, скомпилированный Webpack в удобочитаемый для браузера настоящий CSS.

Поверх этого уровня компиляции CSS можно наделить все более и более мощными функциями.Операторы циклов с вложенными переменными Условные операторы Автоматическое преобразование единиц префикса Повторное использование миксина

JS

Как сжать сайт js и css? Какие существуют методы?

Очки концептуальных знаний:Сжать js/css онлайн

Вопрос HTTP-запроса, из каких 3 частей состоит информация HTTP-запроса?

  1. Протокол URI метода запроса/версия (пример: GET/haorooms.jspHTTP/1.1)
  2. Заголовок запроса (например: Accept:image/gif.image/jpeg./Accept-Language: zh-cn Connection: Keep-Alive Host: localhost и т. д.)
  3. тело запроса

Проблемы с оптимизацией производительности внешнего интерфейса. Как вы решаете проблемы с производительностью внешнего интерфейса?

Ууууу.Хороших номеров.com/post/Web_New Years…и дополнение для оптимизации производительности переднего плана

Напишите самый простой способ дедупликации JS (наиболее сложная область)

  • Новый метод Set() в es6
let array = [0, 3, 4, 5, 3, 4, 7, 8, 2, 2, 5, 4, 6, 7, 8, 0, 2, 0, 90];
[...new Set(array)]
  • Массив filter() из es5
[1, 3, 4, 5, 1, 2, 3, 3, 4, 8, 90, 3, 0, 5, 4, 0].filter(function (elem, index, Array) {
  return index === Array.indexOf(elem);
})

Google Chrome запускает приведенный ниже код и объясняет его!

[].forEach.call(?("*"), function (a) {
  a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
})

После запуска приведенного выше кода вы обнаружите, что слои HTML были добавлены с выделенной рамкой с использованием разных цветов. Почему это так?

  • Принципиальный анализ:
  1. ?("*")Возвращает все элементы страницы в виде массива
  2. .forEach 。这是一种简写，完整的写法应该是这样：Array.prototype.forEach.call(...);很显然，简写更方便。
  3. .call — это прототип, встроенный в функции JavaScript. .call Используйте свой первый параметр, чтобы заменить упомянутый выше массив this, который является массивом, который вы хотите передать.
  4. Таким образом, [].forEach.call() — это быстрый способ получить доступ к forEach и заменить пустой массив this списком, который вы хотите повторить.

Как справиться с кэшированием? Как очистить кеш.

Случайные числа Ajax, параметры ajax, настройки в мета и т. д. . Можете посмотреть на js я написал несколько способов очистки кеша браузера

  • метаметод
   //不缓存
   <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
   <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
   <META HTTP-EQUIV="expires" CONTENT="0">
  • jquery ajax очистить кеш браузера
1. 用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,如下:
    beforeSend :function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since","0"); 
        xmlHttp.setRequestHeader("Cache-Control","no-cache");
     },
2. 直接用cache:false
3. 用随机数，随机数也是避免缓存的一种很不错的方法！
    URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了
4. 用随机时间，和随机数一样。
    在 URL 参数后加上 "?timestamp=" + new Date().getTime();

Websocket

Websocket — это постоянный протокол, основанный на http, сервер может активно отправлять

  • совместимый:

FLASH-разъем Длинный опрос: регулярно отправлять ajax длинный опрос: отправить --> ответить, когда есть сообщение

 let ws = new WebSocket(url);
 /* 收到消息回调 */
  ws.onmessage = onMessage;
  /* 连接断开回调 */
  ws.onclose = onClose;
  /* 连接成功回调 */
  ws.onopen = onOpen;

Решение междоменных проблем

  1. JSONP: эксплойт<script>На тег не распространяются междоменные ограничения, недостатком является то, что он может поддерживать только запросы на получение.
  2. Сервер устанавливает заголовок запроса:CORS: Access-Control-Allow-Origin：*
  3. postMessage

Фреймворк: Vue Family Bucket

vue-routerКак сделать запрос возврата истории?

Посмотрите мои предыдущие статьи

vue-routerКак сделать права входа пользователя и т.д.?

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

связь компонентов vue

Многие говорят, что он неполный, и я не знаю, ненужный он или неважный.Этот пост очень хорошо написан

  1. реквизит и $emit
  2. attrs和listeners
  3. центральный автобус событий
  4. обеспечить и ввести
  5. v-model
  6. parent和children
  7. трансляция и рассылка
  8. vuex обрабатывает взаимодействие данных между компонентами

рендеринг сервера vue

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

vue-routerмодульныйrouter-linkкомпоненты.

Подробности официального сайта

vue-routerКакие виды навигационных крючков существуют?

Три:

  1. Это глобальный навигационный хук: router.beforeEach(to, from, next), который используется для оценки и перехвата перед прыжком.
  2. Крючки внутри компонентов
  3. Индивидуальная маршрутизация эксклюзивных компонентов

что такое ссс? Каковы шаги установки и использования в vue.cli? Каковы характеристики? Предварительно скомпилированный css.

Шаги для использования:

  • Шаг 1: Используйте npm для загрузки трех загрузчиков (sass-loader, css-loader, node-sass)
  • Шаг 2. Найдите webpack.base.config.js в каталоге сборки и добавьте расширение .scss к свойству extends.
  • Шаг 3. В том же файле настройте атрибут модуля.
  • Шаг 4: Затем добавьте атрибут lang в тег стиля компонента, например: lang="scss"

Каковы основные особенности:

  1. Можно использовать переменные, например ($имя переменной=значение)
  2. Вы можете использовать микшер, например ()
  3. могут быть вложены

Каков принцип двусторонней привязки данных в Vue? ###

Vue.js — это комбинация захвата данныхШаблон издатель-подписчикпуть, черезObject.defineProperty()захватить каждое имуществосеттер, добытчик, публиковать сообщения подписчикам при изменении данных,Инициировать соответствующий обратный вызов слушателя.

Пожалуйста, уточните, как вы понимаете жизненный цикл vue?

Всего 8 этаповДо/после создания, до/после загрузки, до/после обновления, до/после уничтожения

  1. До/после создания: существуетbeforeCreatedstage, элемент монтирования экземпляра vue$elи объекты данныхdataкак дляundefined, еще не инициализированный. существуетcreatedНа этапе доступны данные объекта данных экземпляра vue,$elЕще нет.

  2. До/после загрузки: На этапе beforeMount $el и данные экземпляра vue инициализируются, но до монтирования они остаются виртуальными узлами dom, а data.message не заменяется. На этапе монтирования экземпляр vue монтируется, и data.message успешно визуализируется.

  3. До/после обновления: При изменении данных срабатывают методы beforeUpdate и updated.

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

Расскажите, пожалуйста, об использовании каждой папки и файла в каталоге src в проекте vue.cli?

  • Папка assets предназначена для статических ресурсов;
  • компоненты - поставить компоненты;
  • маршрутизатор должен определить конфигурацию, связанную с маршрутизацией;
  • вид на вид;
  • app.vue — главный компонент приложения;
  • main.js — это входной файл

Связано с автоматическим тестированием, с фиктивными данными, с веб-пакетом

Этот тест вашего понимания веб-пакета — степень использования.

Например, могут быть проверены следующие точки знаний:

  1. хэш (контентхэш, чанкхэш)
  2. Многостраничная конфигурация
  3. Выпуск онлайн-процесса
  4. Как ускорить упаковку и уменьшить объем упаковки
  5. Отличия от других инструментов (grunt, glup, rollup, посылка, Browserify)

Если вы видите здесь друзей, это очень хорошо~

Основы фронтенд-интервью (необходимо освоить в течение 1 года)

Если у вас есть помощь, вы можете обвести ее кружком~ Спасибо!

Категории