2020web大前端面试题

素颜马尾好姑娘i 2022-12-26 04:47 162阅读 0赞

## 1.http、html和浏览器 ##

### 1.http和https ###

**https的SSL加密是在传输层实现的。**

(1)http和https的基本概念

http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

(2)http和https的区别？

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

主要的区别如下：

*  Https协议需要ca证书，费用较高。
 *  http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
 *  使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
 *  http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

(3)https协议的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。

*  客户使用https url访问服务器，则要求web 服务器建立ssl链接。
 *  web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。
 *  客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。
 *  客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
 *  web服务器通过自己的私钥解密出会话密钥。
 *  web服务器通过会话密钥加密与客户端之间的通信。

(4)https协议的优点

*  使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
 *  HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
 *  HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
 *  谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

(5)https协议的缺点

*  https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。
 *  https缓存不如http高效，会增加数据开销。
 *  SSL证书也需要钱，功能越强大的证书费用越高。
 *  SSL证书需要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种消耗。

### 2.tcp三次握手，一句话概括 ###

**客户端和服务端都需要直到各自可收发，因此需要三次握手。**

简化三次握手：

从图片可以得到三次握手可以简化为：C发起请求连接S确认，也发起连接C确认我们再看看每次握手的作用：第一次握手：S只可以确认 自己可以接受C发送的报文段第二次握手：C可以确认 S收到了自己发送的报文段，并且可以确认 自己可以接受S发送的报文段第三次握手：S可以确认 C收到了自己发送的报文段

### 3.TCP和UDP的区别 ###

（1）TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。

（2）TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。

（3）TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。

（4）TCP只能是1对1的，UDP支持1对1,1对多。

（5）TCP的首部较大为20字节，而UDP只有8字节。

（6）TCP是面向连接的可靠性传输，而UDP是不可靠的。

### 4.WebSocket的实现和应用 ###

(1)什么是WebSocket?

WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个

(2)WebSocket是什么样的协议，具体有什么优点？

*  HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。
 *  WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现，基本是2个属性，upgrade，connection。

基本请求如下：

GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com

多了下面2个属性：

Upgrade:webSocket
    Connection:Upgrade
    告诉服务器发送的是websocket
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13

### 5.HTTP请求的方式，HEAD方式 ###

*  head：类似于get请求，只不过返回的响应中没有具体的内容，用户获取报头
 *  options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

### 6.一个图片url访问后直接下载怎样实现？ ###

请求的返回头里面，用于浏览器解析的重要参数就是OSS的API文档里面的返回http头，决定用户下载行为的参数。

下载的情况下：

1. x-oss-object-type:
             Normal
      2. x-oss-request-id:
             598D5ED34F29D01FE2925F41
      3. x-oss-storage-class:
             Standard

### 7.web Quality （无障碍） ###

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。

残障人士指的是那些带有残疾或者身体不健康的用户。

使用alt属性：

有时候浏览器会无法显示图像。具体的原因有：

*  用户关闭了图像显示
 *  浏览器是不支持图形显示的迷你浏览器
 *  浏览器是语音浏览器（供盲人和弱视人群使用）  
    如果您使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。

### 8.几个很实用的BOM属性对象方法? ###

什么是Bom? Bom是浏览器对象。有哪些常用的Bom属性呢？

(1)location对象

location.href-- 返回或设置当前文档的URL

location.search -- 返回URL中的查询字符串部分。例如 [http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu][http_www.dreamdu.com_dreamdu.php_id_5_name_dreamdu] 返回包括(?)后面的内容?id=5&name=dreamdu

location.hash -- 返回URL\#后面的内容，如果没有\#，返回空

location.host -- 返回URL中的域名部分，例如www.dreamdu.com

location.hostname -- 返回URL中的主域名部分，例如dreamdu.com

