[面经]-[老虎证券]-[2020.03.24]

[zhaofeihao]

一面

CSS

1. flex了解多少

2. 浮动布局了解多少

3. 对position的了解

4. 写一个左侧固定右侧自适应的两列布局

JS

1. ES6 新特性

2. Promise 实现思路

3. 输出顺序

new Promise((resolve, reject) => {
    console.log(1);
    resolve();
}).then(() => {
    console.log(2);
    new Promise((resolve, reject) => {
        console.log(3);
        resolve();
    }).then(()=>{
        console.log(4);
    }).then(() => {
        console.log(5);
    });
}).then(()=>{
    console.log(6)
})

深度揭秘 Promise 微任务和执行过程

4. 跨域的方式了解多少

5. this的应用场景

6. 实现 bind

网络

1. 缓存了解多少

• H5新增的缓存方式
• localStorage 可以跨域吗

2. 状态码知道多少

3. HTTP 和 HTTPS 的区别

浏览器

1. 对前端路由了解多少

• history 有哪些 API

其他

• 说说对React的理解
• git使用什么可视化工具，会用什么命令
• hooks、typescript了解吗
• 组件封装的要点
• 项目中的难点
• 工作收获

二面

1. 聊项目

2. mobx、redux原理

3. 获取一个网页上所有标签的种类

4. React 的 pureComponent 和 Component 的区别

5. setState 有几种传参方式

6. 使用 console.log 打印出如下目录结构

Node仿Tree指定层级输出树形文件目录结构

[zhaofeihao]

1. flex

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性，指定容器内元素的排列、对齐方式

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

项目属性，指定元素本身的排列、对齐方式

• order
• flex-grow
• flex-shrink
• flex-basis
• flex(该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto))
• align-self

参考

1. Flex 布局教程：语法篇
2. Flex 布局教程：实例篇

[zhaofeihao]

2. 浮动布局

/* Keyword values */
float: left;  /* 表明元素必须浮动在其所在的块容器左侧。*/
float: right;  /*表明元素必须浮动在其所在的块容器右侧*/
float: none;  /*表明元素不进行浮动*/
float: inline-start;  /*表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。*/
float: inline-end;  /*表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。*/

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

也就是说,right 会挨着 left，而不是重叠。

<div class="left" style="float:left;background-color:#000;width:100px;height:110px"></div>
<div class="right" style="float:left;background-color:#ccc;width:110px;height:100px"></div>

这种情况与 position:absolute 正好相反

<div class="left" style="position:absolute;background-color:#000;width:100px;height:110px"></div>
<div class="right" style="position:absolute;background-color:#ccc;width:110px;height:100px"></div>

这时候，right 会覆盖在 left 上面。

但是，有时可能需要强制一个浮动元素移至任何浮动元素下方，那么使用clear: both; ：

参考

1. MDN - float

[zhaofeihao]

3. 对 position 的了解

position是一种描述物体相对位置的艺术，它的核心是「参考坐标系」的选择

值	描述
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
inherit	规定应该从父元素继承 position 属性的值。
sticky	元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

参考

1. MDN - position
2. 前端重构范式之 position

[zhaofeihao]

4. 写一个左侧固定右侧自适应的两列布局

1. 第一种方式 --- 浮动

.outer1 .left {
    width: 200px;
    float: left;
}
.outer1 .right {
    width: auto;
    margin-left: 200px;
}

<div class="outer outer1">
    <div class="left">1-left</div>
    <div class="right">1-right</div>
</div>

2. flex

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px; /* flex-grow: 0;flex-shrink:0; flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}

<div class="outer outer2">
    <div class="left">2-left</div>
    <div class="right">2-right</div>
</div>

3. 绝对定位

.outer3 {
   position: relative;
}
.outer3 .left {
   position: absolute;
   width: 200px;
}
.outer3 .right {
   margin-left: 200px;
}

<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
</div>

[zhaofeihao]

对 Promise 的理解

Promise为我们解决了什么问题?

在传统的异步编程中，如果异步之间存在依赖关系，我们就需要通过层层嵌套回调来满足这种依赖，如果嵌套层数过多，可读性和可维护性都变得很差，产生所谓“回调地狱”，而Promise将回调嵌套改为链式调用，增加可读性和可维护性。

Promise的调用流程：

• Promise的构造方法接收一个executor()，在new Promise()时就立刻执行这个executor回调
• executor()内部的异步任务被放入宏/微任务队列，等待执行
• then()被执行，收集成功/失败回调，放入成功/失败队列
• executor()的异步任务被执行，触发resolve/reject，从成功/失败队列中取出回调依次执行

这是个「观察者模式」，这种收集依赖 -> 触发通知 -> 取出依赖执行 的方式，被广泛运用于观察者模式的实现，在Promise里，执行顺序是then收集依赖 -> 异步触发resolve -> resolve执行依赖。

参考

1. BAT前端经典面试问题：史上最最最详细的手写Promise教程
2. 八段代码彻底掌握 Promise - 掘金

[zhaofeihao]

localStorage 可以跨域吗

localStorage 本身也是受浏览器的同源策略限制的，但是可以借助 postMessage + iframe 来实现 localStorage 的跨域。

参考

1. localstorage的跨域存储方案

[zhaofeihao]

HTTP 常见状态码

[zhaofeihao]

HTTPs 解决的问题

HTTP缺点

• 通信使用明文，可能被窃听
• 不验证通信方的身份，可能遭遇伪装
• 无法证明报文的完整性，有可能遭遇篡改

HTTPS
HTTP+加密+认证+完整性保护 = HTTPS

非对称加密 + 证书

参考

HTTP和HTTPS详解

[zhaofeihao]

前端路由

何为前端路由？

简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每个视图展示形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均通过这个特殊的 url 来实现。

为实现这一目标，我们需要做到以下 2 点：

• 改变 url 且不让浏览器向服务器发送请求。
• 可以监听到 url 的变化

接下来要介绍的 hash 模式和 history 模式，就是实现了上面的功能.

hash 模式

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是我们期望的 hash 值。
由于 hash 值的变化不会导致浏览器向服务器发送请求，而且 hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

history 模式

在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转：

history.go(-1);       // 后退一页
history.go(2);        // 前进两页
history.forward();     // 前进一页
history.back();      // 后退一页

在 HTML5 的规范中，history 新增了以下几个 API：

history.pushState();         // 添加新的状态到历史状态栈
history.replaceState();      // 用新的状态代替当前状态
history.state                // 返回当前状态对象

参考

「前端进阶」彻底弄懂前端路由

[zhaofeihao]

获取一个网页上所有标签的种类

const doms = document.querySelectorAll('*');

let domNames = Array.from(doms).map(dom => dom.tagName);

Array.from(new Set(domNames));