前端面试题2022

html

• 浏览器渲染过程
  ①解析html文件生成DOM树
  ②处理css标记生成CSSOM树
  ③DOM树和CSSOM合并生成渲染树
  ④布局渲染树
  ⑤绘制在屏幕上
• 输入网址、按下回车，这个过程发生了什么
  ①域名解析
  ②发起TCP三次握手
  ③建立TCP连接后发起http请求
  ④服务器端响应http请求，浏览器得到html代码
  ⑤解析html代码，并请求html代码中的资源
  ⑥对页面进行渲染呈现给用户
• http 和 https的区别
  http：默认端口号80；超文本传输协议；协议以明文的方式发送；不加密
  https: 默认端口号是443；是建构在ssl/tls之上的http协议；需要申请CA证书
• TCP三次握手
  ①客户端向服务发送SYN包，客户端进入SYN_SEND状态
  ②服务器收到客户端的SYN包并确认，同时向客户端发送一个SYN包，服务器进入SYN_RECV状态
  ③客户端收到SYN_ACK包，向服务器发送确认包ACK，客户端和服务器进入ESTABLISHED状态
• cookie、localStorage和sessionStorage的区别
  cookie: 大小不能超过4k
  localStorage 和 sessionStorage 大小可以达到5M或者更大
  localStorage:长期存储，浏览器关闭数据不会丢失，除非手动清除
  sessionStorage: 临时存储，会话结束自动回收
• http 状态码
  ①1XX：信息状态码
  ②2XX：请求成功
  ③3XX：重定向
  ④4XX：请求失败
  ⑤5XX：服务器错误
• 浏览器兼容
  ①：css中添加通配符*
  ②：使用float为img布局，解决图片默认边距

css

• 盒模型
  ① W3C标准盒模型 = content
  ② IE盒模型 = content + border + padding
• 清除浮动的方法
  ①clear:both; ②父级div定义伪类：after和zoom
  ③ class = ‘clear’ ④ overflow: hidden;
• 水平居中的方法
  ①margin:0 auto; ②text-align:center; ③flex布局
• 垂直居中的方法
  ①position+transform ②flex布局 ③line-height:height;
  ④display:table-cell;
• rem和em的区别
  rem是根据根元素的字体大小进行适配
  em是根据父元素的字体大小进行适配
• 回流、重绘以及区别
  回流：当render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，就是回流。
  每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候一定会发生回流，因为要构建render tree
  重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的，就是重绘。
  区别：回流必将引起重绘，重绘不一定引起回流
• 防抖节流

jQuery

• jQuery选择器
  id选择器 类名选择器 标签选择器

事件

• 事件类型
  事件捕获：由外向内
  事件冒泡：由内往外
  事件流：页面接受事件的先后顺序

• 事件委托
  事件委托又名事件代理，事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上，如果子元素阻止了事件冒泡，那么事件委托就没法实现了。
  阻止事件冒泡：event.stopPropagation()
  事件委托：addEventListener(‘click’,函数名，true/false).captrue
  防抖：事件触发后在n秒内函数只执行一次，如果n秒内又触发了事件，会重新计算函数执行时间
  节流：连续触发事件但是在n秒钟只执行一次函数。实现方式：时间戳和定时器。

• 深拷贝、浅拷贝
  深拷贝：创建一个新的对象和数组，将原对象的各项属性值（数组的所有元素）拷贝过来，是值而不是引用。
  深拷贝就是把一个对象，从内存中完整的拷贝出来，从堆内存中开辟了新区域，用来存新对象，并且修改新对象不会影响原对象。
  浅拷贝：将原对象或原数组的引用直接赋给新对象，新数组，新对象只是对原对象的一个引用，而不是复制对象本身，新旧对象还是共享同一块内存。
  浅拷贝中如果属性是一个基本数据类型，拷贝的就是基本数据类型的值，如果属性是引用类型，拷贝的就是内存地址。
  浅拷贝实现方式：
  ①objec.assign()
  ②lodash里的_.clone
  ③…扩展运算符
  ④array.prototype.concat
  ⑤array.prototype.clice
  深拷贝的实现方式：
  ①JSON.parse(JSON.stringify())
  ②递归操作
  ③cloneDeep
  ④Jquery.extend()

js

• 面向对象
  基本特征：封装、继承、多态
• 闭包
  函数可以访问另一个函数作用域中的变量，函数包裹着函数。始终保持在内存中
  优点：不会清除，避免全局污染
  缺点：增大内存使用，内存溢出
• 原型链
  每个被实例对象都有一个_proto_对象，它指向了构造该对象的构造函数的prototype属性，同时该对象可以通过_proto_对象来寻找不属于自身的属性
• new操作符具体步骤
  ①创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
  ②属性和方法被加入到this引用的对象中
  ③新创建的对象由this引用，最后返回this
