【面试记录】字节社招面试记录

等时钟成长

已于 2022-07-27 12:29:15 修改

阅读量601

点赞数

分类专栏：面试经历前端 JavaScript 文章标签： javascript

于 2021-08-18 00:33:12 首次发布

本文链接：https://blog.csdn.net/pangji0417/article/details/119769645

版权

JavaScript 同时被 3 个专栏收录

83 篇文章 1 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

面试经历

3 篇文章 0 订阅

订阅专栏

【面试记录】2021-8月字节社招面试记录

文章目录

【面试记录】2021-8月字节社招面试记录
- Content
- Reference

Content

502 及解决方案

Bad Gateway 一般是连接超时，服务器收到请求，但未能在一定时间内及时响应，客户端可以强制刷新 (ctrl+F5) 一下。

304 是什么

协商缓存。

第一次请求服务端会返回 Last-Modified 一个时间

下次请求使用 If-Modified-Since 带上这个时间，如果时间变了就返回新的内容（200），否则内容没变就使用本地缓存（304）。

If-Modified-Since 只支持HEAD GET 方法。还有一个 If-Unmodified-Since 支持 POST 方法，常见场景是在 wiki 多人编辑时确保服务端文件未被修改过才接受该次修改。

以上是基于时间的协商缓存，还有更高效的基于文件内容哈希的 ETag

对应的请求时使用 If-None-Match 带上 ETag 返回的值，由服务端决定是返回新内容（200），还是使用缓存（304）。

强缓存利用 expires 和 cache-control 字段。

expires 是一个时间戳，会出现两端时间不一致问题

cache-control 可取以下值

max-age 有效时长，超过则失效。

no-cache 进行协商缓存

no-store 禁用缓存，读取服务器最新资源

https 和 http 区别

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

用户登录请求到返回都做了什么

一般加密发送用户名/密码，后端校验返回 token ，前端存储在localStorage ，做身份校验。

cookies

cookies 是服务端发送给浏览器并保存在本地的一小块数据。他会被携带在每一次请求中，用于服务端鉴别客户端身份。

响应头里带有 Set-Cookie ，请求头里带上 Cookie 。

正常是一个键值对 key=value ，可以加上过期时间 Expires 或者 Max-Age

以下字段对携带规则进行了限制：

Secure 限制了只能是 https 请求

HtttpOnly 限制不能通过脚本的 document.cookie 来修改，可以防止 XSS

Domain 可以指定作用域，限制只能哪些主机

Path 指定 url 路径，限制只能主机下的哪些路径

SameSite 取值有 None Strict Lax，不会向跨域请求携带 cookie

css 实现一个秒针旋转动画

<body>
    <div class="stage">
        <div class="pointer"></div>
    </div>
    <style>
        .stage {
            height: 200px;
            width: 200px;
            position: relative;
            border-radius: 100px;
            border: 1px red solid;
        }

        .pointer {
            width: 100px;
            height: 4px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: 0 0;
            animation: pointer-rotate 60s steps(60) infinite;
        }

        @keyframes pointer-rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</body>

4个div带数字[4,2,3,1]，重新排序，移动DOM，JS实现动画效果
用过Promise吗？实现一个requestWithTimeout 可以在时间到了后取消未完成的请求

function requestWithTimeout(options, timeout) {
    let ready = false;
    const xhr = new XMLHttpRequest();
    xhr.open(...options);
    xhr.onreadystatechange = function(){
        if(this.readyState == XMLHttpRequest.DONE) {
            ready = true;
        }
    };
    xhr.send();
    setTimeout( function() {
        if(!ready) { xhr.abort(); }
    }, timeout);
}

判断类型有些什么方法

var a = [];
var b = {};

typeof a; // 'object'
a instanceof Array; // true
Array.isArray(a); // true
Object.prototype.toString.call(a); // ‘[object Array]’

vue.nextTick() 做什么用？

DOM 准备好了。下一次事件循环。

模块化及区别

CommonJs同步，Amd异步, UMD 通过判断关键字统一， ESM

LFU 用class实现

  class Item {
      key = '';
      value = '';
      count = 0;
      order = 0;
  
      constructor(key, value, order) {
          this.key = key; 
          this.value = value;
          this.order = order;
      }
  }
  
  class MapLike {
      map = new Map();
      limitedSize = 0;
      _currentOrder = 0;
  
      constructor(limitedSize){
          this.map = new Map();
          this.limitedSize = limitedSize;
      }
  
      set(key, value) {
          if(this.size() + 1 > this.limitedSize) {
              let pre = null;
              this.map.forEach( (value, key) => {
                  if(pre == null) { pre = value; }
                  else if(value.count < pre.count || value.count == pre.count && value.order < pre.order) {
                      pre = value;
                  }
              });
              this.map.delete(pre.key);
          }
          this.map.set(key, new Item(key, value, this._currentOrder++));
      }
  
      get(key) {
          if(this.map.has(key)) {
              const item =this.map.get(key);
              item.count++;
              return item;
          }
      }
  
      delete(key) {
          this.map.delete(key);
      }
  
      size(){
          return this.map.size;
      }
  }