location.pathname -- 返回URL的域名后的部分。例如 [http://www.dreamdu.com/xhtml/][http_www.dreamdu.com_xhtml] 返回/xhtml/

location.port -- 返回URL中的端口部分。例如 [http://www.dreamdu.com:8080/xhtml/][http_www.dreamdu.com_8080_xhtml] 返回8080

location.protocol -- 返回URL中的协议部分。例如 [http://www.dreamdu.com:8080/xhtml/][http_www.dreamdu.com_8080_xhtml] 返回(//)前面的内容http:

location.assign -- 设置当前文档的URL

location.replace() -- 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);

location.reload() -- 重载当前页面

(2)history对象

history.go() -- 前进或后退指定的页面数 history.go(num);

history.back() -- 后退一页

history.forward() -- 前进一页

(3)Navigator对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

### 9.HTML5 drag api ###

*  dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
 *  darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
 *  dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
 *  dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
 *  dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
 *  drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
 *  dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

### 10.http2.0 ###

首先补充一下，http和https的区别，相比于http,https是基于ssl加密的http协议

简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。

*  提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）
 *  允许多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。
 *  二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码
 *  首部压缩
 *  服务器端推送

### 11.补充400和401、403状态码 ###

(1)400状态码：请求无效

产生原因：

*  前端提交数据的字段名称和字段类型与后台的实体没有保持一致
 *  前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。

解决方法：

*  对照字段的名称，保持一致性
 *  将obj对象通过JSON.stringify实现序列化

(2)401状态码：当前请求需要用户验证

(3)403状态码：服务器已经得到请求，但是拒绝执行

### 12.fetch发送2次请求的原因 ###

**fetch发送post请求的时候，总是发送2次，第一次状态码是204，第二次才成功？**

原因很简单，因为你用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

### 13.Cookie、sessionStorage、localStorage的区别 ###

共同点：都是保存在浏览器端，并且是同源的

*  Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
 *  sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
 *  localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明一下cookie的作用：

*  保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
 *  跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便
 *  定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

### 14.web worker ###

在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建web worker：

*  检测浏览器对于web worker的支持性
 *  创建web worker文件（js，回传函数等）
 *  创建web worker对象

### 15.对HTML语义化标签的理解 ###

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

### 16.iframe是什么？有什么缺点？ ###

定义：iframe元素会创建包含另一个文档的内联框架

提示：可以将提示文字放在之间，来提示某些不支持iframe的浏览器

缺点：

*  会阻塞主页面的onload事件
 *  搜索引擎无法解读这种页面，不利于SEO
 *  iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

### 17.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? ###

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

*  严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
 *  混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

### 18.Cookie如何防范XSS攻击 ###

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：

*  httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。
 *  secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

结果应该是这样的：Set-Cookie=.....

### 19.Cookie和session的区别 ###

HTTP是一个无状态协议，因此Cookie的最大的作用就是存储sessionId用来唯一标识用户

### 20. 一句话概括RESTFUL ###

**就是用URL定位资源，用HTTP描述操作**

### 21.讲讲viewport和移动端布局 ###

可以参考我的这篇文章：

[响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）][rem_vw_vh]

### 22. click在ios上有300ms延迟，原因及如何解决？ ###

(1)粗暴型，禁用缩放

(2)利用FastClick，其原理是：

检测到touchend事件后，立刻出发模拟click事件，并且把浏览器300毫秒之后真正出发的事件给阻断掉

# 2.CSS #

### 1.css盒模型 ###

简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

box-sizing(有3个值哦)：border-box,padding-box,content-box.

*  标准盒子模型：

[![image][]][image 1]

*  IE盒子模型：

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右border+左右padding+width

IE盒子模型的盒子宽度：width

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型

最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

也很好理解性记忆，包含什么，width就从什么开始算起。

### 2.画一条0.5px的线 ###

*  采用meta viewport的方式
 *  采用 border-image的方式
 *  采用transform: scale()的方式

### 3.link标签和import标签的区别 ###

*  link属于html标签，而[@import][import]是css提供的
 *  页面被加载时，link会同时被加载，而[@import][import]引用的css会等到页面加载结束后加载。
 *  link是html标签，因此没有兼容性，而[@import][import]只有IE5以上才能识别。
 *  link方式样式的权重高于[@import][import]的。

### 4.transition和animation的区别 ###

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

### 5.Flex布局 ###

文章链接：

[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool（语法篇）][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html_utm_source_tuicool]

[http://www.ruanyifeng.com/blog/2015/07/flex-examples.html（实例篇）][http_www.ruanyifeng.com_blog_2015_07_flex-examples.html]

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

简单的分为容器属性和元素属性

容器的属性：

*  flex-direction：决定主轴的方向（即子item的排列方法）  
    .box \{  
    flex-direction: row | row-reverse | column | column-reverse;  
    \}
 *  flex-wrap：决定换行规则  
    .box\{  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    \}
 *  flex-flow：  
    .box \{  
    flex-flow: || ;  
    \}
 *  justify-content：对其方式，水平主轴对齐方式
 *  align-items：对齐方式，竖直轴线方向

项目的属性（元素的属性）：

*  order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0
 *  flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大
 *  flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小
 *  flex-basis属性：定义了在分配多余的空间，项目占据的空间。
 *  flex：是flex-grow和flex-shrink、flex-basis的简写，默认值为0 1 auto。
 *  align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items

比如说，用flex实现圣杯布局

### 6.BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等） ###

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

*  BFC区域不会与float box重叠
 *  BFC是页面上的一个独立容器，子元素不会影响到外面
 *  计算BFC的高度时，浮动元素也会参与计算

那些元素会生成BFC：

*  根元素
 *  float不为none的元素
 *  position为fixed和absolute的元素
 *  display为inline-block、table-cell、table-caption，flex，inline-flex的元素
 *  overflow不为visible的元素

### 7.垂直居中的方法 ###

### (1)margin:auto法 ###

css:

div{
      width: 400px;
      height: 400px;
      position: relative;
      border: 1px solid #465468;
     }
     img{
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
     }

html:

定位为上下左右为0，margin：0可以实现脱离文档流的居中.

(2)margin负值法

.container{
      width: 500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
    }
    .inner{
      width: 480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px; /*height的一半*/
      margin-left: -240px; /*width的一半*/
     }

补充：其实这里也可以将marin-top和margin-left负值替换成，

transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脱离文档流的）

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

css:
    div{
        width: 300px;
        height: 300px;
        border: 3px solid #555;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    img{
        vertical-align: middle;
    }

(4)利用flex

将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

css:
    .container{
          width: 300px;
          height: 200px;
          border: 3px solid #546461;
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center;
          align-items: center;
          -webkit-justify-content: center;
          justify-content: center;
     }
     .inner{
          border: 3px solid #458761;
          padding: 20px;
     }

### 8.关于js动画和css3动画的差异性 ###

渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。

区别：

*  功能涵盖面，js比css大
 *  实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
 *  对帧速表现不好的低版本浏览器，css3可以做到自然降级
 *  css动画有天然事件支持
 *  css3有兼容性问题

### 9.块元素和行元素 ###

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度

行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失

效。

### 10.多行元素的文本省略号 ###

display: -webkit-box
    -webkit-box-orient:vertical
    -webkit-line-clamp:3
    overflow:hidden

### 11.visibility=hidden, opacity=0，display:none ###

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

### 12.双边距重叠问题（外边距折叠） ###

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠

折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

# 3.JS #

### 1. get请求传参长度的误区 ###

**\*误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。**\*

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

*  HTTP 协议 未规定 GET 和POST的长度限制
 *  GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度
 *  不同的浏览器和WEB服务器，限制的最大长度不一样
 *  要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度 8182byte

### 2. 补充get和post请求在缓存方面的区别 ###

post/get的请求区别，具体不再赘述。

补充补充一个get和post在缓存方面的区别：

*  get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
 *  post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。

### 3. 闭包 ###

一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

### 4. 类的创建和继承 ###

（1）类的创建（es5）：new一个function，在这个function的prototype里面增加属性和方法。

下面来创建一个Animal类：

// 定义一个动物类
    function Animal (name) {
      // 属性
      this.name = name || 'Animal';
      // 实例方法
      this.sleep = function(){
        console.log(this.name + '正在睡觉！');
      }
    }
    // 原型方法
    Animal.prototype.eat = function(food) {
      console.log(this.name + '正在吃：' + food);
    };

这样就生成了一个Animal类，实力化生成对象后，有方法和属性。

（2）类的继承——原型链继承

--原型链继承
    function Cat(){ }
    Cat.prototype = new Animal();
    Cat.prototype.name = 'cat';
    //　Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.eat('fish'));
    console.log(cat.sleep());
    console.log(cat instanceof Animal); //true 
    console.log(cat instanceof Cat); //true

*  介绍：在这里我们可以看到new了一个空对象,这个空对象指向Animal并且Cat.prototype指向了这个空对象，这种就是基于原型链的继承。
 *  特点：基于原型链，既是父类的实例，也是子类的实例
 *  缺点：无法实现多继承

（3）构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom';
    }
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // false
    console.log(cat instanceof Cat); // true

*  特点：可以实现多继承
 *  缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。

（4）实例继承和拷贝继承

实例继承：为父类实例添加新特性，作为子类实例返回

拷贝继承：拷贝父类元素上的属性和方法

上述两个实用性不强，不一一举例。

（5）组合继承：相当于构造继承和原型链继承的组合体。通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom';
    }
    Cat.prototype = new Animal();
    Cat.prototype.constructor = Cat;
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // true

*  特点：可以继承实例属性/方法，也可以继承原型属性/方法
 *  缺点：调用了两次父类构造函数，生成了两份实例

（6）寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性

*  较为推荐

### 5. 如何解决异步回调地狱 ###

promise、generator、async/await

### 6. 说说前端中的事件流 ###

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

*  事件捕获阶段
 *  处于目标阶段
 *  事件冒泡阶段

**addEventListener**：**addEventListener** 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

**IE只支持事件冒泡**。

### 7. 如何让事件先冒泡后捕获 ###

在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。

### 8. 事件委托 ###

*  简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
 *  举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
 *  好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

### 9. 图片的懒加载和预加载 ###

*  预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
 *  懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。

懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

### 10. mouseover和mouseenter的区别 ###

*  mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout
 *  mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

### 11. js的new操作符做了哪些事情 ###

new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。

### 12.改变函数内部this指针的指向函数（bind，apply，call的区别） ###

*  通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。
 *  通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。

### 13. js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？ ###

*  clientHeight：表示的是可视区域的高度，不包含border和滚动条
 *  offsetHeight：表示可视区域的高度，包含了border和滚动条
 *  scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
 *  clientTop：表示边框border的厚度，在未指定的情况下一般为0
 *  scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

### 14. js拖拽功能的实现 ###

*  首先是三个事件，分别是mousedown，mousemove，mouseup  
    当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。
 *  clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetX和offsetY来表示元素的元素的初始坐标，移动的举例应该是：  
    **鼠标移动时候的坐标-鼠标按下去时候的坐标。**  
    也就是说定位信息为：  
    鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的offetLeft.
 *  还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的left  
    以及top等等值。

补充：也可以通过html5的拖放（Drag 和 drop）来实现

### 15. 异步加载js的方法 ###

*  defer：只支持IE如果您的脚本不会改变文档的内容，可将 defer 属性加入到

[http_www.dreamdu.com_dreamdu.php_id_5_name_dreamdu]: http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu
[http_www.dreamdu.com_xhtml]: http://www.dreamdu.com/xhtml/
[http_www.dreamdu.com_8080_xhtml]: http://www.dreamdu.com:8080/xhtml/
[rem_vw_vh]: https://github.com/forthealllight/blog/issues/13
[image]: /images/20221120/e3164440b6364ab894e35ec872932149.png
[image 1]: https://user-images.githubusercontent.com/17233651/42498021-b4dd6a46-845d-11e8-8bd9-ac2d90985f2a.png
[import]: https://github.com/import
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html_utm_source_tuicool]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool%EF%BC%88%E8%AF%AD%E6%B3%95%E7%AF%87%EF%BC%89
[http_www.ruanyifeng.com_blog_2015_07_flex-examples.html]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html%EF%BC%88%E5%AE%9E%E4%BE%8B%E7%AF%87%EF%BC%89