我看过的前端面试题（部分带答案）

vue2+ ：vue在实例化的过程中，会遍历传给实例化对象选项中的data选项，遍历其所有属性并使用
Object.defineProperty把这些属性全部转为getter/setter。同时每一个实例对象都有一个watcher实例对象，
他会在模板编译的过程中，用getter去访问data的属性，watcher此时就会把用到的data属性记为依赖，这样就
建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变（即数据的setter被调用的时候，
watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染，这样就实现了所谓的数
据对于视图的驱动

补充：9102年了，getter/setter已经不能满足面试官了，vue3.0也面世了，记得带一下proxy代理吧

当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率

1. 异步resolve
    const routers = [
        {
            path: '/',
            name: 'index',
            component: (resolve) => require(['./views/index.vue'], resolve)
        }
    ]

2. import + webpackChunkName（可以使相同webpackChunkName的模块打包在同一个trunk内）
    const Index = () => import(/* webpackChunkName: "group-home" */  '@/views/index')
    const routers = [
        {
            path: '/',
            name: 'index',
            component: Index
        }
    ]

3. require.ensure
    const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
    const routers = [
        {
            path: '/',
            name: 'index',
            component: Index
        }
    ]

1. 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案

2. 使用flexbox解决方案

3. 使用百分比加媒体查询

4. 使用rem：
    （1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：
         如果设计稿基于iphone6，横向分辨率为750，body的width为 `750 / 100 = 7.5rem`
         如果设计稿基于iphone4/5，横向分辨率为640，body的width为 640 / 100 = 6.4rem

    （2）布局时，设计图标注的尺寸除以100得到css中的尺寸高度为210px，写样式的时候css应该这么写：
    height: 2.1rem

    （3）在dom ready以后，通过以下代码设置html的font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';    

    （4）font-size可能需要额外的媒介查询，并且font-size不能使用rem

注意：当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽

子元素设置浮动时，父元素高度被计算为0（当元素设置浮动后，会自动脱离文档流）。翻译成白话就是说，
元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此
时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不
会出现这种情况）

解决方法：
    1. 给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这
    样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响
    布局

    2. 给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况

    3. 添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建
    一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标
    签太多是不好的

    4. 给父元素添加 overflow：hidden
        overflow：hidden有两个作用，分别是隐藏溢出和清除浮动

        隐藏溢出：当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观

        清除浮动：当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素
        超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，
        使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元
        素内了。   

    5. 通过伪类::after清除浮动：利用伪类来清除浮动，其效果跟创建一个空的div并设置其为clear：both;
    是一样的，只不过这里用伪类代替了空的div元素

BFC也是HTML中的一个盒子（看不见而已），只有满足至少下列条件之一才能形成BFC:
    a、float属性不为none.
    b、position属性不为static和relative.
    c、display属性为下列之一:
        table-cell,
        table-caption,
        inline-block,
        flex,
        inline-flex.
    d、overflow属性不为visible.

尽管这些条件都能形成一个BFC，但是它们各自却有着不一样的表现：
    display: table : 在响应式布局中会有问题
    overflow: scroll : 可能会出现你不想要的滚动条
    float: left: 使元素左浮动，并且其他元素对其环绕
    overflow: hidden: 消除溢出部分

这么看来，建立BFC的最好方式莫过于overflow: hidden了

作用：
    1. 利用BFC可以消除Margin Collapse（margin塌陷-在正常情况下，在一个容器内的所有box将会由上至下
    依次垂直排列，即我们所说的一个元素占一行，并切垂直相邻的距离是由各自的margin决定，而不是两个
    margin的叠加。）：只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase.如果它们属于不同
    的BFC，则不会有margin collapse.因此我们可以再建立一个BFC去阻止margin collpase的发生

    2. 利用BFC去容纳浮动元素：一个容器里有浮动元素，但是这个容器的高度却是0，通常我们解决这个问
    题的办法是利用一个伪元素去实现clear fix，现在可以让container形成BFC规则（父元素设置溢出隐
    藏）：overflow: hidden
    
    3. 利用BFC阻止文本换行：大多数情况(若没有特殊设置)，文本将会环绕浮动元素，为文本建立一个BFC，
    则可以使文本相邻浮动元素，而不是环绕

数组原型方法：
join()：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只
接收一个参数：即分隔符

