1、localstorage、sessionstorage、与 cookie 的区别？

　　cookie：一般有服务器生成失效时间，如果是在浏览器端生成，cookie默认是关闭浏览器后失效，大小4kb，每次都会携带请求头。

　　localStorage：除非清除否则永久保存，大小5MB，仅存在客户端，不参与通信

　　sessionStorage：仅在当前会话下有效，关闭页面或者清除出浏览器后清除，大小5MB左右，仅在客户端保存，不参与通信

2、for..in　　for..of　　for..each 的区别

　　for..in 适合遍历对象，遍历数组的索引

　　for..of 是 ES6 的语法，只能遍历实现 Symbol.interator 的接口的对象，遍历的是数组内部的元素，不包括数组的原型属性 method 和索引 name

　　for..each 是 ES5 的遍历数组，不能使用 break 和 return 结束并退出循环。

3、ES6 的新语法

　　const 与 let 变量、解构赋值、for..of 循环、展开运算符、箭头函数和 this、Symbol、class、promise

4、const let 与 var 的区别

　　var 声明变量会挂载到 window 上，存在变量提升

　　let 和 const 声明形成块级作用域，块之外的访问会报错，不能变量提升，在声明之前访问会报错，不允许在同一级中重复声明

　　let 声明变量，值和类型都可以改变，无限制

　　const 声明常量，只读，修改值会报错，保存的是内存地址，可以给对象或数组添加属性或元素，不能重新复写。

5、ES6 中箭头函数 this 的指向

　　全局调用的时候 this 代表全局对象

　　作为对象方法调用的时候，this 指向这个上级对象，

　　作为构造函数调用时，this 只想这个新对象

　　apply 调用时，this 指向的是调用这个函数的一个参数。

6、对 Promise 的理解

　　Promise 是异步编程的解决方案，Promise 是一个对象，从它可以获取到异步操作的消息，Promise 有三个状态，pending 等待状态、fulfilled 成功状态、reject 失败状态。状态一旦更改，就不会再改变，创造 Promise 实例之后，就会立即执行。它有两个 API 方法： resolve 和 reject 方法，调用成功返回 resolve ，调用失败之后返回 reject，原型上又两个方法 .then 和 .chtch，在请求数据上 .then 是请求的数据，.chtch 捕获的错误异常。

7、原型，原型链的理解

　　原型：每个对象都会在其内部初始化的一个属性，就是 prototype(原型)，通俗的讲，原型就是一个模板，更准确的说是一个模板对象

　　原型链：当我们访问一个对象的属性的时候，如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又会有自己的 prototype ，于是就这样一直找下去，这也就是我们说的原型链的概念。通俗的讲，就是利用原型让一个引用类型继承另一个引用类型的属性和方法。（大白话版本：对象的原型指向父级，而父级的原型又指向父级的父级，像这样层层指向的关系，就叫做原型链。在查找一个对象的属性的时候，javascript 会向上遍历原型链，知道找到给定义名称的属性为止，当查找到原型顶部的时候，也就是 object.prototype()，仍然没有找到指定的属性，就会但返回 undefined。）

8、对闭包的理解

　　闭包：就是可以读取其他函数内部变量的函数

　　通俗的讲：函数a 和 内部函数b ，被函数a 外部的一个变量引用的时候，就创建了一个闭包。

　　应用场景：函数封装的时候，使用定时器的时候

　　闭包的用处：一是能够读取其他函数内部的变量，二是让这些变量值始终保持在内存中

　　优缺点：

　　　　优点：

　　　　　　减少全局变量

　　　　　　减少传递函数的参数量

　　　　　　封装

　　　　缺点：

　　　　　　使用闭包会占用大量的内存，过多的使用闭包会导致内存溢出

　　解决方案：就是把哪些不需要的变量，垃圾回收又收不走的哪些变量赋值为 null ，然后再让垃圾回收收走。

9、垃圾回收机制：

　　如果一个对象不再被引用，那么这个对象就会被回收，如果两个对象相互被引用，而不在被第三者引用，那么这两个对象也会被回收，如果，对象a 被对象 b 引用，b 又被除了 a 以外 c 引用，那么 a 执行完以后就不会被回收。

10、ES5、ES6 中继承

　　组合继承，原型链和构造函数的技术组合到一起来实现继承

　　属性拷贝：将对象的成员赋值一份给需要继承的对象

　　借用构造函数

10、CSS3 的新特性

　　选择器(伪类选择器)、背景和边框、文本效果、动画、过度、多列布局

11、H5 的新特性

　　语义化标签：header、footer、section、nav

　　增强型表单：input 的多个 type

　　新增表单元素：datalist、email、number、url

　　拖拽

　　本地存储

12、盒模型：

