基本类型：Undefined，Boolean，String，Number，Null

引用类型：Object (Array,Date,RegExp,Function)

1.你能解释一下JavaScript中的继承是如何工作的吗？

子构造函数中执行父构造函数，并用call\apply改变this

克隆父构造函数原型上的方法

 /**

 * 借助构造函数实现继承    不能继承原型链上的
 */
function Parent1 () {
    this.name = 'parent1';
}
Parent1.prototype.say = function () {

};
function Child1 () {
    Parent1.call(this);
    this.type = 'child1';
}
console.log(new Child1(), new Child1().say());

/**
 * 借助原型链实现继承    存在引用类型修改
 */
function Parent2 () {
    this.name = 'parent2';
    this.play = [1, 2, 3];
}
function Child2 () {
    this.type = 'child2';
}
Child2.prototype = new Parent2();

var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play, s2.play);
s1.play.push(4);

/**
 * 组合方式   实例化了两次
 */
function Parent3 () {
    this.name = 'parent3';
    this.play = [1, 2, 3];
}
function Child3 () {
    Parent3.call(this);
    this.type = 'child3';
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play, s4.play);

/**
 * 组合继承的优化1     两个constructor一样
 * @type {String}
 */
function Parent4 () {
    this.name = 'parent4';
    this.play = [1, 2, 3];
}
function Child4 () {
    Parent4.call(this);
    this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();
console.log(s5, s6);

console.log(s5 instanceof Child4, s5 instanceof Parent4);
console.log(s5.constructor);

/**
 * 组合继承的优化2     通过优化把实例的原型作为参数，解决了两次constructor一样的问题
 */
function Parent5 () {
    this.name = 'parent5';
    this.play = [1, 2, 3];
}
function Child5 () {
    Parent5.call(this);
    this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);//这里通过的是参数，所以可以直接给实例的constructor赋值，然而上一种是引用，所以不能赋值

    

2 谈一谈JavaScript作用域链

当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。

作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

3 如何理解JavaScript原型链

JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined；

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象)

javascript对象的几种创建方式

1，工厂模式

2，构造函数模式

3，原型模式

4，混合构造函数和原型模式

5，动态原型模式

6，寄生构造函数模式

7，稳妥构造函数模式

javascript继承的6种方法

1，原型链继承

2，借用构造函数继承

3，组合继承(原型+借用构造)

4，原型式继承

5，寄生式继承

6，寄生组合式继承

zepto原型的使用

(function (window) {
    var zepto = {}
    zepto.init = function (select) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(select))
        return zepto.Z(dom, select)
    }

    zepto.Z = function (dom, select) {
        return new Z(dom, select)
    }

    function Z (dom, select) {
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i]=dom[i]
        }
        this.length=len;
        this.select=select||'';
    }

    window.$ = function (select) {
        return zepto.init(select)
    }
    $.fn={
        css:function (key,value) {
            console.log('css')
            // this.style.key=value
            // console.log(this)
            console.log(window.getComputedStyle(this[0]).getPropertyValue(key))
        },
        html:function (value) {
            console.log('html')
            
        }
    }
    Z.prototype=$.fn
})(window)

var $p = $('p')

 $p.css('font-size','40px');
 console.log($p.html())

 var $div1 = $("#div1");
 $div1.css('color','blue')
 console.log($div1.html())

jQuery原型的使用

(function (window) {
    var jQuery = function (select) {
        return new jQuery.fn.init(select)
    }
    jQuery.fn = {
        css: function (key, value) {
            console.log('css')
        },
        html: function () {
            return '这是html'
        }
    }
    var init = jQuery.fn.init = function (select) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(select))
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.select = select || ''
    };
    init.prototype = jQuery.fn
    window.$ = jQuery
})(window)

4.请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

5.iframe有那些优缺点

    只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改。

    缺点：阻塞页面onload事件

          搜索引擎无法检索这种页面，不利于SEO

  会影响页面的并行加载

    解决方案：使用JS动态给iframe的src加载页面内容

