面试题2

面试题2

九月 22, 2020

时隔约两年,又一次负责面试,但这一次难度可要大多了。可能要面2~5年经验,且水平应该在深圳中上水平的。有点慌。公司给了一些面试题范围,趁还没开始面试前,深入刷一遍面试题。以免到时出糗。。。。。

因为之前已经有过一份面试题,而且质量还不错,所以之前的面试题提到的问题不再此篇幅提起

HTML

localstorage\sessionstorage\cookie区别

不赘述。但是补问

localstorage跨域传输

sessionStorage,如果打开一个新tab,新tab会不会有sessionStorage

CSS

盒子模型

回流与重绘

网页性能管理理解-阮一峰

网页渲染出来,大约分为5个步骤

  1. HTML代码转化成DOM
  2. CSS代码转化成CSSOM(CSS Object Model)
  3. 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
  4. 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  5. 将布局绘制(paint)在屏幕上

这五步里面,第一步到第三步都非常快,耗时的是第四步和第五步。

"生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)

阮一峰

渲染,就需要重新生成布局和重新绘制。前者叫做"重排"(reflow),后者叫做"重绘"(repaint)

重排是渲染树发生变化,所以需要计算页面渲染

重绘是渲染树没变化,只是发生了颜色等不影响结构的变化。

重排肯定会发生重绘,但是重绘不一定会发生重排

案例:

  • 字体大小变化是重绘还是重拍

JS

js事件以及react事件

事件冒泡与事件捕获,略

event.target:触发事件的元素
event.currentTarget: 绑定事件的元素
event.relatedTarget: 相关的第二元素。只有mouseenter、mouseleave、mouseout、mouseover、dragenter、dragexit有
其中,mouseover,移动中切换到不同子元素上就会触发。

**事件捕获只会捕获绑定事件会触发的类型

比如div中有个input。div无法捕获到input的focus事件

stopPropagation与stopImmediatePropagation

两者都可以组织网上传播事件。但是stopImmediatePropagation还会组织之后绑定的事件

react事件(待验证)

react是自己实现的独立事件,与dom事件无关。
react事件都是绑定在document上。所以react事件都会比dom事件慢。原生事件可以阻止react事件,但是因为react事件是绑定在document上的冒泡。所以react不能阻止原生事件。

猜结果1

1
2
3
4
if(!'a' in window){
function a() {};
console.log('ready')
}

答案是,不会打印ready

因为变量提升是发生在编译阶段。代码执行过程中,a已经存在window下了

宏任务与微任务

宏任务与微任务

requestAnimateFrame和requestIdleCallback

网页性能管理理解-阮一峰

ES6 新特性

框架

可能每个人的框架使用范围不一样,不用准备太多

React

为什么React组件一定要引入React对象

JSX需要babel支持。React本身是不支持的。webpack项目中,webpack会利用babel转换成React.createElement。实际上jsx文件里return的是一堆React.createElement,所以自然要引入React

setState是同步的还是异步的

React的合成事件

  1. 生命周期和合成事件中

在 React的生命周期合成事件中, React仍然处于他的更新机制中,这时无论调用多少次 setState,都会不会立即执行更新,而是将要更新的·存入 _pendingStateQueue,将要更新的组件存入 dirtyComponent

Typescirpt

interface 与type 的区别

interface是定义接口类型,用来描述变量、类、function等的签名

type本质上是一个别名

interface与type很像,很多厂家,两者都能使用。但是也有细微差别

• 类型:对象,函数两者都能适用,但是type可以用于基础类型、联合类型、元祖
• 同名合并:interface支持,type不支持
• 计算属性:type支持,interface不支持

** 总的来说,公共的用interface实现,不能用interface的再用type实现。**

交叉类型与联合类型

Vue

微信环境

微信H5授权流程

小程序授权流程

Node

express与koa的错误处理机制

express

express错误处理中间件的回调函数会多一个err参数,如果上游有错误抛出,则会触发错误处理中间件。如果没有,则不会触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 正常抛出会触发
app.get('/', function(req, res, next){
throw new Error('error')
})

