前端面试

2021-11-27 大约 3 分钟

# 前端面试

html 公共属性有哪些？自定义属性?
- id class style
- data-*:可以通过js脚本获取/设置自定义属性，也可以使用CSS属性选择器进行样式设置
form 表单如何进行提交？
- 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮
介绍下 iframe，它有哪些优点和缺点
- 优点：类似ajax可以在页面不加载的部分刷新
- 缺点：https://blog.csdn.net/yintianqin/article/details/72625785
css 中的display 属性有哪些值？
- none
- block
- inline
- inline-block
- inherit
- https://www.cnblogs.com/zhuzhenwei918/p/6058457.html
如何使用 flex 设置水平垂直居中？

    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */

1
2
3

处理过哪些 css 兼容性问题: https://zhuanlan.zhihu.com/p/97418850
解决父元素塌陷的方法: https://www.php.cn/css-tutorial-408260.html
三次握手、四次挥手 :
- 三次握手：tcp协议建立连接的过程，需要3次握手的理由是要确认服务端和客户端的发送和接受能力都是正常的。如果只有两次握手，服务端无法判断自己的发送能力是否正常。
- 四次挥手：客户端发fin包，服务端发ack包，数据发完之后发fin包，客户端发ack包
- https://www.bilibili.com/video/BV1kV411j7hA
分别说一下 XSS、CSRF、Dos/DDoS、点击劫持、sql 注入
怎么处理 XSS？
ES6 新增的内容
- let const
- 箭头函数
- 模板字符串
- Spread / Rest 操作符
- https://www.jianshu.com/p/ac1787f6c50f
详细说一下闭包和箭头函数分别解决了什么问题？
- 闭包 (opens new window) 是指内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回后，闭包可以读取函数内部的变量，如下面的count，但会增加内存消耗
```
function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1
alert( counter() ); // 2
```
1
2
3
4
5
6
7
8
9
10
11
12
13
- 箭头函数没有自己的this，如果访问 this，会从外部获取
this的指向问题：
- https://blog.csdn.net/MiemieWan/article/details/110471580
改变 this 指向的方法
- 通过call、apply、bind显示绑定，
- 三个区别：bind参数用逗号隔开，返回函数；call参数用逗号隔开，apply参数为数组，call和apply返回undefined
- https://blog.csdn.net/MiemieWan/article/details/110471580
介绍一下 event loop，宏任务微任务

说说防抖节流

防抖：用户过于频繁的重复操作，只执行最后一次

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
<input type="text">
<script>
	// 防抖，500毫秒之内的操作都不要，过了500毫秒则执行console.log(this.value)
	let inp = document.querySelector("input");
	let timer = null;
	inp.oninput = function () {
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => {
			console.log(this.value)
		}, 500);
	}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

节流：用户过于频繁的重复操作，控制执行次数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
<input type="text">
<script>
	// 节流：每500毫秒执行一次
	let inp = document.querySelector("input");
	let flag = true;
	inp.oninput = function () {
		if (flag) {
			setTimeout(() => {
				console.log(this.value)
                flag = true;
			}, 500);
		}
		flag = false;

	}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

webpack 的 loarder 和 plugin 的区别？
plugin 的按需加入的原理？
webpack 除了 loader、plugin、entry、output 还有哪些属性？
vue2 和 vue3 响应式的区别
vue 异步加载的方式
说一下 vuex 的 API？（我说了 state、getter、mutation、action、module 后，让我说他们内部的 API，难道是辅助函数？）
说一下 composition API
vue 如何导入插件？（我说直接在 main.js 里面导入相应的插件后，然后 .use）

前端面试

# 前端面试

详情