前端面试题（ES6之前）

栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
1.js定义
javaScript是一种直译式脚本语言,是一种动态类型,弱类型,基于原型的语言,内置支持类型，可以给HTML网页添加动态功能

2.什么是事件委托
事件委托是利用冒泡原理将目标本身的事件委托给其父元素或祖先元素执行

3.事件委托的好处
1).提高JavaScript性能事件的处理速度，减少内存占用
2).动态的添加DOM元素,不需要因为元素的改动而修改事件的绑定

4.事件监听与普通事件的区别
1).可以给元素重复绑定相同事件
2).可以改变事件的传播方式 冒泡(false)与捕获(true)
3).删除事件时,事件监听可以调用removeEventListener方法,而普通事件将其设为空

5.事件的绑定
1).在DOM元素中直接绑定
2).在JavaScript代码绑定
3).绑定事件监听函数

6.Json的优点
1).轻量级,体积小,节省流量,提高加载速度
2).解析成原生JS对象,解析比XML更快
3).查找数据无需查找标签,更快

7.AJAX的定义及原理
定义：
1).AJAX是异步的加载JavaScript和XML技术
2).AJAX是一种用于创建快速动态网页的技术
3).可以在不重新加载整个网页的情况下,对网页的某个部分进行更新

原理：
(1)创建对象	var xhr = new XMLHttpRequest();
(2)打开请求xhr.open('GET', 'example.txt', true);
(3)发送请求xhr.send(); 发送请求到服务器
(4)接收响应xhr.onreadystatechange =function(){}
(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。
(2)当readystate==4时，表示已经接收到全部响应数据。
(3)当status ==200时，表示服务器成功返回页面和数据。
(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

8.AJAX的好处
1).异步加载数据,无需切换页面
2).更佳的用户体验 局部刷新 及时验证 操作步骤简化等
3).节省流量
4).JS控制数据的加载,更加灵活多用

9.什么是跨域
只要协议,域名,端口有任何一个不同,都被当做是不同的域，不同域之间的交互称为跨域

10.get和post的区别
get: 1).更常用,更方便
2).性能好
3).明文发送数据,没有post安全
4).传输数据大小有限制,数据通过URl传递
post: 1).使用相对较少
2).性能只有get的1/3左右
3).比get稍微安全
4).没有传输数据大小限制

11.for while do…while…的异同点
同：都是循环，且循环次数相同
异：不满足条件时，while和for一次都不执行，而do…while…至少执行一次

12.什么是函数
函数包含一组语句，是js的基础模块单元，用于代码复用、信息隐藏、和组合调用，函数可以封装多条语句，可以在任何时候，任何地方调用。
函数分为两种：带有函数名的函数和匿名函数
（优点）可以减少代码量，便于修改和维护。
JS函数调用的四种方法：方法调用模式，函数调用模式，构造器调用模式，apply,call调用模式（在事件中调用、 在链接中引用）

13.同步与异步的区别
同步是false，一条一条执行（先进，先出）按顺序执行，同步如果出现错误，之后的代码不执行。
异步是true，setTimeOut等其他执行完成后，在执行本身，异步报错，同步仍会执行。
（同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去，一旦出错，之后的代码将不执行；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率，异步报错，同步仍会执行）

14.jsonp跨域的原理及其优缺点
原理：ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
（JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。）

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

15.如何理解DOM和BOM，以及二者的区别
1、BOM全称Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。
2、DOM全称Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。
（JavaScript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。）

区别：DOM描述了处理网页内容的方法和属性；BOM描述了与浏览器进行交互的方法和接口
        DOM的核心对象是document；BOM的核心对象是window   

16.对HTML的理解
html是个缩写，全名为HyperText Markup Language，中文名字叫做，超文本链接语言，是用来做静态网页的，也是做动态网页的基础，作用的话就是做个标记，用来让浏览器解析，最后显示出页面。
HTML是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

17.new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

18.null和undefined的区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