app.get('/', function(req, res, next) {
new Promsie((resolve, reject) => {
setTimeout(() => {
const err = new Error('custom async error');
// 如果是异步则得在调用next时传入一个错误对象,才会触发错误处理中间件,否则进入正常中间件
next(err);
}, 2000)
})
}

app.use(function(err, req, res){
if (err) {
在此处能接收到错误
}
})

koa

说起koa的错误处理,得先提一下koa的洋葱模型。


洋葱的每一层都是一个中间件。然后每个请求从洋葱的外层开始一层一层进入中间件,然后再从里到外再一层一层执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
app.use(async (ctx, next) => {
console.log(1)
await next();
console.log(2):
})

app.use(async (ctx, next) => {
console.log(3)
await next();
console.log(4):
})

app.use(async (ctx, next) => {
console.log(5)
await next();
console.log(6):
})

执行顺序是1、3、5、6、4、2

按照中间件的注册顺序 func1、func2、func3.则一次请求会按func1 => func2 => func3 => func2 => func1;

所以,错误处理中间件应该注册在第一层,然后在第一次把next方法包裹一层trycatch就能捕获其他中间件的错误。

1
2
3
4
5
6
7
8
9
10
// 第一层中间件
app.use(async (ctx, next) => {
try{
await next();
}catch(e){
// 处理错误
}
await next();
console.log(6):
})

webpack

webpack常用的配置,以及其作用

webpack如何配置多页面

如果两个模块互相引用,会发生什么

webpack会根据入口,根据模块依赖不断的找到

其他

http与https

https = http + ssl

https的加密过程

先了解几个概念

对称加密

加密和解密用的是同一份密钥

非对称加密

加密和解密是两份密钥,分别公钥和私钥。公钥是公开的,私钥是保密的。但是非对称加密比对称加密性能低很多。

常用的有:RSA

**GitHub的ssh密钥就是经典的非对称加密

哈希算法

把不同的内容转换称固定长度的字符串,是不可逆的,一般称作摘要算法

数字签名

一般是请求主题主体的摘要,随信息一起发送。证明信息没有被篡改。

加密流程

  1. 浏览器向服务器发起https请求。
  2. 服务器返回公钥以及证书信息摘要
  3. 浏览器去正式颁布中心获取公钥,解密服务器发来的摘要。监测是否合法证书(还是有点懵)
  4. 浏览器计算一个对称加密密钥,用服务器公钥加密本地密钥
  5. 把加密密钥发给服务器,服务器用非对称加密密钥解密,拿到密钥。
  6. 双方用非对称加密密钥加密信息,互相交流。

至于为什么不直接用非对称加密,只是因为非对称加密性能比对称加密低很多。

常用的http状态码

  • 200: 略
  • 301: 永久重定向
  • 302: 临时重定向
  • 304: 未修改(重定向到本地缓存)
  • 400: bad request。请求参数错误
  • 401: unauthorized。未授权(需要授权)
  • 403: 拒绝请求(彻底禁止)
  • 404
  • 405: method not allow请求方法错误
  • 500: 服务器错误
  • 502/504: 网关错误/超时
  • 503: 服务不可用(临时)

HEAD、OPTION请求

HEAD 于 GET 请求相同,唯一不同的是HEAD请求不会返回实体数据,请求头参数于GET一模一样。这就允许客户端在未获取实际内容的情况下,对首部资源进行检查。
HEAD可以

  • 在不获取资源的情况下,检查资源的情况(如,判断类型)
  • 通过判断状态码,检查资源的状态
  • 检查首部信息,判断资源是否改变

OPTION请求(待验证)

http跨域时的option请求-简书

简单请求与非简单请求-简书

浏览器将CORS请求分为两类: 简单请求非简单请求

简单请求浏览器不会预检,而非简单请求会预检

同时满足下列两大条件,就属于简单请求,否则属于非简单请求

  1. 请求方式只能是:GET、POST、HEAD
  2. Content-type只能取:application/x-www-form-urlencoded、multipart/form-data、text/plain

然后在正式跨域请求之前,就会发生一次option请求

……….

http缓存机制

什么是幂等性,哪些方法是幂等请求

幂等性原本是数学上的概念,即使公式:f(x)=f(f(x)) 能够成立的数学性质。用在编程领域,则意为对同一个系统,使用同样的条件,一次请求和重复的多次请求对系统资源的影响是一致的

只有post不是幂等请求

前端安全

bcy