6.link @import两者之间区别? 

（1）@import只能加载css 最好是@import:url(index.css)

（2）加载顺序的差别，最后加载import

（3）老浏览器不兼容

7.:before和::before区别? 

单冒号(:)是css2的写法

双冒号(::)用于CSS3。作用是一样的。

加分项：

配合content一起使用，不会出现在DOM中，所以不能JS控制，仅仅用于css渲染，通常用于 hover激活

8.如何让一个div上下左右居中？

（1）position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);

（2）position:absolute;left:0;top:0;bottom:0;right:0; margin:auto;

（3）width:200px;height:200px;border: 1px solid  red;background:#99f;position:absolute;left:50%;top:50%; margin-left:-100px;margin- top:-100px;

9、websocket

    是一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端，

10、webstorage,cookie

    是本地存储，存储在客户端，包括localeStorage和sessionStorage，localeStorage是持久化存储在客户端，只要用户不主动删除，就不会消失，sessionStorage也是存储在客户端，但是他的存在时间是一个回话，一旦浏览器的关于该回话的页面关闭了，sessionStorage就消失了

    

• Cookie：指某些网站为了辨别用户身份而存储在用户本地终端上的数据。分类内存 Cookie

由浏览器维护，保存在内存中，浏览器关闭就小时，存在时间短暂。

• 硬盘 Cookie

保存在硬盘中，除非用户手工清理或到了过期时间，一般不会删除。

• 用途服务器可以设置或读取 Cookies 中包含的信息，借此维护用户跟服务器会话中的状态

因为 HTTP 协议是无状态的，就是说服务器不知道用户上一次做了什么，为实现交互，就用 Cookie 来记录。

比如，网上购物，用户选购了一个商品，服务器在向用户发送网页时还发送一段记录商品信息的 Cookie，当用户访问另一个页面，浏览器会把 Cookie 发送给服务器端，于是服务器就知道用户选购了什么。

• 登录网站勾选“下次自动登录”，那么下次访问就不用再输入密码等信息。

这是因为在第一次登录时，如果勾选了自动登录，那么服务器发送包含登录凭据（用户加密码的某种加密形式）的 Cookie 到用户的硬盘上，第二次登录的时候，浏览器就会发送该 Cookie，服务器验证凭据，就不用再次输入密码等。

• 缺陷Cookie 会被附加到每个 HTTP 请求中，无形增加了流量HTTP请求中的 Cookie 是明文传递，安全性成问题。（HTTPS 不会）Cookie 大小限制在 4KB，对于复杂的存储需求是不够用的
• 
  

11.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

12.null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

undefined：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

null：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

13.new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

（2）属性和方法被加入到 this 引用的对象中。

（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

14. CSS 盒子模型，绝对定位和相对定位

1）清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法·

2）如何保持浮层水平垂直居中

3）position 和 display 的取值和各自的意思和用法

static position fixed relative

sticky 

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

fixed

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

4）样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验

15. JavaScript 基础

1）JavaScript 里有哪些数据类型，解释清楚 null 和 undefined，解释清楚原始数据类型和引用数据类型。比如讲一下 1 和 Number(1) 的区别

2）将一下 prototype 是什么东西，原型链的理解，什么时候用 prototype

3）函数里的this什么含义，什么情况下，怎么用。

3）apply 和 call 什么含义，什么区别？什么时候用。

4）数组和对象有哪些原生方法，列举一下，分别是什么含义，比如链接两个数组用哪个方法，删除数组的质定项。

16. JavaScript 的面向对象

1）JS 模块包装格式都用过哪些，CommonJS、AMD、CMD、KMD。定义一个JS 模块代码，最精简的格式是怎样。

2）JS 怎么实现一个类。怎么实例化这个类。

3）是否了解自定义事件。jQuery里的fire函数是什么意思，什么时候用。

4）说一下了解的js 设计模式，解释一下单例、工厂、观察者。

5）ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理？

17. 开源工具