push()和pop()：
    push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
    pop()：数组末尾移除最后一项，减少数组的length值，然后返回移除的项

shift() 和 unshift()：
    shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined  
    unshift:将参数添加到原数组开头，并返回数组的长度

sort()：默认按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。在排序时，sort()方法会调
用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。sort()方法可以接收一个比
较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于
第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正
数（前负后正）

reverse()：反转数组项的顺序

concat()：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副
本的末尾，最后返回新构建的数组。在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副
本。concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数
组项当作一项添加到Copy中

slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参
数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前
数组末尾所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。当出现负
数时，将负数加上数组长度的值来替换该位置的数

splice()：实现删除、插入和替换。splice(要删除的项起始位置，要删除的项数，要插入的项1，要插入的项
2...)，splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则
返回一个空数组

indexOf()和 lastIndexOf()（ES5新增）：
    indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位
    置 0）开始向后查找
    lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开
    始向前查找。这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1

forEach() （ES5新增）：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数
都是function类型，默认有传参，参数分别为：遍历的数组内容；对应的数组索引，数组本身

map() （ES5新增）：指"映射"，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。参数
都是function类型，默认有传参，参数为遍历的数组内容

filter() （ES5新增）："过滤"功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。参数都
是function类型，默认有传参，参数为遍历的数组内容，对应的数组索引

every() （ES5新增）：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。参数都是
function类型，默认有传参，参数为遍历的数组内容

some()（ES5新增）：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。参数都是
function类型，默认有传参，参数为遍历的数组内容

reduce()和reduceRight()（ES5新增）：
    这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开
    始，逐个遍历到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。传给 reduce()
    和reduceRight()的函数接收4个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值
    都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一
    项，第二个参数就是数组的第二项。

forEach循环   不能跳过或者终止循环，除非抛出异常，返回值是undefined，不可以链式调用
for in 循环   返回可枚举的属性(包括继承的属性)，一般用来循环带有字符串key的对象
for of 循环   es6用法 可终止循环，比传统的for循环简洁，同时弥补了forEach和for-in循环的短板

数组深拷贝：
    for循环实现
    arr.slice(0)
    arr.concat()
    ES6扩展运算符 var [...arr2 ] = arr
对象的深拷贝：
    for循环实现
    JSON.parse(JSON.stringify(obj))【最低支持IE8】
    扩展运算符实现 var { ...obj2 } = obj
Object.assign():
    对非嵌套对象进行深拷贝的方法，如果对象中出现嵌套情况，那么其对被嵌套对象的行为就成了普通的浅
    拷贝

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，
利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，
这样实现了跨域

XML、JSON、TEXT/HTML

1. 运维层面：通过nginx反向代理进行实现

2. JSONP跨域（只能使用get请求）：JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数
据

3. Cross-Origin Resource Sharing（CORS）跨域资源共享（服务器一般需要增加响应头），浏览器向跨源服
务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，所有浏览器都支持该功能，IE浏览器不
能低于IE10，CORS支持所有类型的HTTP请求（后台中加上响应头来允许域请求Access-Control-Allow-Origin）

4. window.name+iframe：window.name通过在iframe（一般动态创建i）中加载跨域HTML文件来起作用。然后，
HTML文件将传递给请求者的字符串内容赋值给window.name。然后，请求者可以检索window.name值作为响应

5. window.postMessage()：HTML5新特性，可以用来向其他所有的 window 对象发送消息

6. 修改document.domain跨子域，两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则
无法利用document.domain进行跨域，所以只能主域相同而子域不同的情况下使用，两个页面通过js强制设置
document.domain为基础主域，就实现了同域

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

常用： translate(x,y)定义2D转换。负值左上
      scale(x,y)定义2D缩放转换
      rotate(angle)定义2D旋转，在参数中规定角度

以上三个属性可扩展3d转换，X、Y、Z轴转换

1. 不知道自己高度和父容器高度的情况下，利用绝对定位只需要以下三行：父元素相对定位，子元素绝对定
位，并下移50%，元素再往上移元素的一半
    parentElement{
        position:relative;
    }
    childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

