前端面试总结

juo666

已于 2022-06-21 23:07:17 修改

阅读量129

点赞数 1

文章标签：经验分享

于 2022-06-07 21:44:20 首次发布

本文链接：https://blog.csdn.net/qq_42966709/article/details/123300106

版权

一、HTML

二、CSS

1.让元素居中

1.行内样式：text-align:center
2.图片：vertical-align: middle;
3.dispaly:absolut,top:50%,left:50%,transform:translate(-50%,-50%);
4.display:flex;margin:auto

2.媒体查询

媒体查询基本用法

3.重排（回流），重绘，及如何减少

4.flex布局

5.画个圆，画个三角形

transparent(透明的)

.kailong{

width:0;

height:0;

border-right:50px solid transparent;

border-left:50px solid transparent;

border-top:50px solid red;

}

border-raduis:50%

css画三角形

6.width包括什么

box-sizing有两种模式
-border-box(content,padding,border)
*content-box(content)
子元素的width:100%，继承父元素的content

7.伪类和伪元素的区别

：hover伪类，：：before伪元素
伪类是一个已存在但你不能直接看到的元素，伪元素是创建出了一个新元素，。

8.CSS哪些样式可以继承

1、所有元素可继承：
visibility、cursor
2、内联元素可继承：
white-space、line-height、color、font（font-family、font-size、font-style、font-variant、font-weight）、text-decoration、text-transform、direction
3、块状元素可继承：
text-indent、text-align
4、列表元素可继承：
list-style、list-style-type、list-style-position、list-style-image

9.12px字体缩小

.text{ font-size: 12px; transform: scale(0.8); }

三、JS

1.宏任务和微任务

2.作用域链

3.原型链

4.script标签中的defer和async属性

defer和async属性

5.深拷贝和浅拷贝

深拷贝的几种方法

6.判断一个变量是否为数组

instanceof及原理
[对象] instanceof [构造函数],右边变量的prototype在左边变量的原型链上即可
constructor
Object.prototype.toString.call(arr)==‘[object Array]’

7.js的同源策略，常见的跨域方法

8种跨域方法

8.闭包，垃圾回收机制，闭包的应用场景

闭包的应用场景

setTimout内函数传参
防抖
变量私有化

9.防抖节流

10.哪些操作会改变原数组

11. _ proto _和prototype的区别

12.JS继承有哪些方式

js的6种继承方式

13.点击DOM之后发生了什么

“DOM2级事件”规定的事件流包括三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段
dom事件处理方式

14.事件委托和事件冒泡

DOM中的事件

// 一个数目很多的列表，我们要实现的功能是点击每个li都弹出它自己的内容
		// 通过id方式获取根组件
		var root=document.getElementById("root");
		// 在根组件上绑定函数，根据冒泡机制，当点击子组件时，会以冒泡的形式向上层层触发
		// 在子组件中不做处理，统一委派到根组件处理
		root.onclick = function (event){
			var event = event || window.event;
			// 获取产生事件的对象（子组件本身）
			target = event.target || event.srcElement;
			// 控制台查看
			console.log(target); 
			alert(target.innerText);
		};

15.JS的设计模式

单例模式，对象字面量
工厂模式，构造函数

16.手写call函数

四、ES6

1. var,let,const，暂时性死区

2.ES6新特性有哪些

3.Promise有几种状态，Promise.all

4.ES6中新增的数组遍历方法

5.Promise的原理，Promise.then的链式调用及分别调用有什么区别，async和await

6.class原理

本质是语法糖
里面的constructor（）构造方法，相当于构造函数
类的所有方法都定义在类的prototype属性上面，也就是原型对象上
类上的方法前面要加static

calss原理

7.ES5和ES6继承的几种方式

ES5

call，apply，bind-----借用构造函数继承，构造函数内指向另一个构造函数
原型链----子类构造函数的prototype指向父类的实例对象new Parent()
混合方式

ES6

extends方法（constructor内用super方法）

fclass Animal {
	constructor (name) {
		this.name = name
	}
	showName () {
		alert(this.name)
	}
}
class Cat extends Animal {
	constructor (name) {
		super(name)
	}
	sayMy () {
		super.showName()
	}
}

js继承的方法

五、网络知识

1.输入网址到浏览器渲染的整个过程

2.TCP三次握手四次挥手，何时建立长连接

Tcp的短连接和长连接

3.https加密过程

客户端发送含SSL指定版本、加密组件列表（所使用的加密算法及密钥长度等）的报文。
服务器发送包含SSL版本以及加密组件作为应答。
之后服务器发送Certificate报文。报文中包含公开密钥证书。
最后服务器发送Server Hello Done 报文通知客户端，最初阶段的SSL握手协商部分结束。
客户端以Client Key Exchange报文作为回应。报文中包含随机密码串，用公开密钥进行加密。
接着客户端继续发送Change Cipher Spec报文。该报文会提示服务器，在此报文之后的通信会采用Pre-master secret密钥加密。
步骤 7 ：客户端发送Finished报文。该报文包含连接至今全部报文的整体校验值。这次握手协商是否能够成功，要以服务器是否能够正确解密该报文作为判定标准。

步骤 8 ：服务器同样发送Change Cipher Spec报文。

步骤 9 ：服务器同样发送Finshed报文。

步骤 10：服务器和客户端的Finished报文交换完毕之后，SSL连接就算建立完成。当然，通信会受到SSL的保护。从此处开始进行应用层协议的通信，即发送HTTP请求。

步骤 11 ：应用层协议通信，即发送HTTP响应。

步骤 12 ：最后由客户端断开连接。断开连接时，发送close_notify报文。

https流程简介
 https加密过程

4.http缓存

http缓存

5.http常见状态码

6.axios的原理

promise和ajax

7.前端常见的网络攻击解解决

XSS跨脚本攻击(反射型，存储型)——转义，前端正则输入限制，合理使用get，post
SQL注入
CSRF跨脚本伪造——token令牌验证（请求地址添加 token ，使黑客无法伪造用户请求，token即防伪码，不在cookie中。随机产生，一般放在session中）验证码二次验证
常见网络攻击及解决