　　组成：content、padding、border、margin

　　标准盒模型：只计算 content 的宽高，不加 padding、border、margin

　　怪异盒模型：计算 content + padding + border，不加 margin

13、如何优化代码

　　代码重用、避免全局变量、适当的注释、内存的管理

14、WEB 前端性能优化

　　减少 HTTP 请求、合理的设置缓存、资源合并压缩、将外部 js 置底、雪碧图

15、元素的垂直水平居中

　　1、文本图片：line-hiegh；高度：text-align:center

　　2、绝对定位：left:50%；top:50%；margin 负半值；

　　3、绝对定位：margin + auto，top:0; left:0; right:0; bottom:0;

16、响应式布局的实现

　　meta 标签定义、百分比布局、rem 布局、媒体查询、弹性盒布局

17、浏览器的缓存

　　localstorage、sessionstorage、cookie、

18、jsonp 跨域原理

　　动态创建 script 标签，src 连接接口地址、callback 参数就是服务器返回给我们的数据，jsonp 支持 get 不支持 post，post 请求需要后端来给我们配置

19、如何解决 jsonp 跨域原理？

　　跨域原理：协议、域名、端口号有一个不统一就形成跨域

　　jsonp 跨域

　　设置 nginx 反向代理

　　服务器设置请求头

20、ajax 的原理及具体应用场景

　　通过 XMLHttpRequirst 给服务器发送请求，再通过 XMLHttpRequest 对象来接受服务器返回的数据，最后通过 dom 操作数据写到页面上；

　　XMLHttpRequset 是 ajax 的核心机制，实在 IE5 中首先引用的，是一种异步的无刷新技术，简单地说，也就是 JS 可以及时的向服务器提出请求和处理响应，而不是阻塞用户，从而达到无刷新的效果。

　　表单输入规范验证；用来做性能优化

21、反向代理怎么配置：

