前端面试题之夺命13问，收藏一下不会错的

1.用css实现两端固定，中间自适应（至少两种方式）

	<div class=”box”>
		<div class=”left”></div>
		<div class=”center”></div>
		<div class=”right”></div>
	</div>

2、js中基本数据类型有哪几种？引用类型有哪几种？他们有什么区别(举例说明)？

3、写出下面代码的运行结果：

	async function async1(){
			console.log(‘async1 start’)
			await async2()
			console.log(‘async1 end’)	
	}
	async function async2(){
			console.log(‘async2 start’)
	}
	console.log(‘script start’)
	setTimeout(()=>{
			console.log(‘setTimeout’)
	},0)
	async1()
	new Promise(function(resolve){
			console.log(‘promise1’)
			resolve()
	}).then(function(){
			console.log(‘promise2’)
	})
	console.log(‘script end’)

4、如何解决跨域问题

5、call apply bind 的区别，map与forEach的区别，some与filter的区别

6、MVVM的实现原理是什么；

7、如何进行网站性能的优化；

8、简述一下防抖与节流的实现原理，并指出分别适用于什么场景；

9、简单算法之判断是否是回文字符串；

10、从输入url到页面显示，中间经历了什么;

11、哪些操作有可能造成内存泄漏；

12、输出下面代码的运行结果:

	let number = 5;
	let obj = {
		number : 3,
		fn1 : (function (){
			let number;
			this.number *= 2;
			number = number * 2;
			number = 3;
			return function (){
				let num = this.number;
				this.number *=2;
				console.log(num);
				number *=3;
				console.log(number)
			}
		})()
	}
	let fn1 = obj.fn1;
	fn1.call(null);
	obj.fn1();
	console.log(window.number)

13、思考题: 有64匹马，8个赛道，要决出前四名，最少需要赛几次？(马的恒定速率不变 — 同样的8匹马赛跑，名次永远是固定的)

明天公布答案 --！
1.第一题
float
.left{width:200px;float:left;}
.right{width:200px;float:right;}
.center{margin:0 200px;}
flex
.box{display:flex;}
.left,.right{width:200px;}
.center{flex:1}
定位
.box{position:relative}
.left{position:absolute; left:0; top:0; width:200px}
.right{position:absolute; right:0; top:0; width:200px }
.center{margin:0 200px;}

2.第二题
基本数据类型有: string,number,boolen,null,undefined,symbol
引用数据类型有: object array
区别：基本数据类型在js里存放在栈中，引用数据类型存放在堆中
例子：var a = 1; var b = a; b=2; console.log(a,b) // 打印结果为1,2
var obj1 = {age:18}; var obj2 = obj1; obj2.age = 19; console.log(obj1,obj2) // 打印结果为{age:19},{age:19}
此处表达出引用类型跟着变 基本类型不跟着变就可以

3．第三题(必须一个不错的正确写出打印顺序，错一个视为错)
‘script start’-> ‘async1 start’-> ‘async2 start’->‘promise1’->‘script end’->‘async1 end’->‘promise2’->‘setTimeout’

4．第四题(答案不固定，但必须包括下面几种)
1.proxy代理
2.后端改变响应头
3.get模式下使用jsonp

5．第五题
call apply bind ： 三者都可以绑定this的指向，call 与 apply 都会立即执行函数，但两者参数不同, bind绑定不会立即执行函数 需要调用才能执行。
map与forEach：map 返回一个新数组，forEach会改变原始数组
some与filter：some返回一个布尔值 满足条件返回true，不满足返回false。some不会改变数组的长度；filter会把满足的条件的数据组合成一个新数组返回出来 即返回一个满足条件的新数组，filter会改变数组的长度。

6．第六题（答出下面三个标黄的就算正确）
实现原理是数据劫持,vue2.0用的是Object.prototype,vue3.0(还没发布)用的proxy

7．第七题(答案不固定,有优化的思想即可)
1.减少http的请求
2.压缩图片，减小包的体积
3.合理利用缓存(协商缓存)
4.预加载，减少dom数量
5.使用CDN
6.减少iframe数量

8．第八题
函数防抖的原理是事件设定一个延迟时间，延迟时间内反复操作，方法只执行一遍
函数节流的原理是设置一个时间间隔，规定时间间隔内反复操作，方法只执行一遍

防抖跟节流都是为了解决频繁触发某个事件造成的性能消耗
防抖应用场景:模糊搜索调用接口提示 改变浏览器窗口大小伴随事件的时候
节流应用场景:鼠标不断点击触发，监听页面的滚动事件

9．第九题
function run(input){
if( typeof input !==’string’) return false;
return input.split(‘’).reverse().join(‘’) === input
}

10．第十题(答出大体过程就可以)
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互

11．第十一题（最少要有下面三条）
1、闭包引起的内存泄漏；
2、意外的全局变量引起的内存泄漏；
3、没有清理的DOM元素引起的内存泄漏；
4、被遗忘的定时器或者回调函数；
5、子元素存在引用引起的内存泄漏

12．第十二题
20

13．第十三题
11次
1.前8次 把马分为8组 一组8个 先跑一次 这样取出每一组的前四名(如果一组的前四名都进不去，那么全部的前四名也进不去)
2.第9次 把每组的第一名拉出来跑一次，取出前四名，如果小组的第一名都跑不了前四，那么整个组也跑不了前四，剩4组4匹， 16匹马 这里面还可以去掉6匹马 假设A组的第一名是这一次的第一名，那么他就是全部的第一名，那么A组四匹马有可能就是前四名，假设B组的第一名是本次的第二名，那么B组最多只有三匹马能进入到前四名 以此类推剩10匹马
3.第10次11次，假设A组第一名是全部的第一名，就剩下9匹马 ，分开跑两次 取出前三名即可。