面试题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
5
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
21
// 正常抛出会触发
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. Alice需要在银行的网站做一笔交易，她的浏览器首先生成了一个随机数作为对称密钥。
  2. Alice的浏览器向银行的网站请求公钥。
  3. 银行将公钥以及证书发送给Alice。
  4. Alice的浏览器验证证书合法性
  5. Alice的浏览器使用银行的公钥将自己的对称密钥加密。
  6. Alice的浏览器将加密后的对称密钥发送给银行。
  7. 银行使用私钥解密得到Alice浏览器的对称密钥。
  8. Alice与银行可以使用对称密钥来对沟通的内容进行加密与解密了。

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

常用的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

  1. 1. HTML
    1. 1.0.1. localstorage\sessionstorage\cookie区别
  • 2. CSS
    1. 2.0.1. 盒子模型
  • 2.1. 回流与重绘
  • 3. JS
    1. 3.1. js事件以及react事件
      1. 3.1.1. react事件（待验证）
    2. 3.2. 猜结果1
    3. 3.3. 宏任务与微任务
    4. 3.4. requestAnimateFrame和requestIdleCallback
    5. 3.5. ES6 新特性
  • 4. 框架
    1. 4.1. React
      1. 4.1.1. 为什么React组件一定要引入React对象
      2. 4.1.2. setState是同步的还是异步的
      3. 4.1.3. React的合成事件
    2. 4.2. Typescirpt
      1. 4.2.1. interface 与type 的区别
      2. 4.2.2. 交叉类型与联合类型
    3. 4.3. Vue
    4. 4.4. 微信环境
      1. 4.4.1. 微信H5授权流程
      2. 4.4.2. 小程序授权流程
    5. 4.5. Node
      1. 4.5.1. express与koa的错误处理机制
        1. 4.5.1.1. express
        2. 4.5.1.2. koa
    6. 4.6. webpack
      1. 4.6.1. webpack常用的配置，以及其作用
      2. 4.6.2. webpack如何配置多页面
      3. 4.6.3. 如果两个模块互相引用，会发生什么
  • 5. 其他
    1. 5.1. http与https
      1. 5.1.1. https的加密过程
        1. 5.1.1.1. 对称加密
        2. 5.1.1.2. 非对称加密
        3. 5.1.1.3. 哈希算法
        4. 5.1.1.4. 数字签名
      2. 5.1.2. 加密流程
    2. 5.2. 常用的http状态码
    3. 5.3. HEAD、OPTION请求
    4. 5.4. http缓存机制
    5. 5.5. 什么是幂等性，哪些方法是幂等请求
    6. 5.6. 前端安全