2020前端面试的一点小技巧

2020最全的前端面试指南，一个多月 1.8w 字的面试经验积累，凭借它最终成功入职大厂…… 今年的金三银四刚好赶上疫情，很多大公司都停止招聘甚至裁员，想跳槽的小伙伴被打的措手不及。 需求减少要求肯定随之提高，谨以此面经献给在如此艰难之时逆风而动、勇敢坚强的你~ 前言 今年问的难度和深度应该比前几年有所增加，下面从总体分析和重要点两个维度来分析一下： 总体分析 前端问的最多的还是 js基础、计算机网络基础等，建议在此处多下功夫。而 css 相关的很少问到，最多也就问个三栏布局、两栏布局、水平垂直居中，把前两节看了面试基本没啥问题。框架 React/Vue 相关的在中小公司问的多一些，差不多占到面试时间的一半。而大厂不爱问框架，更注重基础，因为入职之后让你用哪个框架你就用哪个框架…即使问也是问比较底层的东西，比如 vue 的双向绑定原理。 重要点 最后再列举几个重要的点，无论大中小公司基本都会问的： 性能优化，以及每个优化点具体怎么做，每个点都可能延伸了问。 比如你说异步加载，面试官会追问异步加载的方法，deffer 和 async 的区别。你说充分利用缓存，面试官会问缓存都有哪些方式，什么是强缓存什么是协商缓存，它们的返回码分别是什么，哪些资源存在 memory cache 哪些存在 disk cache…http/https/http2.0。三次握手四次挥手，https 为什么安全为什么慢，跟 http 的区别，http2.0 都有哪些优化，浏览器输入url到看到页面的整个流程…安全类的常见的攻击手段，记好 CSRF 和 XSS 攻击的原理和防范措施就好了。ES6 新特性，还有针对 var 和 let 的各种变态题。跨域的几种方式。除了以上这些，大公司还喜欢让你介绍一个你觉得做的比较好的项目，有哪些亮点。这块一定要好好准备，你讲的项目用到的技术最好能够了解的非常深入，避免给自己挖坑。 这篇文章内容比较多，后面会出一个精简重点版便于复习，敬请期待~一、页面布局三栏布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应。解答：可以有很多种布局方式，这里列出五种：float布局，absolute布局，flex布局，table布局，grid布局，代码如下：

面试时至少写出三种哦。接下来问题可能会有三个延伸方向： 每种方案的优缺点？如果高度不固定，实践中一般用哪种？以上几种方案的兼容性如何？ 每种布局的优缺点 1. float 布局 优点： 比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 2. 绝对布局 优点：很快捷，设置很方便，而且也不容易出问题缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。 3. flex 布局 优点：简单快捷缺点：不支持 IE8 及以下 4. table布局 优点：实现简单，代码少缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。 5. grid布局 跟 flex 相似。 水平垂直居中 absolute + 负margin 这种方式比较好理解，兼容性也很好，缺点是需要知道子元素的宽高

12345

absolute + auto margin这种方法兼容性也很好，缺点是需要知道子元素的宽高

.inner{
position: absolute;
width: 100px;
height: 100px;
background: yellow;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}

absolute + calc这种方法的兼容性依赖于 calc，且也需要知道宽高

.inner{
position: absolute;
width: 100px;
height: 100px;
background: yellow;
left: calc(50% - 50px);
top: calc(50% - 50px);
}

absolute + transform兼容性依赖 translate，不需要知道子元素宽高