1）是否了解开源的工具 bower、npm、yeoman、grunt、gulp，有无用过，有无写过，一个 npm 的包里的 package.JSON 具备的必要的字段都有哪些（名称、版本号，依赖）

2）fiddle、charles 有没有用过，什么时候用

3）会不会用 ps 扣图，png、jpg、gif 这些图片格式解释一下，分别什么时候用。是否了解webp

4）说一下你常用的命令行工具

5）会不会用git，说上来几个命令，说一下git和svn的区别，有没有用git解决过冲突

18. 计算机基础

1）说一下网络五层模型（HTTP协议从应用层到底层都基于哪些协议），HTTP 协议头字段说上来几个，缓存字段是怎么定义的，http和https的区别，在具体使用的时候有什么不一样。是否尽可能详细的掌握HTTP协议。

2）cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制

3）从敲入 URL 到渲染完成的整个过程，包括 DOM 构建的过程，说的约详细越好。

4）是否了解web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度。

5）是否了解公钥加密和私钥加密。如何确保表单提交里的密码字段不被泄露。验证码是干嘛的，是为了解决什么安全问题。

6）编码常识：文件编码、URL 编码、Unicode编码 什么含义。一个gbk编码的页面如何正确引用一个utf8的的资源

    form 的一个属性 accept-charset ，设置为 accept-charset=”gbk”。但有一个问题，IE 浏览器不支持此属性！这时需要一个变通的方法：在表单属性中添加 onsubmit=”document.charset=’gbk’;

19. 考察学习能力和方法

1）你每天必须登录的网站（前端技术相关）是什么？

2）前端技术方面看过哪些书，有无笔记，都有哪些收获。

3）收藏了哪些代码片段？

4）怎么理解前端技术的大趋势？自己再做哪方面的知识储备？

5）是否了解或精通其他（后端）的编程语言？

6）做过的项目有没有什么（视觉、交互）美感？什么是美？你觉得让你自己赏心悦目的网站或应用有哪些？

7）做项目有没有遇到哪些印象深刻的技术攻关，具体遇到什么问题，怎么找答案的，最后怎么解的

20、Vue router 跳转和 location.href 有什么区别？

router 是 hash 改变 location.href 是页面跳转，刷新页面

————————————————————————————

21、你能实现一下双向绑定吗？  vdom    snabbdom

    数据和视图的分离，解耦（开放封闭原则）

    以数据驱动视图，只关心数据变化，dom操作被封装

    MVVM：model(模型数据)         view（视图模板）         ViewModel(DOM listeners,Date Bingings)一种创新

    三要素：响应式、模板引擎、渲染

    

    1.diff算法是linux的基础命令，是git基本工具

    2.vdom使用diff算法是为了找出需要更新的节点

    3.diff实现，patch(container,vnode)(初次创建),patch(vnode,newVnode)（后面进行diff算法更新）

    4.核心逻辑：下面的createElement和updateChildren

    更多详情，点击 http://www.liuweibo.cn/detail.php?id=182

22、浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下：

先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；

当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些 request header验证这个资源是否命中协商缓存，称为 http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；

强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；

区别是，强缓存不对发送请求到服务器，但协商缓存会。

当协商缓存也没命中时，服务器就会将资源发送回客户端。

当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存；

23、==和===

if(obj.a==null){
    //相当于obj.a===null||obj.a===undefined
    //jq源码是这样写的，
    //其他地方都用===
}

原型链

var obj={};
obj.a=100;
function fn(){}
fn.a=100;
console.log(obj.__proto__===Object.prototype);//true {}为new Object();Object也是一个函数，所有的引用类型__proto__都指向与prototype；其实是一回事

24、上线流程要点

1.将测试完成的代码提交到git版本库的master分支

2.将当前服务器的代码全部打包并记录版本号，备份

3.将master分支的代码提交覆盖到线上服务器，生成新的版本号

25、回滚流程要点

1.将当前服务器的代码打包并记录版本号，备份

2.将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号

26.  性能优化

1.缓存daom

2.暂存dom

3.事件节流