　　location / {

        　　proxy_pass  http://apachephp;

22、js 数据类型

　　基本数据类型：string、boolean、number、underfined、object、null

　　引用数据类型：object（array、data、function）

23、map 和 forEach 的区别

　　forEach()  返回的 undefined，不可以链式调用

　　map() 返回的是一个新数组，原数组不会改变

24、伪类和伪元素的区别

　　伪类不产生新的对象，只是在 DOM 中一个元素的不同状态

　　伪元素产生新对象，在 DOM 树中看不到

25、清除浮动的方法：

　　1、overflow:hidden

　　2、clear:both

　　3、after 伪元素清除浮动

26、ajax 的原生对象，如何完成一个完整的 ajax 请求

　　XMLHttpRequest

　　var xhr = new XMLHttpRequest();

　　xhr.open(url, "get", true)

　　xhr.onreadStatechange = function(res){}

　　xhr.send()

27、内存泄漏其他方式（除了闭包）

　　1、DOM 对象与 js 相互吸引

　　2、给 DOM 对象用 attachEvent 绑定事件

　　3、从外到内执行 appendChild

　　4、反复重写一个属性

28、css 预处理器

　　scss

　　嵌套、$变量、@mixin混合、@extend继承、@import引入

29、阻止事件冒泡

　　e.stopPropation()  标准浏览器

　　event.cancelBubble = true  IE9之前

30、阻止默认事件：

　　return false

　　e.preventDefault()

31、ajax 的缺点：

　　1、不支持浏览器的 back 按钮

　　2、暴露了与服务器交互的细节

　　3、对搜索引擎的支持比较弱

　　4、破坏了程序的异常机制

32、ajax 的流程

　　1、创建 XHR 对象，也就是一个异步调用的对象

　　2、创建新的 http 请求，指定该 http 请求的方法， URL 、以及验证信息

　　3、设置响应 http 请求状态变化的函数

　　4、获取异步调用返回过来的数据

　　5、使用 js 和 DOM 实现局部刷新

33、== 和 === 的区别

　　== 检查值相等，允许类型转换；

　　=== 检查值和类型相等，不允许类型转换

34、js 高阶函数

　　1、array.prototype.map

　　2、array.prototype.filter

　　3、array.prototype.reduce

35、css 实现三角形

　　.arrow{

            width: 0;

            height: 0;

            border-width: 40px;

            border-style:solid;

            border-color:  transparent orange transparent transparent;

        }

36、数组去重

　　1、遍历数组法（indexOf）

                新建一个数组，遍历要去重得元素，当值不再新数组的时候（indexOf 为 -1）就加入该新数组中。

　　2、Set 函数可以接受一个数组（或类数组对象）作为参数来初始化，利用该性能也能做到给数组去重

        3、数组下标判断法

                如果当前数组得第n项在当前数组中第一次出现的位置不是n，那么表示第n项是重复得，就忽略掉，否则存入新的数组中。

37、call 和 apply 的区别

　　apply 最多只能有两个参数，新 this 对象和一个数组 argArray ，如果 arg 不是数组会报错 TypeError

　　call 可传递多个参数，第一个参数和 apply 一样，是用来替换的对象，后面是参数。

38、ES7 的新特性

　　函数作用域中严格模式的变更

39、ES5 的新特性

　　严格模式

        JSON对象(stringify(obj/arr)、parse(json))

        string(扩展)：indexOf、lastIndexOf、substring、concat、length

        Array(扩展)：forEach、filter、map、reduce、some、every

40、http协议请求过程

　　域名解析，发起TCP 3次握手，建立 tcp 连接后发起 http 请求，服务器响应请求、浏览器获得 html 代码，浏览器解析 html 代码，并请求 html 代码中的资源，浏览器对页面进行渲染呈现给用户。

41、ES6 的数组新增的方法

　　Array.from

　　Arrayof()

　　find

　　fill

　　includes

　　entries

　　flat

42、new 的时候做了什么

　　1、创建一个新的对象

　　2、将构造函数中的作用域给新对象

　　3、执行构造函数中的代码

　　4、返回新对象

43、DOM 的添加、移除、移动、复制、创建、查找

　　创建新节点

　　　　createDocumentFragment() 创建一个的 DOM 片段

　　　　createElement() 创建一个具体的元素

　　　　createTextNode() 创建一个文本节点

　　添加、移除、替换、插入

　　　　appendChild()

　　　　removeChild()

　　　　replaceChild()

　　　　insertBefore()

　　查找

　　　　getElementsByTagName() 通过标签名称

　　　　getElementsByName() 通过元素的 Name 属性值

　　　　getElementById() 通过元素 id

44、HTTP 协议中 GET 和 POST 有什么区别，分别适合什么样的场景

　　get 传送的数据长度有限，post 没有

　　get 通过 url 传递，在浏览器的地址栏可见，post 是在请求头中传递

　　使用场景：

　　post 一般用于表单的提交

　　get 一般用于简单的数据查询，严格要求不是那么高的场景

45、js 作用域链

局部变量：局部变量就是在定义在函数内部的变量，这个变量只能在函数内部使用，即作用域范围只是函数内部，形参也是局部变量。

　　全部变量：全局变量就是定义在函数外部的变量，这个变量在任何函数中都有效，即作用域范围时当前文件的任何地方。

46、ajax 的优点，同步 异步的区别

　ajax 优点：

　　　　1、无刷新更新数据

　　　　2、异步与服务器通信

　　　　3、前后端负载均衡

　　　　4、基于规范被广泛使用

　　　　5、界面与应用分离

　　ajax 缺点：

　　　　1、不能很好的支持移动端

　　　　2、浏览器界面无法前进或者后退

　　　　3、对搜索引擎的支持比较弱

　　　　4、太多客户端造成开发上的成本。

　　　　5、安全威胁，ajax技术就如同对企业建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和业务逻辑

　　同步：

　　　　一个任务没有执行完就不会执行下一个任务

　　异步：

　　　　同一时间执行多个任务

　　优缺点：

　　　　1、同步的执行效率会比较低，耗费事件，但是有利我们对流程进行控制，避免很多不可掌控的意外情况

　　　　2、异步的执行效率很高，节省时间，但是对占用更多的资源，也不利于我们对进程控制

　　异步的使用场景：

　　　　1、不涉及共享资源，或者对共享资源只读，即非互斥操作

　　　　2、没有秩序上的严格关系

　　　　3、常用于 IO 操作等一些耗时操作，

　　　　4、不影响主线程逻辑

　　同步的好处：

　　　　1、同步流程会结果处理通常更为简单，可以就近处理

　　　　2、同步流程对结果的处理始终和前文保持在一个上下文内

　　　　3、同步流程可以很容易捕获，处理异常

　　　　4、同步流程是好的控制过程顺序执行的方式

　　异步的好处：

　　　　1、异步流程可以立即给调用方法返回初步的结果

　　　　2、异步流程可以延时给掉调用方最终的结果数据，

　　　　3、异步流程在执行的过程中，可以释放占用的线程等资源，避免阻塞

　　　　4、异步流程可以等多次调用的结果出来后，在同一返回一次结果集合，提高响应率

47、jq 的方法有哪些

    $().addClass(css中定义的样式类型);            给某个元素添加样式

    $().html();                                                      获得该元素内的内容（元素，文本等）

    $().text();                                                      获得该元素的文本

    $().val();                                                      获取input元素的值

    $().removeAttr(”属性名称”)                          给某元素删除指定的属性以及该属性的值

    $().removeClass(”class”)                              给某元素删除指定的样式