2. 若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可
    parentElement{
        height:xxx;
    }

    .childElement {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    
3. 不考虑兼容老式浏览器
    parentElement{
        display:flex;
        display: -webkit-flex; 
        align-items:center;
    }
    
4. 父元素高度确定的单行文本  设置 
    height = line-height
    
5. 父元素高度确定的多行文本     
    a:插入table（插入方法和水平居中一样），然后设置  vertical-align:middle            
    b:先设置  display:table-cell  再设置  vertical-align:middle
    
6. 
    position:fixed（absolute）;
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    margin:auto;
    或
    display:table-cell; 
    vertical-align:middle;  
    text-align:center;
    
7. 使用伪元素：
    :before{
        content:'';
        display:inline-block;
        vertical-align:middle;
        height:100%;
    }

HTML标签语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出
更优雅的代码的同时让浏览器的爬虫和机器很好地解析

作用：为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
    1、增强用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
    2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下
    文和各个关键字的权重
    3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
    4、提高代码的可维护度和可重用性，便于团队开发和维护，语义化更具可读性，是下一步扒网页的重要动
    向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

一旦为页面设置了恰当的DTD，大多数浏览器都会按照上面的图示来呈现内容。IE5.X和6在怪异模式中使用自己
的非标准模型。这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和

box-sizing属性：
    box-sizing: content-box;表示标准的盒子模型
    box-sizing：border-box表示IE盒子模型

默认的情况下是标准盒子模型

定好整体的宽高之后，里面元素的整体尺寸会确定下来，后面才是考虑这个元素的内边距以及边框，如果我已
经确定好了大体的布局，再去微调边框而导致了整体布局的崩塌，这显然是不科学的，所以这也是我极力推崇
前端布局使用box-sizing：border;的原因

display: flex;
display: inline-flex;
// Webkit 内核的浏览器，必须加上-webkit前缀
display: -webkit-flex;/*Safari*/
display: flex;
    
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。设置 display: flex;的容器可设
置其他6个属性：
    决定主轴的方向（即项目的排列方向）
        flex-direction：row | row-reverse | column | column-reverse; 
    定义如果一条轴线排不下，如何换行
        flex-wrap: nowrap | wrap | wrap-reverse; 
    flex-direction属性和flex-wrap属性的简写形式
        flex-flow
    定义项目在主轴上的对齐方式
        justify-content: flex-start | flex-end | center | space-between | space-around; 
    定义项目在交叉轴如何对齐
        align-items: flex-start | flex-end | center | baseline | stretch; 
    定义了多根轴线的对齐方式
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; 

容器成员可设置属性：
    定义项目的排列顺序。数值越小，排列越靠前，默认为0
        order: <integer>; 
    定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
        flex-grow: <number>; 
    定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
        flex-shrink: <number>; 
    定义在分配多余空间之前，项目占据的主轴空间（main size）
        flex-basis: <length> | auto; /* default auto */
    flex-grow, flex-shrink 和flex-basis的简写，默认值为0 1 auto
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
    允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
        align-self: auto | flex-start | flex-end | center | baseline | stretch; 

1. 直接在DOM里绑定事件：onclick="clickone()" 如果绑定多个 "onclick" 事件，只会执行第一个

2. 脚本里面绑定：document.getElementById("btn").onclick = function（）{ alert("hello"); } 
如果绑定多个 "onclick" 事件，只会执行最后一个事件

3. 通过侦听事件处理相应的函数：
document.getElementById("btn").addeventlistener("click",clickone,false); 
可以绑定多次同一个事件，且都会执行，但是这种方法在IE8及其低版本浏览器中不能兼容，可以使用
attachEvent("事件名",Fun)来进行绑定，因为IE浏览器不支持捕获事件，所以没有第三个参数

js事件的三个阶段分别为：捕获、目标、冒泡
event.stopPropagation()方法会阻止冒泡行为
event.stopImmediatePropagation()阻止该元素剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡

1. target:触发事件的某个具体对象，只会出现在事件流的目标阶段（谁触发谁命中，所以肯定是目标阶段）

2. currentTarget:绑定事件的对象，恒等于this，可能出现在事件流的任意一个阶段中

3. 通常情况下terget和currentTarget是一致的，我们只要使用terget即可，但有一种情况必须区分这三者的
关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提
下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑
定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象

函数柯里化：柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成
接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技
术，柯里化(Currying)具有：延迟计算、参数复用、动态生成函数的作用

$DOM.offsetTop - document.body.scrollTop
$('h2#answers-title').offset().top-$(document).scrollTop();

jquery.offset().top / left 用于获取div距离窗口的距离
jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置，返回值是一个DOMRect对象，
这个对象是由该元素的getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS边框集合，
left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言
的（兼容：IE67的left、top会少2px,并且没有width、height属性。）

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。在JavaScript中，
添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，
访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间

委托的优点：
    1、 减少内存消耗
    2、 动态绑定事件
局限性：
    1、focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托
    2、mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗
    高，因此也是不适合于事件委托的

在HTTP协议中有一个重要的选项：Refer，代表网页的来源，及上一页的地址，如果是直接在浏览器上输入地
址，回车进来，则没有Refer头

1. for循环（IE8不支持indexOf）

2. filter：如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的，忽略掉，
否则存入结果数组

3. 利用JSON键唯一的特性

4. var newArr = Array.from(new Set(arr));
   var newArr = [...new Set(arr)]

HTML或原生js是单一对应绑定的，绑多了只留最后一个。jQuery是追加绑定的，绑多少执行多少，在单一绑定
的条件下，由于jQuery底层其实也是js实现，所以速度区别并不大。至少“绑定”这个环节并不会成为速度的瓶
颈，比如你有多个li，是一样的，行内绑定每一个li上面都要写代码，用jq你直接获取这个类就可以统一绑定
而且行内绑定的话不利于代码的分离

事件的三个阶段：事件捕获、目标、事件冒泡

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上
的去触发事件

绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获：
    true，事件捕获；
    false，事件冒泡。
默认false，即事件冒泡（事件委托）

e.stopPropagation会阻止冒泡preventDefault阻止元素的默认行为的发生而发生其他的事情

$(function(){}) / $(document).ready(function(){})：这两个方法的效果都是一样的，都是在dom文档树加
载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）

window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比
window.onload先执行

每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期

在标准文档流里面，块级元素具有以下特点：
1. 总是在新行上开始，占据一整行
2. 高度，行高以及外边距和内边距都可控制
3. 宽带始终是与浏览器宽度一样，与内容无关
4. 它可以容纳内联元素和其他块元素

行内元素的特点：
1. 和其他元素都在一行上
2. 高，行高及外边距和内边距部分可改变
3. 宽度只与内容有关
4. 行内元素只能容纳文本或者其他行内元素，不可以设置宽高，其宽度随着内容增加，高度随字体大小而改
变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内
边界在ie6中不对上下起作用，只能对左右起作用

DNS 查询
TCP 连接
HTTP 请求即响应
服务器响应
客户端渲染

CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高

CSS 优先规则2："直接样式"比"祖先样式"优先级高

CSS 优先规则3：优先级关系：
    内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

CSS 优先规则4：计算选择符中 ID选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的
个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按a、b、c 的顺序依次比较大
小，大的则优先级高，相等则比较下一个。若最后两个的选择符中a、b、c 都相等，则按照"就近原则"来判断

CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则
3、4 判断优先级

1. typeof 返回值是一个字符串，里面包含了对应的数据类型： 
    "number"、 "string"、 "boolean"、 "undefined"、 "object"、 "function"
局限性: a、typeof null ->"object"
        b、检测的不管是数组还是正则都返回的是"object",所以typeof不能判断一个值是否为数组

2. instanceof/constructor检测某一个实例是否属于某一个类constructor可以避免instanceof检测数组的时
候，用Object也是true的问题
    console.log(/^$/ instanceof RegExp); //->true
    console.log([] instanceof Array); //->true
    console.log([] instanceof Object); //->true
    console.log([].constructor === Array); //->true
    console.log([].constructor === Object); //->false
局限性：a、用instanceof检测的时候，只要当前的这个类在实例的原型链上(可以通过原型链__proto__找到
它)，检测出来的结果都是true
        b、基本数据类型的值是不能用instanceof来检测的

3、Object.prototype.toString.call(value)返回一个JSON字符串——"[object 数据类型]"
    var toString = Object.prototype.toString;
    console.log(toString.call(1)); //[object Number]
    console.log(toString.call(undefined)); //[object Undefined]
    console.log(toString.call(null)); //[object Null]
    console.log(toString.call(false)); //[object Boolean]
    console.log(toString.call("s")); //[object String]
    console.log(toString.call({})); //[object Object]
    console.log(toString.call(/[a]/g)); //[object RegExp]
    console.log(toString.call(function(){})); //[object Function]

JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，每个对象都有__proto__属
性，但只有函数对象才有prototype属性，这个属性指向函数的原型对象，原型对象（Person.prototype）是构
造函数（Person）的一个实例，JS在创建对象（无论是普通对象还是函数对象）的时候，都有一个叫做
__proto__的内置属性，用于指向创建它的构造函数的原型对象，而原型对象又有自己的原型对象，这样一连
串的__proto__指向就构成了原型链，直到值为null。通过原型链我们可以进行两个类型之间的继承

说到闭包，必然少不了要说到javascript的特殊的变量作用域，变量的作用域无非就两种：全局变量和局部变
量，javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部
的局部变量，出于种种原因，我们有时候需要获取到函数内部的局部变量，正常情况下，这是办不到的，只有
通过变通的方法才能实现：那就是在函数内部，再定义一个函数，这时，再次被定义的这个函数就可以访问外
部函数的变量，将其作为函数的返回值，我们就可以在函数外部访问到她的内部变量了，这个被返回的函数，
就叫闭包

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这
些变量的值始终保持在内存中，不会在f1调用后被自动清除

使用闭包的注意点：
    1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页
    的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除
    2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把
    闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定
    要小心，不要随便改变父函数内部变量的值

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，它会递归地构建
一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle文件

webpack 是高度可配置的，主要有4个核心：

    1. 入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，通过在webpack配
    置中配置 entry属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src
    
    2. 输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为
    ./dist。常用path和filename属性，来告诉webpack输出的文件路径及文件名
    
    3. loader：让 webpack 能够去处理那些非JavaScript 文件（webpack 自身只理解javaScript）。
    loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack的打包
    能力，对它们进行处理

    在 webpack 的配置中 loader 有两个目标：
        test 属性，用于标识出应该被对应的loader 进行转换的某个或某些文件
        use 属性，表示进行转换时，应该使用哪个 loader
            const config = {
            output: {
                filename: 'my-first-webpack.bundle.js'
            },
            module: {
                rules: [
                { test: /\.txt$/, use: 'raw-loader' }
                ]
            }
            };
        
            “嘿，webpack 编译器，当你碰到「在require()/import 语句中被解析为 '.txt'的路径」时，在
            你对它打包之前，先使用raw-loader 转换一下。”

    4. 插件(plugins)

在webpack中，webpack.config.js中的entry属性可指定 webpack 应该使用哪个模块，来作为构建其内部依赖
图的开始，语法：
    const config = {
        entry: {
            main: './path/to/my/entry/file.js'
        }
    };
    module.exports = config;
    // 简写：
    const config = {
        entry: './path/to/my/entry/file.js'
    };

要在webpack中创建多个主入口，只需要将entry属性的值传入数组，向 entry 属性传入「文件路径
(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的
依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定
一个输出配置

在 webpack 中配置 output属性的最低要求是，将它的值设置为一个对象，包括以下两点：
    filename 用于输出文件的文件名。
    目标输出目录 path 的绝对路径。

如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin这样的插件），
则应该使用占位符来确保每个文件具有唯一的名称
    {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
    }
    // 写入到硬盘：./dist/app.js,
    // ./dist/search.js

图片格式是计算机存储图片的格式，常见的存储的格式有：
bmp，jpg，png，tiff，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd，dxf，ufo，eps，ai，raw，WMF，
webp等

WebP是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，
进而让整体网页下载速度加快。由于目前互联网上传输的数据有65%都是图片，WebP就是出于减少数据量、加速
网络传输的目的而开发的。部分浏览器不兼容

js中事件的发生包括捕获和冒泡两个阶段，两个阶段的传播顺序为
    捕获：从最外边父元素节点传递至发生事件的元素节点，即由外到内；
    冒泡：从发生事件的元素节点传递至最外边父元素节点，即由内到外；
    
在w3c标准中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行
事件冒泡。IE是事件冒泡、火狐是 事件捕获，ev.stopPropagation(); 阻止冒泡
    
标准浏览器事件监听：addEventListener("click", "doSomething", "true")，若第三参数为true则采用事件
捕获，若为false，则采用事件冒泡，IE浏览器只支持事件冒泡，不支持事件捕获，所以它不支持该方法，所以
ie浏览器使用ele.attachEvent("onclick", doSomething)
    
事件传播的阻止方法：
    在W3C中，使用stopPropagation()方法
    IE下使用cancelBubble = true方法
阻止默认行为：  
    在W3c中，使用preventDefault（）方法  
    在IE下return false  

    var addEvent = function(element,type,callback){
        if(element.addEventListener){
            element.addEventListener(type,callback,false);
        }else if(element.attachEvent){
            element.attachEvent('on' + type,callback)
        }
    }

    var getEvent = function(event){
        event = event || window.event;
        return event.target || event.srcElement;
    }

    var stopPropagation = function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }

    var preventDefault = function(){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    }

W3C标准和IE标准盒子模型当不对doctype进行定义时，会触发怪异模式
在标准模式下，一个块的总宽width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度width + margin(左右)（即width已经包含了padding和border值）

CSS3的box-sizing设置为
    box-sizing:content-box将采用标准模式解析计算，也是默认模式
    box-sizing:border-box时，将采用怪异模式解析计算

1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象

2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL以及验证信息

3. 设置响应HTTP状态变化的函数； 

4. 发送HTTP请求；

5. 获取异步调用返回的数据；

兼容性写法：
    if (window.XMLHttpRequest) {
        xmlhttp = new xmlHttpRequest(); // Netscape浏览器中的创建方式
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE浏览器的创建方式
    }

ajax请求成功的判断依据：
    xmlhttp.readyState === 4 && xmlhttp.status === 200

使用new关键字调用函数（new ClassA(…)）的具体步骤：
    1. 生成一个空对象 var obj={};
    2. 设置新对象的constructor属性为构造函数的名称，设置对象的_proto_属性指向构造函数的prototype
    对象
    3. 使用新对象调用函数，函数中的this被指向新的对象
    4. 初始化完毕新对象地址，保存在等号左边的变量中

DNS查询-tcp三次握手-https请求：

1. 首先，在浏览器中输入url
2. 在浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容，若没有
调到第三步
3. 在发送http请求前，需要域名解析（DNS解析），解析获取相应的IP地址
4. 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手
5. 握手成功后，浏览器想服务器发送请求，请求数据包
6. 服务器处理手段的请求，将数据返回至浏览器
7. 浏览器收到http相应，
8. 读取页面内容，浏览器渲染，解析HTML源码
9. 生成dom树，解析css样式，js交互
10. 客户端和服务端交互
11. ajax查询

1. html结构方面：
    1、圣杯布局：
        div.parent
            div.main
            div.left
            div.right
    2、双飞翼布局：
        div.parent
            div.main-wrap
                div.main
            div.left
            div.right
    三个div都设置float：left,为了把left和right定位到左右部分，采用负边距，left部分
    margin-left: -100%，right部分margin-right: -190px(具体.right的宽度)

    圣杯布局接下来的做法是当设置完了之后，虽然左右栏定位成功，但是中间main的内容会被遮盖住。所以
    在main的父元素container中设置左右padding值。给所有col设置position:relative，再分别给左右栏添
    加left、right值，使他们定位到正确位置
    
    双飞翼布局不必设置左右栏的position:relative，也不必设置左右left、right值，只需多添加一个子元
    素包含，相应的padding换成margin
    
    双飞翼布局的好处：
        1、主要的内容先加载的优化
        2、兼容目前所有的主流浏览器，包括IE6在内
        3、实现不同的布局方式，可以通过调整相关CSS属性即可实现

2. CSS代码层面（垂直居中不易实现）：
    常用的布局方式有3种：
        display:css 内联和块级布局
        position: 绝对、相对定位布局
        float: 浮动布局

animate：给元素设置动画
animation 属性是一个简写属性，用于设置六个动画属性：
    animation-name 规定需要绑定到选择器的 keyframe 名称
    animation-duration 规定完成动画所花费的时间，以秒或毫秒计
    animation-timing-function【linear|ease|ease-in|ease-out|ease-in-out】规定动画的速度曲线
    animation-delay 规定动画开始之前的延迟
    animation-iteration-count【n|infinite】 规定动画应该播放的次数
    animation-direction【normal|alternate】 规定是否应该轮流反向播放动画

transform：向元素应用 2D 或 3D 转换
    translate转换
    scale缩放
    rotate转换

原型继承：sub.prototype = new parent();
通过改变sub的原型对象实现继承，这种方式会让父类的方法和属性都得到复用，而通常，子类实例的属性是需
要单独存在的

构造函数实现继承：new一个sub的实例的时候 parent.call(this,arg);调用父类方法为子类实例添加属性，这
种方式最后子类的每个实例都有自己的属性和方法，但是继承父类方法的时候就不需要这种特性，没有实现父
类方法的复用

组合式继承：原型继承+构造函数实现继承

var XHR = null;  
if (window.XMLHttpRequest) {  
    // 非IE内核  
    XHR = new XMLHttpRequest();  
} else if (window.ActiveXObject) {  
    // IE内核,这里早期IE的版本写法不同,具体可以查询下  
    XHR = new ActiveXObject("Microsoft.XMLHTTP");  
} else {  
    XHR = null;  
}  
  
if (XHR) {  
    XHR.open("GET", "ajaxServer.action");  
  
    XHR.onreadystatechange = function () {  
        // readyState值说明  
        // 0,初始化,XHR对象已经创建,还未执行open  
        // 1,载入,已经调用open方法,但是还没发送请求  
        // 2,载入完成,请求已经发送完成  
        // 3,交互,可以接收到部分数据  
  
        // status值说明  
        // 200:成功  
        // 404:没有发现文件、查询或URl  
        // 500:服务器产生内部错误  
        if (XHR.readyState === 4 && XHR.status === 200) {  
            // 这里可以对返回的内容做处理  
            // 一般会返回JSON或XML数据格式  
            console.log(XHR.responseText);  
            // 主动释放,JS本身也会回收的  
            XHR = null;  
        }  
    };  
    XHR.send();  
}  

设置同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下
DOM任意操作，ajax任意请求的话如果浏览了恶意网站那么就会泄漏这些隐私数据

前端的性能优化最终目的都是为了提升用户体验，改善页面性能
前端优化的策略有很多，主要包括网络加载，页面渲染，CSS优化，JS执行优化，缓存，图片，协议几大类

普通函数中的this:
    1. this总是代表它的直接调用者(js的this是执行上下文)，例如 obj.func，那么func中的this就是obj
    
    2.在默认情况(非严格模式下，未使用 'usestrict')，没找到直接调用者，则this指的是window (约定俗
    成)
    
    3.在严格模式下，没有直接调用者的函数中的this是 undefined
    
    4.使用call，apply，bind(ES5新增)绑定的，this指的是绑定的对象

箭头函数中的this
    箭头函数没有自己的this， 它的this是继承而来；默认指向在定义它时所处的对象(宿主对象)，而不是执
    行时的对象，定义它的时候，可能环境是window; 箭头函数可以方便地让我们在setTimeout，setInterval
    中方便的使用this

Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-
已失败。当Promise的状态又pending转变为resolved或rejected时，会执行相应的方法，并且状态一旦改变，
就无法再次改变状态

声明一个Promise对象
    // 方法1
    let promise = new Promise ( (resolve, reject) => {
        if ( success ) {
            resolve(a) // pending ——> resolved 参数将传递给对应的回调方法
        } else {
            reject(err) // pending ——> rejectd
        }
    } )
    // 方法2
    function promise () {
        return new Promise ( function (resolve, reject) {
            if ( success ) {
                resolve(a)
            } else {
                reject(err)
            }
        } )
    }

.then()方法是Promise原型链上的方法，它包含两个参数方法，分别是已成功resolved的回调和已失败
rejected的回调
    promise.then(() => { console.log('this is success callback') }, 
        () => { console.log('this is fail callback') })

.catch()的作用是捕获Promise的错误，与then()的rejected回调作用几乎一致，catch()也能够捕获then()中
抛出的错误，所以建议不要使用then()的rejected回调，而是统一使用catch()来处理错误

reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行"失败"情况的回调

catch和then的第二个参数一样，用来指定reject的回调，效果和写在then的第二个参数里面一样。不过它还
有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错
了），
那么并不会报错卡死js，而是会进到这个catch方法中。

2开头 （请求成功）表示成功处理了请求的状态代码
    200   （成功）  服务器已成功处理了请求。通常，这表示服务器提供了请求的网页
3开头 （请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向
    304   （未修改） 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理
    400   （错误请求） 服务器不理解请求的语法
    401   （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应
    403   （禁止） 服务器拒绝请求
    404   （未找到） 服务器找不到请求的网页
5开头（服务器错误）
    500   （服务器内部错误）  服务器遇到错误，无法完成请求
    502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应
    504   （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求

浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和
expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行
通信；如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header
字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header
信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应header信息更新缓存中的对应header信
息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容

同步（Synchronous）和异步（Asynchronous）

处理异步的几种方法：
    1、回调函数（callback）：回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再
    执行。回调函数是异步编程最基本的方法，其优点是简单、容易理解和部署，缺点是不利于代码的阅读和
    维护，各个部分之间高度耦合（Coupling），流程会很混乱回调并不一定就是异步。他们自己并没有直接
    关系

    2、事件监听：采用事件驱动模式，任务的执行不取决代码的顺序，而取决于某一个事件是否发生。当f1发
    生done事件，就执行f2
        f1.on('done', f2);
        function f1() {
            settimeout(function() {
            // f1的任务代码
            f1.trigger('done');  
            }, 1000);
        }
    这种方法的优点：比较容易理解，可以绑定多个事件，每一个事件可以指定多个回调函数，而且可以去耦
    合，有利于实现模块化。这种方法的缺点：整个程序都要变成事件驱动型，运行流程会变得不清晰

    3、发布/订阅模式：假定存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个
    信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行
        jQuery.subscribe("done", f2);
        function f1() {
        　　setTimeout(function () {
        　　　　// f1的任务代码
        　　　　jQuery.publish("done");
        　　}, 1000);
        } 
        //jQuery.unsubscribe("done", f2);
    这种方法的性质与"事件监听"类似，但是明显优于后者。因为我们可以通过查看"消息中心"，了解存在多
    少信号、每个信号有多少订阅者，从而监控程序的运行

    4、promise对象：promise对象是commonJS工作组提出的一种规范，一种模式，目的是为了异步编程提供统
    一接口
        promise有两种状态：1、等待（pending）
                        2、完成（settled）
        完成状态分成两类：1、解决（resolved）
                        2、拒绝（rejected）
        promise解决（resolved）：意味着顺利结束
        promise拒绝（rejected）意味着没有顺利结束

    5、async/await

1. js单线程-->任务队列
2. 同步任务、异步任务

当DOM元素影响了元素的几何属性（例如宽和高），浏览器需要重新计算元素的几何属性，同样其它元素的几何
属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程
称为"重排"。完成重排后，浏览器会重新绘制受影响的部分到屏幕上中，该过程称为"重绘"。

重排发生的情况：
    添加或删除可见的DOM元素
    元素位置改变
    元素的尺寸改变（包括：内外边距、边框厚度、宽度、高度等属性的改变）
    内容改变
    页面渲染器初始化 
    浏览器窗口尺寸改变

重绘发生的情况：
    重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只
    有Repaint，因为不需要调整布局）

AMD规范：异步模块定义，提供定义模块及异步加载该模块依赖的机制，是 RequireJS 在推广过程中对模块定
义的规范化产出的

CMD规范：通用模块定义，提供模块定义及按需执行模块，是SeaJS 在推广过程中对模块定义的规范化产出的，
在CMD中 一个模块就是一个文件

CSS3选择器分为：
    结构型伪类选择器：:first-child，:last-child，:nth-child，:nth-last-child，:nth-of-type，
    :nth-last-of-type，:first-of-type，:last-of-type，:only-child，:only-of-type，:empty

    UI元素状态伪类选择器：:hover，:link，:active，:focus，:enabled，:disabled，:checked

    否定选择器：:not，

    伪元素：::first-line，::first-letter，::before， ::after，::selection

两个"::"和一个":"只是CSS3中用来区分伪类和伪元素

document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.getElementsByName
document.querySelector
document.querySelectorAll

1、所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本
身，可直接为其绑定事件。

2、getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，
需要加索引，如：document.getElementsByClassName(“box”)[0]=>获取class为box的所有元素中的第一个DOM
元素

3、querySelector()与querySelectorAll()两者的联系与区别： 
    联系： 两者括号中的取值都是选择器 
    区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，
    而querySelectorAll()获取到了所有class为box的元素集合