最新前端面试题-前端必备技能-前端技术汇总

一、css部分

1、css盒模型
css盒模型分为标准盒模型和怪异盒模型/IE盒模型
基础盒模型：content(内容) + border + padding + margin
怪异盒模型/IE盒模型：content (content + border + padding) + margin
正常情况下padding和border的设置会影响元素宽高的计算
box-sizing: content-box (称为标准盒模型) width = 元素内容的宽度
box-sizing: border-box (称为怪异盒模型/IE盒模型) width = 元素内容的宽度 + padding + border

2、清除浮动的方式有哪些
overflow:hidden
浮动的后面新加一个标签 .clear {clear:both }
利用伪类清除浮动 如： .clearfix:before,.clearfix:after { content: ‘’; display: table; } .clearfix:after { clear: both } .clearfix { *zoom: 1; /*此处是为ie6、7处理的方式 */}
设置高度清除浮动

3、css选择器有哪些
id选择器（#id）
类选择器（.class）
标签选择器（div、p、li）
子代选择器（ul>li）
后代选择器（ul li）
通配符选择器（*）
属性选择器（input[type=“text”]、p[class]）
伪类选择器（li:first-child、li:nth-child(n)）
相邻兄弟选择器（div+p）
通用兄弟选择器（div~p）
群组选择器（div,span,li,p）
相同权重下：内联样式（标签内部） > 嵌入样式（当前文件style） > 外部样式（外部文件）

优先级：!important > id > class

4、内容水平垂直居中有哪些方法
文本居中：text-align:center; height:100px; line-height:100px;

已知宽高：如width:20px;height:20px 
父级position:relative 内容position:absolute; left: 50%; top: 50%; margin-left:-10px; margin-top: -10px;

不知宽高：
父级position:relative 内容position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)
父级display:flex; align-items: center; justify-content: center; (css3属性)
父级display:table; 子级 display: table-cell; vertical-align: middle;

5、display: none 和 visibility: hidden 有什么区别
display: none 隐藏 不占空间 （回流 + 重绘）
visibility: hidden 隐藏 保留原有空间 （重绘）

二、js部分

1、js的基本数据类型有哪些，基本数据类型和复杂数据类型的区别
String、Number、Boolean、Null、undefined
Object为复杂数据类型
基本数据类型把数据名和值直接存储在栈当中
复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性和值，访问时先从栈中获取地址再到堆中取相应的值

2、== 和 === 有什么区别
==用于一般比较 比较时可以转换数据类型
===用于严格比较 比较时只要类型不匹配就返回false

3、split() 和 jiopn() 的区别
split() 字符串转数组 如：var str = “hello?word?welcome” console.log(str.split(“？”)) 返回值为 [“hello”, “word”, “welcome”]

join() 数组转字符串 如：var arr = new Array() arr[0] = "hello" arr[1] = "world" arr[3] = "welcome" arr.join("、")  返回值为 "hello、world、welcome"

4、call()、bind()、apply()区别
三者都是可以改变this的指向
bind() 返回对应函数便于稍后调用；call()、apply()则是立即调用
call() call(thisArg, case1, case2, case3,…) 第一个参数是对象 后面是字符串
apply() apply(thisArg, [case1, case2, case3,…]) 第一个参数是对象 后面是数组

5、数组有哪些操作方法
unshift() 把参数添加到数组开头
shift() 把数组的第一个元素删除
push() 向数组末尾添加一个或多个元素
pop() 把数组的最后一个元素删除
concat() 连接两个或多个数组
join() 数组转成字符串
reverse() 数组倒叙
slice() 截取后返回新数组 [‘H’,‘el’,‘lo’,‘wo’,‘rld!’].slice(1,3) 返回 [“el”, “lo”]
splice() 添加或删除数组中的元素，这种方法会改变原始数组
sort() 数组元素排序
filter()
Map()

6、什么是闭包
可以调用其它函数内部变量的函数
优点：避免变量污染、加强了封装性，逻辑性比较强代码的可读性高；加载到内存中执行效率高；
缺点：在内存中，造成了内存浪费，如果滥用闭包是灾难性的；

7、null 和 undefined 的区别
null表示没有对象，该处不该有值，转为数值时为0
undefined表示缺少值，该处应该有值，但是未定义，转为数值时为NaN