var timeoutId;
HTMLTextAreaElement.addEventListener('keyup', function () {
    if (timeoutId) {
        clearTimeout(timeoutId)
    }
    timeoutId = setTimeout(function () {
        //todo  触发onchange事件
    }, 100)
})

4.尽早操作

window.addEventListener('load',function () {

})
document.addEventListener('DOMContentLoaded',function () {
    
})

27.安全

1.XSS(Cross Site Scripting)跨站请求攻击

        eg:写博客偷偷插入一段《scripyt》,攻击代码，获取cookie，发送到自己的服务器

               发布博客，有人查看博客内容，会吧查看着的cookie发送到攻击者的服务器

        预防：前端替换关键字，例如替换<为&lt;，后端替换，一般都为后端处理，前端js执行能力低

2.CSRF（Cross-site request forgery）跨站请求伪造

        eg:你已经登录一个购物网站，正在浏览商品，付费接口是xxx.com/pay?id=100但是没有任何验证

            然后你收到一封邮件，隐藏着《img src=xxx.com/pay?id=100》,你查看邮件的时候，就已经悄悄付费购买了

            依赖用户登录后去执行一个漏洞接口

        预防：增加验证流程（token,referer,隐藏令牌），输入指纹。密码。短信验证码

            插入脚本（js代码）获得他想到的东西

28.三栏布局（5种）

        1 float

        2 position

        3  flexbox (高度无所谓)

.layout article{
    display: flex;
}
.left{
    width: 300px;
    background-color: orange;
}
.right{
    width: 300px;
    background-color: green;
}
.center{
   flex: 1;
}

        4 table-cell(高度无所谓)

.layout article{
    display: table;
    width: 100%;
}

.left{
    display: table-cell;
    width: 300px;
    background-color: orange;
}
.right{
    display: table-cell;
    width: 300px;
    background-color: green;
}
.center{
    display: table-cell;
}

         5 网格布局grid

.layout article{
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}

29.获得元素的宽高

var dom =document.getElementById('test') ;
console.log(dom.style)
console.log(dom.currentStyle);//ie
console.log(window.getComputedStyle(dom));// 非ie
console.log(dom.getBoundingClientRect())

30.dom事件

    1.dom0 onclick

    2.dom2   window.addEventListener('click',function(){},false)

    3.dom3   window.addEventListener('keyup',function(){},false)

31. dom事件类

    捕获（上到下）；

            window=>document=>html(document.documentElement获得html标签)>body>...

dom.addEventListener('click',function () { //dom为上一行捕获的对象
    console.log(123);//上一行每一个对象所捕获
},true); //为true才可以捕获

    冒泡（下到上）;

    Event对象常见应用：

            event.preventDefault();

            event.stopPropagation();

            event.stopImmediatePropagation() ; //一个对象有多个事件，添加这句话，其他的不会在执行

            event.currentTarget； //当前所绑定的事件，父级对象

            event.target

    自定义事件

            //var eve = new Event('custome');

//var eve = new Event('custome');
var eve = new CustomEvent('custome', {
    detail: {
        username: "davidwalsh"
    }
    });//可以增加参数
dom.addEventListener('custome',function (e) {
    console.log(e.detail)
});
    dom.dispatchEvent(eve);//触发自定义事件

32.HTTP协议（百度云,前端跳槽面试必备，3-8）

https://www.cnblogs.com/ranyonsue/p/5984001.html

    特点：

            简单快速 ：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

            灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记

            无连接： 无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

            无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

       报文：

            请求报文：请求行，请求头，空行，请求体

            响应报文：状态行，响应头，空行，响应体

        请求方法

             GET 请求指定的页面信息，并返回实体主体。

HEAD     类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
POST     向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
PUT     从客户端向服务器传送的数据取代指定的文档的内容。
DELETE      请求服务器删除指定的页面。
CONNECT     HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS     允许客户端查看服务器的性能。
TRACE     回显服务器收到的请求，主要用于测试或诊断。

        get和post的区别

                get在浏览器回退时是无害的，post会再次提交请求

                get的url可以收藏，post不可以

                get请求会主动缓存，post不会，除非手动设置

        状态码

                

