总结前端高频面试题

近两天正值中秋国庆假期，约面试也到节后了，留给我们准备的时间还是挺充分的，毕竟跳一次槽还是不容易的。
总结前端高频面试题，拿下理想的offer

兼容问题

1、不同浏览器的标签默认的外边距和内边距不同
2、图片默认有间距
3、使用after伪元素清除法（也称之为万能清楚法）
4、超出显示省略号
5、链接访问过后hover样式就不出现的问题

详细兼容问题请看此链接
https://blog.csdn.net/weixin_48193717/article/details/108762482

优化方面

1.尽量减少HTTP请求数
2.减少DNS查找
3.延迟加载组件
4.给Cookie减肥
5.Gzip组件
6.使用CDN（内容分发网络）

JavaScript

JavaScript的基本数据类型

Number String Boolean Undefined Null syboml

JavaScript常用数组

push向数组末尾添加一个或更多的元素，并返回新的数组
ushift将参数添加到数组的开头，并返回新的数组
shift删除原数组第一项，并返回删除的元素值
pop删除数组的最后一个元素
toString将数组转换成字符串
sort将数组进行排序
map循环
split从数组中进行添加或删除

Javascript的事件流模型都有什么？

“事件冒泡”：事件开始由最具体的元素接收，然后逐级向上传播。

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的。

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡。

列举你知道的强制类型转换和隐式类型转换？

强制转换：parseInt()、parseFloat()、Number()、String()、.toString()、Boolean()

隐式转换：加（例外：不能是算式中，而需要加在变量前）减乘除及取余，!!

split() 、join() 的区别?

前者是切割成数组的形式，后者是将数组转换成字符串。

call和apply的区别?

call：

语法：call(thisObj，Object1,Object2…)

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply：

语法：apply(thisObj，[argArray])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数

JavaScript获取节点方法

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔
document.getElementsByTagName ：根据标签查找元素，
document.getElementsByName ：根据元素的name属性查找
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

JavaScript的增删改查

obj.appendChid() 添加

obj.insertBefore() 插入
obj.replaceChild() 替换
obj.removeChild() 删除

原型和原型链

原型概念
JavaScript 的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型
JavaScript 的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 值将被作为实例对象的
原型链
当一个对象调用自身不存在的属性/方法时，就会去自己 [proto] 关联的前辈 prototype 对象上去找，如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”。

闭包

闭包是一个环境,具体指的就是外部函数–高阶函数

closure 闭包的三个特性 :
1:函数套函数
2:内部函数可以直接访问外部函 数的内部变量或参数
3:变量或参数不会被垃圾回收机制回收 GC
闭包的优点:
1:变量长期驻扎在内存中
2:避免全局变量的污染
3:私有成 员的存在 。
闭包的缺点 常驻内存 增大内存的使用量 使用不当会造成内存的泄露

JQuery

jquery获取元素四种方式

1. 通过id获取，jquery的语法更为简练$("#id").event;
2. 通过class获取，$(.“css”).event()
3. 通过属性html标签获取，$(“p”).event()是选中所有的p标签元素
4. 通过属性值获取，$(“div[csdn]”).event()是选中div的属性为csdn的元素 event是对选中的元素的操作。

jQuery 选择器的分类，大致分为四种：

基本选择器、层次选择器、过滤选择器、表单选择器、子元素过滤选择器、表单选择器

JQuery的优点

jquery是封装的原生js框架，主要是大量的dom操作去结合业务逻辑，当

业务逻辑复杂的时 候，会导致UI层和逻辑层甚至交互层混合在一起，没产生分

离，不容易区分和维护，代码可维护 性低，但是他的优点是容易操作DOM，有

时候UI逻辑在一起方便维护，包括还有封装好的Ajax。

Vue

vue的核心

vue主要是组件化和数据驱动化，很少操作dom vue可能通过$ref来选择一个dom

vue-router路由有几种模式

三种 hash（哈市）、history（嘿四他瑞） hash:使用URLhash值作为路由。支持所有浏览器 history：依赖html5
history API 和服务器配置 abstract：支持所有js运行环境，如node.js服务器端

hash基于location来实现的location的值就是URL中#后面的内容
特性：只是客户端的一种装态，也就是说向服务器端发送请求时，hash部分不会被发送

history主要于两个 history.pushState() 和history.repalcwState()都可以进行不刷新页面的情况下，操作浏览器的历史记录，push是新增历史记录replc是直接替换当前的历史记录

过滤器