8、什么是变量提升
变量提升是js的默认行为，变量提升会将所有变量声明移动到当前作用域的顶部，并可以在声明之前使用该变量，初始化不会被提升，提升的仅作用于变量的声明

9、什么是事件委托
利用事件冒泡的原理，把原本需要绑定的事件委托给父元素，让父元素负责事件监听

10、深拷贝和浅拷贝
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

11、async与defer区别
异步(async) 脚本将在其加载完成后立即执行，而 延迟(defer) 脚本将等待 HTML 解析完成后，并按加载顺序执行。

12、cookies，sessionStorage和localStorage 有什么区别？
cookies可以和服务端交互，数据大小不会超过4k，设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，使用方法需要自己封装不够友好;
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存，虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大，有封装好的方法，可以直接存取值
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除。

13、数组去重有哪些方法

1、new Set()  如：
var arr = [1,2,3,9,6,3,1,2,6] 
new set(arr)

2、利用冒泡for循环嵌套，然后splice()去重 如：
function unique(arr){            
	for(vari=0; i<arr.length; i++){
	    for(var j=i+1; j<arr.length; j++){
	        if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
	            arr.splice(j,1);
	            j--;
	        }
	    }
	}
	return arr;
}
var arr = [1,2,3,9,6,3,1,2,6]
console.log(unique(arr))

3.indexOf()去重 如：
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,2,3,9,6,3,1,2,6]
console.log(unique(arr))

4.sort()去重 如：
function unique(arr) { 
	if (!Array.isArray(arr)) { 
		console.log('type error!') 
		return; 
	} 
	arr = arr.sort() 
	var arrry= [arr[0]]; 
	for (var i = 1; i < arr.length; i++) { 
		if (arr[i] !== arr[i-1]) { 
			arrry.push(arr[i]); 
		} 
	} 
	return arrry; 
}
var arr = [1,2,3,9,6,3,1,2,6]
console.log(unique(arr))

5.filter()去重 如:
function unique(arr) { 
	return arr.filter(function(item, index, arr) { 
		return arr.indexOf(item, 0) === index; 
	}); 
}
var arr = [1,2,3,9,6,3,1,2,6]
console.log(unique(arr))

14、GET 和 POST 有什么区别
GET请求在浏览器回退和刷新时是无害的，而POST请求会告知用户数据会被重新提交；
GET请求可以收藏为书签，POST请求不可以收藏为书签；
GET请求可以被缓存，POST请求不可以被缓存，除非在响应头中包含合适的Cache-Control/Expires字段，但是不建议缓存POST请求，其不满足幂等性，每次调用都会对服务器资源造成影响；
GET请求一般不具有请求体，因此只能进行url编码，而POST请求支持多种编码方式。
GET请求的参数可以被保留在浏览器的历史中，POST请求不会被保留；
GET请求因为是向URL添加数据，不同的浏览器厂商，代理服务器，web服务器都可能会有自己的长度限制，而POST请求无长度限制；
GET请求只允许ASCII字符，POST请求无限制，支持二进制数据；
GET请求的安全性较差，数据被暴露在浏览器的URL中，所以不能用来传递敏感信息，POST请求的安全性较好，数据不会暴露在URL中；
GET请求具有幂等性(多次请求不会对资源造成影响)，POST请求不幂等；
GET请求一般不具有请求体，请求中一般不包含100-continue 协议，所以只会发一次请求，而POST请求在发送数据到服务端之前允许双方"握手"，客户端先发送Expect:100-continue消息，询问服务端是否愿意接收数据，接收到服务端正确的100-continue应答后才会将请求体发送给服务端，服务端再响应200返回数据。

15、跨域有几种解决方案
jsonp 适用于get请求
document.domain + iframe 适用于主域相同 子域不同 两个页面都通过js强制设置document.domain为基础主域，就实现了同域
location.hash + iframe
window.name + iframe
postMessage (data,origin)方法接受两个参数
data：需要传递的数据，html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin：协议+主机+端口号，也可以设置为"*“，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/"。
6.跨域资源共享（CORS）

