前端面试 常问

HTML CSS 

1. HTML / CSS3新特性

   audio（音频标签）、video（视频标签）拖拽 

   结构标签 例 如: header   nav  article  section aside  footer

   新增标签：datalist（定义选项列表）、details（定义文档细节，通常与summary使用）、menu（定义列表/菜单）、address、progress（进度条，有两个值：value、max）、mark（标记）、time（时间 ）

  新增表单元素type：email、url、tel、number（min、max、step）、range（进度条）、color（颜色面板）、search

CSS

• 边框：
  border-image 设置所有 border-image-* 属性的简写属性。
  border-radius 设置所有四个 border-*-radius 属性的简写属性。
  box-shadow 向方框添加一个或多个阴影。

• 背景：
  background-clip 规定背景的绘制区域。
  background-origin 规定背景图片的定位区域。
  background-size 规定背景图片的尺寸。

• 文本效果：
  text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
  text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
  text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
  text-outline 规定文本的轮廓。
  text-overflow 规定当文本溢出包含元素时发生的事情。
  text-shadow 向文本添加阴影。
  text-wrap 规定文本的换行规则。
  word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

• 2D效果：
  matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
  translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
  translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
  translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
  scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
  scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
  scaleY(n) 定义 2D 缩放转换，改变元素的高度。
  rotate(angle) 定义 2D 旋转，在参数中规定角度。
  skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
  skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
  skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

盒子模型

        最外层的 margin(外边距)  > border(边框) > padding(内边距) > content(内容)

BFC

        块级格式化上下文它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

        ................................................

预解析 

      js代码的执行是由浏览器中的javaScript解析器来执行的 javaScript解析器执行js代码的时候 分为两个过程 解析代码的 过程 执行代码的过程  

        把变量声明提升到当前作用域的最前面 ,值提升变量 不会提升赋值

        辨寒暑的声明提升到到当前作用域的最前面 是会提升 不会提升调用

        简单说一下作用域: 就是变量的 有效范围 分为三个 全局作用域, 局部作用域 ,块级作用域 

作用域链

        当代码在一个环境中执行的时候 会创建变量的一个作用域   由子级作用域返回父级作用域中寻找变量 就叫做作用域链

 闭包

        闭包就是能够的读取其他函数内部变量的函数   早本质上 闭包是将函数内部的和函数外部的链接起来的桥梁

原型链

        对象与对象之间并不是 孤立的存在 而每一个对象中都有一个内部的初始化属性 就是prototype(原型) 当在访问一个对象的属性或者方法 他会现在 如果没有找到就向上一级的原型中找，直到Object.protype为止，如果有该属性就拿值，如果还没有就返回Undefined

DOM事件流

       事件捕获阶段: 捕获阶段是从外到内传播即从根节点想最外侧点传播  

       事件目标阶段: 目标阶段就是时间内到达我们具体点击的那个元素阶段

       事件冒泡阶段: 冒泡阶段 从内向外传播 直到根节点结束

        注: 我们可以通过事件对象内的 event.stopPropagation()方法 阻止冒泡传播

事件委托(事件代理)

        js事件代理则是一种简单的技巧 通过他可以把事件处理器添加到一个上级元素上这样我们就避免了把事件处理器添加到多个子级元素上 

        优点: 减少事件的注册 节省内存 

        缺点:事件委托基于冒泡 对不冒泡的事件是不支持  层级过多 冒泡过程中可能被某层阻止掉

get/post的区别

         get使用url或者cookie传参 而post会将数据存在BODY中

         get的url的长度会有上的限制  则POST的数据则可以非常大

         post比get安全 因为数据在地址栏中是不可见的

http协议(http与sttps区别)

        HTPPS需要得到证书 一般证书需要一定的费用

        HTTP是超文本传输协议 信息是文明传输HTTPS则是具有安全性的SSL加密插传输协议

        HTTP的链接很简单 是无状态的

MVVM

        模型-视图-视图模型 : 模型是后端传来的数据 。 视图指的是 页面中所有能看到的页面。 视图模型是mvvm的核心 他说链接视图和模型的桥梁 : 将视图转化为模型 将模型转换为视图

Vue响应式  

        vue.js采用的是数据劫持结合发布者订阅者模式的方式 通过Object.defineProperty()来劫持哥哥属性的setter getter 在数据发生变动的时候发布消息给订阅者 触发相关的 监听回调

组件通信

        方法一: props/$emit 父组件通过props的方式向子组件B传递 B to A 通过在B组件中的$emit,A组件中的v-on的方式实现  

        方式二: $emit/ $on 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。

        方式三: vuex与localStorage

        方式四:  ref如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

什么是虚拟DOM

        文档对象模型或者DOM定义了一个接口 该接口允许js之类的语言访问的操作HTML文档 元素由树中的节点表示  并且接口允许我们操作他们  但是此接口需要付出代价 大量非常平凡的DOM操作会使页面放速度变的非常缓慢

        vue通过在内存中实现文档结构的虚拟表示来解决此问题 期中虚拟的节点 表示DOM树中的节点 当需要操作的时候 可以在虚拟DOM的内存中执行计算和操作 而不是在真是DOM上进行操作

Vue-router

 1.两种模式:

        vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作

        history模式 主要使用HTML5的pushState()和replaceState()这两个api来实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改

        区别：前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

 2.$router 和 $route 的区别 

        $router 是路由信息对象  里面装着 许多路由信息参数 

        $rouoter 为VueRouter的实例 相当于一全局的路由对象 里面包含很多属性和子对象  

3. 路由之间是怎么跳转的 有哪些方式

        <router-link to='需要跳转页面的路径' >

        this.$router.push()跳转指定路径的url  并在history中添加记录 点击回退时返回上一个页面

        this.$router.reqlace()跳转到指定页面的 但是history中不会添加记录 

        this.$router.go()向前或者向后跳转n个页面 n可以是整数 或者 负数

4.Vue Router路由守卫

        beforeEach  在路由跳转前触发，参数包括to,from,next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证

        afterEach   是在路由跳转完成后触发，参数包括to,from，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。

5.路由传值的方式

 使用$router.push()

        字符串传递路由地址 但是不能传递参数$router.push('home')

        路由命名 这种方式传递参数 目标页面刷新会报错$router.push({name:'news',params:{userid:123})

        查询参数 和 name配对的方式params 和 path配对 的是 queruy  $router.push({path:'/news',query:{{path:'/news',query:{urerid:123}}:123}})

        接收参数的形式 $route.query.query

声明式导航        

        字符串<router-link to:"name"></router-link>

        路由命名: <router-link to:"{name:'news' ,params:{userid:123}}"></router-link>

        查询参数: <router-link to:"{path:'/news' ,query:{userid:123}}"></router-link>

Vuex

1.vuex五个核心属性 status, Mutation , action , getter  module

2.vuex 的Mutation和 action之间的区别

        流程顺序 视图触发 action action在触发Action 在触发Mutation

        角色定位   mutation 专注于修改 state 理论上 是修改state的唯一途径 action 业务代码 异步请求

        限制  mutation 必须执行同步  action 可以异步  但是不能直接操作 state

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的
 

js事件循环机制

JavaScript 单线程中的任务分为同步任务和异步任务

同步任务会在调用栈中按照顺序排队等待主线程执行，
异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候，也就是栈内被清空的时候，被读取到栈中等待主线程执行。
任务队列是先进先出的数据结构。