全局过滤器：Vue.filter(‘过滤器名’，function（参数1，参数2）){ 执行代码 return 要返回的数据格式

} 局部过滤器在组件内部添加filters属性来定义过滤器 filters：{ 过滤器名（参数1，参数2）{ 执行代码 return
要返回的数据格式 }

}

路由守卫
使用场景：如：新用户跳出登录是怎么实现的，（导航钩子用来拦截导航，让他完成跳转或取消）

全局导航守卫：beforeEach（三个参数） 前置钩子
to：去哪里
from：从哪里去 next是否跳转
afterEach（两个参数） 后置钩子
to：去哪里
from：从哪里去
单个路由独享的：beforeEnter（三个参数）
to：去哪里
from：从哪里去 next是否跳转
组件级的
1、beforeRouterEnter 进入组件前
2、beforeRouterUpdate 组件更新或改变
3、beforeRouterLeave 离开组件时

Vue组件通信

第一种：父传子：主要通过 props 来实现的

具体实现：父组件通过 import 引入子组件，并注册，在子组件标签上添加要传 递的属性，子组件通过 props
接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{
}来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

第二种：子传父：主要通过$emit 来实现

具体实现： 子组件通过通过绑定事件触发函数， 在其中设置this.$emit(‘要派发的自定义事件’，要传递的值)，$emit
中有两个参数一是要派发的自定义事件，第二个参数是要传递的值

​

第三种：兄弟之间传值有两种方法：
方法一：通过 event bus 实现

具体实现:创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件
A 中通过 bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件 B 收数据

方法二：通过 vuex 实现

具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括
state,actions,mutations,getters 和 modules 5 个要素，主要流程： 组件通过 dispatch 到
actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations
再通过逻辑操作改变 state，从而同步到组件，更新其数据状态

ES6新增

1.新增了块级作用域(let,const)var可以重复定义同一个变量，但是let不可以 let可以形成块级作用域，在es6之前js只有函数作用域，没有块级作用域 const是用来定义常量的，常量定义之后是不允许改变的。
2.提供了定义类的语法糖(class)
3.新增了一种基本数据类型(Symbol) (森bou)
4.新增了变量的解构赋值
5.函数参数允许设置默认值，引入了 rest 参数，新增了箭头函数
6.数组新增了一些 API，如 isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
7.对象和数组新增了扩展运算符
8.ES6 新增了模块化(import/export)
9.ES6 新增了 Set(数组) 和 Map（对象） 数据结构 去重
10.ES6 原生提供 Proxy(铺扰可惜) 构造函数，用来生成 Proxy 实例
11.ES6 新增了生成器(Generator)(杰那儿瑞他)和遍历器(Iterator) (一的瑞的)

解决跨域的方法

跨域的解决方案目前有三种主流解决方案：
jsonp jsonp 实现原理：主要是利用动态创建 script 标签请求后端接口地址，然后传递 callback 参数，后端接收 callback，后端经过数据处理，返回 callback 函数调用的形式，callback 中的参数就是 json 优点：浏览器兼容性好，
缺点：只支持 get 请求方式
是代理 前端代理我在vue 中主要是通过vue 脚手架中的config 中的index 文件来配置的，其中有个 proxyTable 来配置跨域的
CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的 优点：无需前端工程师设置，只需后端工程师在请求的页面中配置好，并且支持所有请求方式（例如：get,post,put,delete 等）
缺点：浏览器支持有版本要求，

说一下jq和vue的区别

jq本质就是分装的原生js框架，本质也是和原生一样，直接操作dom

元素实现功能；利用jq可以高效的开发原生js功 能，比如轮播图，选项卡等等 。

而vue主要是组件化和数据驱动化，很少操作dom vue可能通过$ref来选择一个dom

Vue数据双向绑定

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

4.订阅器Dep 发布订阅模式设计，用来收集订阅者Watcher。对监听器Observer和订阅者Watcher进行统一管理

Vuex

Vuex 是的全局状态管理工具，它主要为了方便管理 vue 的公共数据，它里 面主要有五个属性， 一个是 state，他类似与组件中的
data 函数中的数据，为 了方便管理，初始化数据等，读取this.$store.state.属性名。二是mutation函数，他是用来操作state中数据和更改数据的，使用方法：this.$store.commit.
方法名，需要在组件中定义方法来触动他，它里面有两个参数，state,val，原来的数据和传递的数据。 getters：state
的计算属性。 action 异步操作，通过 this.$store.dispatch.方法名来触动 action 中的方法， action
中的方法通过 commit 方法触动 mutaction 中的放来改变视图数据。 Module，模块化 vuex, 使每一个组件拥有自己的
vuex，操作方法与以上相同，是为了让代码更简洁化， 方便后期维护。