.inner{
position: absolute;
background: yellow;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

tablecss新增的table属性，可以让我们把普通元素，变为table元素的显示效果，通过这个特性也可以实现水平垂直居中。这种方法兼容性也不错。

.inner{
display: inline-block;
background: yellow;
width: 100px;
height: 100px;
}

flexflex 实现起来比较简单，三行代码即可搞定。可通过父元素指定子元素的对齐方式，也可通过 子元素自己指定自己的对齐方式来实现。第二种方式见 grid 布局。

.inner{
background: yellow;
width: 100px;
height: 100px;
}

gridgrid 布局也很强大，大体上属性跟 flex 差不多。//方法一：父元素指定子元素的对齐方式

//方法二：子元素自己指定自己的对齐方式

页面布局小结： 语义化掌握到位页面布局理解深刻CSS基础知识扎实思维灵活且积极上进代码书写规范 二、CSS盒模型 CSS盒模型是前端的基石，这个问题由浅入深，由易到难，可以依次问出下面几个问题 基本概念：标准模型 + IE模型标准模型 和 IE模型的区别CSS如何设置这两种模型JS如何设置和获取盒模型对应的宽和高实例题（根据盒模型解释边距重叠）BFC（边距重叠解决方案） 1、基本概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
2、标准模型与IE模型的区别
标准模型与 IE 模型的区别在于宽高的计算方式不同。
标准模型计算元素的宽高只算 content 的宽高，IE模型是 content + padding + border 的总尺寸。

3、如何设置这两种模型//设置标准模型
box-sizing: content-box;
//设置IE模型
box-sizing: border-box;
box-sizing 的默认值是 content-box，即默认标准模型。4、JS如何设置盒模型的宽和高假设已经获取的节点为 dom//只能获取内联样式设置的宽高
dom.style.width/height

//获取渲染后即时运行的宽高，值是准确的。但只支持 IE
dom.currentStyle.width/height

//获取渲染后即时运行的宽高，值是准确的。兼容性更好
window.getComputedStyle(dom).width/height;

//获取渲染后即时运行的宽高，值是准确的。兼容性也很好，一般用来获取元素的绝对位置，getBoundingClientRect()会得到4个值：left, top, width, height
dom.getBoundingClientRect().width/height;
5、BFC 什么是 BFC？Block Formatting Context（块级格式化上下文）。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子： block-level box: display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；inline-level box: display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；run-in box: css3 中才有， 这儿先不讲了。 Formatting Context Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。 如何创建BFC float的值不是none。position的值不是static或者relative。overflow的值不是visible。display的值是inline-block、table-cell、flex、table-caption或者inline-flex。 BFC的作用 利用BFC避免margin重叠自适应两栏布局清除浮动 三、DOM事件 3.1 事件级别 三个事件级别，注意没有 DOM1，因为 DOM1 标准制定的时候没有涉及 DOM事件。DOM3 比 DOM2 只是增加了一些事件类型。 DOM0：element.onclick = function(){}DOM2：element.addEventListener(‘click’, function(){}, false)DOM3：element.addEventListener(‘keyup’, function(){}, false)### 3.2 事件模型和事件流 DOM事件模型包括捕获和冒泡。事件流即用户与界面交互的过程中，事件的流向过程。3.3 DOM事件捕获的具体流程 捕获的流程为：window -> document -> html -> body -> … -> 目标元素。冒泡的流程为：目标元素 -> … -> body -> html -> document -> window。 3.4 Event 对象常见应用 event. preventDefault() 取消事件的默认动作。 event.stopPropagation() 阻止事件冒泡。 event.stopImmediatePropagation() 阻止剩下的事件处理程序被执行。如果一个元素上绑定了三个事件，在其中一个事件上调用了这个方法，那其他 的两个事件将不会被执行。 3.5 事件捕获流程和自定义事件示例

<div id="wrapper">点我啊点我啊</div>

<script type="text/javascript">
	var eve = document.getElementById('wrapper');

	//验证事件捕获过程
	window.addEventListener('click', function(){
		console.log('window capture')
	}, true)

	document.addEventListener('click', function(){
		console.log('document capture')
	}, true)	

	//document.documentElement 获取的是 html 标签
	document.documentElement.addEventListener('click', function(){
		console.log('html capture')
	}, true)

	document.body.addEventListener('click', function(){
		console.log('body capture')
	}, true)

	eve.addEventListener('click', function(){
		console.log('eve capture')
	}, true)

	//自定义事件
	var customEvent = new Event('test')
	eve.addEventListener('test', function(){
			console.log('自定义事件 test 触发')
	}, true)

	setTimeout(() => {
		eve.dispatchEvent(customEvent)
	}, 3000)
</script>

控制台打印的结果为：window capture document capture html capture body capture eve capture 证明了事件捕获的流程为：window -> document -> html -> body -> ... -> 目标元素。自定义事件设定了 3秒后触发，刷新页面，3秒后控制台打印出 自定义事件 test 触发 。 四、HTTP协议 4.1 http协议的主要特点 简单快速、灵活、无连接、无状态HTTP三点注意事项： HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都