• Ajax
  ①创建一个xmlHttpRequest对象
  ②设置回调函数
  ③配置请求信息，使用open方法与服务器建立连接，get请求参数在url之后，post方式发送数据需要设置请求头
  ④向服务器发送数据
  ⑤在回调函数中对不同的响应状态进行处理
• this的指向问题
  全局的环境下this指向window
  普通函数、自执行函数、定时器中的this会指向window
  在对象里调用的this，指向调用函数的那个对象
  在构造函数以及类中的this，指向当前实例化对象
  箭头函数内有自己的this，箭头函数在this定义的时候，会继承自外层第一个普通函数的this
• call、apply、bind的封装与区别
  都是来改变this的指向和函数的调用，call和apply的传参方式不同，call方法跟的是一个参数列表，apply的参数是一个数组，call和apply使用后直接调用。bind传参后不会立即执行，会返回一个改变了this指向的函数，这个函数可以继续传参且执行。

Vue

• Vue 全家桶
  Vue包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。
• MVVM
  view 和model 通过viewmodel进行通信，viewModel负责把Model的数据同步到View显示出来，还负责把View的界面修改同步回Model更新数据。
• Vue的优点
  轻量级框架，大小只有几十kb,双向数据绑定操作更加简单，组件化开发，运行速度更快
• Vue响应式原理
  采用数据劫持和发布者–订阅者模式的方式，通过Object.defineProperty劫持各个属性的getter/setter方法，在数据变动时发布消息给订阅者，触发相应的监听回调
• Vue组件之间的传值
  ① 父组件向子组件：props
  ②子组件向父组件：$emit
  ③eventbus
  ④vuex
  ⑤缓存机制
• Vue中的data为何是个函数
  组件被复用的时候数据相互隔离互不影响
• Vue生命周期
  beforeCreate, created, beforeMount, mounted,
  beforeUpdate, updatad, beforeDistory, distoryed
• created 和 mounted 的区别
  created: 在模板渲染成html或者模板编译路由前调用
  mounted: 已完成模板，已经渲染或el对应html渲染后调用
• computed 和 watch 的区别
  computed: 当一个属性收到多个属性影响时
  watch: 当一条数据影响多条数据时
• v-if 和 v-show 的区别
  v-if控制DOM元素的增加或删除（适用于运行时条件很少改变的情况）
  v-show控制DOM元素的display样式（切换比较频繁时使用）
• get 和 post 的区别
  get的传参方式是通过地址栏url传递，可以看到参数；post参数不可见
  get传参长度有限制，2048个字符之内；post传参没有限制；
  get会被缓存，post不会被缓存；
  get只能进行url编码，post支持多种编码方式
• $nextTick的使用:使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取

vue-router

• vue-router的两种模式
  ①hash模式：‘#’使用hash不会刷新页面的特性来变更路由，做到单页面无刷新，原理是onhashchange
  ②history模式：index.js中配置，利用h5中的HistoryInterface中新增的pushState()和replaceState()方法

• vue-router有哪几种导航钩子
  ①全局守卫 beforeEach
  ②全局解析守卫 beforeResolve
  ③全局后置钩子 afterEach
  ④路由独享钩子 beforeEnter
  ⑤组件内的守卫 beforRouteEnter、beforeRouteUpdate、beforeRouteLeave

• vue-router的导航解析流程
  ①导航被触发
  ②在失活的组件中调用离开守卫 beforeRouteLeave
  ③调用全局的beforeEach守卫
  ④再重用的组件里调用beforeRouteUpdate守卫
  ⑤在路由配置里调用beforeEnter
  ⑥解析异步路由组件
  ⑦在被激活的组件中调用beforRouteEnter
  ⑧调用全局的beforeResolve守卫
  ⑨导航被确认
  ⑩调用全局的afterEach钩子
  ⑪触发DOM更新
  ⑫用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数

• vue-router怎么重定向
  rotes:[{‘path’: ‘a’, redirect: ‘b’}]

• vue-router有那些组件
  router-view, router-link

• 怎么定义vue-router的动态路由
  在路由文件中的index.js中，对path属性加 /:id

• 怎么获取传过来的值
  params.id

• 怎么获取当前路由信息
  使用this.$router获取当前路由信息

• $route 和 $router 的区别
  $route 是当前路由跳转对象，可以获取当前路由的name,path,query,params等
  $router 是VueRouter的实例，使用push方法等跳转不同的页面

• vue-router实现路由懒加载
  ①vue异步组件技术 — 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件
  ②路由懒加载（使用important引入）
  ③webpack提供的require.ensure()

• 如何监测路由参数的变化
  ①watch
  ②导航守卫

• 路由之间是怎么跳转的
  组件导航：router-link、router-view
  编程导航：router.push()、router.replace()、 router.go()、

• 应用Promise的场景
  异步请求后台数据，代码扁平化，改善回调地狱