前端面试汇总

css相关：

• css3特性

	新增选择器，圆角，阴影，文字效果，渐变，2d/3d转换,过渡，动画,字体图标。媒体查询。

• 三栏布局
• 二栏布局
• 移动端rem 如何设置的:

	px：精确地描述元素大小，不随屏幕大小的变化而变化；
	em：相对于父元素的大小，如果有层层嵌套的话会导致这个值非常大或者非常小。
	rem：font size of the root element，即相对于根元素字体的大小。
	然后通过媒体查询针对不同的屏幕大小设置font-size的百分比，就可以实现前端页面适配了。

• position 几个值？ 分别 相对谁

	absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
	fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
	relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
	static 默认值。没有定位，元素出现在正常的流中
	sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

• BFC 布局 原理
  参考：https://www.cnblogs.com/ranyonsue/p/9204986.html

	BFC(Block formatting context)直译为"块级格式化上下文"。
	Block fomatting context = block-level box + Formatting Context
	block-level box即块级元素
	Formatting context是W3C CSS2.1规范中的一个概念。
	它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。
	最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。
	
	它是一个独立的渲染区域，只有Block-level box参与， 
	它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 
	

• CSS 选择器优先级

	优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
	类型选择器 < 类选择器 < ID 选择器
	介绍：
		类型选择器（例如，h1）和伪元素（例如，::before）>
		类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）
		ID 选择器（例如，#example）。

• 垂直居中？ 尽可能多的方法？

	1. 受控元素:position: relative  top: 50%; /*偏移*/ margin-top: -150px; (移动盒子一般)；
	2. 上述margin-top可以更改为 transform: translateY(-50%);
	3. 弹性布局;
	4. 父容器设置为display:table ，然后将子元素也就是要垂直居中显示的元素设置为 display:table-cell 。
	 (但是，这是不值得推荐的，因为会破坏整体的布局。如果用table布局，那么为什么不直接使用table标签了？那不更加方便吗？)
	5. 父元素position: relavtive; 受控元素 position: absolute; margin: auto;  绝对定位和0 ;
	6. translate;
	7. display:inline-block;
	8. 父元素：display:flex；text-align: center;受控元素：margin:auto;
	..... 灵活使用最少有这些

• flex 相关？ flex布局 以及属性

	弹性布局
	1. 决定项目排列方向：		 flex-direction: row | row-reverse | column | column-reverse; 
		* row（默认值）：主轴为水平方向，起点在左端。
		* row-reverse：主轴为水平方向，起点在右端。
		* column：主轴为垂直方向，起点在上沿。
		* column-reverse：主轴为垂直方向，起点在下沿。
	2. 一条轴线排不下，如何换行  flex-wrap: nowrap | wrap | wrap-reverse;
		* nowrap（默认）：不换行。
		* wrap：换行，第一行在上方。
		* wrap-reverse：换行，第一行在下方。
	3.  项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around;

• 实现一个三角形 或者一个扇形 和梯形

	// 三角形
	{
		height: 0;
        width: 0;
        border-width: 50px;
        border-style: solid;
        border-color:  transparent #ff0 transparent transparent;
	}
	// 扇形
	{
		height: 0;
        width: 0;
        border-width: 50px;
        border-style: solid;
        border-color:  transparent #ff0 transparent transparent;
        border-radius: 50%;
	}
	// 梯形
	1. 利用border加粗方式。对一个高度为0px的正方形的div的border-top进行增粗。利用了css的transparent属性。
		{
			width:300px;
			height:0;
			border-top:100px solid;
			border-left:100px transparent;
			border-right:100px transparent;
		}
	2. 利用3d旋转和透视3d旋转和透视方式   （变形厚度div上添加一个伪元素（：before）可以在梯形上增加文字等）
		{
			transform:  perspective(2em) rotateX(-10deg);
		}
			perspective：对元素进行透视操作
			rotateX：以x轴（横轴）进行旋转（前后仰俯）

• 物理像素

	pt（point，磅）：是一个物理长度单位，指的是72分之一英寸。
	设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，
	通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，
	它上面的物理像素点就固定不变了，单位pt。
	pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。
	
	注意
		CSS 像素（CSS Pixel）:
		又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。
		CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。比如 iPhone 6 的 CSS 像素数为 375 x 667px。
		
		设备像素（Device Pixels）:
		又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。
		从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。比如 iPhone 6 的分辨率为 750 x 1334px
		
		设备像素比（DevicePixelRatio）:DPR = 设备像素 / CSS 像素

