前端面试题

  1、什么是HTML?

HTML(HyperText Markup Language)不是真正的程序语言,它是一种超文本标记语言,用来创建网页、结构化和含义化网站上的内容,它是由很多标签组成的。

   2、什么是CSS？

层叠样式表，CSS(Cascading Style Sheets)是一种样式表语言，并不是真正的程序语言，它可以让你选择性的修饰网页中的HTML元素。

   3、什么是Javascript？

一门动态编程语言，当用于HTML文档时，可以为网站上提供动态交互效果。由布兰登.艾奇发明的。

不定期更新，今天先到这

   4、清除浮动的几种方式

--父盒子手动设置高度,但是这个方法只适用于固定高度的布局,并不灵活,也不方便适配

--父盒子设置overflow:hidden,这个方法会隐藏溢出的部分,并不推荐

--在结尾处写一个空的div元素,添加clear:both属性,会让父盒子自动获取高度,但是如果页面浮动布局太多,就要添加很多的空div,不好看

--父盒子定义伪类:after,zoom

*清除浮动代码*/
.clearfix：after{
content：""；
display：block；
visibility：hidden；
height：0；
line-height：0；
clear：both；
}
.clearfix:{zoom：1}

实现原理基本也是在末尾添加空div的做法,但是这个方法定义的是公共类,可以减少很多额外代码,而且兼容性也很好.

--双伪元素法

