предисловие
Это сезон поиска работы с золотом, тремя, серебром, четырьмя ✿✿ヽ(°▽°)ノ✿. Я новичок фронтенда, работаю в индустрии уже больше года, задумался о смене работы прошлым летом и последовательно провел собеседования в нескольких малых и средних компаниях. Я обычно записываю процесс собеседования, чтобы иметь возможность просмотреть его после окончания. Я разобрал записи нескольких обзоров собеседований, в надежде помочь друзьям в подобных ситуациях "😝 Мне тоже удобно вспоминать в будущем", надеюсь каждый сможет найти себе работу по душе. ❤️
Обзор
- Компания: координатор Шанхай, образовательная индустрия, фронтенд-команда из 20+.
- Интервьюер: ответственное лицо, бывший босс Ali P7, получил степень магистра и сменил карьеру, чтобы работать в Ali.
- Стек технологий: в настоящее время команда в основном использует Vue и планирует использовать React позже.
- Результат собеседования: не прошел o(╥﹏╥)o .
- Опыт собеседования: Интервьюер добрый и будет направлять вас должным образом, когда вы столкнетесь с проблемами, о которых вы не знаете, и, наконец, даст предложения по улучшению.Я чувствую, что многое приобрел. Очевидно, что жестоко издеваются, но все равно очень счастливы 😁.
вопросы интервью
Объяснение: число в конце вопроса представляет собой количество баллов за ваш ответ на тот момент, а ✔ означает, что позже вопрос будет изменен.
- Причина смены профессии
- В чем разница между vue и реакцией? 2 ✔
- Принцип двусторонней привязки данных vue? Обновление массива. 8 ✔
- Как общаться между компонентами? Принцип реализации Vuex? Как изменить вид при изменении состояния? 6 ✔
- Почему стоит выбрать уни-приложение? 8
- (После поиска и просмотра апплета электронной коммерции) Какие части вы сделали? Проблема с загрузкой изображения, почему бы не использовать наблюдатель пересечения в горизонтальном направлении? Intersection Observer поставляется вместе с браузером. 7 ✔
- Зачем делать живой плагин? 8
- Какие оптимизации проекта вы сделали? 5 ✔
- Разница между конфигурацией веб-пакета, загрузчиком и плагином. Как избавиться от лишнего кода? Принцип реализации tree-shaking. 5 ✔
- Новый маршрут, как узнать, чтобы скачать соответствующий файл? (Расширение: способ динамической вставки js) 2 ✔
- Загружать по запросу? Какие способы? Что вы выбрали в итоге? 5
- Кэш, кто установил сильный кеш? Будут ли файлы HTML будут кэшированы? 4 ✔
- Система доставки контента CDN? Почему статический файл ресурсов вашего проекта не помещается на CDN. 5 ✔
- Какие трудности возникают при использовании SDK для мобильных прямых трансляций и обмена мгновенными сообщениями Tencent Cloud? 4 ✔
- Мониторинг ошибок Sentry, как ошибки собираются и передаются на платформу? (http, веб-сокет, кросс-доменный) 2 ✔
- Некий проект (в резюме), поясните, пожалуйста, подробно? 8
- Трудности и трудности, возникающие в проекте. 4
Вопрос 2 Vue против React
Тот же пункт:
- Используйте виртуальный алгоритм DOM + Diff.
- Компонентное мышление.
разница:
- Различия в синтаксисе шаблонов: react отображает шаблоны через JSX, а vue — через расширенный синтаксис html. Например, интерполяция, условия и циклы в реакции реализованы с помощью синтаксиса JS, а vue — с помощью инструкций v-bind, v-if и v-for.
- Принцип мониторинга изменений данных отличается: Vue использует перехват геттера и сеттера для уведомления об изменениях данных и реагирует на это, сравнивая ссылки. Vue использует реактивные данные, а react — неизменяемые данные. Vue изменяет данные для прямого назначения, а реакции необходимо вызвать метод setState (заменить старое состояние новым состоянием).
Вопрос 3 vue принцип реагирования
level1:В vue2.0 ядром адаптивной реализации является Object.defineProperty(obj, prop, descriptor) ES5. Через Object.defineProperty() перехватываются геттер и сеттер каждого свойства данных и реквизита, геттер выполняет сбор зависимостей, и установщик отправляет обновления. В целом это схема захвата данных + публикация-подписка.
level2:В частности, ① Фаза инициализации Vue (перед созданием и перед созданием), просмотр данных/пропсов и вызов Object.defineProperty для добавления геттеров и сеттеров к каждому свойству. ② Каждый компонент и каждый вычисляемый объект создадут экземпляр наблюдателя (включая, конечно, каждого пользовательского наблюдателя), подпишутся на данные/пропсы/вычисления, используемые для рендеринга/вычислений, и как только данные изменятся, будет вызван сеттер, и рендеринг будет уведомлен. Наблюдатель пересчитывает и обновляет компоненты.
Проблема 4: взаимодействие компонентов vue
level1:props+events связь между родительскими и дочерними компонентами (дети), vuex любой компонент связи, центр событийна связь любого компонента,коммуникация потомков слушателей (предоставить/внедрить).
level2:Операционный механизм Vuex: состояние Vuex используется в качестве хранилища для обеспечения рендеринга компонентов vue на основе данных. Представление отправляет действия через диспетчеризацию, и некоторые асинхронные операции могут выполняться в действиях. Действия или представления подвергаются мутациям через коммиты, а мутации изменяют состояние.
level3:Анализ исходного кода: Vuex на самом деле является плагином Vue.js, плагин должен предоставлять метод установки, а вызов метода установки будет включен в качестве параметров. Vue.user (плагин) Установка плагина, то есть установка методом INSTALL. Будет глобально смешано с функцией ловушки BEFORECREATE, сохраняя примерное Store для всех компонентов.
level4: Мутация изменяет состояние, почему она вызывает изменение вида? Реализовано vue, [создайте экземпляр vue и используйте состояние в качестве атрибута данных. ]↔️основной
let Vue
function install(_Vue) {
Vue = _Vue
function vuexInit() {
const options = this.$options
console.log('vuexInit -> this.$options', this.$options)
if (options.store) {
// // 根实例 this --> Vue
this.$store =
typeof options.store === 'function' ? options.store() : options.store
} else if (options.parent && options.parent.$store) {
// 组件实例 this --> VueComponent, 如 APP, Home, About...
this.$store = options.parent.$store
}
}
Vue.mixin({ beforeCreate: vuexInit })
}
class Store {
constructor(options = {}) {
const { state = {}, mutations = {}, getters = {} } = options
this._mutations = mutations
// getter实现原理
const computed = {}
this.getters = {}
for (let [key, fn] of Object.entries(getters)) {
computed[key] = () => fn(this.state)
Object.defineProperty(this.getters, key, {
get: () => this._vm[key]
})
}
this._vm = new Vue({
data: { $$state: state }, // 核心原理
computed
})
}
commit(type, payload) {
if (this._mutations[type]) {
this._mutations[type](this.state, payload)
}
}
get state() {
return this._vm._data.$$state
}
}
export default { Store, install }
Вопрос 6 Наблюдатель за перекрестком
level1:Сделайте вывод, виден ли узел пользователю и в каком процентном соотношении, кросс-просмотрщик. Также доступно в веб-API.
level2:IntersectionObserver в апплете выполняет некоторую инкапсуляцию на основе Интернета и возвращает экземпляр IntersectionObserver через createIntersectionObserver. К методам экземпляра относятся относительный то, относительный товиевпорт, наблюдатель, отключение. relativeTo и относительныйToViewPort, указанная позиция относительно указанного элемента или окна просмотра. наблюдатель (селектор, cb), наблюдайте за указанным узлом и запускайте обратный вызов при изменении видимости.
level3:Веб-API, новый IntersectionObserver(cb, options). Конфигурация root и rootMargin в параметрах может обеспечить эффект методовrelativeTo и relativeToViewPort в апплете. Кроме того, свойство порогов также весьма интересно, вызывая обратный вызов, когда происходит указанное количество пересекающихся соотношений.
Вопрос 8 Оптимизация проекта
- Удалите консольную печать для производственных сред. Решений много, esling+pre-commit, автоматическое удаление с помощью плагинов, плагины включают babel-plugin-transform-remove-console, uglifyjs-webpack-plugin, terser-webpack-plugin. Наконец, был выбран плагин terser-webpack-plugin. Скаффолдинг vue-cli использует этот плагин для включения кэширования и многопоточной упаковки. Нет необходимости устанавливать дополнительные плагины. Просто установите drop_console плагина terser значение true в configureWebpack. Лучше всего выработать хорошие привычки кодирования и удалить бесполезную консоль после того, как разработка будет в основном завершена.Турбо-консоль в vscode вполне подойдет.
- Загрузка сторонних библиотек по требованию. echarts, официальный документ использует файл конфигурации для указания используемого модуля, а другой использует babel-plugin-equire для загрузки по требованию. element-ui использует компонент babel-plugin для реализации импорта по требованию.
- Общедоступные стили, такие как единые настройки стилей некоторых компонентов пользовательского интерфейса элемента (например, всплывающих окон, таблиц, раскрывающихся списков и т. д.). Общие компоненты, такие как средство выбора даты, файл загрузки и т. д., в основном инкапсулированы в компоненты, предоставляемые element-ui. Пользовательские компоненты включают файл предварительного просмотра, окно поиска и т. д.
// babel.config.js配置如下：
plugins: ['equire']
// echarts.js
const echarts = equire(['line', 'tooltip', 'legend', 'dataZoom', 'grid']);
export default echarts;
Что касается обмена внешними и внутренними данными, подтолкните проектную группу к использованию Blue Lake и интерфейсных документов, договоритесь со студентами внутренних процессов и стандартизируйте возврат внутренних данных.
Как указано в военных правилах Yahoo, избегайте выражений css, фильтров, меньшего количества операций DOM, оптимизируйте изображения и спрайты и избегайте пустых ссылок на изображения.
Проблемы с производительностью: скорость загрузки страниц, производительность анимации, производительность операций. API производительности, который записывает данные о производительности.
Технические решения по оптимизации интерфейса для зимнего переобучения:
- Кэширование: сильная стратегия кэширования, контролируемая клиентом.
- Уменьшить стоимость запроса: DNS контролируется клиентом, и он время от времени активно запрашивает получение IP доменного имени, не используя системный DNS (совершенно непонятно). Соединение TCP/TLS используется повторно, сервер обновляется до HTTP2, а доменное имя максимально объединяется.
- Сократите количество запросов: JS, CSS упакованы в HTML. JS управляет асинхронной загрузкой и ленивой загрузкой изображений. Маленькие изображения используют data-uri.
- Меньше объем передачи: попробуйте использовать SVG\градиент вместо картинок. Контролируйте резкость изображения в соответствии с моделью и условиями сети. Используйте повышение резкости на изображениях с низким разрешением, чтобы улучшить впечатление. Дизайн, чтобы избежать больших фоновых изображений.
Вопрос 9 Загрузчик, плагин, встряска дерева
loader
Преобразование исходного кода модулей, преобразование различных языков в JS или преобразование встроенных изображений в URL-адреса данных. Такие как: файл, url-загрузчик, файл-загрузчик. Конверсионная компиляция, babel-loader, ts-loader. шаблон, html-загрузчик. стили, загрузчик стилей, загрузчик css, менее загрузчик. очистка, eslint-загрузчик. Фреймворк, vue-загрузчик.
plugin
Решите другие вещи, которые загрузчик не может достичь. Например, HtmlWebpackPlugin, CleanWebpackPlugin, webpack-bundle-analyzer, DllPlugin, HotModuleReplacementPlugin.
tree shaking
Удалите бесполезный код js (удалите части модулей, которые не экспортируются или на которые нет ссылок). Поддерживается только статический метод импорта модуля ES, а динамический метод импорта требуемой среды выполнения не поддерживается.
Импорт модулей ES6 статически анализируется, поэтому вы можете правильно определить, какой код загружать во время компиляции.
Съемный контент ограничен. Когда webpack взаимодействует с uglifyJS для упаковки файлов, он может встряхнуть только часть кода, например, наличие кода модуля.побочный эффект, выполнить функцию и т. д., вы не можете поделиться. UglifyJS не выполняет анализ хода выполнения программы, а просто определяет, ссылаются ли на переменную, изменяет ли она, и не исключает ли код, который может иметь побочные эффекты. (ROLLUP), например Router.js в проекте, ссылается на компоненты страницы, но не используется при отрисовке маршрутизации и не может быть оставлен.
WebPack-Deep-Scope-Analysis-Plugin: использование WebPack для разрешения AST модуля, использование инструмента Scope Analysis для разрешения эталонной связи, исключение неиспользуемого модуля.
1. babel.config.js 配置，分析文件模块依赖关系，生成AST时，保持ES6不动。
{
"presets": [ ["env", { "modules": false }] ]
}
2. 方式1，import {Button} from 'antd';
方式2，import {Buttion} from 'antd/lib/button';
import 'antd/lib/style';
这两种方式，tree-shaking效果差别很大。（副作用范围不同）
babel-plugin-import-fix 插件，遍历AST找出类似import {Button} from 'antd'的结构，进行转换重新生成代码。
3. CSS tree-shaking <https://juejin.cn/post/6844903808397475847>
方式1：mini-css-extract-plugin + purifycss-webpack
方式2：webpack-css-treeshaking-plugin。
利用postCSS提供的解析器，将CSS解析成AST，遍历获取选择器与js、html代码匹配，删除匹配不到的，返回AST，重新生成代码。
Проблема 10. Ленивая загрузка маршрутизации
Тестовый сайт, принцип реализации vue-router.
level1:
- Пакетные подмодули, которые необходимо лениво загружать в отдельные файлы. Импорт ES6().
- Когда hashChange, выполняется определенная функция в соответствии с изменением хэша, и загружается подмодуль.
level2:Три способа реализации: location.hash + hashChange(), спецификация HTML5 pushState (IE10) + прослушиватель событий popState, абстрактное значение nodejs по умолчанию.
**level3:** Анализ исходного кода. Установите маршрут, используйте миксин для внедрения перед созданием и уничтожением функций ловушек в каждый компонент и определите его в прототипе Vue.Router и адаптивный процесс для определения глобального компонента roter-link и router-view. Сопоставление между конфигурацией маршрутизации. Путь, вычисляющий новый входящий путь, процедура передачи Road King, ряд функций навигации по охране, изменение URL-адреса, визуализация соответствующих компонентов.
Вопрос 12 Кэш
html-файлы также кэшируются. В проекте используется Index.php, а бэкэнд возвращает html-контент, который не будет кэшироваться.
Стратегия кэширования браузера:
-
Принудительная кэширование: (в указанное время браузер напрямую использует содержимое сильного кэша)
Expires: Чт, 21 января 2019 г., 23:59:59 по Гринвичу; (HTTP1.0)
Cache-Control: max-age=3600 (HTTP1.1, более высокий приоритет)
[Инструкция по кэшированию: no-cache должен согласовать кеш, чтобы проверить, истек ли срок его действия; no-store не кэширует; публичные клиентские прокси-серверы могут кэшировать; частные клиенты могут кэшировать]
-
Согласовать кеш: (согласование с сервером, чтобы определить, обновлен ли ресурс)
Last-Modified(Время доставки сервера): Чт, 21 января 2018 г., 23:59:59 по Гринвичу; (HTTP1.0)
If-Modified-Since(Браузер спрашивает) [Возможно время изменилось, но содержание не изменилось]
Etag(отправлено с сервера); (http1.1)
If-None-Match(спрашивает браузер)
Вопрос 13 CDN
CDN, сеть распространения контента, представляет собой виртуальную распределенную сеть, основанную на ретрансляционной сети, которая может кэшировать контент исходного сайта на узловых серверах по всей стране или по всему миру. Пользователи могут получать контент поблизости, что повышает скорость доступа к ресурсам и разделяет нагрузку на исходный сайт.
Используйте разрешение доменных имен DNS, чтобы помочь пользователям получить доступ к кэш-серверу.
Вопрос 14. Трудности Tencent Cloud SDK
Инкапсулируйте класс IM, определите и создайте экземпляры SDK в классе IM, вход/выход из системы, присоединение к группе/выход из нее, мониторинг и удаление событий IM.
- Мобильный Live SDK. В начале я не делал небольшой якорь программы, а использовал приложение для продвижения потока. В основном делаю контент для ПК и потокового H5.
- Существуют следующие типы протоколов прямых трансляций....
- Протокол HLS, использовавшийся вначале, использует в качестве проигрывателя TC-Player, предоставленный Tencent Cloud. Возникшая проблема — высокая задержка.
- Подумайте о смене протокола, но мобильные браузеры не поддерживают flv и rtmp.
- Веб-поток Tencent Cloud предоставляет подключаемый модуль TC-Player, который, по сути, использует тег видео, поставляемый с браузером.
- Используйте flv в качестве протокола прямой трансляции, но не проигрывайте непосредственно в формате flv. На github есть два решения, одно — bilibili flv.js, которое перекодирует и мультиплексирует поток файлов flv в MPE и реализует воспроизведение видео через API Media Source Extensions. Другое решение — использовать CANVAS для рисования каждого кадра видео.
Вопрос 15 часовой
Журналы ошибок Sentry отправляются на веб-сайт Sentry через https. Используйте cors для достижения кросс-доменности.
- Сообщение приложения (Sentry client SDK) сообщает веб-стороне
- Обработка сообщений Поместить в очередь сообщений (Redis/Rabbitmq)
- Рабочий процесс извлекает данные из очереди сообщений для обработки.
- Наконец, хранение сообщений завершается с помощью postgresql.
**request headers:**
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross site
**response headers:**
access-control-allow-origin: <http://localhost:8080>
access-control-expose-headers: x-sentry-error, retry-after, x-sentry-rate-limits