前端面试题集合

 

一、position的值？

1、fixed相对浏览器或者frame定位；

2、absolute绝对定位相对最近一级定位；

3、relative相对定位相对普通流中的位置定位；

4、static默认值，没有定位，出现在正常流的位置；

5、sticky生成粘性定位的元素，容器的位置根据正常文档流计算。

二、xml和json的区别

json相比xml来说数据体积小、传送速度快、与js交互更方便、更易解析，但json数据交互对数据的描述性比xml差

三、用csss编写一个向上的三角形

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:1px;
    left:-28px;
}

<!-- 向上的三角形 -->
<div class="triangle_border_up">
    <span></span>
</div>

border-width:0 28px 28px;//向上

border-color:transparent transparent #fc0;//向上

border-width:30px 30px 30px 0;//向左

border-color:transparent #fc0 transparent transparent;//向左

border-width:30px 0 30px 30px;//向右

border-color:transparent transparent transparent #fc0;//向右

border-width:30px 30px 0;//向下

border-color:yellow transparent transparent;//向下

四、let var const 区别

let 只能在块级区域访问，不可以跨块访问，也不能跨函数；

var 可以跨块访问，不能跨函数；

const 定义的变量无法修改，定义时必须赋值（初始化），只能在块级区域访问；

// 块作用域
	{
		var a = 1;
		let b = 2;
		const c = 3;
		// c = 4; // 报错
		var aa;
		let bb;
		// const cc; // 报错
		console.log(a); // 1
		console.log(b); // 2
		console.log(c); // 3
		console.log(aa); // undefined
		console.log(bb); // undefined
	}
	console.log(a); // 1
	// console.log(b); // 报错
	// console.log(c); // 报错

	// 函数作用域
	(function A() {
		var d = 5;
		let e = 6;
		const f = 7;
		console.log(d); // 5
		console.log(e); // 6  (在同一个{ }中,也属于同一个块，可以正常访问到)
		console.log(f); // 7  (在同一个{ }中,也属于同一个块，可以正常访问到)

	})();
	// console.log(d); // 报错
	// console.log(e); // 报错
	// console.log(f); // 报错

五、js中的数据类型

js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。

es6新增symbol，ES10新增：Bigint；

由于js中的变量是松散类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字.

六、promise和setTimeout执行顺序的问题

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);
// 这的问题是，为什么答案是 2 3 5 4 1

event loop 的概念（任务队列）

• Javascript是单线程的，所有的同步任务都会在主线程中执行。
• 当主线程中的任务，都执行完之后，系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程，开始执行。
• 异步任务之间，会存在差异，所以它们执行的优先级也会有区别。大致分为 微任务（micro task，如：Promise、MutaionObserver等）和宏任务（macro task，如：setTimeout、setInterval、I/O等）。
• Promise 执行器中的代码会被同步调用，但是回调是基于微任务的。
• 宏任务的优先级高于微任务
• 每一个宏任务执行完毕都必须将当前的微任务队列清空
• 第一个 script 标签的代码是第一个宏任务
• 主线程会不断重复上面的步骤，直到执行完所有任务。

自我理解：整个JavaScript标签的代码是个一个宏任务，执行，遇到setTimeout宏任务，排队到宏任务队列。

遇到promise，同步调用执行器的代码，从上到下，打印2、3；遇到resolve()回调，排队到微任务队列，依次执行打印出5，然后执行第一个宏任务中的微任务then中的4，执行第二个宏任务setTimeout得到1，答案是23541

七、typeof、instanceof

typeof 是个一元运算，放在一个运算数之前，运算数可以是任意类型。它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。

var a="我们";
console.log(typeof a)
if(typeof a=='number'){
	alert("number")
}else{
	alert('不是number')
}

测试 var a=new Array();if (a instanceof Object) alert('Y');else alert('N');得'Y’。但 if (window instanceof Object) alert('Y');else alert('N');得'N'，所以，这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。

八、cookie、session、sessionStorage和localstorage

cookie和session都是用来跟踪浏览器用户身份的会话方式。

cookie保存在浏览器端，如果不设置过期时间，生命周期随着浏览器关闭而结束。设置了过期时间的cookie保存在硬盘中，过期时间结束才会消失。cookie只能保存字符串类型，以文本的方式；单个保存的cookie不能超过4kb。

session保存在服务器端，session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)，没有大小限制。

session的安全性大于cookie。

sessionStorage将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

1、生命周期：sessionStorage为临时保存，而localStorage为永久保存。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端（浏览器端），不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

九、块级元素和行内元素

块级元素 div  p  h table ...

行内元素 span a i b input button ...

十、mvvm和mvvc的区别

mvvm m-model模型数据层 ，v-view视图展示层，vm-ViewModel

mvc m-model模型数据层，v-view视图展示层，c-Controller-控制逻辑层

十一、vue的生命周期

总共分为三个阶段：初始化、运行中、销毁。

1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
4. 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
5. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
6. 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
7. 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
8. 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可

十二、display:none;跟visibility:hidden;的区别是啥

display:none;不占位，visibility:hidden;占位

十三、原型、原型链

每个由构造函数new出来的实例化对象都自带一个_proto_属性，该属性指向创建它的构造函数的prototype对象。而prototype对象因为是实例，也有自己的_proto_属性，指向它的原型对象。当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，

于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：instance.constructor.prototype = instance.__proto__

十四、添加、删除、更改、插入节点的方法

appendChild

removeChild

replaceChild

insertBefore

十五、px、em、rem

px是固定长度单位，不随其它元素的变化而变化;

em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化;

rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化

px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位

一般来说：1em = 1rem = 100% = 16 px

十六、表格样式

.table {
			font-family: verdana,arial,sans-serif;
			font-size:11px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}
		.table th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		.table td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
		}