Резюме интервью 4399

опрос
Резюме интервью 4399

Вчера я ходил на собеседование на позицию front-end компании 4399. Это должно быть мое второе собеседование. После интервью я чувствовал себя очень хорошо, но когда я вернулся к подведению итогов, я обнаружил, что многие вопросы, заданные интервьюером, были неправильными. . . Все еще нужно продолжать усердно работать и надеяться получить желаемое предложение как можно скорее. Ниже приводится краткое изложение вопросов интервью.

содержание

  • Разница между принудительным и согласованным кэшированием

  • Разница между setTimeout и обещанием

  • Разница между файлом cookie и сеансом

  • Как Vue реализует перехват входа в систему

  • Что такое Vue Navigation Guard

Разница между принудительным и согласованным кэшированием

Когда интервьюер задал этот вопрос, я немного смутился, подумав, что речь идет о технологии локального хранения, а затем сказал: localstorge, sessiontorge, indexDB. . .

Картинка, найденная в Интернете, хорошая иллюстрация механизма кеширования браузера.

浏览器缓存
кеш браузера

Что такое принудительный кэш

Когда браузер отправляет запрос, он сначала получает информацию о заголовке кеша ресурсов.Если попадает в строгую информацию кеша (управление кешем или срок действия), браузер будет напрямую извлекать ресурс из браузера, а не отправлять запрос в браузер. , возвращенный код состояния 200 OK (из кеша памяти) или 200 ОК (из кеша диска);

强制缓存
Принудительно кэшировать

  • max-age вычисляет время истечения срока действия ресурса на основе этого значения и попадает в кеш, если время запроса предшествует времени истечения срока действия.

  • no-cache: не использовать локальный кеш. Необходимо использовать согласование кеша и сначала подтвердить с сервером, был ли изменен возвращаемый ответ.Если в предыдущем ответе есть ETag, запрос будет проверен с сервером.Если ресурс не был изменен, повторно -загрузки можно избежать.

  • no-store: Напрямую запретить браузеру кешировать данные.Каждый раз, когда пользователь запрашивает ресурс, запрос будет отправлен на сервер, и каждый раз будет загружаться весь ресурс.

  • общедоступный: может кэшироваться всеми пользователями, включая конечных пользователей и промежуточные прокси-серверы, такие как CDN.

  • частный: может кэшироваться только браузером конечного пользователя и не может кэшироваться серверами кэширования ретрансляции, такими как CDN.

Что такое кэш переговоров

Согласованное кэширование означает, что браузер отправляет запрос на сервер, чтобы сообщить браузеру, доступен ли кеш.Запрос будет содержать информацию о кэшированных полях заголовка (Last-Modified/If-Modified-Since и Etag/If-None-Match). возвращается по первому запросу. ). Основываясь на соответствующей информации заголовка в запросе, сервер сравнивает результат, чтобы согласовать попадание в кеш. Если это произойдет, браузер вернет новую информацию заголовка, чтобы обновить соответствующую информацию заголовка в кеше, но не вернет содержимое ресурса. .

协商缓存
Согласовать кеш

Разница между setTimeout и обещанием

Я понял этот вопрос, но ответ во время интервью был не очень ясен, и он был немного общим.

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

执行机制
исполнительный механизм
Как видно из рисунка, первой войдет асинхронная задачаEvent TableЗарегистрируйте функцию обратного вызова дляEvent Queue, дождитесь выполнения задач синхронизации основного потока, а затем введите выполнение основного потока. Вопрос в том, что setTimeout и promise — это асинхронные задачи, в чем между ними разница? Это приводит к разнице между макрозадачами и микрозадачами.

Что такое макрозадачи и микрозадачи

Или первая картинка, она может слишком сильно объяснить проблему.

宏任务与微任务
Макрозадачи и микрозадачи

сказано вышеEvent QueueОчередь событий разделена на макрозадачи и микрозадачи. Общие задачи макросовscript,setTimeout,setInterval, микрозадача имеетpromise,process.nextTick

Приведите пример для анализа потока выполнения

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');

Этот код входит в основной поток как задача макроса и читается сверху вниз.

  • прочитай сначалаsetTimeout, зарегистрируйте его функцию обратного вызова и распределите его в очередь событий задачи макроса
  • следующая встречаPromise,new promiseбудет выполнено немедленно,thenФункция обратного вызова распределяется по очереди микрозадач
  • последняя встречаconsole, выполнить вывод немедленно
  • После выполнения первой макрозадачи войдите в текущую очередь событий микрозадачи, выполните вывод, и первый цикл обработки событий завершится.
  • Откройте второй цикл, сначала прочитайте очередь задач макроса...

Таким образом, этот код выводит порядок: обещание, консоль, затем setTimeout

Разница между файлом cookie и сеансом

Когда интервьюер спросил, в чем разница между session и cookie, я ответил про разницу между sessionStorage и cookie, потому что раньше не знал Session

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

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

  • Сессия будет сохранена на сервере в течение определенного периода времени. Когда количество посещений увеличится, это возьмет на себя производительность сервера.

  • Существует ограничение на объем данных, сохраняемых с помощью файлов cookie.

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

Как Vue реализует перехват входа в систему

Перехват Vue Navigation Guard

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

Первый шаг — добавить разрешения маршрутизации

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {
            requireAuth: true,  // 添加该属性，表示进入这个路由是需要登录的
        },
        component: Repository
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

Шаг 2 Перемещайтесь по охранникам с помощью VUE

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (store.state.token) {  // 通过vuex state获取token是否存在
            next();
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next();
    }
})

Этот перехват входа в систему имеет два недостатка:

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

Таким образом, в настоящее время об этом нужно судить, комбинируя код состояния, возвращаемый перехватчиком http, и серверной частью.

Используйте перехватчик axios для перехвата http-запросов и ответов

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

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });

Что такое Vue Navigation Guard

«Навигация» означает, что маршрут меняется, и эти изменения можно обработать, наблюдая за объектом $route.

Суммировать

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

Категории