1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求

常见状态码：

http://www.runoob.com/http/http-status-codes.html

200 OK                        //客户端请求成功
206
Partial Content
部分内容。服务器成功处理了部分GET请求
301
302
304
400 Bad Request               //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized              //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden                 //服务器收到请求，但是拒绝提供服务
404 Not Found                 //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error     //服务器发生不可预期的错误
503 Server Unavailable        //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

        持久连接

            什么是持久连接？对于HTTP协议而言，它是基于请求响应模型，Client向Server发请求时，先建立一条HTTP连接，Server给Client响应数据后，连接关闭。

            当Client发送下一个请求时，需要重新再建立HTTP连接，这种方式就是：一个请求响应需要占用一条HTTP连接。而持久连接就是：只需要建立一条连接，然后在这条连接上 传输多个请求和响应。

            与持久连接相关的字段

            HTTP1.0中有一个Connection首部字段，它是一个逐跳首部字段。Connection:Keep-Alive，表示希望将此条连接作为持久连接。

            HTTP1.1中，建立的HTTP请求默认是持久连接的。当Client确定不再需要向Server发送数据时，它可以关闭连接，即在发送首部中添加Connection:Closed字段。

        管线化   

                ①管线化机制通过持久连接完成，仅HTTP/1.1支持此技术

                ②只有GET和HEAD请求可以进行管线化，而POST会有所限制

                ③初次创建连接时不应启动管线机制，因为对方服务器不一定支持HTTP/1.1版本的协议

                

                持久连接的时候，某个连接消息传递类似于

                持久连接的一个最大的好处是：大大减少了连接的建立以及关闭时延。

                “缺点”，请求响应是顺序执行的。只有在请求1的响应收到之后，才会发送请求2，这就是持久连接与管道化连接不同的地方。

                请求1=>响应1=>请求2=>响应2

                管线化后

                请求1=>请求2=>响应1=>响应2

                管道化连接是需要持久连接支持的。管道化连接是在持久连接的基础上，以“流水线”的方式发送请求：不需要等到请求1的响应到达Client，就可以发送请求2....

https://www.cnblogs.com/hapjin/p/5815368.html?utm_source=itdadao&utm_medium=referral

33.创建对象的四种方法

var o1 = {name:'abcd01'};
var o2 = new Object({name:'abcdo2'});
function M(name) {
    this.name=name;
}
var o3 = new M('abcdo3');
var p={name:'abcdp'};
var o4 = Object.create(p);

ps:o4创建了一个原型，o4.__proto__===p

34.ajax跨域

    1.JSONP

    2.hash    iframe标签

    3.postMessage  

    4.WebSocket

    5.CORS

35.算法

    1.排序

    2.堆栈、队列、链表

    3.递归

    4、波兰式和逆波兰式

36.页面渲染（js单线程，原因避免dom渲染冲突）

    1.DOCTYPE作用          HTML5 <！DOCTYPE html>          HTML4.01 Strict(严格模式)，不包含弃用的元素(font标签)             HTML4.01Transitional（传统模式）包含弃用的元素(font标签)

    2.浏览器渲染过程

    3.重绘重排

37.页面性能

    1.资源合并压缩

    2.非核心代码异步加载

        1）动态脚本加载    

        2）defer,在html解析完成后才会执行，如果是多个安装顺序依次执行     

        3）async，加载完成后立即执行，如果是多个，执行顺序与加载顺序无关

    3.利用浏览器缓存

        1）强缓存

                

•                 expires                     Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。可以看到过期时间被设定为了：Thu, 28 Sep 2017 06:38:37 GMT存在的问题：服务器时间与客户端时间的不一致，就会导致缓存跟期待效果出现偏差。
•                 Cache-Control         Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。简单介绍下Cache-Control的属性设置。max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires

        2）协商缓存

                在这个阶段，服务器一般会将Cache-control、expires 、last-modified、date、etag (hash值)等字段在response header 中返回，便于下次缓存。当然具体的场景，也是看服务器的约定规则设定。

    4.使用CDN

    5.cdn预解析