16、typeof和instanceof有什么区别
typeof 判断一个数据是什么数据类型；一般只能返回如下几个结果：“number”、“string”、“boolean”、“object”、“function” 和 “undefined”。
instanceof 判断一个对象是否在另一个对象的原型链上

三、vue部分

1、vue的生命周期以及页面初次加载会触发哪些钩子（vue2）
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
第一次会触发前四个钩子

2、v-if 和 v-for 哪一个优先级高
在vue2中 v-for 优先级高
在vue3中 v-if 优先级高

3、v-if 和 v-show 有什么异同
两者都可以控制元素的显示和隐藏
v-if 是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
v-show 是通过控制css中的display设置为none，控制隐藏，只会编译一次

4、vue中data为什么必须是一个函数
防止组件在重复使用时，数据互相干扰，使用函数将产生新作用域，所以同一个组件在不同位置被使用时，不适用同一份数据

5、v-for里面key的作用
key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，具有唯一性

6、传值方式有哪些
父传子 在子元素中用 props 接收
子传父 在子元素中用 $emit传值同级传值使用路由query/params传参如this.$router.push({path: ‘/’, query: {参数名: ‘参数值’}) 使用this.$route.query.参数名 接收
本地存储传值

7、初始化页面闪动问题
在css里加上[v-cloak] {display: none;}
如果没有彻底解决问题，则在根元素加上style=“display: none;” :style=“{display: ‘block’}”

8、$route和$router的区别
$router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

9、vuex有哪几种状态
state 基本数据(数据源存放地)
Getter 过滤/计数。store 的计算属性 返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation 必须是同步函数
Action 类似于 mutation 提交的是 mutation，而不是直接变更状态。 可以包含任意异步操作。
Module 将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

10、vue-router有几种模式
hash模式 地址栏URL中的#符号，不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
history模式 利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法，这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。

11、vue实现数据双向绑定的原理（vue2）
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。即数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

12、路由跳转的原理以及方式
路由就是根据不同的url地址展示不同的内容或页面
静态路由是在路由器中设置的固定的路由表。
动态路由是网络中的路由器之间相互通信，传递路由信息，利用收到的路由信息更新路由器表的过程。

this.$router.push({name:'master',params:{id:'参数'}});
//name和params搭配，刷新的话，参数会消失
this.$router.push({path:'/master',query:{id:'参数'}});
//path和query搭配，刷新页面的话，url中的参数不会丢失,query中的参数成了url中的一部分
this.$router.push()
跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。
this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

13、computed 和 watch 有什么区别
computed是多条数据影响一个数据，而watch，则是一个数据影响多个数据
computed 支持缓存，只有数据发生变化才会重新进行计算，不支持异步。 购物车商品结算
watch 不支持缓存，支持异步，默认初次不会执行。 搜索数据
immediate 选项为 true，可以立即执行一次方法
deep: true 深度监听 方法 下面的属性层层遍历，都加上监听事件

四、其它

1、什么是MVC 和 MVVM
MVC模式：Controller负责将Model的数据用View显示出来

M：Model（数据模型），用于存放数据
V：View（视图），也就是用户界面
C：Controller是Model和View的协调者

MVVM模式：VM双向绑定，在 MVVM 框架中，View(视图) 和 Model(数据) 是不可以直接通讯的

M：Movel（数据模型）
V：View
VM：ViewModel 是一个同步View 和 Model的对象

2、页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

3、优雅降级和渐进增强
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

4、浏览器页面有哪三层构成，分别是什么，作用是什么?
构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript
作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

5、页面重构怎么操作？
页面重构是指：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
编写css、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

6、前端性能优化
避免使用css表达式，避免使用高级选择器，通配选择器。
缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
css放在顶部，js放在底部
减少@import导入css（同步操作）
合并样式和脚本
使用css图片精灵，图片懒加载
减少http请求
初始首屏之外的图片资源按需加载，静态资源延迟加载。
压缩文件，开启GZIP，
少用全局变量，合理使用闭包
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率

7、http请求过程
域名解析
发起TCP的3次握手
建立TCP连接后发起http请求
服务器端响应http请求，浏览器得到html代码
浏览器解析html代码，并请求html代码中的资源
浏览器对页面进行渲染呈现给用户

8、HTTP常见状态码
200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

9、一个完整的url包括哪几部分
协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分