19.什么是闭包，如何使用它，为什么要使用它？好处是什么？
(闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露)
包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
使用闭包的注意点：
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
好处：(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
(3)私有成员的存在
(4)安全性提高
20.描述一下你认为的盒子模型?
答案：盒子模型分为ie盒子模型和w3c盒子模型
●　ie的盒子模型包括（margin(外边距)，padding(内边距)，边框(border）,内容(content) (ie的width=content+padding+borde) ）;
●　w3c的盒子模型包括（margin(外边距)，padding(内边距)，边框(border）,内容(content) w3c的width=content）
21.请写出css3样式的优先级,并排序
答案：!important(权重最大)1000>内嵌样式（style=””）>内部样式>外联样式>@import url(“url”);
22.对boostrap的理解
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统和丰富的组件支持。

pull push 写法的原因：

1. 如果行比较多 交叉显示内容，为了页面结构保持一致，更有易于渲染数据
2. 由于seo搜索引擎优化，因为搜索引擎会认为主要的内容在页面结构上面显示

visible-xs 只在指定结构上显示 hidden-xs 只在指定结构消失

怎么解释移动端优先
默认样式是针对移动端 可以通过媒体查询来针对大尺寸设备

23.栅栏系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

24.请描述一下 cookies sessionStorage和localstorage区别
（1）相同点：都存储在客户端
不同点：1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（2）有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
（3）数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

25，从输入url到显示页面，都经历了什么？
一般会经历以下几个过程：
1、首先，在浏览器地址栏中输入url。
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器。
7、浏览器收到HTTP响应。
8、读取页面内容，浏览器渲染，解析html源码。
9、生成Dom树、解析css样式、js交互。
10、客户端和服务器交互。
11、ajax查询。
26，display:none和visibility:hidden区别？
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
27，$(document).ready()方法和window.onload有什么区别？(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

28，jquery中$.get()提交和$.post()提交有区别吗？
相同点：都是异步请求的方式来获取服务端的数据；
不同点：
（1）请求方式不同：$.get()方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
（2）参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
（3）数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多。
（4）安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

29.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
答案：一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间
30、跨域请求资源的方法：
(1)、porxy代理
定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
实现方法：通过nginx代理；
注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：
res.writeHead(200, {
“Content-Type”: “text/html; charset=UTF-8”,
“Access-Control-Allow-Origin”:‘http://localhost’,
‘Access-Control-Allow-Methods’: ‘GET, POST, OPTIONS’,
‘Access-Control-Allow-Headers’: ‘X-Requested-With, Content-Type’});
(3)、jsonp
定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。
实例如下：

缺点：
1、这种方式无法发送post请求（这里）
2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

31.$(this) 和 this 关键字在 jQuery 中有何不同？
KaTeX parse error: Expected 'EOF', got '#' at position 187: …? 答案：(1)、基本选择器：#̲id，class,elemen…=value] ，[attribute*=value]
(7)、子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child
(8)、表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
(9)、表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected
33、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？
(1)、bind 【jQuery 1.3之前】
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；
语法：bind(type,[data],function(eventObject))；
特点：
(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。
(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。
实例如下：KaTeX parse error: Expected 'EOF', got '#' at position 4: ( "#̲members li a" )…( document ).on( “click”, “#members li a”, function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定义和用法：将监听事件绑定在就近的父级元素上
语法：delegate(selector,type,[data],fn)
特点：
(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。
(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。
实例如下：
$("#info_table").delegate(“td”,“click”,function(){/显示更多信息/});
KaTeX parse error: Expected 'EOF', got '#' at position 17: …"table").find("#̲info").delegate…("#info_table").on(“click”,“td”,function(){/显示更多信息/});参数的位置写法与delegate不一样。
说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。
总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()
34.请指出document load和document ready的区别？
共同点：这两种事件都代表的是页面文档加载时触发。
异同点：
ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。
onload 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。
35、圣杯/双飞翼布局
圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局
三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高
(1)、浮动布局（float+calc）

<style type="text/css">
.container {
  width: 100%;
  height: 300px;
}
.container > div {
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    background-color:red;
}
.right {
    background-color:blue;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    background-color:green;
}
</style></head><body>

(2)、绝对布局（absolute+calc）

(3)、flex布局；

<style>
    .container{
        width:100%;
        height:300px;
        display:flex;
     }
    .container > div{
        height:100%;
     }
    
    .left,.right{
       width:60px;
     }
    .left{
        background-color:green;
     }
    .right{
        background-color:blue;
     }
    .main{
        flex:1;
        background-color:red;
     }
</style></head><body>

<div class="container">
    <div class="left"></div>
     <div class="main"></div>
    <div class="right"></div>
</div>
</body></html>

https://www.cnblogs.com/yuqingfamily/p/11046575.html
36.什么是面向对象？什么是面向过程
1）面向对象的重点是对象。当解决一个问题的时候，面向对象会把事物抽象成对象，也就是说这个问题包含哪些对象，然后给这些对象赋一些属性和方法，让每个对象执行自己的方法，问题得到解决。
2）面向过程的重点是过程。解决一个问题的时候，面向过程会把问题拆分成一个个的函数和数据（方法的参数）。然后按照一定的顺序执行这些方法，执行完这些方法，问题得到解决。
（面向过程：函数式编程 通过编写一个又一个函数解决需求的方式 面向对象：将需求抽象为一个对象，针对这个对象分析它的属性和方法）

37.面向对象创建JavaScript自定义对象的方式
1）直接给对象扩展属性和方法 对象字面量
2）工厂模式
3）构造 函数模式
4）原型（prototype）方式
5）混合方式（构造函数和原型）
6）字面量方式
38.什么是构造函数
当任意一个普通函数用于创建一类对象时它被称作构造函数或构造器
特点：构造函数的首字母大写，调用的时候用new这种方式调用构造函数模型
39.对象属性和方法的理解
属性：作用跟变量一样，差别 属性是属于对象的变量，而变量是自由的
方法：作用跟函数一样，差别 方法是属于对象的函数，而函数是自由的
40.什么是原型链
原型链就是从实例对象往上找构造函数，这个构造函数会接着往上找，构造它的原型以此类推找到object的原型对象prototype接着object的原型对象往上找到null（没有返回undefined）
41.call与apply的异同
同：两个方法的作用是一样的，都是在特定的作用域中调用函数，等设置函数体内this对象的值，以扩充函数赖以运行的作用域
异：接受参数的方式不同 apply方法接受两个参数 一个是函数运行的作用域，另一个是参数数组
call方法第一个参数和apply方法一样 但是传递给函数参数必须列举出来

42.为什么使用框架？使用框架的优势？
1）重复应用的外部JS：使用框架后我们可以把这些文件写在入口文件中，一劳永逸
2）组件化：组件是前端框架里非常强大的功能之一，它可以扩展你的HTML，封装可以重用的代码块，比如你的轮播图、tab切换、页面头部、页面底部等等。
3）开发周期长：jQuery开发时，需要频繁的操作DOM，几乎任何动态效果都需要去选择DOM来进行相应的操作，这使开发变得麻烦起来，很多的时间都用到了操作DOM上，项目的开发周期自然被延长。
使用框架开发，框架中封装许多的频繁使用的功能，例如Angular中的指令，指令功能有数据绑定，表单验证，数据格式化等等。这时前端的重点只需要放在数据逻辑部分，而不需要花费很大的精力去操作DOM完成功能，从而加快项目进度。
4）性能：很多DOM操作会引起回流和重绘，对于jQuery来说，大量的操作DOM虽然方便，但是很浪费页面性能。
框架和jQuery虽然都会操作DOM，但是框架把大量的DOM进行了处理和优化（例如Vue的虚拟DOM），通过数据驱动，就能渲染出DOM，大大提升了性能。

43.什么是Swiper？（对swiper的理解）
开源、免费、强大的触摸滑动插件，简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab
、触摸导航等，应用广泛，使用频率仅次于jQuery（Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验）。
用法：1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
2.HTML内容。

Slide 1

Slide 2

Slide 3

导航等组件可以放在container之外 3.你可能想要给Swiper定义一个大小，当然不要也行。 .swiper-container { width: 600px; height: 300px; }

4.初始化Swiper：最好是挨着标签
var mySwiper = new Swiper (’.swiper-container’, {
direction: ‘vertical’, // 垂直切换选项
loop: true, // 循环模式选项

// 如果需要分页器
pagination: {
  el: '.swiper-pagination',
},

// 如果需要前进后退按钮
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},

// 如果需要滚动条
scrollbar: {
  el: '.swiper-scrollbar',
},

})
44.什么是zepto
1.Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。
2.Zepto的一些可选功能是专门针对移动端浏览器的，因为它的最初目标在移动端提供一个精简的类似jquery的js库。
3.Zepto小巧，移动端性能优越，在目前所有仿jQuery（包括jQuery本身）类库中名列前茅
4.Zepto 源码中有 14 个模块，而官网提供的标准版里面只有 7 个模块！而且不包含对移动端开发非常重要的 touch 模块（提供对触摸事件的支持）polyfill，zepto，detect，event，ajax，form，fx 这7个就是标准版包含的模块
zepto与jQuery的区别
1.最大的不同就是zepto添加了touch模块
2.浏览器兼容不同 （jQuery 2.0之前的版本可以兼容到ie低版本 zepto只兼容现代高级浏览器 ）
// 3.在文件包含的内容 （jQuery 所有的方法都在 同一个jQuery 的js文件中 而 zepto分了很多模块 下载执行快 高效）
// 4.zepto.js文件不支持高级选择器（伪类选择器）
// 5.DOM操作上有区别： zepto可以 创建带有属性的元素，jQuery不可以
// $("

", { text:“Hello”, id:“greeting”, css:{color:‘darkblue’} })
// 6.width()和height()的区别 Zepto由盒模型(box-sizing)决定，用.css(‘width’)返回带单位的width的结果，用.width()返回赋值的width，包含padding、border； jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。
// 7.offset()的区别 Zepto返回{top,left,width,height}；jQuery返回{top,left}
// 8. Zepto无法获取隐藏元素宽高，jQuery 可以。
// 9.Zepto中没有为原型定义extend方法而jQuery有。
// 10.Zepto 的each 方法只能遍历 数组，不能遍历JSON对象。
// 11.事件委托
Zepto事件委托的坑
1.绑定给同一父级2.绑定相同的事件3.事件相互关联4.事件有先后顺序

列偏移 .col-md-offset-*
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类：
nav-toggle;

1.用let声明的变量，只在let命令所在的代码块内有效。
2 . let 不可以重复定义变量 （let不允许在相同作用域内，重复声明同一个变量。）
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
3.let 不存在变量提升
4.暂时性死区 （用let 定义变量之前的区域 称为 该变量的死区）
之所以不叫 JavaScript，有两个原因
一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。
什么是块级作用域？
用let、const声明的带有{}的就是块级作用域

ES6 解构赋值
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
在解构中，有下面两部分参与：
解构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。
数组：基本 可嵌套 可忽略 不完全结构 剩余运算符（扩展运算符） 字符串 解构默认值
对象：基本 可嵌套可忽略 不完全解构 解构默认值

箭头函数
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面
箭头函数没有this，所以需要通过查找作用域链来确定this的值。这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this。
只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递
函数参数默认值存在暂时性死区，在函数参数默认值表达式中，还未初始化赋值的参数值无法作为其他参数的默认值。
不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
参数 => 函数体

this指向（当前对象）
普通函数：this指向window
事件中：this指向事件所属对象
方法调用中：this指向调用方法的对象
闭包中：this指向window
构造函数或构造函数的原型对象中：this指向实例对象
箭头函数中的this指向 指向定义他的函数的域

21.理解同步和异步
由于Javascript是单线程模型（只在一个线程上运行），因此Javascript同时只能执行一个任务，其他任务必须在后面排队。

Javascript只在一个线程上运行，并不是指JavaScript只有一个线程

22.同步任务和异步任务

同步任务：指没有被引擎挂起，在主线程上排队等待执行的任务。只有前一个任务执行完毕，才能执行下一个任务。
异步任务：指被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了，该任务才会进入主线程执行。排在异步任务后面的代码不用等待异步任务结束，会马上执行。
虽然JS运行在浏览器中是单线程的，但是浏览器是事件驱动的（Event driven），浏览器中很多行为是异步（Asynchronized）的，会创建事件并放入执行队列中。浏览器中很多异步行为都是由浏览器新开一个线程去完成
接下来看一个异步函数执行的例子：
var start=new Date();
setTimeout(function cb(){
console.log(“时间间隔：”,new Date()-start+‘ms’);
},500);
while(new Date()-start<1000){};
复制代码
1main(Script) 函数入栈,start变量开始初始化
2setTimeout入栈,出栈,丢给WebAPIs,开始定时500ms;
3while循环入栈,开始阻塞1000ms;
4500ms过后,WebAPIs把cb()放入任务队列,此时while循环还在栈中,cb()等待;
5又过了500ms,while循环执行完毕从栈中弹出,main()弹出,此时栈为空,Event Loop,cb()进入栈,log()进栈,输出’时间间隔：1003ms’,出栈,cb()出栈

ajax同步请求与异步请求的区别：
异步模式下：
当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。
同步模式下：
当我们使用AJAX发送完请求后，后续还有代码需要执行，我们同样将服务器响应交由另一个JS函数去处理，但是这时的代码执行情况是：在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，直到解除阻塞余下的代码才会继续执行。

promise是什么？
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

为什么会有promise？
为了避免界面冻结（任务）
例如：
同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1234，必须按照1234的顺序完成”。
异步：则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，。等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。
AB工作的完成顺序，和交付他们的时间顺序无关，所以叫“异步”。
异步回调的问题：
之前处理异步是通过纯粹的回调函数的形式进行处理
很容易进入到回调地狱中，剥夺了函数return的能力
问题可以解决，但是难以读懂，维护困难
稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护
假如有两个异步操作是相互依托 需要按顺序执行的话，无法保证他们能够按照我们想要的顺序去执行

promise
promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
代码风格，容易理解，便于维护
多个异步等待合并便于解决

Promise 对象：
1.用同步的方式来书写异步代码
2.Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数
3.改善了可读性，对于多层嵌套的回调函数很方便
4.充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口

Promise 也是一个构造函数：
1.接受一个回调函数f1作为参数，f1里面是异步操作的代码
2.返回的p1就是一个 Promise 实例
3.所有异步任务都返回一个 Promise 实例
4.Promise 实例有一个then方法，用来指定下一步的回调函数

promise详解
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve(‘成功’) // 数据处理完成
// reject(‘失败’) // 数据处理出错
}
).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败
)

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

Promise 使得异步流程可以写成同步流程

// 传统异步写法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// …
});
});
});
});