什么是Promise？我们用Promise来解决什么问题？

1、用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作
promise，帮助我们处理队列 resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即从 pending
(pan定)变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去； reject (瑞杰克他)作用是，将
Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为
rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。 promise 有三个状态：
1、pending[待定]初始状态
2、Fulfilled[实现]操作成功 （否费油）
3、rejected[被否决]操作失败

当 promise 状态发生改变，就会触发 then()里的响应函数处理后续步骤； promise 状态一经改变，不会再变。 Promise
对象的状态改变，只有两种可能： 从 pending 变为 fulfilled (否费油他) 从 pending 变为 rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring)
解构赋值，左右结构必须一样，使用左边定义的值，快速的取出数据中对应的数据值，而且
定义和赋值必须放到一起，不然的话就会报错，取不出来数据值，而且左边也必须是一个 js
存在数据结构不然的话也会报错，解构赋值的主要作用还是，快速的让我们在数据中抓取出我们想要的数据

单页面应用和多页面应用的区别及优缺点？

单页面的概念： 单页面应用(SPA)，其实就是指只有一个主页面的应用，类似前端现在的三大框架，React.Vue,Angular 浏览器一开始要加载所有必须的html,js css。所有的页面内容都包含在这个所谓的主页面中。

**单页面的原理：**利用js感知到URL的变化，通过这一点，可以用js动态的将当前的页面内容清除掉，然后将下一个页面的内容挂载到当前的页面上。页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送延迟，我们在切换页面的时候速度很快。

单页面的优点：

\1. 加载速度快，用户体验好，内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力较小。

\2. 前后端分离

\3. 页面视觉效果良好

单页面的缺点：

\1. 不利于SEO（搜索引擎优化）

\2. 页面初次加载时比较慢

\3. 页面复杂度提高很多

多页面的概念： 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整个页面都刷新，每次都请求一个新的页面。

**多页面的优点：**首屏加载时间快，SEO效果好

**多页面的缺点：**页面切换慢，每次切换页面都需要选择性的重新加载公共资源

补充（基本常识）

wepack的理解

Webpack
可以看作是一个模块的打包机，它做的事情就是分析你的项目结构，找到了模块以及其它的一些浏览器不能使用的拓展语言。并将其转换和打包为合适的格式提供浏览器使用四个核心概念：入口(entry)、输出(output)、

四个核心概念：
入口(entry)、
输出(output)、
loader(预处理文件)、
插件(plugins)

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件， 减少了页面的请求

HTTP和HTTPS的区别主要如下：

1、https协议需du要zhi到ca申请证书，一般免费证书较少，因而需要一定费dao用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

http常见状态码

405：客户端请求的额方法被禁止

408：服务器等待客户端发送的请求时间过长，超时

200：服务器成功处理了请求

400：客户端发送了一个错误的请求

404：未找到资源

500：服务器内部出现错误

501：服务器遇到错误，使其无法对请求提供服务

什么是同步，异步？

同步：由于js单线程，同步任务都在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待。

异步：不进入主线程，进入任务队列，等待主线程任务执行完成，开始执行。最基本的异步操作SetTimemot和SetInterval,等待主线程任务执行完，在开始执行里面的函数。

有哪些方式可以对一个DOM设置它的CSS样式？

\1. 外部样式表，引入一个外部css文件。

\2. 内部样式表，将css代码放在标签内部。

\3. 内联样式，将css样式直接定义在HTML元素内部

CSS中link和@import的区别是？

Link属于html标签，而@import是CSS中提供的。

在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS。

@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题。

Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

列出display的值，说明它们的作用。position的值，relative和absolute的定位原点分别是？

display：

inline：按照行内元素样式显示

block：按照块级元素样式显示

inline-block：按照行内块级元素样式显示

none：隐藏元素

position：

static：静态定位，默认值，标准流中的元素都是静态定位

relation：相对定位，相对于原来的位置移动，依然占据着原来的位置

absolute：绝对定位，若元素没有父元素，或者父元素没有定位，则相对body定位，若父元素有定位（非static），则相对父元素定位，绝对定位的元素脱离标准流

fixed：固定定位，相对浏览器边框定位，固定定位的元素也脱离标准流