• 说一下用到的布局

	1.静态布局：
	
		静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。
		针对不同分辨率的手机端，分别写不同的样式文件。
	
	2.流式布局：
	
	 	元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。
	 	
	3.弹性布局：

		css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，
		然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；
		
	3.自适应布局：

		分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，
		当窗口大小到达一定分辨率时变化一次。创建多个静态布局，
		每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。


	4.响应式布局：
	
	    <meta name=”viewport” content=”divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
	
		使用meta标签设置，页面元素宽度随窗口调整自动适配。
		采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。
	
	在我们前端前端开发时怎么去选择布局方式。
	
		1.如果只做pc端，那么静态布局是最好的选择；
		
		2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
		
		3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，这个时现在比较流行的方式。

• 实现一个css 动画

	{
		 -webkit-animation-name:'abc';/*动画属性名，也就是我们前面keyframes定义的动画名*/
		 -webkit-animation-duration: 10s;/*动画持续时间*/
		 -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
		 -webkit-animation-delay: 2s;/*动画延迟时间*/
		 -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
		 -webkit-animation-direction: alternate;/*定义动画方式*/
	}
	
	设置动画的过程主要用到了keyframes。
	@-webkit-keyframes "abc"{
	    0% {
            background-color: black;
        }
        25% {
            background-color: red;
        }
        50% {
            background-color: pink;
        }
        75% {
            background-color: blue;
        }
        100% {
            background-color: yellow;
        }
	}

js 基础相关

• es6 知道的有哪些

	函数默认参数，箭头函数，let,const以及块级作用域，类，模板字符串等。

• let const var 区别

	let:
		1. 作用域是块级作用域。
		// 在一个块级作用域中，变量唯一存在，一旦在块级作用域中用let声明了一个变量，那么这个变量就唯一属于这个块级作用域，不受外部变量的影响；
		2. 不存在变量声明提前；
		// 无论在块中的任何地方声明了一个变量，那么在这个块级作用域中，任何使用这个名字的变量都是指这个变量，无论外部是否有其他同名的全局变量；
		3. 不能重复定义
		// 暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
		4. 存在暂时性死区：可以这样来理解
		// 暂时性死区的意义：让我们标准化代码。将所有的变量的声明放在作用域的最开始。
	
	const:
		一般用来声明常量，且声明的常量是不允许改变的，只读属性，因此就要在声明的同时赋值。
		const与let一样，都是块级作用域，存在暂时性死区，不存在变量声明提前，不允许重复定义。
	
	var:
		1. var的作用域是函数作用域，在一个函数内利用var声明一个变量，则这个变量只在这个函数内有效	
		2. 存在变量声明提前（虽然变量声明提前，但变量的赋值并没有提前，因此下面的程序不会报错，但a的值为undefined）
		

• js 执行机制

	JavaScript中代码的处理方式：单线程 + 事件队列(callback queue);	
    JavaScript中有三种事件类型是异步处理的：
	
	1：定时函数（延时时间已经达到）
	2：事件函数（给DOM绑定的特定事件被触发）
	3：ajax的回调函数（服务器有数据相应）

• 页面dom 渲染流程简单说下
  参考：https://blog.csdn.net/bjpowernode_com/article/details/86491599

	纯后端渲染
		 浏览器发起页面请求 => 服务器响应并完成页面渲染
		 优点：浏览器爬虫来说也更有好，对SEO更有帮助
		 缺点：纯后端渲染很难带来良好的交互体验
	纯前端渲染
		服务器以API的形式返回各种数据，然后由js把数据重新组合成DOM
		优点：交互的部分可以脱离数据接口独立的开发和调试，让站点的交互能力大幅的提升
		缺点：用户的网络到服务器网络的访问延迟
 	服务端的js渲染结合前端渲染
 	
	

1
2
3

• 箭头函数 和普通函数区别

	箭头函数是匿名函数，不能作为构造函数，不能使用new
	箭头函数不绑定arguments，取而代之用rest参数...解决
	箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
	箭头函数通过 call()  或   apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
	箭头函数没有原型属性
	箭头函数不能当做Generator函数,不能使用yield关键字

• 闭包 应用场景

	当函数a的内部函数b被函数a外的一个变量引用的时候就行成了一个闭包。

• 构造函数 和原型链 以及继承的方式 和优缺点

• promise 实现链式调用

• promise.all

• promise 捕获错误信息 （反正promise 相关问的频率很高）

• new 一个实例 发生了什么？

• 数组 遍历的方法？ map 和forEach 区别

• 数组去重的方法？写一写

• axios fetch ajax 区别

浏览器和网络协议相关