.clearfix：before，.clearfix：after {
content： ""；
display： block；
clear：both；
}
.clearfix {
zoom： 1；

5、px em rem的选择依据

  1、px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度DP

  2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，并不是一个固定的值

  3、rem是CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素，根的大小可以自己设置。

6、什么是mvvm，mvc？

MVVM 即Model-View-ViewMode ，一种双向数据绑定模式，使用ViewMode来建立model数据层和view视图层的连接 ，让数据驱动视图。

MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的单一性，方便程序的开发、维护，耦合度低。

7、什么是async，await？

es7中的新语法，async是用来声明一个函数是异步的，await是用来等待一个异步任务完成，很好的替代了promise中的then方法。

async函数返回一个promise实例对象，可以使用then方法调用，一旦遇到await会提前返回，等异步操作完成，再执行函数体后面的代码。

8、什么是原型链

每一个实例对象上有一个proto属性，指向的构造函数的原型对象prototype，构造函数的原型对象也是一个对象，也有proto属性，这样一层一层往上找的过程就形成了原型链。

9、路由钩子函数

路由生命周期钩子函数在路由跳转或者更新时触发的一些函数

全局路由钩子

• beforeEach:

• afterEach

• beforeResolve

路由所对应组件勾子（路由配制中的component所对应组件）

• beforeRouteEnter：进入前，进入路由所对应组件前，在beforeCreate前产生的，它不能使用实例化对象this

• beforeRouteUpdate:更新前，路由更新了，但是路由所对应组件不变，它是更新前触发，更新没有完成，如果需要获取更新完成后信息，要加$nextTick

• beforeRouteLeave:离开前，切换页面离开前就会触发，它在beforeDestroy前执行

• 路由配制所对应勾子

  • beforeEnter：读取路由配制前会执行该勾子

• 进入一个页面时路由勾子执行先后

  • beforeEach>beforeEnter>beforeRouteEnter>beforeResolve>afterEach

• 路由更新时路由勾子执行先后

  • beforeEach>beforeResolve>afterEach

10、一句话搞定防抖和节流

防抖和节流都是为了性能优化

防抖：持续触发不执行，停止触发一段时间才执行，一般在输入框根据内容请求数据是使用

节流：持续触发也会执行，只不过触发频率降低了

css

减少重绘和回流

避免使用table布局，避免使用css表达式、避免使用display:none、使用css属性简写、使用transform减少对dom的直接操作

scss和less的区别

1.定义变量不一样；less@。scss$

2.scss支持条件语句比如if、else、for，less不支持

3.scss可以mixin混入对象，less不可以混入对象

移动端适配

是什么？ 解决不同的浏览器兼容问题

怎么作？使用淘宝的fiexlable将页面划分为10份。再用页面根元素的fontsize设置为页面大小/10，最后将要设值的元素/fontsize进行转换

解决了什么问题？页面元素的大小跟随根元素fontsize进行变化，可以解决浏览器兼容问题

有什么替代方案？vw/vh

元素水平居中

text-align：center+margin：0 auto

定位加transfrom

flex布局:justify-content：center+align-items：center

js

BFC

块级作用域: 它是文档中的一块渲染区域，有自己的一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用！

如何触发:

• 根元素(html)

• 浮动

• 绝对定位( absolute 或 fixed )

• 行内块

• 表单元素格

• overflow不被等于visible

特性:

同一个BFC下的上下外边距会合并

清除浮动(BFC可以包含浮动元素)

BFC区域不会和float的元素重叠

图片懒加载

使用自定义属性保存图片真实连接,监听页面卷曲事件,当图片进入视口的时候,页面被卷曲的高度+图片到可视窗口的高度>图片到顶部的距离时,将自定义属性地址放入src中

js的数据类型

原始数据类型:

字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、独一无二的值Symbol

引用数据类型:

对象(Object)、数组(Array)、函数(Function)、日期（Date）、正则（RegExp）

如何判断数据类型

typeof可以判断一些基本数据类型,但是碰到复杂数据类型和nul就不能准确判断了.

instanceof可以判断复杂数据类型,但是不能准确判断简单数据类型,都会返回object

终极解决方案

Object.prototype.toString 可以准确获取到变量的类型

js中的继承

一个类获取另一个或者多个类的属性或者方法。继承可以使得子类具有父类的各种方法和属性。以免重复输出很多代码。

原型链继承:污染了子类的原型，多挂载了没有意义的父类属性

call继承:只能继承属性. 继承不了方法

组合继承: 使用原型链继承方法,通过call来继承属性.

类继承:使用class实现继承

原型链

是构造函数、原型对象、实例的三角关系

作用域链：函数内部可以访问到函数外部的作用域的变量，而外部函数还可以访问到全局作用域的变量

作用域链

闭包

文章链接:https://juejin.cn/post/6844903858636849159#heading-3

无论何时声明新函数并将其赋值给变量，都要存储函数定义和闭包。闭包包含在函数创建时作用域中的所有变量，它类似于背包。函数定义附带一个小背包，它的包中存储了函数定义创建时作用域中的所有变量。

如何判断this的指向

自函数调用的this指向windows

函数调用中的this指向函数的调用者

箭头函数中的this指向最近一层包裹它的函数的this

构造函数的this指向实例化对象

call apply bind的使用

改变函数执行时的上下文，也就是改变this指向,

apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组

而bind 是创建一个新的函数，我们必须要手动去调用

什么是回调地狱，如何解决

函数作为参数层层嵌套,使用async await

promise的使用

promise是一个构造函数,接受一个函数作为参数,这个函数有两个参数,resolve和reject, resolve将Promise的状态由未成功变为成功，将异步操作的结果作为参数传递过去；相似的是reject则将状态由未失败转变为失败，在异步操作失败时调用，将异步操作报出的错误作为参数传递过去。

可以使用then方法分别指定成功或失败的回调函数.

promise.all（）等待原则，等所有promise执行完才执行并发任务，可以通过这个方法实现同时发送完两个请求后再统一处理请求结果

promise.race（）竞赛机制，有一个promise执行完就走.then()

new的背后做哪些事情

1. 先创建一个新的空对象

2. 将空对象的proto指向构造函数的原型

3. 把this指向这个空对象

4. 返回这个对象

防抖和节流

防抖:持续触发不执行,不触发执行的一段时间后,执行

节流:持续触发会执行,只是执行的频率降低了

高阶函数

函数返回函数,或者函数作为参数传递给一个函数

柯里化

通过函数调用继续返回函数的形式，实现多次接收参数最后统一执行处理的编码形式

函数返回函数，返回的函数用于处理外层函数的剩余参数

url 从地址到页面的渲染过程

1. DNS解析，获取IP地址

2. TCP/IP三次握手建立链接

3. 浏览器向web服务器发送HTTP请求

4. 服务器处理请求并返回HTTP报文

5. 浏览器渲染

6. 四次挥手断开连接

content-type的作用

HTTP 请求头/响应头 Content-Type 用于向接收方说明传输资源的媒体类型。

在浏览器中，浏览器会根据 Content-Type 判断响应体的资源类型，然后根据不同文件类型做出不同的展示。

HTTP状态码

2开头：成功；

3开头：

301永久重定向( 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置)

302临时重定向( 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求)

304强缓存

400请求数据错误，401token过期，403无权限，404服务器未找到资源

5开头：

500不一定是后端问题，也可能是前端参数错误

501是请求类型无法识别，所有的服务器都只能识别get和HEAD

HTTP和HTTPS的区别

1.https协议需要ca申请证书,需要收费

2.http是超文本传输协议,明文传输,https是具有安全性的ssl加密传输协议

3.https是ssl加http协议构建的可进行加密传输,身份认证的网络协议,安全性高

4.http和https使用不同的连接方式,端口也不一样,http是80,https是443

forEach和Map的区别

forEach仅用于遍历数组的每一项进行处理，没有return返回值

Map是对数组的每一项做处理后返回一个新的数组，他们都不会改变原数组

前端本地存储的方式及区别

cookie每次发送请求都会携带当前域所有的数据从浏览器端到服务器端来回传递（这样可以不用在请求拦截中统一设置请求头）

生命周期不一样：cookie的生命周期可以由前后端设置；localstroage除非手动清除数据，否则永远存在；sessionstroage存储的数据在关闭浏览器后被清空

大小不一样cookie的大小为4k,localstroage/sessionstroage 5m

JS延迟加载的方式

在script标签上添加defer或者async告诉浏览器立即下载但延迟执行、将js引入放在最下面、动态创建dom、延时器

get和post的区别

get在浏览器回退时是无害的，而post会再次提交请求。

get通过url中携带数据，post在body中携带数据

get请求只能进行url编码，而post支持多种编码方式。

get会被浏览器主动缓存，传递的数据会在url中显示，post不会,安全级别更高

对参数的数据类型，get只接受ASCII字符，而post没有限制。

如何添加和删除事件

添加事件:addEventListener

删除事件:removeEventListener

VUE

你认为Vue的核心是什么？

官网原话: Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

什么是双向绑定？原理是什么？

双向绑定是指数据模型（Module）和视图（View）之间的双向绑定。

其原理是采用数据劫持结合发布者-订阅者模式的方式来实现。

Vue组件主要组成部分

Vue组件的API主要包含三部分：prop、event、slot

props 表示组件接收的参数

slot可以给组件动态插入一些内容或组件，是实现高阶组件的重要途径；当需要多个插槽时，可以使用具名slot

event是子组件向父组件传递消息的重要途径

Vue项目优化的方式/首屏加载

不常用的库通过cdn引入，vue组件尽量不要全局引入、 路由懒加载、开启gzip压缩格式、小图用base64格式，ui库按需加载等

计算属性和watcher的使用区别

当你需要使用一个值计算生成另外一个值的时候可以使用计算属性

当你需要在一个值变化之后干点什么,可以使用计算属性

Vuex

是一个专为 Vue.js 应用程序开发的状态管理插件 ，解决了组件通信和数据共享问题， 它采用集中式存储管理应用的所有组件的状态，解决了多组件依赖同一状态时的传参繁琐

mutation和action的使用区别

mutions中处理同步，actions中处理异步，但这样不是强制的，但是mutations中所有的数据是同步执行的，如果第二个异步任务依赖第一个异步任务的结果，就会出问题

route和router有什么区别？

route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。 而router是“路由实例对象”，包括了路由的跳转方法，钩子函数等。

hash路由和history路由的区别，和原理

hash: 兼容所有浏览器，带#号,监听hash值的改变，触发hashchange事件，通过监听hashchange事件来完成操作实现前端路由。hash值变化不会让浏览器向服务器请求。

history: 兼容能支持 HTML5 History Api 的浏览器，依赖HTML5 History API来实现前端路由。没有#，路由地址跟正常的url一样，但是初次访问或者刷新都会向服务器请求，如果没有请求到对应的资源就会返回404，所以路由地址匹配不到任何静态资源，则应该返回同一个index.html 页面，需要配置。

abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

怎么在组件中监听路由参数的变化？

有两种方法可以监听路由参数的变化，但是只能用在包含<router-view />的组件内。

watch: {
    '$route'(to, from) {
        //这里监听
    },
},
    
beforeRouteUpdate (to, from, next) {
    //这里监听
},

在Vue中哪些数组变化无法监听，为什么，怎么解决？

• 利用索引直接设置一个数组项时

• 修改数组的长度时

  • 利用已有的索引直接设置一个数组项时 Object.defineProperty() 可以监听到,利用不存在的索引设置时,监听不到,官方给出的解释是根本原因是性能问题,性能代价和获得的用户体验收益不成正比,解决: this.$set(this.items, indexOfItem, newValue)或this.items.splice(indexOfItem, 1, newValue)

  • Object.defineProperty()监听不到数组的 length 属性,解决: this.items.splice(newLength)

Vue怎么定义全局方法

• 挂载在Vue的prototype上

  // base.js
  const install = function (Vue, opts) {
      Vue.prototype.demo = function () {
          console.log('我已经在Vue原型链上')
      }
  }
  export default {
      install
  }

• 全局混入

  //main.js
  //注册全局函数
  import base from 'service/base';
  Vue.use(base);

• 用this.$root.$on绑定方法，用this.$root.$off解绑方法，用this.$root.$emit全局调用。

  this.$root.$on('demo',function(){
      console.log('test');
  })
  this.$root.$emit('demo')；
  this.$root.$off('demo')；

  Vue2中定义自定义指令

  全局：vue.directive('自定义指令名',{
  ​
  1.bind(dom,obj,vnode) {
  ​
  dom:指令所在dom,obj:{属性名,修饰符,值}.vnode:虚拟dom节点信息
  ​
  }
  ​
  2.inserted(dom,obj,value){}渲染时
  ​
  3.update(){}更新时
  ​
  4.componentupdated(){}更新完成时
  ​
  5.unbind(){}解除绑定,类似于beforeDestory
  ​
  })
  局部：directives:{
      指令名：{}
  }

  Vue的diff算法原理是什么？

  Vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针方式比较

• 先比较两个节点是不是相同节点

• 相同节点比较属性，复用老节点

• 先比较儿子节点，考虑老节点和新节点儿子的情况

• 优化比较：头头、尾尾、头尾、尾头

• 比对查找，进行复用