前端面试题收集(二)

1.打开浏览器,输入网址敲回车之后会发生什么

• 浏览器将网址发送给dns,进行解析
• dns解析成为对应的ip地址之后,发送给浏览器
• 浏览器接收后,通过ip地址,找到对应的服务器,像服务器发送请求
  • 这其中,进行了三次握手的过程
• 服务器接收到请求后,找到对应的目录下得文件
• 找到所有文件,将其进行打包
• 将打包好的文件,发送给浏览器
• 浏览器接收后,进行解析,生成dom树,对数据进行动态渲染
• 当浏览器接收完数据后,会向服务器发送请求,断开双方数据通道
  • 这其中经历了四次挥手的过程

2.什么是http协议 什么是 https 协议

• http:超文本链接协议,可以减少网络传输
• https:
  • 更加安全的数据通道
  • 保证网站的真实性

3.vue-router的原理

• 单页面应用
• 默认hash,利用url中的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载,所以可以看到地址栏有一个(#)
• history 解决hash跳转很丑的样式,直接写在路由配置中加mode: 'history',但是还是需要后端配合

4.less和scss是什么

• 是预处理机制
• 作用:
  • 结构清晰,便于维护
  • 可以实现多层嵌套
  • 便于维护

5.image 中的 alt 和title
- alt 图片没有加载出来的文字
- title 鼠标移入的文字

6.cookie、localStorage、sessionStorage、token

• cook由浏览器在http中发给服务器,容量小(数据大小不能超过4k),容易被伪造,安全性低
• localStorage 本地存储 容量大 保存时间长
• sessionStorage 临时会话保存 窗口关闭就销毁
• token 服务器动态生成,发送个服务器进行验证 安全度高

7.解释一下mvvm

• mvvm是一种设计思想,在mvvm下,view和model没有直接关系,通过双向数据绑定,viewmodel进行数据驱动,使程序员减少了操作dom,更多的关注逻辑代码

8.mvc和mvvm的区别

• mvc通过controller操作dom,实现逻辑代码,这样性能比较低
• mvvm简化了controller的步骤,演变为了view model,不直接操作dom

9.vuex的理解

• 是什么:是一个代码管理仓库,用来存放数据
• 属性有哪些
  • state 相当书 data 存放声明的数据
  • mutation 存放定义的方法
  • getter 计算属性
  • action
    • 与mutation相似 但是action提交的是mutation,而不是直接改变状态
    • 可以包含任意的异步操作
  • module 可以将vuex分割为模块 每个模块又有自己的单独的 state mutation getter action

10.vue中组件的传值

• 父子组件的传值
  • 父传子
    • 父组件绑定一个属性 子组件定义一个props 接收父组件传过来的属性
    • 父组件通过children的方法 传给子组件
  • 子传父
    • 父组件定义一个方法,调用方法,拿值 子组件通过this.$emit(‘父组件定义的方法名’,‘值’)
    • 子组件通过parent 找到父组件 然后传值
• 子组件传给子组件
  • 定义个公共实例文件bus.js，作为中间仓库来传值
• vuex作为仓库传值

11.vue中虚拟的dom

• 每次页面dom更新,都会更新整个页面的内容,vue为了优化性能,会先把dom放到虚拟dom中,等到全部更新完毕,再一次性更新

12.$nextTick

• 在操作elementUI中的tree组件时,当我们想获取到勾选的id时,并点亮那个框框的时候,你会发现,普通的钩子函数比较难实现,这时我们可以使用$nextTick,它是在下一次dom元素更新的时候执行,它也可以用setTimeout来延时执行

13.请你说一下双向绑定的原理

• 我们在vue中看到的双向绑定的过程大致就是,input输入框输入的值,被data.msg获取到了,然后data.msg里的数据,被p标签绑定了,从而输入框输入的内容,在p标签里显示,但实际上他的原理是defineProperty(),在这个方法中,有两个属性,get()和set(),当你赋值的时候,会触发set()方法,当你取值的时候,会触发get()方法,他们实时监听,然后对数据进行操作
• 在v3.0中,可能会用到proxy来实现双向绑定,它与defineProperty中的用法大致是一样的,但是它的有点就是,可是监听所有数据的变化,而defineProperty之能监听定义的属性值的变化

14.vue首次加载提速有哪些方法

• 使用懒加载的方式
  • 懒加载只是将时间分割成了一段一段,总时长并没有减少
• 使用CDN加速
• 使用静态资源服务器
• 利用gzip进行压缩
• 使用webp的文件格式
• 减少请求
• 增加带宽
• 使用base64的编码格式
• 使用精灵图
• 少用递归

15.vue的优点

• 低耦合 单页面应用,组件中独立开发
• 独立开发 开发人员可以更好的注重代码逻辑
• 可测试 开发中,安装vue的插件,可以测试viewmodel

16.vue中跨域怎么解决

• 在请求头中加入
  • header(‘Access-Control-Allo w-Origin:*’) --允许所有来源的请求 不安全
  • header(‘Access-Control-Allo w-Origin: POST,GET’) --不方便
• jquery jsonp dataType: ‘jsonp’
• 使用 http-proxy-middleware 代理 --在config/index.js 的proxyTable 中配置…
• 使用axios发请求 直接写’/api’ --容易出现问题

17.导航守卫

• router.beforeEach(to,from,next())
• 可判断接下来这个页面能不能给你访问,可以就用next()放行

18.路由元信息

• 给需要验证的额页面,在路由管理中打一个标签,meta里的是一个对象,对象里写他的标签

19.重定向

• 设置元用户默认打开的网页, 在路由中, path:’’,rediet:‘对应的页面’

20.请求拦截

• interceptors.request
• 将所有发送的请求拦截下来,可以给他们加上请求头,或者带上token

21.响应拦截

• interceptors.response
• 可以将服务器返回的数据进行过滤
• 判断用户是否登录
• 实现:在拦截中发一个不需要传参的请求,如果状态码为400且没有token,就不让进入页面