• 浏览器缓存

	Web 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。
	浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。
	1. indexDB：
		读取异步。
		大小：不少于 250MB，甚至没有上限。
		
	2. cookie
		大小： 不超过4KB。
	3. localstorage 
		读取同步
		大小： 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引
		

• http 缓存
  

	1. Pragma
	2. Cache-Control
	3. Expires	
		强缓存：不用请求服务器，直接使用本地的缓存。
		强缓存是利用 http 响应头中的Expires或Cache-Control实现的。【重要】
		浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。比如：
	4. 

• https 和http 区别

	1. http:
		超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，
		互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。
		设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
		
		无状态：
			协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作
		无连接：
			HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。
			比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，
			需要耗费不必要的时间和流量。
		基于请求和响应：
			基本的特性，由客户端发起请求，服务端响应
		简单快速、灵活
		通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性
		
	2. https:
		基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
		
		内容加密：
			采用混合加密技术，中间者无法直接查看明文内容
		验证身份：
			通过证书认证客户端访问的是自己的服务器
		保护数据完整性：
			防止传输的内容被中间人冒充或者篡改

• TCP 和UDP 区别？ TCP 三次握手

		传输控制协议（TCP）：
			TCP（传输控制协议）定义了两台计算机之间进行可靠的传输而交换的数据和确认信息的格式，以及计算机为了确保数据的正确到达而采取的措施。
			协议规定了TCP软件怎样识别给定计算机上的多个目的进程如何对分组重复这类差错进行恢复。
			协议还规定了两台计算机如何初始化一个TCP数据流传输以及如何结束这一传输。
			TCP最大的特点就是提供的是面向连接、可靠的字节流服务。
		用户数据报协议（UDP）：
			UDP（用户数据报协议）是一个简单的面向数据报的传输层协议。
			提供的是非面向连接的、不可靠的数据流传输。UDP不提供可靠性，也不提供报文到达确认、排序以及流量控制等功能。
			它只是把应用程序传给IP层的数据报发送出去，但是并不能保证它们能到达目的地。
			因此报文可能会丢失、重复以及乱序等。
			但由于UDP在传输数据报前不用在客户和服务器之间建立一个连接，且没有超时重发等机制，故而传输速度很快。 [2]		

	1. TCP UDP区别
		1>、连接方bai面区别
		
        	TCP面向连接du（如打电话要先拨号建立连接）。
			UDP是无连接的，即发zhi送数据之前不需要建立连接。dao

		2>、安全方面的区别

			TCP提供可靠的服务，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达。
			UDP尽最大努力交付，即不保证可靠交付。

		3>、传输效率的区别

			TCP传输效率相对较低。
			UDP传输效率高，适用于对高速传输和实时性有较高的通信或广播通信。

		4>、连接对象数量的区别
		
			TCP连接只能是点到点、一对一的。
			UDP支持一对一，一对多，多对一和多对多的交互通信。
			
	2. 一个完整的http请求实务：
	
		域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 -->服务器响应http请求，浏览器得到html代码 -->浏览器		解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
		
	3. TCP三次握手
	
		浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。
		该握手包括
			一个同步报文，
			一个同步-应答报文
			一个应答报文，
	   	这三个报文在 浏览器和服务器之间传递。
	   	该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

• http code 码

	一些常见的状态码为：
		200 - 服务器成功返回网页
		401 - 登录失效
		404 - 请求的网页不存在
		503 - 服务不可用
	详细分解:
		1xx （临时响应） 	表示临时响应并需要请求者继续执行操作的状态代码。
		2xx （成功）     	表示成功处理了请求的状态代码。
		3xx （重定向）   	表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
		4xx （请求错误） 	表示请求可能出错，妨碍了服务器的处理。
		5xx （服务器错误）  表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

• 浏览器攻击 XSS 和CRSF 如何防御？

• 页面性能优化，做过哪些？

	1. 资源压缩合并，减少http请求
	
		合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩
		图片较多的页面也可以使用 lazyLoad 等技术进行优化。
		精灵图等
	2. 非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别
	3. 利用浏览器缓存 --> 缓存的分类 --> 缓存的原理
	4. 使用CDN
	5. DNS预解析
		

• 跨域 用的哪些？ 原理什么？

• 线程和进程

• 事件循环

• CDN 原理

React 相关

• setState 发生了什么？如何同步到页面上的？

• 最新生命周期

• 为什么会存在不安全生命周期

• react15-16 发生了什么变化？

• hooks 引用 有什么好处？ 和class 相比？

• useMomo 和useCallback 以及useEffect

• 你在react 中你做的优化? 有哪些？

• 虚拟DOM 讲下？ fiber 讲下？

