mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-08-18 23:49:33 +08:00
257 lines
4.1 KiB
Markdown
257 lines
4.1 KiB
Markdown
# 【用友金融】前端面试题总结
|
||
|
||
## 回流与重绘
|
||
|
||
下列关于回流和重绘的说法错误的是
|
||
|
||
- 回流的性能开销大于重绘的性能开销
|
||
- 当页面结构、尺寸等改变时会发生回流
|
||
- 回流一定会引起重绘，重绘也一定会引起回流(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) |