<meta http-equiv="x-dns-prefetch-control" content="on" />   //页面中的a标签一般会自动预解析，若是https协议，默认关闭dns预解析，这里强制预解析
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

38.jquery的Defered解决异步

function waitHandle () {
    var dtd = $.Deferred();
    var wait = function (dtd) {
        var task = function () {
            console.log('执行完成')
            dtd.resolve();//成功
            // dtd.reject();//失败
        };
        setTimeout(task,1000)
        return dtd;
    };
    return wait(dtd)
}

var w = waitHandle();
w.then(function () {
    console.log('success 1')
},function () {
    console.log('fail 1')
}).then(function () {
    console.log('success 2')
},function () {
    console.log('fail 2')
})
w.done(function () {
    console.log('done success 1')
}).fail(function () {
    console.log('done fail 2')
}).done(function () {
    console.log('done success 2')
}).fail(function () {
    console.log('done fail 2')
})

39.错误监控

    1.错误分类

            1）及时运行错误：代码错误

                    try...catch    window.onerror

            2）资源加载错误（不会冒泡）

                    object.onerror         

                    performance.getEntries()   (获得页面所有加载的资源，根据已经加载的资源间接判断加载失败的资源)                    

                    Error事件捕获

<script type="text/javascript">
    window.addEventListener('error', function (e) {
        console.log('捕获', e);
    }, true);//这里一定是true表示要捕获
</script>

                跨域的js能捕获到错误吗？

                    错误信息：script:error

                    出错行号和出错列拿不到为0

                解决：第一步，在客户端script增加crossorign属性，第二步，在服务端设置js响应头Access-Control-Allow-Orign:*(或者指定域名)

    2.上报错误

            1）利用ajax通信进行上报

            2）利用image对象上报（大多数都用这个,简单，不用借助其他的库，一行代码解决所有）  

                    eg:(new Image()).src = 'http://baidu.com/tesjk?r=tksjk';

主动抛出错误: throw new Error("错误信息")鄙视: 

js中共有几种错误类型: 6种:

SyntaxError 语法错误    ReferenceError 引用错误TypeError 类型错误RangeError 范围错误 参数超范围

EvalError URIError

11.知道的网页制作会用到的图片格式有哪些？

答案：

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）

1 #container     //<img>的容器设置如下
2 {
3     display:table-cell;
4     text-align:center;
5     vertical-align:middle;
6 }

什么是模块化？

•       模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

•       让开发者便于维护,同时也让逻辑相同的部分可复用

•       模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

29、向git中添加一个文件并commit，然后push到remote server,请写出相关命令？

$ git add README.md

$git commit -m "add README.md"

$ git push origin master

30、请把以下HTML文档翻译成MarkDown格式？

         <h3>Header</h3>

         <p>Hello world!<ahref="https://www.google.com">Google</a></p>

         <ol>

                   <li>NumberOne</li>

                   <li>NumberTwo</li>

         </ol>

### Header

Hello world

1.  Number One

2.  Number Two

4、请解释下列返回码的含义：200,302,400,403,500,502

200：请求成功

302：请求的资源临时从不同的 URI响应请求。(资源临时重定向)

400：错误请求（请求的参数错误或者服务器不理解请求的语法）

402：10.4.3 402 Payment Required   This code is reserved for future use.

该状态码是为了将来可能的需求而预留的。

500：服务器端错误

502：网关或代理无效/无响应，网络错误

12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding

15、导航钩子有哪些？它们有哪些参数？

答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

16、Vue的双向数据绑定原理是什么？

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

NaN有两个特点

1.任何涉及NaN操作结果为NaN       2.NaN不等于任何值。包括本身   NaN==NaN //false

2.null和undefinned判断相等时候不能进行数据转换   null==0 undefined==0  均为false