• mobx 原理，如何做监听的？

• react-router 动态 和按需

Vue 相关

• 数据绑定原理

• 工具相关

• webpack 打包策略

• 有没有做过优化 webpack

• 项目中 webpack 做的配置？

• git 项目管理中（给出一些场景 让你回答，这个比较少一点）

书写题目

• 实现一个 promise.all

• 给你一个方法改写 成promise

• 原型链中出题 举例：

• Function.prototype.name = ()=>alert(1)

• Object.prototype.age = ()=>alert(2)

• function A(){}

• const dd = new A()

• dd.name()

• dd.age()

• 写一个去重

• 写一个二分查找

• 写一个防抖节流

• 写一个返回字符串中出现最多的字符

• 写一个发布订阅

• js 实现下 call apply 来改变 this 执行

• 获取dom 深度

• 写一个方法 创建domtree

• 可能问你原来封装过最难的组件，简单实现以下。。。（算法看运气吧）

狗蛋自用

1. redux，vuex 
2. vue3.0 https://www.yuque.com/woniuppp/vue3/intro 跟新了那些东东西哦
3. react + vue 理念性看看
4. 为什么要用hook 和 ts 优势是什么 hook(（react 项目中的父组件state改变，子组件触发props改变）)
5. 看看es6/es7
6. 了解ng/linux  nodex
7. 了解webpack gulp 半封装webpack
8. 找到echarts vant antd(4.0的提升有哪些坑 比如不能直取form等)) element 等组件实际开发中的坑
9. 看看数组的方法
10. 

简单说下大厂面试总结

58 面试记录

• js事件处理机制

	JavaScript中代码的处理方式：单线程 + 事件队列(callback queue);	
    JavaScript中有三种事件类型是异步处理的：
	
	一：定时函数（延时时间已经达到）
	
	二：事件函数（给DOM绑定的特定事件被触发）
	
	三：ajax的回调函数（服务器有数据相应）

• 原型链

	 每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。
	 查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，
	 如果还是没有的话再去向原型对象的原型对象里去寻找...... 
	 这个操作被委托在整个原型链上，这个就是我们说的原型链了

• js执行上线文
• 项目做的优化
• 浏览器缓存
• 虚拟dom
• 页面渲染流程
• 如何说服别人使用react
• node （没说）
• mobx 和redux

58二面

• 实现 一个联动 （需要注意的重要逻辑，需要几个数据管理，dom 结构，对外暴露的接口）
• 两个数只和

美团面试一面

项目 （认为最好的项目）
setState 为什么会异步 （回答不好）
vue 双向绑定 原理
检测 对象是否有环
修改 一个对象 cost obj={a:1} obj.a = 2 console.log(a) //1
为什么会废弃 componentwillMount （没有回答出来）
webpack loader 和插件的区别
react 15 和16 的区别 （介绍了一个fiber）
出了一个setTimeout 和promise的提，微任务有哪些？
a in window ’a‘ in window
axios 扩展 封装一个包
object.define
typescript 中class 和ES6 中class

美团二面

js 实现 eventEmiter
promise.all (修改await)
catch 和then方法
跨域
http缓存
可以参考我写的
链接: www.jianshu.com/p/74de04262202

xss 攻击防御
endecodeurl 和encodeurlCompents
性能优化
react hooks 不安全生命周期和最新的 static 运行（）
es6 Map 和object 区别
链接: https://www.jianshu.com/p/3096461e5317

滴滴一面

节流函数
https://www.jianshu.com/p/d7d34e6d842c

二分查找
https://www.jianshu.com/p/fbd15c5c7d2e

react 数据流
promise 如何保证 链式调用 顺序
跨域
箭头函数
https://www.jianshu.com/p/59be0fc4f4a6

react super
webpack splitchunk
less loader 执行顺序
dom diff 遍历 深度还是广度
react 最新 生命周期的 静态方法
node 服务端渲染（没做过）
静态方法 getDerivedStateFromProps 的理解 和作用
setState 同步还是异步的
https://www.jianshu.com/p/9347fd5506e0

immutable

滴滴二面

react hooks 好处；
react -router 中hansh 路由 和 history 修改，底层 以及外层传到子组件的
错误上报
node 服务端渲染 ssr
微前端 相关
ts 中 新老项目 使用Ts ，如何修改老的项目
你在项目中 的优点，以及做的好的地方
组内成员你的定位
node 层偏多
内存泄漏，检查 前端和后端 检测方法
最后拿了58 和滴滴的 offer

作者：Lyan_2ab3
链接：https://www.jianshu.com/p/c141d9d85de6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。