答案：
    opacity: 元素依然占有位置,对网页依然起布局作用
    visibility: 与opacity唯一不同的是它不会响应任何用户交互
    display：display 设为 none 任何对该元素直接打用户交互操作都不可能生效
  

答案：
    px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
    浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。
  

1.什么是 BFC:
    BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
  2.形成 BFC 的条件:
    浮动元素，float 除 none 以外的值
    定位元素，position（absolute，fixed）
    display 为以下其中之一的值 inline-block，table-cell，table-caption
    overflow 除了 visible 以外的值（hidden，auto，scroll）
  3.BFC 的特性:
    BFC的块不会和浮动块重叠
    计算BFC元素的高度时，会包括浮动元素
    垂直方向上的距离由 margin 决定
    BFC元素是一个独立的容器，使得里面的元素和外部元素隔离开，互补影响
  

答案：他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
    例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
  为什么要使用它们？
    结构清晰，便于扩展。
    完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
  

答案：边框使用伪类选择器，或者单独的元素实现。例如底部边框
  答案：边框使用伪类选择器，或者单独的元素实现。例如底部边框
  
  .box2::after{
      content:'';
      height:1px;
      width:100%;
      position:absolute;
      left:0;
      bottom:0;
      background:#000;
  }
  /* 在高清屏下设置 */
  @media screen and (-webkit-min-device-pixel-ratio: 2){
      .box2{
          /* 左右是水平x,上下是出垂直y */
          transform:scaleY(0.5);
      }
  }
  @media screen and (-webkit-min-device-pixel-ratio: 3){
      .box2{
          transform:scaleY(0.33333);
      }
  }
  
  
  

页面加载完成有两种事件
    1.load是页面当中所有资源全部加载完毕后(DOM树, css文件, js文件, 图片资源等)行一个函数问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较	长时间，所以一些效果可能受到影响
    2.DOMContentloaded是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）	  所以会比load较快执行
  

1.首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。
  2.undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。
  3.undefined 在 js 中不是一个保留字，这意味着我们可以使用 undefined 来作为一个变量名，这样的做法是非常危险的，它会影响我们对 undefined 值的判断。
  4.当我们对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”，这是一个历史遗留的问题。当我们使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。
  

 1.typeof
      typeof('123') === "string" // true
      typeof '123' === "string" // true
  2.constructor
     '123'.__proto__.constructor === String === String // true
  3.Object.prototype.toString.call()
     Object.prototype.toString.call('123') === '[object String]' // true
      
  
  

  1.脚本语言。JavaScript 是一种解释型的脚本语言,C、C++等语言先编译后执行,而 JavaScript 是在程序的运行过程中逐行进行解释。
    2.基于对象。JavaScript 是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
    3.简单。JavaScript 语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于 Java 基本语句和控制的脚本语言,其设计简单紧凑。
    4.动态性。JavaScript 是一种采用事件驱动的脚本语言,它不需要经过 Web 服务器就可以对用户的输入做出响应。
    5.跨平台性。JavaScript 脚本语言不依赖于操作系统,仅需要浏览器的支持。
  

答案：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
   
  1.那什么样的事件可以用事件委托，什么样的事件不可以用呢？
   
  
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup,keypress。
  
值得注意的是，mouseover 和 mouseout 虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
  
不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说 focus，blur 之类的，本身就没用冒泡的特性，自然就不用事件委托了。
  2.为什么要用事件委托: 提高性能,代码简洁
  

答案：实例对象__proto__与原型对象之间的关系,通过一个对象的__proto__可以找到它的原型对象，原型对象也是一个对象，就可以通过原型对象的__proto__，最后找到了我们的 Object.prototype,从实例的原型对象开始一直到 Object.prototype 就是我们的原型链
  
  

1.|| 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先进行 ToBoolean 强制类型转换，然后再执行条件判断。
  2.对于 || 来说，如果条件判断结果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值。
  3.&& 则相反，如果条件判断结果为 true 就返回第二个操作数的值，如果为 false 就返回第一个操作数的值。
  4.|| 和 && 返回它们其中一个操作数的值，而非条件判断的结果
  

  Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

    Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x 里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择
      Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。 

 因为组件是可以复用的, JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染,产生副作用。

   所以一个组件的 data 选项必须是一个函数, 因此每个实例可以维护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,因此不存在以上问题 

 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 
  一般结合路由和动态组件一起使用，用于缓存组件

 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
    （1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
    （2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
    主要包括以下几个模块:
  

	 Vue 中 key 的作用是：key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速 
    更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
    更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快

通知 react 组件数据有更新, 需要重新渲染
  它是异步的, react通常会集齐一批需要更新的组件, 然后一次性更新绑定渲染的性能

 虚拟DOM 相当于在JS和真实DOM中间加了一个缓存, 利用dom diff算法避免了没有必要的 dom 操作, 从而提高性能。

  1.类组件可以使用其他特性,如状态state和生命周期钩子。

    2.当组件只是接收 props 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。

    3.函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

 shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。
  因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能。

  高阶组件(HOC)是接收一个组件并返回一个新组件的函数。 
  这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件
  因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。

在包含表单的组件将跟踪其状态的输入值, 并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。