# 【用友金融】前端面试题总结

## 回流与重绘

下列关于回流和重绘的说法错误的是

- 回流的性能开销大于重绘的性能开销
- 当页面结构、尺寸等改变时会发生回流
- 回流一定会引起重绘，重绘也一定会引起回流(x)
- 当页面结构不改变只是样式发生改变时会发生重绘，例如背景颜色改变时会发生重绘


- `display: none` 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
- `visibility: hidden` 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件
- `opacity: 0` 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

## CSS属性

下列选项中哪个描述对于visibility: hidden;与display: none;是正确的

- visibility属性不可继承
- visibility: hidden; 不占据页面空间
- display: none; 不占据页面空间(√)
- 都无法通过DOM交互

## 函数执行结果

### 题目1

```js
(function () {
  var a = (b = 5);
})();

console.log(b);
console.log(a);
```

结果为：

```
5
Error
```

### 题目2

```js
console.log(1 + '2')
console.log(1 - '2')
```

结果为：

```js
12
-1
```

### 题目3

```js
var a = 1

setTimeout(function () {
  a = 2
  console.log(a)
}, 0)

var a
console.log(a)

a = 3
console.log(a)
```

结果为：

```
1
3
2
```

### 题目4

```js
function f() {
  return f
}

console.log(new f() instanceof f)
```

结果为：

```
false
```

### 题目5

```js
var foo = {
  bar: function () {
    return this.baz
  },
  baz: 1
}

console.log(typeof (f = foo.bar)())
```

结果为：

```
undefined
```

### 题目6

```js
var a = (b = 1, c = 2)
console.log(a, b, c)
```

结果为：

```
2 1 2
```

### 题目7

```js
var company = {
  address: 'beijing'
}

var jjworld = Object.create(company)
delete jjworld.address
console.log(jjworld.address)
```

结果为：

```
beijing
```

### 题目8

```js
function side(arr) {
  arr[0] = arr[2]
}

function a(a, b, c = 3) {
  c = 10
  side(arguments)
  return a + b + c
}

console.log(a(1, 1, 1))
```

结果为：

```
12
```

## CSS权重的优先级

内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符

## HTTP状态码

越多越好

- 400 临时重定向
- 500 服务器内部错误
- 404 服务器无法找到对应资源
- 200 请求正常处理

## BFC(块级格式上下文)

下列选项对产生BFC描述错误的是：

- overflow为visible(x)
- position为absolute
- display为table-cell
- float属性不为none

## 元素浮动

设置元素浮动后，元素的display值哪个是正确的？

- inline-block
- float
- inline
- block(√)

## HTTP请求方法

下面哪个选项不是HTTP的请求方法

- HEAD
- PUT
- OPTIONS
- PUSH(x)

HTTP请求方法有：

`GET POST DELETE PUT OPTIONS`
`CONNECT HEAD PATCH TRACE`

## 跨域问题

通常有哪些方法解决跨域问题？

- 利用JSONP
- 反向代理
- 服务器配置CORS

## 了解Webpack的哪些配置项

- `resolve.alias` 为路径设置别名
- `resolve.extensionAlias` 后缀省略时 按此顺序指定的后缀名解析文件
- `module.rules` 包含`test` `loader` `option` 正则匹配后缀名 使用指定的loader解析文件

## 判断变量类型

直接使用`typeof`无法判断引用类型变量的类型

```js
console.log(typeof []) // object
console.log(typeof {}) // object
console.log(typeof null) // object
```

## JS浮点数相加精度问题

## 简单讲讲Vue Router原理

## ES6熟悉吗

[ES6教程](https://es6.ruanyifeng.com/)

- `let` `const`
- 解构赋值 扩展运算符 可选链
- `Promise` `Async`
- `Class` `Set` `Map` `Symbol` `Proxy`

## CSS如何实现水平居中与垂直居中

参见[CSS学习笔记](../note/CSS.md)