面试总结

[lznbuild]

网络

网络分层模型有哪几部分，作用

HTTPS传输过程

http状态码

tcp,udp的区别，应用场景

http header 字段，分别的作用

http2.0特性, 多路复用怎么实现的，和长链接的区别

请求是异步的，为什么会造成TCP队头阻塞

tcp粘包机制？怎么解决？

option请求？

http缓存

对于网络安全方面，了解哪些攻击方式

React

react hooks的理解，优缺点

介绍一下react fiber

高阶组件？生命周期？

react key的作用

react diff过程

react router 原理

vue中有Keep alive ，怎么在react中做类似效果

angular vue react 区别，怎么做技术选型？

框架解决了那些问题，为什么操作dom是性能低下的

webpack

为什么自己配一套，cra直接用不可以吗

用webpack做了什么，做过哪些优化，怎么看待工程化，为什么要做分包

用webpack怎么搭建一个mpa的项目，多入口怎么指定

webpack整体工作流程，热更新机制？搭建新项目需要做那些事

webpack的tree-shaking

postcss做了什么

常用loader, plugin 分别的作用

编程题

写个快排

写个归并排序

实现一个reduce 方法

实现一个防抖封装函数

实现一个instanceof

实现bind

实现 es6 的flat方法

实现一个发布订阅模式

179. 最大数 leetcode

15. 三数之和 leetcode

20. 有效的括号 leetCode

买股票时机，经典动态规划问题

二叉搜索树第k大的值

二叉树中序遍历，非递归

斐波那契数列，求第n项的值

给定一个二叉树，判断它是否是高度平衡的二叉树。

链表翻转

利用promise,实现一个最大并发数为3的all方法

代码实现

  /*
    将文字版本的目录解析为树结构，尽量保证代码的可读性，处理边缘 Case，自己编写测试用例进行验证。
    文字版目录以缩进来决定目录层级，两个空格为一个层级的缩进。缩进后以 '- ' 开头。

    // Example 1
    - 章节一
      - 标题一
        - 子标题一
      - 标题二
    - 章节二
    - 标题一
    - 标题二

    =>
    [
      {
        "value": "章节一",
        "level": 0,
        "children": [
          {
            "value": "标题一",
            "level": 1,
            "children": [
              {
                "value": "子标题一",
                "level": 2,
                "children": []
              }
            ]
          },
          {
            "value": "标题二",
            "level": 1,
            "children": []
          }
        ]
      },
      {
        "value": "章节二",
        "level": 0,
        "children": [
          {
            "value": "标题一",
            "level": 1,
            "children": []
          },
          {
            "value": "标题二",
            "level": 1,
            "children": []
          }
        ]
      }
    ]

    // Example 2
    - 新手指引
      - 语雀是什么
      - 为什么选择语雀
      - 语雀数据安全
    - 基础
      - 如何注册语雀
      - 帐户设置
      - 语雀会员
      - 文档知识库
        - 如何新建文档和表格
        - 如何进行保存或发布
        - 历史版本

    =>
    [
      {
        "value": "新手指引",
        "level": 0,
        "children": [
          {
            "value": "语雀是什么",
            "level": 1,
            "children": []
          },
          {
            "value": "为什么选择语雀",
            "level": 1,
            "children": []
          },
          {
            "value": "语雀数据安全",
            "level": 1,
            "children": []
          }
        ]
      },
      {
        "value": "基础",
        "level": 0,
        "children": [
          {
            "value": "如何注册语雀",
            "level": 1,
            "children": []
          },
          {
            "value": "帐户设置",
            "level": 1,
            "children": []
          },
          {
            "value": "语雀会员",
            "level": 1,
            "children": []
          },
          {
            "value": "文档知识库",
            "level": 1,
            "children": [
              {
                "value": "如何新建文档和表格",
                "level": 2,
                "children": []
              },
              {
                "value": "如何进行保存或发布",
                "level": 2,
                "children": []
              },
              {
                "value": "历史版本",
                "level": 2,
                "children": []
              }
            ]
          }
        ]
      }
    ]

  class Node {
    constructor({ value, level, parent}) {
      this.value = value;
      this.level = level;
      this.children = [];
      this.parent = parent;
    }
  }

### 代码实现

```js
/*
实现一个highlight方法

highlight(
    '吃葡萄不吐葡萄皮, \n不吃葡萄倒吐葡萄皮',
    ['葡萄', '吃']
);

return <span>吃</span><span>葡萄</span>不吐<span>葡萄</span>皮, 
    不<span>吃</span><span>葡萄</span>倒吐<span>葡萄</span>皮
*/ 

输出结果

Promise.reject(1)
    .then(() => console.log(1))
    .catch(() => console.log(2))
    .then(() => console.log(3))
    .finally(() => console.log(4));

var obj = {
    test: '123',
    f1:()=> {
      console.log(this.test);
    },
    f2:function() {
      console.log(this.test);
    }
  }

  obj.f1() // undefined
  obj.f2() // 123

  new obj.f1() // 报错
  new obj.f2() // undefined

css

flex布局方案为什么叫弹性布局？

flex:1 ，是那几个属性的缩写，分别有什么作用

BFC？能解决什么问题？ 怎么转换？或者给个题

  <style>
      *{
        margin: 0;
        padding: 0;
      }
      .container {
        margin: 20px;
      }
      .div1, .div2 {
        width: 200px;
        height: 200px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="div1"></div>
      <div class="div2"></div>
    </div>
    <!-- container到body顶部的距离?
    div1到body顶部的距离?
    div2到body顶部的距离? -->
  </body>

垂直居中的方式

相对定位和绝对定位的区别，分别以什么作为定位

选择器+权重，伪类选择器有哪些

有哪些方式可以让dom不可见？区别？是否会响应事件？

盒模型

css层叠顺序 (层叠上下文)

为什么transform比定位做动画的效果要好

typescript

实现 pick工具泛型

enum编译后是什么？和js map 有什么区别

type interface 区别

泛型的类型约束， 联合类型和交叉类型

用和不用有哪些区别

接口获取的数据怎么做类型约束，字段修改怎么优雅的处理？

常用的工具泛型， infer是干嘛的

抽象类

js

object和map 的区别

es6新增内容

promise实现？

js继承

函数柯里化

闭包，作用域链的理解

map 和weakMap的区别，一般用weakMap存储什么？

数组去重的方式

原型链

怎么判断url改变了

跨域

介绍async await， 怎么捕获异常

为什么js是单线程执行？

其他

项目做过哪些优化

怎么管理代码分支的

rxjs本身解决了那些问题 常用那些操作符，分别的作用？

了解V8做过哪些优化嘛

移动端项目的适配怎么做，遇到过的兼容问题

最优的排序算法时间复杂度

尾递归优化？

怎么防止项目代码被恶意修改或插入iframe，

哈希表为什么要在 key value中间做一层哈希，哈希冲突怎么解决

url浏览器解析到渲染的整个过程

event loop 说输出结果

前端如何做seo, 如何反爬虫

了解哪些设计模式，举实际开发例子说明一下

redux中间件用过哪些

说一下mpa spa 项目的区别

csr ssr ssg 的区别

小程序开发需要注意那些问题

如何保证项目的稳定性（开发角度，用户角度）

对接一下微信扫码登录，你觉得微信官方，项目前端，项目后端，分别会做那些事

相同页面开启两个浏览器窗口，一个设置sessionStorage，另一个是否可以访问到，localstorage呢

关注过前端社区的哪些新技术，平时怎么学习的

[Rabbitzzc]

这是所有面试的汇总么