// Promise 的写法
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);
————————————————

.then()
1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
2、.then()返回一个新的Promise实例，所以它可以链式调用
3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值，则会立即执行下一级.then()

错误处理
Promise会自动捕获内部异常，并交给rejected响应函数处理。

Promise — 承诺

Js 同步和异步
1.单线程
1）概念：gJavaScript是一门单线程的语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务
2）为什么是单线程
其实，JavaScript的单线程，与它的用途是有很大关系，我们都知道，JavaScript作为浏览器的脚本语言，主要用来实现与用户的交互，利用JavaScript，我们可以实现对DOM的各种各样的操作，如果JavaScript是多线程的话，一个线程在一个DOM节点中增加内容，另一个线程要删除这个DOM节点，那么这个DOM节点究竟是要增加内容还是删除呢？这会带来很复杂的同步问题，因此，JavaScript是单线程的

2.同步任务和异步任务
（1）为什么会有同步和异步
因为JavaScript的单线程，因此同个时间只能处理同个任务，所有任务都需要排队，前一个任务执行完，才能继续执行下一个任务，但是，如果前一个任务的执行时间很长，比如文件的读取操作或ajax操作，后一个任务就不得不等着，拿ajax来说，当用户向后台获取大量的数据时，不得不等到所有数据都获取完毕才能进行下一步操作，用户只能在那里干等着，严重影响用户体验
因此，JavaScript在设计的时候，就已经考虑到这个问题，主线程可以完全不用等待文件的读取完毕或ajax的加载成功，可以先挂起处于等待中的任务，先运行排在后面的任务，等到文件的读取或ajax有了结果后，再回过头执行挂起的任务，因此，任务就可以分为同步任务和异步任务
（2）同步任务
同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务
（3）异步任务
异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务

3.异步机制
JavaScript的异步机制包括以下几个步骤

（1）所有同步任务都在主线程上执行，行成一个执行栈
（2）主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
（3）一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面还有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
（4）主线程不断的重复上面的第三步
异步 ：操作之间没有什么关系，同时进行多个操作
同步 ：同时只能做一件事

异步：代码比较复杂
同步：代码比较简单