前端面试题及答案.全全全！！！

忘是亡心i 2023-07-10 15:50 16阅读 0赞

OM  小编真心地说一句，每个答案都问自己一下为什么？？？什么原因？？？你会理解的更透彻哦！！！面试更容易哦！！！

沟通的重要性、在拿到设计稿之前查看原型、对着原型捋一遍  
对模棱两可的事情找UI确认。  
先做孙子、再做爷  
不要脸、以后才有脸

> **  HTML---CSS---JS---es6---Vue---微信小程序---浏览器---React---node（node+express）---git---Typescript---webpack---前端设计模式**

**HTML面试题**

> **1.DOCTYPE有什么作用？**包标准模式和混杂模式如何区分？它们有什么意义？

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持最高标准运行。混杂模式中页面是一种比较宽松向后兼容的方式显示。

> **2.什么是浏览器内核？**

总结:浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎主要负责获取页面内容（HTML,CSS,JS,XML，图像）等信息进行解析来渲染网页。渲染引擎决定浏览器如何显示页面,不同浏览器内核不同,对于网页的语法解释也不同，所以显示网页的内容以及页面格式信息也就不同。

1.浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

*  Trident：代表作是IE,俗称IE内核；使用IE内核的浏览器包括、傲游、世界之窗、百度浏览器、兼容模式的浏览器等
 *  Webkit内核：代表作Safari,旧版的Chorme
 *  Blink内核：Chorme,Opera
 *  Gecko内核：代表作Firefox

[CSDN][]

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

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

*  渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
 *  JS引擎：解析和执行javascript来实现网页的动态效果。

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

> ### 4.简述一下src与href的区别 ###

*  src 引入(页面中必不可少的)
 *  href 引用(与页面有关联的)当前文档和引用资源之间确认联系

（使用link标签浏览器会识别link应用的css文件，并行下载）

> 5.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强：针对低版浏览器进行页面构建、保证最基本的功能、在针对高级浏览器进行效果、交互等改进和追加功能以达到更好的用户体验  
优雅降级：一开始就构建完整的功能、然后再针对低版浏览器进行兼容  
区别：  
    优雅降级针对高级浏览器做开发、对低版本浏览器减少用户体验供给的方案(低版本浏览器给予简陋却无妨的浏览体验)  
    渐进增强以基础开始、对不同的浏览器不断的扩充功能以适应未来的环境需求

> **6.为什么利用多个域名来存储网站资源会更有效？ **

因为同一时间针对同一域名下的请求有一定数量限制。超过限制数目请求会被堵塞，因此需要使用多个域名 来存储网站资源

突破浏览器并发限制
    因为在:同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞\因此需要使用多个域名来存储网站资源
    节约cookie带宽
    CDN缓存更方便
    解决主域名的连接数、优化页面响应速度
    防止不必要的安全问题
     
    新的浏览器加大了并发数的限制，但却仍控制在8以内。
    IE6、7\HTTP1.1和HTTP1.0 限制为2和4
    HTTP/2.0
    1、提升网站访问速度
    2、降低服务器压力
    3、部分替代异步加载的使用
    4、保护网站安全(HTTP/2.0现阶段必须使用https)

> 7.简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。  
1、样式丢失、页面呈现清晰的结构  
2、爬虫依赖、确定上下文和各个关键字的权重(爬虫很大程度上忽略用于表现的标记、而只注重语义标记)  
3、便于团队开发和维护

*  HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;易于后期维护
 *  利于SEO优化、爬虫依赖于HTML标记来确定上下文和各个关键字的权重
 *  即使在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;

> **8.HTML5的离线储存怎么使用**，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。  
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)  
通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。  
之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。  
如何使用：  
1、页面头部像下面一样加入一个manifest的属性；  
 2、离线存储的manifest一般由三个部分组成:  
    1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。  
    2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。  
    3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。  
!\[enter description here\]\[1\]  
\[有趣的HTML5：离线存储\](https://segmentfault.com/a/1190000000732617)

> 9.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件  
如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。  
如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，  
然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，  
如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。  
 离线的情况下，浏览器就直接使用离线存储的资源。

> **10.如何实现浏览器内多个标签页之间的通信? (阿里) **

调用localstorge、cookies等本地存储方式

> **11.HTML5的form如何关闭自动完成功能？ **

给不想要提示的 form 或下某个input 设置为 autocomplete=off。

<form autocomplete="on">
      First name:<input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
      E-mail: <input type="email" name="email" autocomplete="off" /><br />
      <input type="submit" />
    </form>
    <p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
    <p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p>

1.     打开自动完成功能的输入框  
2.      <input type="text" autocomplete="on" name="txtOff1"><br>

[ HTML5 的from如何关闭自动完成功能？ - 张米雪 - 博客园][HTML5 _from_ - _ -]

> **12，一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 **

*  重构的方案：CSSsprite（css精灵图）、Iconfont(字体图标）、Base64
 *  逻辑的方案：懒加载、预先加载、若图片过大(使用有损压缩、后在展示原图、提高用户体验)

为什么需要精灵图？

*  一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
 *  因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites）。
 *  核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

缺点：排版不容易控制，导致使用时图标位置不好控制，因为图标的大小不一样，很难使所有图标按照一定的规律排列；而且，更加痛苦的是，很多时候为了background-position:定位准确，特别保证鼠标hover效果的图片区域和默认图片的区域完全重合；

字体图标：

[CSS3 iconfont字体图标的使用（很详细）\_WU567\_的博客-CSDN博客][CSS3 iconfont_WU567_-CSDN]

base64:

base64编码就是将图片数据编码成一段字符串，使用该字符串代替图像地址

好处：将图片转换为base64编码最常见的应用应该就是在将网页中的一些图片转换为base64编码可以实现网页图片在网速不好的时候先于内容加载和减少HTTP的请求次数来减少网站服务器的负担。（减少了http请求）

坏处：

使用 Base64 不代表性能优化 使用 Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。 CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染，而图片不会。

页面解析 CSS 生成的 CSSOM 时间增加 Base64 跟 CSS 混在一起，大大增加了浏览器需要解析CSS树的耗时。其实解析CSS树的过程是很快的，一般在几十微妙到几毫秒之间。

懒加载：

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

png-24、jpeg、fig、svg、Webp  
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

> **14.常见浏览器内核有哪些？**

1.Trident:IE,360,搜狗浏览器

2.Webkit：Safari Chrome

3.Geckos:FireFox Mozilla Suite/SeaMonkey

4.Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)

> **15.H5有哪些新特性？移除了哪些元素？如何却分HTML和HTML5？**

**新增元素**

1.canvas(用于绘画)

2.用于媒体回放的video和audio元素

3.本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

4.表单控件，calendar search datalist datetime output keygen date month week time color number range email url。

5.位置API：Geolocation

6.拖放API：drag、drop

7.语意化更好的内容元素，比如 article、footer、header、nav、section

**移除元素：**

纯表现的元素：

big(呈现大号字体效果)

font(规定文本的字体、字体尺寸、字体颜色)

u(文本添加下划线)

<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>

basefont   center  s strike tt

性能较差的元素：frame

**区分:**

**DOCTYPE:告诉浏览器用哪个版本的HTML来渲染文档**

> **16.cookies,sessionStorage(html5)和localStorage(html5)的区别？**

共同点：存储数据，，，都是本地存储

区别：

1.  localStorage长期存储数据，浏览器关闭数据后不丢失，用作长久数据保存；
2.  sessionStorage数据仅在浏览器窗口关闭之前有效，关闭后自动删除；
3.  cookie在设置的cookie过期时间之前一直有效
4.  存储大小的限制不同。cookie保存的数据很小，不超过4K。而sessionStorage和localStorage保存数据大，可达到5M
5.  cookie每次都会携带在HTTP头中，即cookies在浏览器和服务器之间来回传递，使用cookie保存过多数据会带来性能问题（cookie是网站为了标识用户身份而存储在用户本地终端（Client   Side）上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器之间来回传递）。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存，不参与和服务器的通信(仅在客户端（即浏览器）中保存，不参与和服务器的通信)。**----面试不用说，但是要知道**
6.  作用域不同。cookie在所有的同源窗口都是共享（不同浏览器、不同窗口中都是共享的：记住密码）；sessionStorage不在不同的浏览器共享，即使同一页面（**同一个浏览器**、同站点不同窗口中可以共享）；localStorage在所有同源窗口都是共享（**仅同一个页面窗口中才能共享：购物车缓存**）。**----面试不用说，但是要知道**

[Cookie, LocalStorage 与 SessionStorage-布布扣-bubuko.com][Cookie_ LocalStorage _ SessionStorage-_-bubuko.com]

> **17. 为什么cookie每次都会携带在HTTP头中？**

[cookie是在请求头中传递的吗？-CSDN论坛][cookie_-CSDN]

[http请求什么时候会带上cookie信息\_johnhuster的专栏-CSDN博客][http_cookie_johnhuster_-CSDN]

> **18.cookie 不设置过期时间，默认过期时间是多少？**

关闭浏览器就结束了

> **19.iframe框架有哪些优缺点？**（不重要）

优点：

1.  iframe能够原封不动的把嵌入的网页展现出来。
2.  如果有多个网页引入iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.  网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.  如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

1.  搜索引擎的爬虫程序无法解读这种页面
2.  框架结构中出现各种滚动条
3.  使用框架结构时，保证设置正确的导航链接
4.  iframe页面会增加服务器的http请求
5.  iframe页面必须先加载这部分内容，加载完成才加载其他的，影响用户体验

> 19.label的作用是什么？是怎么用的？（不重要）

label标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label中有两个属性是非常有用的，for

for属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，

Label标签内for属性的值为自定义，一般与想实现点击会触发控件对象的ID对应相同。

HTML代码片段如下：
     <formaction=""method="get">
     性别：<br/>
     <inputname="sex"id="man"type="radio"value=""/>
     <labelfor="man">男</label>
     <inputname="sex"id="woman"type="radio"value=""/>
     <labelfor="woman">女</label>
     </form>
     注：input标签内id的值与label标签内for的值对应。

> **20.新的HTML5字符集是？**

HTML5 使用 UTF-8 编码。

> **21.HTML5中如何嵌入音频？**

audio标签

HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频。

<audio src="htmls/1.mp3"  controls="controls">
    你的浏览器不支持video元素
    </audio>

src:播放音频的路径

controls:播放按钮

> **22.HTML5中如何嵌入视频？**

video标签

和音频类似，HTML5 支持 MP4、WebM 和 Ogg 格式的视频。

<video src="movie.ogg" controls="controls">
    您的浏览器不支持 video 标签。
    </video>

src:播放音频的路径

controls:播放按钮

> 23.除了audio和video，HTML5还有哪些媒体标签？

HTML5 对于多媒体提供了强有力的支持，除了 audio 和 video 标签外，  标签定义嵌入的内容，比如插件。[<embed>][embed]

对于定义多个数据源很有用。  标签为诸如 [<track>][track]元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

> **24.HTML5Canvas元素有什么用？**

Canvas 元素用于在网页上绘制图形

**属性：**

*  getContext() 这个方法就是绘图的一个属性
 *  beginPath()：起始的一条路径
 *  arc():创建弧，曲线
 *  strock():绘制已定义的路径
 *  fillStyle:用于填充绘画的颜色、渐变或模式
 *  fillRect:绘制"被填充"的矩形

常用api

1.  fillRect(x,y,width,height)实心矩形
2.  strockRect(x,y,width,height)空心矩形
3.  fillText("Hello world",200,200):实心文字
4.  strokeText（“Hello world",200,300)空心文字

举例子：

画圆：

<canvas id="myCanvas">
    浏览器不支持 HTML5 canvas 标签
    </canvas>
    <script>
    var c = document.getElementById("myCanvas")
    var ctx = c.getContext("2d")
    ctx.beginPath()
    ctx.arc(95,50,40,0,2*Math.PI)
    ctx.stroke()
    </script>

画矩形：

<canvas id="myCanvas">
    浏览器
    </canvas>
    <script>
    var c = document.getElementById('myCanvas')
    vat ctx = c.getContext('2d')
    ctx.fillStyle = '#FF0000'
    ctx.fillRect(0,0,80,100)
    </script>

> **25.HTML5存储类型有什么区别？**

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案： localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

loacalStorage:持久化存储，数据长期存在，只要不手动删除就不会销毁。也就相当于你给小明发语音，小明想什么时候听就可以什么时候听，除非他把你们的聊天记录删掉，才会销毁

sessionStorage:会话存储。就像两个人在谈话，谈话完成就OK了。也就相当于关闭浏览器后，数据也就销毁了

> **26.HTML5应用程序缓存和浏览器缓存有什么区别？**

应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：  
***<!doctype html>***  
***<html manifest="example.appcache">***  
***.....***  
***</html>***  
与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

> **27.请至少写出5个HTML块级元素标签。**

div,p,form,table,h1~h6，li，select,ol,ul,dl，dd

> **28.请至少写出5个行内元素标签。**

span,img,input,button,a,label,dt

> **29.行内元素和块级元素的区别**

*  行内元素不可以设置宽高，不独占一行
 *  块级元素可以设置宽高，独占一行

> **30.如何给行元素设置宽高 --行内元素设置为块级元素、脱离文档流**

1.使用display:

display:block/inline-block/flex/inline-flex

2.使用position

position：absolute/flex

3.使用float

float:left/right

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

[如何给行内元素设置宽高？ - 坤嬷嬷 - 博客园][- _ -]

> **31.写出空元素。**

> **32.写出table标签下包含哪些标签元素。**

tr,th,td,thead,tfoot,tbody

tr:表格中的行,tr 元素包含一个或多个 [th][] 或 [td][] 元素。

td:代表HTML表格中的一个单元格

th:为表格标题

> **33.很多网站不用iframe,table这两个元素，为什么？**

因为浏览器页面渲染从上向下加载的，用iframe和table这两个标签要先加载这两个标签的内容，加载完成在整体加载然后渲染，用户体验效果不好。

> **34.至少写出5个HTML5的新标签。**

header,footer,nav,section,video

> **35.a标签在新窗口打开链接怎么加属性。**

> **36.写了2个<a>标签，两个标签之间有空格的情况怎么解决。**

将2个<a>标签写在一行里

> **37.页面导入样式时，link与import的区别。**

1.  link方式的样式权重比import的权重高。
2.  link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3.  link支持js可以改变样式，而import不支持

> **38.如何区分html和html5。**

1.  DOCTYPE的声明方式
2.  根据新增加的结构，功能来区分

> **39.无样式内容闪烁？（FOUC）Flash Of Unstyle Content**

FOUC：CSS样式最后才加载出来渲染html,因此会先看到混乱的网页在看到正常的网页

导致原因：

1.  使用import导入样式
2.  将样式表放在页面底部
3.  使用import导入css

解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样的页面会等到CSS加载完成后再下载HTML文件，这样先布局好，然后就不会出现FOUC的问题了。

> **40.jpg和png的区别。（了解即可）**

*  jpg:是有损所压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。
 *  png:压缩比高，色彩好。
 *  jpg:在www网站，用来存储和传输照片的格式

> **41.从浏览器地址栏输入url到显示页面的步骤**

*  浏览器根据请求的`URL`交给`DNS`域名解析，找到真实`IP`，向服务器发起请求；
 *  服务器交给后台处理完成后返回数据，浏览器接收文件（`HTML`、`JS`、`CSS`、图象等）；
 *  浏览器对加载到的资源（`HTML`、`JS`、`CSS`等）进行语法解析，建立相应的内部数据结构（如`HTML`的`DOM`）；
 *  载入解析到的资源文件，渲染页面，完成。

> **42.DNS域名解析**

[详解DNS域名解析全过程\_ninghuax的博客-CSDN博客\_dns域名解析][DNS_ninghuax_-CSDN_dns]

> **43.[title与h1的区别、b与strong的区别、i与em的区别？][title_h1_b_strong_i_em] **

title与h1的区别：

定义：title是网站标题，h1是文章标题

作用：

*  title概括网站信息，可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的，是显示在网页Tab栏里的；
 *  h1突出文章主题，面对用户，更突出其视觉效果，指向 页面主体信息，是显示在网页中的。

b与strong的区别：

定义：b(bold)是实体标签，用来给文字加粗；strong是逻辑标签，作用是加强字符语气。

区别：

*  b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、 评测文章中的产品名称、文章的导言；
 *  strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通 过CSS添加样式，使用别的样式强调。

建议：为了符合CSS3的规范，b应尽量少用而改用strong

i与em的区别

定义：i(italic)是实体标签，用来使字符倾斜；em(emphasis)是逻辑标签，作用是强调文本内容

区别：

*  i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
 *  em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

建议：为了符合CSS3的规 范，i应尽量少用而改用em

> **44.img标签的title和alt有什么区别？**

相同点：它们都会出现一个小浮层，显示图片相关的内容

不同点：

alt属性的特点：

*  倘若图片加载不成功未能显示出来，就会在图片未显示的地方出现一段文字。这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页，同时也方便开发人员维护网页。
 *  搜索引擎可以通过这个属性的文字描述获取图片

title属性的特点：

*  title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释

通俗来讲，alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释。

**CSS面试题**

> **1.介绍一下标准的css的盒子模型？与低版本的IE盒子模型有什么不同？(重要)**

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本的IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

标准表型指的是设置box-sizing为content-box的盒子模型，**一般width,height指的是content的宽高**。IE盒模型指的是box-sizing为border-box的盒子。**宽高的计算是content+padding+border;**

box-sizing的css属性是用来改变默认的css框模型的，用来计算元素的宽度和高度，它可以使用这个属性来模拟浏览器的行为不正确支持css模型的规范

**box-sizing属性**

// 正常的
    content-box(默认属性)
    //IE:
    border-box
    // 从父元素继承 box-sizing 属性的值
    inherit

*  css中box-sizing属性的值content-box的含义为：定义它的宽高的时候不包括border和padding
 *  css中box-sizing属性的值border-box的含义为：定义它的宽高的时候包括border和padding,内容的宽高需要减去相应方向的border和padding。**注意**：内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

怎么避免盒模型是低版本的IE盒模型？

答：将box-sizing属性设置为content-box

为什么box-sizing:border-box没有被广泛应用？

答：因为IE兼容性问题

举例子（理解）

[box-sizing:border-box 不是本来就是设置带边框的框吗...-慕课网][box-sizing_border-box _...-]

[什么是css盒子模式（框模型）\_百度知道][css]

> **2.css框模型（box modal)**

规定了元素框处理元素的内容（element)，内边距(padding),边框(border)和外边距(margin)

**注意**：margin：可以是负值，但是padding不可以，如果是负值就相当于把当前属性取消了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1][]

> **3.获取屏幕的高度和宽度 （屏幕分辨率）： window.screen.height/width**

> **4.css选择器有哪些？哪些属性可以继承？(重要)**

CSS选择符：(只需要说前5个即可)

*  id选择器(\#myid)、
 *  类选择器(.myclassname)、
 *  标签选择器(div, h1, p)、
 *  相邻选择器(h1 + p)、
 *  子选择器（ul > li）、
 *  后代选择器（li a）、
 *  通配符选择器（\*）、
 *  属性选择器（a\[rel=”external”\]）、
 *  伪类选择器（a:hover, li:nth-child）

相邻选择器：

<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    h1 + p {margin-top:50px;}
    </style>
    </head>
    
    <body>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    </body>
    </html>

子选择器：

<DOCTYPE html>
    <head>
    <title>子选择器</title>
    <style type="text/css">
    h1 > strong {
    color: red
    }
    </style>
    </head>
    <body>
    <h1>我是<strong>漂亮的</strong></h1>
    </body>
    </html>

后代选择器：

<html>
    <head>
    <style type="text/css">
    h1 em {color:red;}
    </style>
    </head>
    
    <body>
    <h1>This is a <em>important</em> heading</h1>
    <p>This is a <em>important</em> paragraph.</p>
    </body>
    </html>

属性选择器：

<!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    [title]
    {
    color:red;
    }
    </style>
    </head>
    
    <body>
    <h1>可以应用样式：</h1>
    <h2 title="Hello world">Hello world</h2>
    <a title="W3School" href="http://w3school.com.cn">W3School</a>
    
    <hr />
    
    <h1>无法应用样式：</h1>
    <h2>Hello world</h2>
    <a href="http://w3school.com.cn">W3School</a>
    </body>
    </html>

伪类选择器：链接的状态不同显示方式就不同

<html>
    <head>
    <style type="text/css">
    a:link {color: #FF0000}  /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF}  /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */
    </style>
    </head>
    
    <body>
    
    <p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
    <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
    <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
    
    </body>
    </html>

**可继承的属性：**

1、字体系列属性

*  font-family：字体系列
 *  font-weight：字体的粗细
 *  font-size：字体的大小
 *  font-style：字体的风格

2、文本系列属性

*  text-indent：文本缩进
 *  text-align：文本水平对齐
 *  line-height：行高
 *  word-spacing：单词之间的间距
 *  letter-spacing：中文或者字母之间的间距
 *  text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
 *  color：文本颜色

**不可继承的样式**：padding, margin, width, height,border(只需要说前4个)

优先级（就近原则）：!important >style >\[ id > class > tag \]  
**注意：**!important 比内联优先级高

!import>内联>ID选择器>类选择器=伪类选择器=属性选择器

!import的使用

<!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>测试!Important</title>
    </head>
    <style type="text/css">
        #Box div
        {
            color: red;
        }
        .important_false
        {
            color: blue;
        }
        .important_true
        {
            color: blue !important;
        }
    </style>
    <body>
        <div id="Box">
            <div class="important_false">
                这一行末使用important</div>
            <div class="important_true">
                这一行使用了important</div>
        </div>
    </body>
    </html>

CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，

不同的是，第二行未使用!important，而第三行使用了!

> **5.CSS3新增伪类举例：(重要）**

1.    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
2.    p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
3.    p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
4.    p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
5.    p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
6.    :enabled :disabled 控制表单控件的禁用状态。
7.    :checked 单选框或复选框被选中。

li:first-child\{\}  
li:last-child\{\}  
li:nth-child()\{\}  
li:nth-last-child()\{\}  
   
li:first-of-type\{\}  
li:last-of-type\{\}  
li:nth-of-type()\{\}  
li:nth-last-of-type()\{\}  
   
ul li:only-child\{选择属于其父元素的唯一子元素的每个  元素。\}

> **6.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？(重要)--居中这个还得在看，不是很懂**

** div:**margin: 0 auto; 上下边距为0，左右边距为auto，就是自动适应。

border: 1px solid red;
    margin: 0 auto; 
    height: 50px;
    width: 80px;

**浮动元素的上下左右居中：**position: absolute;float: left;left: 50%;top: 50%;margin: -50px 0 0 -100px; --不用看

border: 1px solid red;
    float: left;
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -100px;

绝对定位的左右居中：position: absolute;margin: 0 auto;left: 0;right: 0;--加上absolute脱离文档流，所以只写margin:0 auto；不好用

border: 1px solid black;
    position: absolute;
    width: 200px;
    height: 100px;
    margin: 0 auto;
    left: 0;
    right: 0;

利用绝对定位元素的自动伸缩特性水平垂直居中

.father{
        position: relative;
        width: 500px;
        height: 500px;
    }
    .son{
        position:absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

利用flex布局水平垂直居中（回答这个显得更高端）

#box{
        display: flex;
        display: -webkit-flex;
        border: 1px solid #0000FF;
        height: 200px;
        width: 400px;
        align-items:center;
        justify-content:center;
    }
    .item{
        width: 50px;
        height: 40px;
        border: 1px solid #00C1B3;
    }

1、margin: 0 auto;
    2、position: absolute;left: 50%;transform: translateX(-50%);
    3、position: absolute;left: 50%;width: 200px;margin-left: -100px;
    4、position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;
    5、position: relative;left: 50%;width: 300px;margin-left: -150px;background-color: pink;

> **7. display有哪些值？说明他们的作用?(重要)**

inline（默认）–此元素会被显示为内联元素,不换行

none–隐藏

block–块显示

inline-block-块级元素能够在同一行显示  
![20200706103906243.png][]

able–表格显示

list-item–项目列表

> **8.position的值？(重要)**

*  static（默认）：按照正常文档流进行排列；
 *  relative（相对定位）：不脱离文档流，相对于自己 的父级
 *  absolute(绝对定位)：外面的父级，若没有父级，就是以左上角为准
 *  fixed(固定定位)：参照对象是浏览器窗口，出现滚动条的时候，不会随之滚动。

> **9. CSS3有哪些新特性？**

1.  文字阴影：text-shadow： 5px 5px 5px \#FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
2.  圆角（边框半径）：border-radius 属性用于创建圆角
3.  盒阴影：box-shadow: 10px 10px 5px \#888888
4.  边框图片：border-image: url(border.png) 30 30 round
5.  background-image background-origin(content-box/padding-box/border-box) background-size background-repeat  
    word-wrap（对长的不可分割单词换行）word-wrap：break-word

> **10.请解释一下CSS3的flexbox（弹性盒布局模型）**

以更加高效的方式来对容器进行布局,对其和分配空间.

> **11.用纯CSS创建一个三角形的原理是什么？(重要)**

首先，需要把元素的宽度、高度设为0。然后设置边框样式。---不明白，为什么是border-top

// tansparent  --背景透明

width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #ff0000;

> **12.常见浏览器的兼容性问题？移动端兼容问题？**

1.  不同浏览器的标签默认的margin和padding不一样。\*\{margin:0;padding:0;\}
2.  标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border;
3.  IE6下在使用margin:0 auto;无法使其居中 。解决办法：为其父容器设置text-align:center;  
    ========移动端=========
4.  上下拉动滚动条时卡，慢：[移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住 - Hrone - 博客园][-webkit-overflow-scrolling_touch_ - Hrone -]
5.      body {
        // -webkit-overflow-scrolling:控制元素在移动设备上是否使用滚动回弹效果
        // touch:手指从触摸屏上移开，内容会继续保持一段时间的滚动效果
          -webkit-overflow-scrolling: touch;
          overflow-scrolling: touch;
        }
6.  圆角bug,有些安卓手机圆角失效
    
        background-clip: padding-box;
    
    长时间按住页面闪退
7.      element {
          -webkit-touch-callout: none;
        }
    
    > **13.为什么要初始化CSS样式**

因为浏览器兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对css初始化往往会出现浏览器之间的页面显示差异

> **14. display:none与visibility：hidden的区别？(元素隐藏)**

1.  display：none 隐藏某个元素，且隐藏的元素不会占用任何空间
2.  visibility：hidden 隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

// 1、空间占据
    display:none;// 隐藏的元素不占文档流
    visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎)
    // 2、回流和重绘(reflow/repaint)
    display:none;// 引发回流和重绘
    visibility:hidden;// 无回流和重绘
    // 3、株连九族
    display:none;// 其内的标签元素全部隐藏、无论如何挣扎都无济于事
    visibility:hidden;// 其元素若添加visibility:visible;则会显示出来

> **15.**为什么会出现浮动和**什么时候需要清除浮动？清除浮动的方式？(重要)**

浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。  
浮动带来的问题：

1.  父元素的高度无法被撑[掘金][Link 1]开，影响与父元素同级的元素
2.  与浮动元素同级的非浮动元素（内联元素）会跟随其后
3.  若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1.  给浮动元素父级div定义height
2.  最后一个浮动元素后加空div标签 并添加样式clear:both。
3.  包含浮动元素的父标签添加样式overflow为hidden或auto。
4.  父级div定义伪类：after和zoom

适合场景

文字环绕效果FL

[掘金][Link 1]

> **16.设置元素浮动后，该元素的display值是多少？**

自动变成display:block

> **17.使用 CSS 预处理器吗？**

Less sass

> Sass、LESS是什么？大家为什么要使用他们？

是CSS预处理器
    1、结构清晰(语法嵌套)
    2、可以轻松实现多重继承。
    3、定义变量、定义
    4、声明@mixin 使用@include调用。一处书写多次调用
    5、占位选择器$ 通过@extend调用
    6、函数(px转换rem就使用的)
    7、强大的运算符()
    @function pxRem($px){
        @return $px / $baseFontSize * 1rem;
    }

变量：

$blue:#187ec7;//变量声明
    div{
        color:$blue;//变量引用
    }

嵌套

.div {
        width:500px;
        .div_Children{
            height:50px;
        }
    }

嵌套代码引用父元素

a{
        &:hover{
            color:red;
        }
    }

继承

.boderClass{
        border:1px solid #ddd;
    }

class2继承boderClass使用 **@extend**命令

class2{
        @extend .boderClass;//继承
        color:red;
    }

代码重用

@minxin left{//声明
        float:left;
        margin-left:20px;
    }
    
    
    使用@include命令调用mixxin
    div{
        @include left;
    }

引用文件

@import命令，用来插入外部文件。使用该命令会合并为一个文件
    @import "path/filename.scss";

> **18. CSS优化、提高性能的方法有哪些？(css优化性能的方法.)**

1.  避免后代选择符
2.  避免不必要的重复代码
3.  少使用!important

> **19.什么是响应式设计？**响应式设计的基本原理是什么？如何兼容低版本的IE？(重要)

响应式网站设计是一个能够兼容多个终端而不是每一个终端做一个特定的版本

优点：一套代码兼容web端、平板、以及手机端网页

缺点：工作量大、UI设计也需要多个版本

场景：同时兼容多种不同设备  
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。  
页面头部必须有meta声明的viewport。

> 20.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

[有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度(三种方案) - 徐同保 - 博客园][div_div_100px_ - _ -]

> **21.style标签写在body后与body前有什么区别？**

页面加载自上而下 当然是先加载样式。  
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

> **22. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?**

overflow默认值visible

1.参数是scroll时,会出现滚动条

2.参数是hidden时,溢出隐藏

> **23.如何去除inline-blcok元素间隙？**

空隙产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

**解决办法：**

1.  把所有的子元素写在一行；
2.  子元素设置浮动；
3.  父元素的font-size设置为0，子元素的font-size设置为实际大小；

> **24.在不知道图片大小的情况下，如何设置样式让图片不变形？**

max-width: 100%

> **25.link @import导入css(link和@import的区别)**

*  link方式的样式权重比import的权重高。
 *  link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
 *  link支持js可以改变样式，而import不支持

> **26.如何实现一个最大的正方形.**

用 `padding-bottom` 撑开边距

section {
        width:100%;
        padding-bottom: 100%;
        background: #333;
    }

> **27.一行水平居中，多行居左**

<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
    <div><span>我是一行文字</span></div>
    
    <style>
    div{text-align: center;}
    div span{display: inline-block;
    text-align: left;}
    </style>

> **27.display:inline-block 什么时候会显示间隙？**

1.  有空格时候会有间隙 解决：移除空格
2.  margin正值的时候 解决：margin使用负值
3.  使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

> **28.相对长度和绝对长度的区别（重点） **

*  em指的是相对长度，值是不固定的，而是由其他元素尺寸来决定的相对值，并且会继承父元素字体大小。相对单位长度指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。相对长度还有：ex、ch、rem、vw、%等等。·
 *  px是绝对长度单位，它是一个固定的值，是多少就是多少，不会因为其他元素的尺寸变化而变化。它反应一个真实的物理尺寸。绝对长度还有：cm、mm、in、pt等等。 
 *  相同点：px和em都是长度单位
 *  异同点：px的值是固定的，是多少就是多少，计算起来比较容易。em的值是不固定的，并且会继承父级元素的字体大小。
 *  浏览器默认字体高是16px。所以未经调整的浏览器都符合1em=16px。那么12px = 0.75em,10px = 0.625em

> **29.rpx与px的换算单位（重点）**

微信小程序的尺寸的单位rpx，根据屏幕宽度进行自适应，若规定屏幕款750rpx,那就是750物理像素

1rpx = 0.5px

750物理像素

> **30.flex布局--容器属性；项目属性面试题（重点）**

[Flex布局：flex属性详解 (flex和flex-grow的区别？)\_无数\_Mirage的博客-CSDN博客][Flex_flex_ _flex_flex-grow_Mirage_-CSDN]

在css中，flex属性是使用来设置或检索弹性盒模型对象的子元素如何分配空间，3个属性：是 flex-grow属性、flex-shrink属性和 flex-basis 属性的简写属性。flex属性针对的是弹性盒模型对象的子元素，对于其它元素，flex属性不起任何作用；

注：如果元素不是"弹性盒模型对象的子元素"，则 flex 属性不起作用。(弹性盒模型对象，即声明了`display:flex`或`display: inline-flex`的元素，这个元素被称为伸缩容器)

优点：简便、完整、响应式地实现各种页面布局

缺点：只兼容IE10+的浏览器

flex属性语法格式：

flex:flex-grow;flex-shrink;flex-basis/auto/initial/inherit

1.flex布局flex-grow属性:

**定义项目的放大(扩展)比例**，即**定义对剩余空间(如果有的话)的分配**。对弹性容器内的元素，在当前列除自身宽度之外若还有剩余空间，而设定的分配

*  默认为0，即如果存在剩余空间，也不放大。
 *  如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间。
 *  如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 2][]

下面这个示例比较全面，自行观察flex-grow设置为1、3、0的区别；以及设置为0但有内容和无内容的区别。

### **flex-shrink ** ###

**定义项目的收缩比例：**对弹性容器内元素，如果所有子元素的宽的总和超过了弹性容器设定的宽width,那么该属性分配元素的收缩比例。

默认为1，即每个子元素收缩比例相同，但不会忽略内容（如果元素中的内容超过了容器的宽，那么容器会被撑开）

如果一个项目的flex-shrink属性为1，其他项目都为2，且所有项目的宽超过了容器设定的width,则所有项目的宽将在原基础进行收缩，后者进行收缩的量为前者的2倍。但是不会忽略内容，内容会占据实实在在的宽度。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 3][]

### **flex-basis** ###

*  flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值auto,即项目的本来大小。

.item{
    flex-basis:<length> | auto;
    }

*  和width不同。flex-basis用于设置或检索弹性盒伸缩基准值
 *  推荐[这篇文章][Link 2]：`flex-basis`表示在flex子元素 被放入flex容器之前的大小，是子元素的理想或者假设大小但是并不是其真实大小，其真实大小取决于flex容器的宽度、flex子元素的`min-width`,`max-width`等其他样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 5][]

任何一个容器都可以指定为flex的布局.box\{display:flex\}

行内元素也可能使flex布局.box\{display:inline-flex\}

webkit内核的浏览器，必须加-webkit前缀

.box\{display:-webkit-flex;/\*Safari\*/display:flex\}

注意：设置弹性盒，子元素float,clear和vertical-align属性失效

flex-direction：排列方向

row:从左往右
    row-reverse:从右往左
    column:从上到下
    column-reverse:从下到上

flex-wrap: 是否换行

nowrap（默认）:不换行
    wrap:换行
    wrap-reserve

justify-content：定义了主轴的对其方式(横轴)

flex-start(默认）：左对齐
    flex-end:右对齐
    center:居中
    space-between:两端对齐，项目之间的间隔都相等
    space-around:每个项目两侧的间隔相等

align-item：交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
      order: <integer>;
    }

flex-grow：属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。

.item {
      flex-grow: <number>; /* default 0 */
    }

[CSS3弹性盒布局方式 - 简书][CSS3_ -]

题：

flex--内容宽度等分

//css
           .box {
                display: flex;
            }
            
            .box div {
                flex: 1;
                border: 1px solid red;
            }
    //html
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>

> **31.滚动条**

正常溢出部分会自动出现滚动条

溢出隐藏：overflow:hidden

overflow:visible(默认）

> **32. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用**

1.   单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
2.  ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。  
    :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

> **33.块级元素和行级元素有什么区别**

行内元素：

*  与其他行内元素并排，行内元素不会自动换行
 *  不设置宽高，设置宽高无效，默认宽度就是文字宽度
 *  对margin设置左右方向有效，而上下无效，padding设置都有效

块级元素：

*  自己独占一行，不能与其他元素并列
 *  可以自动换行，可以设置宽高，设置margin和padding都有效，如果不设置宽度，那么宽度将默认变为父级的100%

1)、内联元素，和其他元素都在一行上。  
2)、内联元素中宽高，行高及顶和底边距不可设置。  
3)、内联元素，只能容纳文本或者其他内联元素。  
行内元素可以设置padding值、左右margin值、若行内元素浮动则上下margin生效

> **34.border:设置所有的边框属性 **

p{border: 5px soild red;}

*   border-width:边框宽度
 *  border-style:边框样式
 *  border-color:边框颜色
 *  inherit:从父元素继承border属性的设置

> **35.百分比布局 （流式布局）**也称为非固定像素布局

描述：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。主要特征是像瀑布一样往下流，有规律的无限遍历模块。

流式布局的方式是web移动端开发比较常见使用的一种方式

max-width:最大宽度               min-width:最小宽度

优点：灵活，充分利用浏览器的空间

缺点 ：宽度按照屏幕进行适配调整，对于大屏幕来说用户体验并不是特别好，有些布局元素会显得很长

场景：类似抖音视频、微博消息、微信朋友圈等布局

> **36.水平居中的方法**

*  元素为行内元素，设置父元素`text-align:center`
 *  如果元素宽度固定，可以设置左右`margin`为`auto`;
 *  如果元素为绝对定位，设置父元素`position`为`relative`，元素设`left:0;right:0;margin:auto;`
 *  使用`flex-box`布局，指定`justify-content`属性为`center``display`设置为`tabel-ceil`

> **37.垂直居中的方法 **

*  单行文本的话可以使用`height`和`line-height`设置同一高度。
 *  `position+margin`：设置父元素:`position: relative;`，子元素`height: 100px;position:absolute;top: 50%; margin: -50px 0 0 0;`（定高）
 *  `position+transform`：设置父元素`position:relative`,子元素：`position: absolute;top: 50%;transform: translate(0, -50%);`（不定高）
 *  百搭flex布局(ie10+)，设置父元素`display:flex;align-items: center;`（不定高）

> 26如何实现左右等高布局

`table`布局兼容性最好，当然`flex`布局的`align-items: stretch;`也行

<div class="layout">
      <div class="layout left">left</div>
      <div class="layout right">center</div>
    </div>
    
    <style>
    .layout{
      display: table;
      width: 100%;
    }
    .layout div{
      display: table-cell;
    }
    .layout .left{
      width: 50%;
      height: 200px;
      background: red;
    }
    .layout .right{
      width: 50%;
      background: yellow;
    }
    </style>

[如何实现多列等高布局？ - 简书][-]

> 3.CSS优先级算法如何计算？(了解即可)

元素选择符： 1  
class选择符： 10  
id选择符：100  
元素标签：1000

1.  !important声明的样式优先级最高，如果冲突再进行计算。
2.  如果优先级相同，则选择最后出现的样式。
3.  继承得到的样式的优先级最低。

载入样式以最后载入的定位为准;  
!important >  id > class > tag  
!important比内联优先级高  
(1) !important声明高于一切。  
(2) 内嵌样式次之。  
(3) 样式表中声明按选择器的权重排序。  
(4) 最后按浏览器执行样式表的顺序，遵循"后来居上"原则匹配样式。  
当然最后还要强调一点：如果没有设置样式的，则自动继承父级节点的样式。

> 13. CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？(不重要)

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1.  chrome中，使用collapse值和使用hidden没有区别。
2.  firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

> 15. position跟display、overflow、float这些特性相互叠加后会怎么样？(了解即可)

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。  
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

> 21.浏览器是怎样解析CSS选择器的？（不重要--理解就好）

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。  
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

> 22.在网页中的应该使用奇数还是偶数的字体？为什么呢？（不重要）

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

> 23.margin和padding分别适合什么场景使用？（不重要）

何时使用margin：

需要在border外侧添加空白  
空白处不需要背景色  
上下相连的两个盒子之间的空白，需要相互抵消时。  
何时使用padding：

需要在border内侧添加空白  
空白处需要背景颜色  
上下相连的两个盒子的空白，希望为两者之和。  
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

> **24. 元素竖向的百分比设定是相对于容器的高度吗？**

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

> 25.全屏滚动的原理是什么？用到了CSS的哪些属性？(不重要)

1.  当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
2.  overflow：hidden；transition：all 1000ms ease；

> 28.你对line-height是如何理解的？（不重要）

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。  
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。  
多行文本垂直居中：需要设置display属性为inline-block。

> 29.怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

> 30.让页面里的字体变清晰，变细用CSS怎么做？(不重要)

\-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

> **31.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？**

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。  
解决方法：

1.  可以将<li>代码全部写在一排
2.  浮动li中float：left
3.  在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

> **34.png、jpg、gif 这些图片格式解释一下，分别什么时候用**。有没有了解过webp？（不重要）

1.  png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2.  jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3.  gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4.  webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

> **line-height和heigh区别 **

line\_height是行高的意思，它决定了元素中文本内容的高度，height则是定义元素自身的高度

*  height:表示行高
 *  line-height:表示每行文字所占的高度

1.height:

结果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16][]

2.行高为50px和文字高度为20px情况：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16 1][]

3.设置了文字高度和文字大小一样的此时满屏显示

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16 2][]

“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_14_color_FFFFFF_t_70_g_se_x_16][]

CSS中起高度作用的就是height以及line-height！**如果一个标签没有定义****height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用**

[line-height 与 height 的区别 - 远征i - 博客园][line-height _ height _ - _i -]

> 一个盒子不给宽度和高度如何水平垂直居中？

[实现一个不设置宽高的盒子水平垂直居中的方法\_syx\_12的博客-CSDN博客][syx_12_-CSDN]

[实现没有宽高的盒子水平垂直居中 - 苏小妞吖 - 博客园][- _ - 1]

> 在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系

> 写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

<div id="left">我是左边</div>
        <div id="center">我是中间</div>
        <div id="right">我是右边</div>
    
    html,body{ margin: 0px;width: 100%; } 
    #left,#right{width: 200px;height: 200px;background-color: aqua;
        position: absolute;}
        #left{left: 0;top:0;}
        #right{right: 0;top:0;}
        #center{margin: 0 200px;background-color: blue;height: 200px;}

> 什么是CSS reset？

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，这就是css reset。

[前端面试：什么是css reset - 明烟雨任 - 博客园][css reset - _ -]

> 44.水平垂直居中

两栏布局,左边固定,右边自适应,左右不重叠

flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局

.left{
        float:left;
        width:300px;
        margin-right: 10px;
        background: red;
    }
    .right{
        overflow: hidden; /* 创建BFC */
        background: yellow;
    }

> **46.BFC理解（BFC是什么？能解决什么问题？）**

BFC触发条件：

1.  根元素，即html
2.  float的值不为none（默认）
3.  position的值为absolute或fixed
4.  overflow的值不为visible（默认）
5.  display的值为inline-block、table-cell、table-caption

BFC特性：

1.  内部的Box会在垂直方向上一个接一个放置。
2.  Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
3.  每个元素的margin box 的左边，与包含块border box的左边相接触。
4.  BFC的区域不会与float box重叠。（可用于清浮动）
5.  BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6.  计算BFC的高度时，浮动元素也会参与计算。

BFC全称：Block Formatting Context，译为块级格式化上下文，它是CSS2.1规范定义的，关于CSS渲染定位的一个概念

能够解决因浮动造成的父元素塌陷问题

能够解决div浮动造成的遮盖问题【overflow:hidden; 触发bfc来解决遮挡问题】

>  ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

> 有哪项方式可以对一个DOM设置它的CSS样式？

*  外部样式表，引入一个外部css文件 
 *  内部样式表，将css代码放在 head 标签内部 
 *  内联样式，将css样式直接定义在 HTML 元素内部

>  CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

display: none;
    visibility: hidden;
    height: 0;overflow: hidden;
    position: absolute;top: -999em;
    opacity: 0;filter: Alpha(opacity=0);
    position: absolute;visibility: hidden;

>  px和em的区别

px的值是固定的  
em得值不是固定的，并且em会继承父级元素的字体大小。  
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。、

描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

body,div,dl,dt,dd,del,ul,ol,li,h1,h2,h3,h4,h5,h6,input,p,figure{padding: 0;margin: 0;}
    a{text-decoration: none;}
    ul,ol{list-style: none;}
    img{border: 0;}
    h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;font-style: normal;}
    .clearfix{zoom:1;}
    .clearfix:after{content:"",display: block;height: 0;visibility: hidden;clear: both;}
     
    Normalize.css 保留浏览器原有的样式并且做到每个浏览器显示一致(没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。)
    CSS Reset 相反吧浏览器默认样式全部重置
    http://jerryzou.com/posts/aboutNormalizeCss/

> 用纯CSS创建一个三角形的原理是什么？

#demo{
        width: 0;height: 0;border-width: 20px;border-style: solid;
        border-color: transparent transparent red transparent;
    }
    左箭头(尖细)
    sReturn{
        display: block;content: '';width: 10px;height: 10px;
        border-width: 2px;border-style: solid;
        border-color: #fff transparent transparent #fff;
        position: absolute;top: 50%;left: 15px;
        transform: translateY(-50%) rotate(-45deg);
    }
    左箭头(钝)
    #demo1{
        width: 10px;height: 10px;
        position: absolute;top: 50%;
        border-left: 2px solid red;
        border-top: 2px solid red;
        transform: rotate(-45deg) translateY(-50%);
    }

>  **浏览器是怎样解析CSS选择器的？**

浏览器css匹配核心算法的规则是以 right-to-left 方式匹配节点的。

> **rgba()和opacity的透明效果有什么不同？ **

gba()和opacity都能实现透明效果

1.  opacity作用于元素，以及元素内的所有内容的透明度，
2.  rgba()只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果！）

> css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height  
水平方向：letter-spacing  
关于letter-spacing的妙用知道有哪些么？  
可以用于消除inline-block元素间的换行符空格间隙问题。

>  absolute的containing block(容器块)计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素

> CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。  
如果这个元素是table相关的元素,它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。  
   
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。  
在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

> 针对移动端的布局？

> 说说你对rem的理解？

根据改变根节点的font-size值、进行移动端大小的适配  
Flexible会将视觉稿分成100份、而每一份被称为一个单位a、同时1rem单位被认定为10a。  
1a   = 7.5px  
1rem = 75px   
   
大漠Rem介绍：https://github.com/amfe/article/issues/17  
lib.flexible开源项目：https://github.com/amfe/lib-flexible  
<script type="text/javascript" src="js/flexible.js"></script>  
@function Rem()\{  
    @return ($px / 75) \* 1rem;  
\}  
用法:  
.sCutimg\{width: Rem(640);height: Rem(685);margin: 0 auto;padding-top: 40px;\}

> **CSS优化、提高性能的方法有哪些？ **

抽离样式模块怎么写，说出思路，有无实践经验？(抽离样式模块、结构分割成一个个小的复用模块、根据业务需求、内容的大小大部分是相对的值。命名规则则是跟其他的所有类型对待区别。比如加上moduleCss的前缀)  
元素竖向的百分比设定是相对于容器的高度吗？(容器的宽度)  
全屏滚动的原理是什么？用到了CSS的那些属性？

> 问题反问  
> 1、您说的是哪个浏览器的哪类问题？  
> 2、还是常用浏览的（前端）API差异？  
> 3、Layout渲染差异？  
> 4、谈谈浏览器为什么存在兼容问题？  
> 5、兼容存在的历史原因？  
> 想了解你常用的常见到的常解决到的，或者近期刚刚解决过的一些浏览器兼容问题
> 
> 1、IE低版本的事件怎么绑定？标准怎么绑定？阻止事件的API分别是什么（Pas）  
> 2、jQuery怎么事件委托呢？  
> 3、给你这个方法和这个方法，怎么实现jQuery这种形式的事件委托。  
> 4、不要去了解如何兼容旧 IE，而是要更加符合趋势，关注优秀的、流行的东西。  
> 对过时浏览器的兼容性问题是沉重的知识包袱， 关键是这种知识没有延续性，会影响你学习和使用新技术  
> 5、如果问移动浏览器的兼容性还可以原谅，如果还拿ie8一下说事，立马走人不干了！
> 
> 让面试官满意最好的办法  
> 1、多表达自己，免得让面试官主动问你  
> 2、让对方看到你的发光点  
> 3、一般面试官问一个大而无当的问题多半是他还没想到一个合适的问题，拖延一下时间，你可以和他一起把问题细化。  
> 4、这个其实是需要分类去答，css兼容性网上很多，至于js的兼容性，看看jquery代码里面的注释就可以了

**JS面试题**

[CSDN][CSDN 1]

> **1.基本数据类型有哪几种?(高频)**

undefined,null,boolean,string,number,Symbol(es6)

Symbol:定义对象的唯一标识(和id一样)

let name = Symbol()
    console.log(typeof name)   // Symbol

> **2.引用数据类型有哪些?(高频)**

Object,Array

内建对象:Object,String,Array

> **介绍js有哪些内置对象？ **

Object是JavaScript中所有对象的父对象  
数据封装类对象：Array、Boolean、Number、String、object  
其他对象：Function、Arguments、Math、Date、Error、RegExp

> **说几条写JavaScript的基本规范？ **

1、不要在一行声明多个变量  
2、请使用===/!==来比较true/false或数值  
3、请使用对象字面量方式代替new Array这种形式  
4、不要使用全局函数、变量(函数不应该有时候有返回值、有时候没有返回值)  
5、Switch语句必须带default分支  
6、For循环必须使用大括号  
7、If语句必须使用大括号  
8、for-in循环中的变量、应该使用var关键字明确限定其作用域、从而避免作用域的污染

> **3.JavaScript的typeof返回哪些数据类型(高频)**

*   undefined
 *  string
 *  boolean
 *  number
 *  symbol(ES6)
 *  Object
 *  Function

> **4.强制类型转换(高频)**

[原始数据类型（Number,string,boolean,null,undefined）][Number_string_boolean_null_undefined]

*  转成字符串
    
     *  [1.toString();][1.toString]
     *  [2.拼接字符串][2.]

toString

var a=1;
    console.log(a.toString());//输出结果为黑色的1

拼接字符串

var a=1;
    var b=a+'';
    console.log(b);//输出结果为黑色的1

*  转成数字
    
     *  [1.parseInt][]
     *  [2.parseFloat][]
     *  3.Number

使用Number

var a="123";
    a=Number(a);
    console.log(typeof  a);     结果：number

如果:

var a="abc";
    a=Number(a);
    console.log(a);    结果：NaN

如果是纯数字的字符串，则直接转换为数字，如果字符串中有非数字的内容，则转换为NaN,如果字符串是一个空串或者是一个全是空格的字符串，则转换为0；

Number(true)="1"     Number(Null)=0   Number(undefined)="NaN"

parseInt()   parseFloat()   专门用来对付字符串

var a = "123px";
    a=parseInt(a);
    console.log(typeof a);    结果：number
    console.log(a);               结果：123 
    var b=true;
    b=parseInt(b);
    console.log(typeof b);    结果：number
    console.log(b);               结果：NaN

如果对非string使用parseInt()或parseFloat()它会先将其转换为string，然后再操作。

转成boolean直接就用boolean;

除了0、NaN、空串、null、undefined其余都是true。对象也会转换为true

使用Boolean()函数
    var a= 123;
    a=Boolean(a);
    console.log(typeof a);   结果：boolean
    console.log(a);              结果：true

[js强制类型转换\_Baron的博客-CSDN博客\_js 类型强转][js_Baron_-CSDN_js]

[JS基础之强制类型转换\_每文的博客-CSDN博客\_js强制类型转换][JS_-CSDN_js]

> **5.隐式类型转换(高频)**

== ===

扩展：通过==比较两边的值是否相等的结果？  
1==’1’  
null==undefined

> **6.“=="和“===”区别(高频)**

前者会自动转换类型，在判断是否相等

后者不会自动转换类型，直接去比较

1==”1”
    null==undefined;//==true

> **7.逻辑运算符：与,或,非**

*  || : 只要其中有一个为true，整体结果是true； 
 *  && : 只要有一个是false，整体结果是false； 
 *  !：取 （比较：转布尔，在取反）

> **8.null和undefined是否相等?null和undefined的区别？(高频)**

console.log(null==undefined)//true
    console.log(null===undefined)//false

null：

没有定义的时候是null值，报错是not found

nul表示"无",转成数值时为0

undefined：  
只是初始化，创建变量，但是没有赋值

undefined是一个表示"无"的原始值,转为数值时为NaN

> **9.JS四种检测(高频)**

1.  typeOf：只能检测基本数据类型 
    
        typeof 1;//'number'
        typeof true;//'boolean'
        typeof '';//'string'
        typeof undefined;//'undefined'
        typeof function (){};'function'
        typeof null // Object
2.  instanceOf：检测当前实例是否属于某个类的方法 
    
        var arr = [];
        arr instanceof Array;//true
3.  constructor：检测属性是否存在于构造函数的原型上，用\_proto\_在原型上
    
        var arr = [];
        arr.constructor === Array;//true
4.  Object.prototype.toString.call(\[\]); 最准确的方式；用来检测数据类型的
    
        console.log(Object.prototype.toString.call(1));//[object Number]
        console.log(Object.prototype.toString.call(''));//[object String]
        console.log(Object.prototype.toString.call(true));//[object Boolean]
        console.log(Object.prototype.toString.call(null));// [object Null]
        console.log(Object.prototype.toString.call(undefined));//[object Undefined]
        console.log(Object.prototype.toString.call([]));// [object Array]
    
    > **10.看下列代码,输出什么？解释原因。**

var a = null;
    alert(typeof a); //object

原理是这样的，不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型， null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回“ object ”。

> **11.看下列代码,输出什么？解释原因。**

var undefined;//此时undefined这个变量的值是undefined
    undefined == null; // true
    1 == true;   // true
    此时会把布尔类型的值转换为数字类型 true=1 false=0
    2 == true;   // false
    0 == false;  // true
    0 == '';     // true
    NaN == NaN;  // false isNaN
    [] == false; // true   解释：会把[]和false都通过Number()转换为数字类型
    [] == ![];   // true   解释：![]：false
    []==[];//false

> **12.判断空字符串,undefiend,null**

if(undefined == null)\{    \}        //返回的是true

if(undefined == ' ')\{\}                // 返回的是false

if(null == ' ')\{\}                       // 返回的是false

**控制台**

' '为字符串

typeof null ==================> Object

typeof ' ' ====================> String

> **13.undefiend和null字符在if语句找那个,都会自动变成false =============>让他们变成true,前面要加!(取反)**

if(!null) == if(!undefined)  == true

> **14.Array,Object放在if语句中自动转成true(高频)**

> **15.break，continue,return区别(高频)**

*  break：立即结束语句，并跳出语句
 *  continue:停止当前语句，并继续执行
 *  return:停止函数

// break
    for(var i = 0;i <= 10; i++){
        if(i == 6){
            break;
        }
        console.log(i);  //12345
    }
    
    // continue
    for(var i = 0;i <= 10; i++){
        if(i == 6){
            continue;
        }
        console.log(i);  //1234578910
    }

>  **16.for…in..和for…of..的区别？**

for...in用于遍历数组或者对象的属性；；；；for...of遍历循环数组

`for (变量 in 对象){` 在此执行代码 \}

var mycars = new Array()
    mycars[0] = "Saab"
    mycars[1] = "Volvo"
    mycars[2] = "BMW"
    mycars.color = "white"
    for (var x in mycars)
    {
       console.log(mycars[x]); //Saab Volvo BMW white
    }

var mycars = {"1":"Saab", "2":"Volvo", "3":"BMW"};
    mycars.color = "white" 
    for (var x in mycars)
    {
       console.log(mycars[x]);  //Saab Volvo BMW white
    }

for of 遍历循环数组

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

var mycars = ["Saab", "Volvo", "BMW"]; 
    mycars.color = "white" 
    for (var x in mycars)
    {
       console.log(mycars[x]);
    }

> **17.map，forEach区别(高频)**

相同点：

1.  都是循环遍历数组中的每一项
2.  每次执行匿名函数，都支持3个参数，参数分别是item（当前每一项），index（索引值），arr（原数组）
3.  只能遍历数组
4.  匿名函数中this都指向window

不同点：map有返回值,不会改变原数组;forEach没有返回值,对原数组数据直接进行修改

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值（map（）进行处理之后返回一个新的数组）

map方法不会改变原始数组

var arr = [0,2,4,6,8];
    var str = arr.map(function(item,index,arr){
    console.log(this); //Window
    console.log(this);
    console.log(item);
    console.log('原数组arr：',arr); // 会执行五次
    return item/2;},this);console.log(str); //[0,1,2,3,4]

forEach方法用于调用数组的每个元素，将元素传给回调函数

注意，forEach是不会返回有意义的值的。  
我们在回调函数中直接修改arr的值。

arr.forEach((value, key) => {
     return arr[key] = value * value;
    });

> **18.循环(while,do...while,for,for...in)(高频)**

*  while 先判断--------->后执行

var i = 0;
    while(i < 100){
    console.log('i为' + i)
    }

*  do......while 先执行------------->再判断

var x = 3;
    var i = 1;
    do {
    console.log(i);
    i++;
    } while (i < x)

*  for循环
 *  for...in    ---->用于对象遍历

var person = {name: "张”}
    for(var key in person){
    if(person.hasownproperty){
    }
    }

> **19.Number的方法**

*  `isNaN` : 检查数字是否非法    // console.log(isNaN(123))   // false
 *  `Number` :将其他数据类型的值强制转换成number类型； 
 *  `parseInt` :经常用于字符串提取数字的方法； 
 *  `parseFloat`:和parseInt 用法一样；区别是多识别一位小数点 
 *  `toFixed` : 保留小数点位数的方法;返回值是一个字符串；

> **20.字符串的方法(13个)**

1.  `toUpperCase` : 把小写字母转成大写 
2.  `toLowerCase` 把大写转小写 
3.  `charAt` : 通过索引获取字符 
4.  `charCodeAt` : 通过索引获取对应字符的Unicode编码； 
5.  `substr` : 截取 substr(m,n) 从索引m开始，截取n个字符； 
6.  `substring`: substring(m,n) ：从索引m开始，截取到索引n，不包含n; (不支持负数) 
7.  `slice(m,n)`: substring; 从索引m开始，截取到索引n，不包含n (支持负数) 
8.  `indexOf` : 检测字符在字符串中第一次出现的索引位置； 
9.  `lastIndexOf` : 检测字符在字符串中最后一次出现的索引位置； 
10. `split`: 把字符串按照特定的字符分隔数组中的每一项； 
11. `replace`:替换;原有字符串不变；用新字符替换旧的字符 
12. `concat` : 拼接

> **21.字符串的运算**

`- * /`: 会先把字符串转换成数字，然后再进行计算

1.  任何数字和NaN 计算，结果都是NaN;
2.  任何数字和undefined运算，得到也是NaN；

> **22.split() join() 的区别(高频)**

split():把一个字符串分割成字符串数组，并返回

“hello".split("")   // \["h", "e", "l", "l", "o"\]

join():把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,并返回

在本例中，我们将创建一个数组，然后把它的所有元素放入一个字符串：
    
    <script type="text/javascript">
    var arr = new Array(3)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    
    console.log(arr.join())
    
    </script>
    输出：
    
    George,John,Thomas

> **23.js精度误差**

1.  toFixed()方法  
    使用不同函数分别计算(+,-,\*,/)
    
        var a = 1;
        var b = 2.344544;
        consoel.log((a+b).toFixed(2))
    
    2.小数点\[(变量 \* 10) / 10\])  先乘10再除以10
2.  比如在 JavaScript 中计算 0.1 + 0.2时，到底发生了什么呢？
3.   首先，十进制的0.1和0.2都会被转换成二进制，但由于浮点数用二进制表达时是无穷的，例如。
4.  JavaScript 代码:  
    0.1 -> 0.0001100110011001...(无限)  
    0.2 -> 0.0011001100110011...(无限)  
    IEEE 754 标准的 64 位双精度浮点数的小数部分最多支持 53 位二进制位，所以两者相加之后得到二进制为：
    
    JavaScript 代码:0.0100110011001100110011001100110011001100110011001100  
    因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了 0.30000000000000004。所以在进行算术计算时会产生误差。

> **24.、获取元素的方法**

*  `document.getElementById`:通过ID名来获取元素 
 *  `document.getElementsByTagName`: 通过标签名来获取元素 
 *  `document.getElementsByClassName()`; 类数组集合； 
 *  `document.getElementsByName`;通过name属性来获取元素； 
 *  `document.documentElement` 获取当前的html 
 *  body :获取页面的body元素； 
 *  `document.querySelector()`;如果是id名加\#，如果是class名加. 
 *  `document.querySelectorAll()`;获取所有的元素

> **25.DOM操作——怎样添加、移除、移动、复制、创建和查找节点。  **

创建新节点

*  createDocumentFragment() // 创建一个DOM片段
 *  createElement() // 创建一个具体的元素
 *  createTextNode() // 创建一个文本节点

添加、移除、替换、插入

*  appendChild(node)
 *  removeChild(node)
 *  replaceChild(new,old)
 *  insertBefore(new,old) // 在已有的子节点前插入一个新的子节点

查找

*  getElementsByTagName() // 通过标签名称
 *  getElementsByName() // 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
 *  getElementById() // 通过元素Id，唯一性

> 26.DOM四种类型的节点

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>TYPE</td> 
   <td>nodeType</td> 
   <td>nodeName</td> 
   <td>nodeValue</td> 
  </tr> 
  <tr> 
   <td><span style="color:#3399ea;">元素节点</span></td> 
   <td>1</td> 
   <td>大写的标签名</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td><span style="color:#3399ea;">文本节点</span></td> 
   <td>3</td> 
   <td>text</td> 
   <td>文本内容</td> 
  </tr> 
  <tr> 
   <td><span style="color:#3399ea;">注释节点</span></td> 
   <td>8</td> 
   <td>comment</td> 
   <td>注释内容</td> 
  </tr> 
  <tr> 
   <td><span style="color:#3399ea;">document</span></td> 
   <td>9</td> 
   <td>document</td> 
   <td>null</td> 
  </tr> 
 </tbody> 
</table>

空格和换行都是文本节点；

> **27.DOM节点的属性**

*  `childNodes` : 获取当前元素所有的子节点； 
 *  `children` : 获取当前元素的子元素节点； 
 *  `firstChild` : 获取第一子节点； 
 *  `lastChild` :获取最后一个子节点 
 *  `previousSibling` : 获取上一个哥哥节点 
 *  `nextSibling` : 获取下一个弟弟节点 
 *  `parentNode`: 获取当前元素的父亲节点；

> **28.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)**

document.getElementById("ID").value

> **29.怎么检测数组？**

1.  instanceof
2.  isArray

注意： typeof 数组和Null 返回的是'Object'

> **30.改变数组长度的方法有哪些？**

shift、unshift、pop、push

> **31.数组的方法(高频)**

length():返回数组的长度

push()尾部添加，返回数组长度(向数组末尾新增一项；可以传多个)

var arr = ["Lily","lucy","Tom"];
    var count = arr.push("Jack","Sean");
    console.log(count); // 5
    console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

pop()尾部删除，返回被删除的元素（删除数组的最后一项；不需要传参数；）

var item = arr.pop();
    console.log(item); // Sean
    console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

unshift()头部添加 ，返回数组长度

var arr = ["Lily","lucy","Tom"];
    var count = arr.unshift("Jack","Sean");
    console.log(count); // 5
    console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

shift()头部删除，返回被删除的元素

var item = arr.shift();
    console.log(item); // Jack
    console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

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

var arr = [13, 24, 51, 3];
    console.log(arr.reverse()); //[3, 51, 24, 13]
    console.log(arr); //[3, 51, 24, 13](原数组改变)

concat()：数组的拼接 。构建成一个新的数组,原数组并未改变.

var arr = [1,3,5,7];
    var arrCopy = arr.concat(9,[11,13]);
    console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
    console.log(arr); // [1, 3, 5, 7](原数组未被修改)

slice(m,n): 数组的截取 ,从数组索引m开始，截取到索引n，但是不包含n;\[前包后不包\] ,原有数组不发生改变  
slice(m) : 从索引m开始，截取到末尾；

slice()方法可以接受一或两个参数

var arr = [1,3,5,7,9,11];
    var arrCopy = arr.slice(1);
    var arrCopy2 = arr.slice(1,4);
    var arrCopy3 = arr.slice(1,-2);
    var arrCopy4 = arr.slice(-4,-1);
    console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
    console.log(arrCopy); //[3, 5, 7, 9, 11]
    console.log(arrCopy2); //[3, 5, 7]
    console.log(arrCopy3); //[3, 5, 7]
    console.log(arrCopy4); //[5, 7, 9]

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。  
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。  
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

var arr = [1,3,5,7,7,5,3,1];
    console.log(arr.indexOf(5)); //2
    console.log(arr.lastIndexOf(5)); //5
    console.log(arr.indexOf(5,2)); //2
    console.log(arr.lastIndexOf(5,4)); //2
    console.log(arr.indexOf("5")); //-1

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

var arr = [1, 2, 3, 4, 5];
    arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
    });
    // 输出为：
    // 1|0|true
    // 2|1|true
    // 3|2|true
    // 4|3|true
    // 5|4|true

map()指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。(有返回值)

var arr = [1, 2, 3, 4, 5];
    var arr2 = arr.map(function(item){
    return item*item;
    });
    console.log(arr2); //[1, 4, 9, 16, 25]

splice(m,n): 删除数组中的某几项 .从索引开始，删除n个   
splice(m) : 从索引m开始删除到末尾；   
splice(0):   
splice(m,x,n);替换从索引m开始，删除x个，用n替换；   
原有数组发生改变

sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。

在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

var arr1 = ["a", "d", "c", "b"];
    console.log(arr1.sort()); // ["a", "b", "c", "d"]
    arr2 = [13, 24, 51, 3];
    console.log(arr2.sort()); // [13, 24, 3, 51]
    console.log(arr2); // [13, 24, 3, 51](元数组被改变)

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

如果需要通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可：

filter()过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
    }); 
    console.log(arr2); //[1, 4, 7, 8, 9, 10]

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
    var arr2 = arr.every(function(x) {
    return x < 10;
    }); 
    console.log(arr2); //true
    var arr3 = arr.every(function(x) {
    return x < 3;
    }); 
    console.log(arr3); // false

some()

var arr = [1, 2, 3, 4, 5];
    var arr2 = arr.some(function(x) {
    return x < 3;
    }); 
    console.log(arr2); //true
    var arr3 = arr.some(function(x) {
    return x < 1;
    }); 
    console.log(arr3); // false

> **对象的方法？ （高频）**

*  concat():拼接字符串
 *  slice():对字符串进行分割
 *  split():把字符串分割成字符串数组 
 *  toLowerCase():把字符串转换为小写
 *  toUpperCase():把字符串转换为大写
 *  charAt():返回指定字符的位置
 *  indexOf():检索字符串
 *  replace:替换与正则表达式匹配的字符串

> **32.数组的去重(高频)**

1.new Set

const set = new Set([1, 2, 3, 4, 4]);
    [...set]

2.双for循环

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

[https://segmentfault.com/a/1190000016418021?utm\_source=tag-newest][https_segmentfault.com_a_1190000016418021_utm_source_tag-newest]

> **33.闭包：内部函数引用外部函数的变量(高频)**

作用：延长它的生命周期

缺点：容易导致内存泄漏

函数内部嵌套了一个新的函数，嵌套的函数对外部的函数造成了引用就形成了闭包？？？

应用？？？

1.柯里化

2.节流、防抖

3.compose组合函数

> **34.JavaScript this、闭包、作用域(高频)**

*  this：指向调用上下文
 *  作用域：定义一个函数就开辟了一个局部作用域，整个js执行环境有一个全局作用域
 *  闭包：内部函数调用外部函数里面的变量(例子如上)

> 35.闭包是什么，**有什么特性，对页面有什么影响？为什么要用他？(高频)**

闭包就是内部函数调用外部函数里面的变量。  
闭包的缺点：  
1 更多的内存消耗  
2.会造成内存泄露，因为闭包中引用到的函数中定义的变量都永远不会被释放  解决：闭包在不使用的时候，及时释放。将引用内层函数对象的变量赋值为null。

为什么使用：

局部变量：仅函数内可用不会被污染

function a(){
        var n = 0;
        function add(){
           n++;
           console.log(n);
        }
        return add;
    }
    var a1 = a(); //注意，函数名只是一个标识（指向函数的指针），而（）才是执行函数；
    a1();    //1
    a1();    //2  第二次调用n变量还在内存中

>  **36.函数（function)和方法(method)(高频)**

区别：

*  方法在对象里，方法也是函数
 *  函数可以随意调用

本质上是一样的，方法是函数的特例,将函数赋值给了对象  
函数：可以实现一定功能的一段代码的封装

注意：函数创建后，在内存堆中以一段字符串文本存储，不执行时不会调用，就单单是存了一段字符串。

function f() {
     console.log('我是函数');   //调用函数 f();
    }

方法：把函数定义到对象里面就称为方法

var obj = {
     function f(){ 
    console.log("我是方法"); 
    } 
    }; 
    //对象调用方法 (对象调用通过点对象的属性名) obj.f();

> **37.简述创建函数的几种方式(高频)**

第一种字面量（函数声明）：

语法：关键字  标识符   小括号  \{函数体\}

function sum1(num1,num2){
       return num1+num2;
    }

第二种 表达式（匿名函数表达式）：

语法： 关键字  标识符 = function() 函数体

var sum2 = function(num1,num2){
       return num1+num2;
    }

匿名函数：没有函数名称，无法通过函数名称调用

function()\{\}:只能自己执行自己

第三种（Function构造函数方式）：

语法：   关键字   标识符  = new Function()

var sum3 = new Function("num1","num2","return num1+num2");

注：内存栈：sum3：函数的引用

内存堆："num1","num2","return num1+num2"，就是一个字符串

**函数的三要素** ：

函数名，参数，返回值（return)

返回值：每个函数都必须有return，如果没有return语句，计算机会自动在函数的最后一行补一个return，返回值为undefined。

> **38.什么是函数的封装？**

把实现相同功能的代码放到一个函数体中，当想实现这个功能时，直接执行这个函数即可；减少了的冗余；`高内聚，低耦合.`

举例子:下订单

> **39.函数的执行过程(重要)**

1.  首先会形成一个私有的作用域
2.  形参赋值
3.  变量提升
4.  代码从上到下运行；
5.  作用域的销毁；

在函数执行时，函数体中可以找到函数外面的变量；但是函数外面不能访问里面的变量；

> **40.构造函数与普通函数的区别**

1.  构造函数的的方法名首字母要大写，普通函数不需要。
2.  构造函数的调用方法为： new  Show();普通函数：show（）。
3.  构造函数的类名和方法名一样；
4.  构造函数要用this构造属性和方法；

构造函数

// 定义构造函数
    function Show(){
    this.name = "张三"
    this.age = "12"
    }
    var show = new Show()  // 调用构造函数
    alert(show.name)    // 张三

// 普通函数

function show (name,age){
            this.name = zhangsanm;
            this.age = 12;
    }
    alert(show(this.name))   //zhangsanm

> **41.new 对象时发生了什么？**

*  初始化一个空对象
 *  绑定 this
 *  执行构造函数
 *  返回这个对象（不需要return来返回）

[完全搞懂js 中的new()到底做了什么?\_张木期的博客-CSDN博客\_js new][js _new_-CSDN_js new]

1、创建一个空对象、并且this变量引用该函数、同事还继承了该函数的原型
    2、属性和方法被添加到this引入的对象中
    3、新创建的对象由this说引用、并且最后隐式的返回this
    var obj = {};
    obj.__proto__ = Base.prototype;
    Base.call(obj);

>  JavaScript中、有一个函数、执行对象查找时、永远不会去查找原型、这个

hasOwnProperty：当前函数返回的是一个布尔值、指出一个对象是否具有指定名称的属性、此方法无法检查该对象的原型链中是否具有该属性(该属性必须是对象本身的一个成员属性)
    object.hasOwnProperty(prName);
    参数object是必选项、一个对象是实例
    参数proName是必选项。一个属性名称的字符串值。
    如果object具有制定名称的属性、那么JavaScript中的hasOwnProperty函数方法返回true、反之则返回false

>  **JavaScript设计模式**

*  单例模式
 *  适配器模式
 *  代理模式
 *  发布-订阅模式
 *  策略模式
 *  迭代器模式

> **42.创建对象的方式有几种？(高频)**

1.对象字面量（最常用的方式）

// 对象字面量创建了一个对象o1

var o1 = {
        p:"hello world",
        alertP:function(){
            alert(this.p);
        }
    }

缺点 ：每创建一个新的对象都需要写出完整的定义语句，不便于创建大量相同类型的对象，不利于使用继承等高级特性。

2.用new构造对象

function CO(){
        this.p = “I’m in constructed object”;
        this.alertP = function(){
            alert(this.p);
        }
    }
    var o2 = new CO();

[深入理解js构造函数 - 奔跑的蜗牛~ - 博客园][js_ - _ -]

> **43.call,apply,bind有什么作用？区别是什么？(高频)**

考点：call和apply的用法

this指向有哪些？  call，apply,bind

call和apply相同点：改变函数中this的指向

不同点：

call和apply一样 只是传参数不一样 apply参数是以数组形式传的  bind和call传参方式一样 但是bind会立即执行

建议使用es6的箭头函数:这样就解决了this的指向问题

无参数调用：

function fn(){
        alert(this.name);
    }
    var p1={name:1};
    fn.call(p1);
    fn.apply(p1);

有参数调用：

function fn2(name,age){
        this.name=name;
        this.age=age;
    }
    var p1={};
    fn2.call(p1,"张三",20);
    fn2.apply(p1,["张三",20]);

> **44.形参（parameter)和实参(argument)的区别(高频)**

*  形参就是函数声明时的变量
 *  实参就是函数随时参入的具体参数

// a,b是形参，1，3是实参
    function add(a,b){
    return a+ b
    }
    add(1,3)

> **45.哪些操作会造成内存泄漏？**

函数中使用的变量使用完后不会自动释放

1.  闭包--(第四种情况是不合理的使用闭包，从而导致某些变量一直被留在内存当中。)
2.  setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。(被遗忘的计时器或回调函数)--(第二种情况是我们设置了`setInterval`定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。)
3.  意外的全局变量--(第一种情况是我们由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。)

> **46.什么是 “use strict”; ? 使用它的好处和坏处分别是什么？**

ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言。

好处：

*  消除Javascript语法的一些不合理、不严谨之处;
 *  提高编译器效率，增加运行速度；

好处具体体现：

*  防止意外为全局变量赋值
 *  防止重名
 *  对只读属性修改时抛出异常

坏处：

*  一些在“正常模式”下可以运行的语句，在“严格模式”下将不能运行;
 *  同样的代码，在“严格模式”中，可能会有不一样的运行结果；

"use strict"是ECMAscript5添加的严格运行模式、这种模式使得JavaScript在更严格的条件下运行、使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
    提高编译器效率，增加运行速度；
    为未来新版本的Javascript标准化做铺垫。

> **47.你使用哪些工具和技术来调试 JavaScript 代码？(高频)**

1.  alert
2.  console.log
3.  Debugger断点（具体的说就是通过在代码中添加”debugger;”语句，当代码执行到该语句的时候就会自动断点。）

>  48**.事件绑定和普通事件有什么区别**

普通事件(onclick):直接触发事件,同一时间只能指向唯一对象,所以会被覆盖掉

var btn = document.getElementById("btn")
    btn.onclick = function(){
        alter("你好111")
    }
    btn.onclick = function(){
         alter("你好222")
    }

输出的结果只会有<**你好222**>，一个click处理器在同一时间只能指向唯一的对象。所以就算一个对象绑定了多次，其结果只会出现最后的一次绑定的对象。

事件绑定(addEventListener):事件绑定就是对于一个可以绑定的事件对象，进行多次绑定事件都能运行

var btn = document.getElementById("btn");
    btn.addEventListener("click",function(){
    	alert("你好111");
    },false);
    btn.addEventListener("click",function(){
    	alert("你好222");
    },false);

运行结果会依次弹出**你好111，你好222**的弹出框。

区别:

addEventListener对任何DOM都是有效的，而onclick仅限于HTML.

addEventListener可以控制listener的触发阶段,（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除。

> **49.ajax请求时，如何解析json数据**

json.parse

> **50.阻止默认事件**

return false

> **51.捕获异常的方法？(高频)**

try\{\} catch(e)\{\} finally()\{\}

> **52.ajax原理：**

1.  创建对象   var xhr = new XMLHTTPRequest()
2.  打开请求  xhr.open('GET','example.txt',true)
3.  发送请求  xhr.send()
4.  接收响应数据  xhr.onready.stateChange = function()

> **53.什么是json**

前后台交互的一种数据格式

> **54.怎样判断2个对象相等**

JSON.stringfiy == JSON.stringify(obj)

> **55.ajax同步,异步的区别**

async的值不同,分为同步和异步

同步async:false

异步async:true

> **56.Math的方法**

*  `Math.abs()`: 取绝对值； 
 *  `Math.floor()` : 向下取整 
 *  `Math.ceil()` : 向上取整    console.log(Math.ceil(.95));     // 1
 *  `Math.max()` : 取最大值    // console.log(Math.max(1,3,2)     //  3
 *  `Math.min()` : 取一组数的最小值         // console.log(Math.min(1,3,2)    // 1
 *  `Math.random()` 取随机数，取值范围\[0,1) 
 *  `Math.round()`: 四舍五入取整 
 *  取m-n之间的随机整数：`Math.round(Math.random()*(n-m)+m)` 
 *  `Math.pow()` : 取幂次方 
 *  `Math.sqrt()` : 开平方；

> 57.如何获取js中三个数的最大值和最小值

*  Math.max（a,b,c)    // 最大值
 *  Math.min(a,b,c)     // 最小值

> **58.Date的实例**

*  console.log(typeof new Date());
 *  // "object"
 *  console.log(new Date());
 *  // 获取本机的系统时间；
 *  var time = new Date();
 *  console.log(time.getFullYear());
 *  // 获取时间年；
 *  console.log(time.getMonth())
 *  // 获取时间月 取值范围【0-11】
 *  console.log(time.getDate());
 *  // 获取时间日【1-31】
 *  console.log(time.getDay());
 *  // 获取星期几；【0-6】 星期日是0；
 *  console.log(time.getHours())
 *  // 获取小时数 【0-23】
 *  console.log(time.getMinutes());
 *  // 获取分钟数 【0-59】
 *  console.log(time.getSeconds());
 *  // 获取时间秒【0-59】 console.log(time.getMilliseconds());
 *  // 获取毫秒数【0-999】
 *  console.log(time.getTime());
 *  // 当前时间距离1970-1-1日早上八点的毫秒数；
 *  console.log(Date.now());

> **59.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26**

考点：日期对象Date相关API的使用

var d = new Date();

> **60.设置定时器**

1) setTimeout(cb,ms) 
    2) setInterval(cb,ms)

相同点：全局函数在指定的毫秒（ms)内执行指定函数（cb)

区别：

setTimeout(cb,ms) ：只执行一次指定函数

function printHello(){
        console.log( "Hello, World!");
    }
    // 两秒后执行以上函数
    var timer = setTimeout(printHello, 2000);
    
    //清除定时器
    clearTimeout(timer)

setInterval(cb,ms)方法会不同的调用，知道clearInterval()被调用或关闭窗口

function printHello(){
       console.log( "Hello, World!");
    }
    // 两秒后执行以上函数
    var timer = setInterval(printHello, 2000);
    
    // 清除定时器
    clearInterval(timer);

> **61.清除定时器**

1) clearTimeout() 
    2) clearInterval()

> **62.js延迟加载的方式有哪些？**

js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。

1.  使用setTimeout延迟方法
2.  让js最后加载(把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度)
3.  加loading
4.  给 js 脚本添加 defer属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
5.  给 js 脚本添加 async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
6.  动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

> **63.看代码给答案。**

var a = new Object();  // 引用数据类型
    a.value = 1;
    b = a; //b.value=1
    b.value = 2;//b.value=2;a.value=2，因为a和b指向同一块引用类型的值
    alert(a.value);

答案：2

var a = 1;//基本数据类型
    b = a;
    b = 2;
    console.log(a)

答案:1

> **64.看下列代码，将会输出什么?**

考点：1、变量作用域 2、变量声明提升

var foo = 1;
    function f(){
        console.log(foo);  // 它只会找函数里面最近的,代码从上往下加载,所以是undefined
        var foo = 2;
        console.log(foo);     // 2
    }
    f();

输出undefined 和 2。

> 65.foo = foo||bar ，这行代码是什么意思？为什么要这样写？

var foo;
    if(foo){
        foo=foo;
    }else{
        foo=bar;
    }

答案：常用于函数参数的空判断  
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。  
考点：if条件的真假判定  
记住以下是false的情况：空字符串、false、undefined、null、0

> **66.请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。(高频),怎么解决异步问题(高频)**

举例子:

同步:如果在同一时间内有很多任务的话,这些任务需要排队,一个一个的执行,前一个任务执行完，才会执行下一个任务.

// 同步代码
    function fun1() {
      console.log(1);
    }
    function fun2() {
      console.log(2);
    }
    fun1();
    fun2();
    
    // 输出
    1
    2

异步:如果在同一时间内有很多任务的话,这些任务不需要排队就可以去完成.任务都完成就结束了(我昨天是不是就是这样说的?公交车那个)

> **67.javascript的同源策略;跨域？** **(高频)**

同源策略：协议，域名，端口相同  
http,ftp:协议  
关键词解释：  
域名：localhost、www.baidu.com  
协议：http https ftp  
端口：一个网站对应着一个端口， http协议的默认端口：80  
https协议的默认端口是8083  
同源策略带来的麻烦：ajax在不同域名下的请求无法实现，  
如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

跨域：指的是浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的，是浏览器对js施加的安全限制。  
跨域解决方式一

通过CORS解决（最常用的方案，安全，可靠）

跨域资源共享CORS（Cross-Origin Resource Sharing）:属于跨源AJAX请求的根本解决方法

xhrFields.withCredentials = true   // 前端设置是否带cookie

1.普通跨域请求：只需服务端设置Access-Control-Allow-Origin

2.带cookie跨域请求：前后端都需要进行设置

//java中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：
        header("Access-Control-Allow-Origin: *")

3.通过jsonp跨域：服务器与客户端跨源通信的常用方法

*  优点：简单适用，兼容性好
 *  缺点：只支持get请求，不支持post请求。

// Vue
    this.$http.jsonp('http://www.domain2.com:8080/login',{
        params:{},
        jsonp:'handleCallback'
    }).then((res) =>{
        console.log(res)
    })

3.nginx代理跨域

4.nodejs中间件代理跨域

> **68.js（es5)类:用的构造函数；es6类用的:class类(高频)**

es5:

*  获取对象： new 类名称（）
 *  访问：对象.成员

es6:

function 类名称（）\{...\}   // 与方法不同的是：类名称首字母要大写

// es5 定义类的方法 向类中添加属性
    function Person(name){
        this.name = name;        // 在类内部定义一个属性
        this.say = function(){ alter(this.name)}
    }
    var p1 = new Person('zh')
    p1.say()
    alert(typeof (p1));//object
    alert(typeof (Person('zhh')));//Undefined 函数没有返回值则为Undefined
    alert(typeof(Person));//function
    
    
    // es6 通过class关键字 定义类
    class Point{
        constructor(x,y){
            this.x = x;
            this.y = y;
        }
        toString(){
            return '(' + this.x + ',' + this.y + ')'
        }
    }

//第一种定义类的方法，类中增加属性
        function Person(name) {
           this.Name = name;//在类内部定义一个属性
           this.say = function () {
             alert(this.Name);
         }
        };
        var p1 = new Person('zhh');
           p1.say();
           alert(typeof (p1));//object
           alert(typeof (Person('zhh')));//Undefined 函数没有返回值则为Undefined
           alert(typeof(Person));//function

class类:

1.通过class关键字,可以定于类

//定义类
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }

上面代码定义了一个“类”，可以看到里面有一个`constructor`方法，这就是构造方法，而`this`关键字则代表实例对象。也就是说，ES5的构造函数`Point`，对应ES6的`Point`类的构造方法。

3、定义“类”的方法的时候，前面不需要加上`function`这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

4.构造函数的`prototype`属性，在ES6的“类”上面继续存在。事实上，类的所有方法都定义在类的`prototype`属性上面。

class Point {
      constructor(){
        // ...
      }
    
      toString(){
        // ...
      }
    
      toValue(){
        // ...
      }
    }
    
    // 等同于
    
    Point.prototype = {
      toString(){},
      toValue(){}
    };

5、`Object.assign`方法可以很方便地一次向类添加多个方法。

class Point {
      constructor(){
        // ...
      }
    }
    
    Object.assign(Point.prototype, {
      toString(){},
      toValue(){}
    });

[JS CLass类 - 天天web学习 - 博客园][JS CLass_ - _web_ -]

> **69.js的三大特性：继承，封装，多态**

**1.封装：**是一个公共的方法

是当你需要隐藏一些属性和方法时，就可以将这些属性和方法封装起来，然后通过一个外部可以调用的特定接口进行调用。

function Person(name , age , sex){
        this.name = name ; //共有变量 
        var age = age ;  //私有变量
        var sex = sex ; //私有变量
        this.show = function (){
            console.log(age+"===="+sex);
        }
    }
    var person = new Person('Sunshine',18,'女');
    console.log(person.age);    // undefined
    console.log(person.name);   // Sunshine
    console.log(person.show());     // 18====女

请看代码后的注释，this指向的都是共有的属性和方法，而直接通过var声明的则属于私有变量（即外部不可访问变量），然后通过一个共有的show方法将私有的age和sex输出。当然show方法也要通过this声明才可以哟，否则的话show方法也是不可访问的。

好处：

*  提高代码复用性
 *  解耦
 *  提高网站的打开速度

**2.继承：**

就是当多个方法存在相同的属性和方法时，就把这些相同的属性和方法提取到一个公共的方法中，通过原型prototype继承该方法。当然你也可以通过call或apply来继承该方法中的属性和方法。

当然，个人感觉那个prototype没有说的很好，如果看到这篇博客的你有更好的建议或意见的话，欢迎给我留言。还有call和apply,其实它们的作用是一样的，都是改变this指向，然后它们的区别也可以从代码中看出，传参方式不同。

**3.多态 ：**

多态就是在执行同一操作且作用于不同对象时，返回不同的结果 。其实也就是把做什么和由谁去做分开，这样使得代码更容易维护，且条例清晰。直接上例子吧：

[Js三大特性--封装、继承以及多态\_sunshine的博客-CSDN博客\_js 多态][Js_--_sunshine_-CSDN_js]

> **70.js事件机制****（74.讲讲事件冒泡和事件捕获以及事件代理，**[事件委托][Link 3] **？）**

[JS中的事件、事件冒泡和事件捕获、事件委托 - 一粒一世界 - 博客园][Link 3]

js的事件机制：三个阶段：捕获，目标，冒泡

*  事件冒泡：事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。（事件的传播顺序为从事件开始的具体元素直到根节点）
 *  事件捕获：网景提出另一种事件流名为事件捕获与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。（事件的传播顺序为从根节点到触发的的具体元素）

上面的例子在事件捕获的概念下发生click事件的顺序应该是**document -> html -> body -> div -> p**

W3C事件阶段(event phase)：

[js事件机制 - 天之道利而不害 - 博客园][js_ - _ - 1]

> **71.prototype （原型链）**

当在一个对象上找一个属性的时候，要先在这个对象本身上找，所有对象上都有个\_proto\_属性 这个属性值是指向它构造函数的prototype的 如果对象本身没有这个属性 就会去找他的\_proto\_上找 （也就是构造函数的prototype）如果还没有就去 \_\_proto\_\_的\_\_proto\_\_上找 就这么一直找，找到了则返回，找不到则返回null，这个搜索的过程，就叫做原型链

> **72.原型指针 **

就是\_proto\_使指向它构造函数的原型

> **垃圾回收机制**

js觉得这块东西或者变量不需要了 就会发现，然后清除（js自动执行）

怎么解决

1.  标记清除法；
2.  引用计数：使用完直接赋值为空

[掘金][Link 4][掘金][Link 5]

> **72.SEO是什么？**Search Engine Optimization--搜索引擎优化

根据你收入的内容，浏览器检索出关键字

> 谈谈以前端角度出发做好SEO需要考虑什么？

Meta标签优化  
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。  
合理的标签使用

> **73.对象的深拷贝？ES6、ES5(高频)**

1.  浅拷贝：当原对象发生变化的时候，拷贝对象也跟着变化；
2.  深拷贝：另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化；

// 浅拷贝

var a = { count: 1, deep: { count: 2 } }
    var b = Object.assign({}, a)
    // 或者
    var b = {...a}

// 实现浅拷贝的第二种方法

ES6中的Object.assign方法，Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

Object.assign(target, ...sources)  
参数：

*  target：目标对象。
 *  sources：任意多个源对象。
 *  返回值：目标对象会被返回。

// 深拷贝:一般需要借助递归实现，如果对象的值还是个对象，要进一步的深入拷贝，完全替换掉每一个复杂类型的引用。

对象中可能又存在对象，所以需要深拷贝。首先需要知道这是一个递归调用，然后要判断一些特殊类型（数组，正则对象，函数）进行具体的操作，可以通过Object.prototype.toString.call(obj)进行判断。

// 手动复制--一个一个赋值
    var obj1 = { a: 10, b: 20, c: 30 };
    var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
    obj2.b = 100;
    console.log(obj1);
    // { a: 10, b: 20, c: 30 } <-- 沒被改到
    console.log(obj2);
    // { a: 10, b: 100, c: 30 }

var deepCopy = (obj) => {
        var ret = {}
        for (var key in obj) {
            var value = obj[key]
            ret[key] = typeof value === ‘object‘ ? deepCopy(value) : value
        }
        return ret
    }

> **讲讲Map和Set？**
> 
> ：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

1.  Map的key相比较普通对象来说更为灵活，普通对象的key只能以基础数据类型作为key值，并且所有传入的key值都会被转化成string类型，而Map的key可以是各种数据类型格式。
2.  Set可以讲讲它去重的特性。

**Set**  
成员唯一、无序且不重复  
\[value, value\]，键值与键名是一致的（或者说只有键值，没有键名）  
可以遍历，方法有：add、delete、has

**WeakSet**  
成员都是对象  
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏  
不能遍历，方法有add、delete、has

**Map**  
本质上是键值对的集合，类似集合  
可以遍历，方法很多可以跟各种数据格式转换

**WeakMap**  
只接受对象作为键名（null除外），不接受其他类型的值作为键名  
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的  
不能遍历，方法有get、set、has、delete

> ** 75.防抖节流**

1.   所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。（）[https://github.com/mqyqingfeng/Blog/issues/22][https_github.com_mqyqingfeng_Blog_issues_22]

**思路**  
每次触发事件时都取消之前的延时调用方法

/* 防抖 */
        function dou(fn, wait) {
            var time = null;
            return function () {
                clearTimeout(time)
                // time = setTimeout(function () {
                //  console.log(this)//window 
                //  fn.apply(this, arguments)//这样的话 this为window和直接 fn()调用是一样的效果，因为他们的this都是window
                // }, wait);
                time = setTimeout(() => {
                    // console.log(this)//div
                    fn.apply(this, arguments)//确保dou函数的this（上下文还是div）
                }, wait);
            }
        }
        function demo() {
            console.log('防抖啦')
        }
        // 用句柄事件绑定调用dou事件，所以this为div节点对象
        document.querySelector('div').addEventListener('scroll', dou(demo, 1000))

1.  所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。（[JavaScript专题之跟着 underscore 学节流 · Issue \#26 · mqyqingfeng/Blog · GitHub][JavaScript_ underscore _ _ Issue _26 _ mqyqingfeng_Blog _ GitHub]）

**思路**  
每次触发事件时都判断当前是否有等待执行的延时函数

/* 节流 */
        function throttle(func, wait) {
            var previous = 0;
            return function () {
                var now = +new Date();
                if (now - previous > wait) {
                    func.apply(this, arguments);
                    previous = now;
                }
            }
        }
        function getUserAction() {
            console.log(`每秒1秒内打印一次`)
        }
        document.querySelector('div').addEventListener('click', throttle(getUserAction, 1000))

解决方法：加定时器，加loading

> **76.async/await**

async await 是用来解决异步的，async函数是Generator函数的语法糖

*   async函数：声明异步函数，返回promise对象
 *  await: 等待一个async函数的返回值

// async
    async function test(){
        return 'test'
    }
    test()
    // 控制台输出结果--返回的是一个promise对象
    返回值为 Promise {<resolved>: "test"}
     
     
    // await
    function getSomething(){
        return 'something'
    }
    async function testAsync(){
        return Promise.resolve('hello async')
    }
    async function test(){
        const v1 = await getSomething();
        const v2 = await testAsync()
        console.log(v1,v2)
    }
    test()
    // 控制台输入结果
    something hello async
    Promise {<fulfilled>: undefined}

[https://segmentfault.com/a/1190000007535316][https_segmentfault.com_a_1190000007535316]

> 77.Promise中的执行顺序（考察频率：高）

let promise = new Promise(function(resolve, reject) {
      console.log('Promise');
      resolve();
    });
     
    promise.then(function() {
      console.log('resolved.');
    });
     
    console.log('Hi!');
     
    // Promise
    // Hi!
    // resolved
    
    // 解析：上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

> ### 介绍下深度优先遍历和广度优先遍历，如何实现？ ###

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_9]

> **请分别用深度优先思想和广度优先思想实现一个拷贝函数？ **

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/10][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_10]

> **ES5/ES6 的继承除了写法以外还有什么区别？ **

先看ES5的继承（原型链继承）

ES6继承

class A {
      constructor(a) {
        this.name = a;
      }
      getName() {
        return this.name;
      }
    }
    
    class B extends A{
      constructor() {
        super();
      }
    }
    
    console.log(B.prototype.__proto__ === A.prototype); // true
    console.log(B.__proto__ === A); // true
    console.log(B.__proto__); // [Function: A]

对比代码可以知道，子类的继承都是成功的，但是问题出在，子类的 `__proto__` 指向不一样。

`ES5` 的子类和父类一样，都是先创建好，再实现继承的，所以它们的指向都是 `[Function]` 。

`ES6` 则得到不一样的结果，它指向父类，那么我们应该能推算出来，它的子类是通过 `super` 来改造的。

根据 [es6--阮一峰][es6--] 在class继承里面的说法，是这样子的：

**引用阮一峰的 `ECMAScript6入门` 的class继承篇**

子类必须在`constructor`方法中调用`super`方法，否则新建实例时会报错。这是因为子类自己的`this`对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用`super`方法，子类就得不到`this`对象。

ES5 的继承，实质是先创造子类的实例对象`this`，然后再将父类的方法添加到`this`上面（`Parent.apply(this)`）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到`this`上面（所以必须先调用`super`方法），然后再用子类的构造函数修改`this`。

1、class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。

2、class 声明内部会启用严格模式。

3、class 的所有方法（包括静态方法和实例方法）都是不可枚举的。

4、class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有\[\[construct\]\]，不能使用 new 来调用。

5、必须使用 new 调用 class。

6、class 内部无法重写类名

> ### setTimeout、Promise、Async/Await 的区别 ###

其中settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行； promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行；async函数表示函数里面可能会有异步方法，await后面跟一个表达式，async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。

> （头条、微医）Async/Await 如何通过同步的方式实现异步

async await 用于把异步请求变为同步请求的方式,第一个请求的返回值作为后面一个请求的参数,其中每一个参数都是一个promise对象

例如：这种情况工作中会经常遇到

(async () => {
        var a = await A();
        var b = await B(a);
        var c = await C(b);
        var d = await D(c);
    })();

> （头条）异步笔试题

请写出下面代码的运行结果

async function async1() {
        console.log('async1 start');
        await async2();
        console.log('async1 end');
    }
    async function async2() {
        console.log('async2');
    }
    console.log('script start');
    setTimeout(function() {
        console.log('setTimeout');
    }, 0)
    async1();
    new Promise(function(resolve) {
        console.log('promise1');
        resolve();
    }).then(function() {
        console.log('promise2');
    });
    console.log('script end');

> (携程)算法手写题

已知如下数组：

var arr = \[ \[1, 2, 2\], \[3, 4, 5, 5\], \[6, 7, 8, 9, \[11, 12, \[12, 13, \[14\] \] \] \], 10\];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

> (滴滴、挖财、微医、海康)JS 异步解决方案的发展历程以及优缺点。

**1. 回调函数（callback）**

setTimeout(() => {
            // callback 函数体
        }, 1000)

**缺点：回调地狱，不能用 try catch 捕获错误，不能 return\`  
回调地狱的根本问题在于**

**缺乏顺序性： 回调地狱导致的调试困难，和大脑的思维方式不符  
嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（控制反转,嵌套函数过多的多话，很难处理错误**

ajax('XXX1', () => {
            // callback 函数体
            ajax('XXX2', () => {
                // callback 函数体
                ajax('XXX3', () => {
                    // callback 函数体
                })
            })
        })

**优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）**

**2. Promise**  
Promise就是为了解决callback的问题而产生的。

Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，如果我们在 then 中 return ，return 的结果会被Promise.resolve() 包装

**优点：解决了回调地狱的问题**

ajax('XXX1')
            .then(res => {
                // 操作逻辑
                return ajax('XXX2')
            }).then(res => {
                // 操作逻辑
                return ajax('XXX3')
            }).then(res => {
                // 操作逻辑
            })

**缺点：无法取消 Promise ，错误需要通过回调函数来捕获**

**3. Generator**

特点：可以控制函数的执行，可以配合 co 函数库使用

function* fetch() {
            yield ajax('XXX1', () => { })
            yield ajax('XXX2', () => { })
            yield ajax('XXX3', () => { })
        }
        let it = fetch()
        let result1 = it.next()
        let result2 = it.next()
        let result3 = it.next()

**4. Async / await**  
async、await 是异步的终极解决方案

优点是：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题

缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

async function test() {
            // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
            // 如果有依赖性的话，其实就是解决回调地狱的例子了
            await fetch('XXX1')
            await fetch('XXX2')
            await fetch('XXX3')
        }

> （微医）Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？

const promise = new Promise((resolve, reject) => {
            console.log(1)
            resolve()
            console.log(2)
        })
    
        promise.then(() => {
            console.log(3)
        })
    
        console.log(4)

**执行结果是：1243**  
promise构造函数是同步执行的，then方法是异步执行的

> （兑吧）情人节福利题，如何实现一个 new

**先理清楚 new 关键字调用函数都的具体过程，那么写出来就很清楚了**

首先创建一个空的对象，空对象的 \_\_\_proto\_\_\_\_属性指向构造函数的原型对象  
把上面创建的空对象赋值构造函数内部的this，用构造函数内部的方法修改空对象  
如果构造函数返回一个非基本类型的值，则返回这个值，否则上面创建的对象

function _new(fn, ...arg) {
        var obj = Object.create(fn.prototype);
        const result = fn.apply(obj, ...arg);
        return Object.prototype.toString.call(result) == '[object Object]' ? result : obj;
    }

>  (网易)简单讲解一下http2的多路复用

[第 15 题：简单讲解一下 http2 的多路复用 · Issue \#14 · Advanced-Frontend/Daily-Interview-Question · GitHub][15 _ http2 _ _ Issue _14 _ Advanced-Frontend_Daily-Interview-Question _ GitHub]

> 谈谈你对TCP三次握手和四次挥手的理解

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_15]

> A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/21][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_21]

> 介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_22]

> 找出多维数组最大值

> 给字符串新增方法实现功能

> 找出字符串出现最多次数的字符以及次数

> sort背后原理是什么？

> JavaScript 中 this 是如何工作的

[JavaScript 中 this 是如何工作的 ？ - 前端の战士 - 博客园][JavaScript _ this _ _ - _ -]

一般this指向调用者，箭头函数的this,指向调用的父作用域

call ,apply,bind修改this

> **作用域**

全局作用域，函数作用域,eval作用域

内部函数可以访问外部函数就形成了作用域链，但外部没办法访问函数内部

> **如何规避javascript多人开发函数重名问题？**

尽量少的使用全局变量，尽可能使用局部变量

> **请说出三种减低页面加载时间的方法.**

*  优化图片
 *  优化CSS 
 *  减少http请求

> 说几条写JavaScript的基本规范？

1、不要在一行声明多个变量
    2、请使用===/!==来比较true/false或数值
    3、请使用对象字面量方式代替new Array这种形式
    4、不要使用全局函数、变量(函数不应该有时候有返回值、有时候没有返回值)
    5、Switch语句必须带default分支
    6、For循环必须使用大括号
    7、If语句必须使用大括号
    8、for-in循环中的变量、应该使用var关键字明确限定其作用域、从而避免作用域的污染

> JavaScript原型、原型链？有什么特点？

什么是原型：原型是一个对象、其他对象可以通过它实现属性继承(任何对象都可以成为原型)
    所有对象在默认情况下都有一个原型(原型本身就是个对象)
    什么是对象(任何无序键值对的集合)如果它不是基本数据类型、那它就是一个对象
    原型链：当我们访问这个对象的属性时、如果这个对象内部不存在这个属性、那么他就回去prototype里去查找、这个prototype又有自己的prototype属性。这样一直找下去。就是平时说的原型链概念
    关系：instance.constructor.prototype = instance.__proto__
    当我们需要一个属性时、JavaScript引擎会先查看当前对象中是否有这个属性
    如果没有、就会查找他的prototype对象是否有这个属性、依次递推下去、一直检索到Object内检对象
    function Func(){}
    Func.prototype.name = "shen";
    Func.prototype.getInfo = function(){
        return this.name;
    }
    var person = new Func();
    console.log(person.getInfo());
    console.log(Func.prototype);
     
    var a = {};
    a.__proto__ = Array.prototype;
    a.length;
    创建a、然后通过a的原型来达到继承Array这个已经存在的对象的功能。
    原型真正的美丽提现在多个实例、共用一个通用原型
    原型对象的属性一旦定义、就可以被多个引用它的实例所继承、性能和未还的意义是很强的(这也是构造函数存在的意义)
    每个函数都有一个原型属性。JavaScript没有在构造函数(constructor)和其他函数之间做区分。

> JavaScript有几种类型的值？能画一下他们的内存图吗？

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_16_color_FFFFFF_t_70_g_se_x_16][]

堆：原始数据类型(Undefined、Null、Boolean、Number、String)
    栈：引用数据类型(对象、数组、函数)
    两种类型的区别是：存储位置不同
    原始数据类型：直接存储在栈(stack)中的简单数据段、占据空间小、大小固定、属于被"频繁"使用的数据
    引用数据类型：存储在堆(heap)中、占据空间大、大小不固定、如果存储在栈中、将会影响程序运行的性能、
    引用数据类型在栈中存储了指针、该指针指向堆中该实体的起始地址。
    当解析器寻找引用值时、会首先检索其在栈中的地址、取得地址后从堆中获得

> JavaScript如果实现继承？

1、构造函数继承
    2、原型链继承
    3、实例继承
    4、拷贝继承
    原型prototype机制或apply和call方法去实现较简单、建议使用构造函数与原型混合方式
    function Parent(){
        this.name = "shen";
    }
    function Child(){
        this.age = 23;
    }
    Child.prototype = new Parent();
    var Demo = new Child();
    console.log(Demo.age);
    console.log(Demo.name);

>  什么是window对象? 什么是document对象?

Window对象是所有浏览器脚本的基础、Window对象是浏览器自动定义的顶层对象
    Document对象是文档的根节点。Window.document属性就是指向这个对象(只要浏览器开始载入HTML文档、这个对象就开始存在了、可以直接调用)、表示窗口中显示的当前文档对象

> 谈谈This对象的理解。

著作权归作者所有。
    商业转载请联系作者获得授权，非商业转载请注明出处。
    作者：萧强
    链接：https://www.zhihu.com/question/19636194/answer/25081397
    来源：知乎
     
    javascript 中的 this 有 五种情况：
    1.全局范围：它 会指向 全局对象（ 浏览器下指window）
    2.全局函数调用：它 还是指向全局对象。
    3.对象函数调用：调用某个对象的函数， 它指向 当前对象。
    4.使用 new 实例化对象时：它指向 新创建的 对象。
    5.调用某些方法时：如： Function.prototype 上的 call 或者 apply 方法 以及 with等它指向 传入的对象。

> 页面重构怎么操作？

*  结构完整，可通过标准验证
 *   标签[语义化][Link 6]，结构合理
 *  充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

> [js继承的6种方式][js_6]

[JS实现继承的几种方式 - 幻天芒 - 博客园][JS_ - _ -]

> new实现

[js new一个对象的过程，实现一个简单的new方法 - 听风是风 - 博客园][js new_new_ - _ -]

> **暂时性死区**

let 和 const 声明的变量不存在变量提升，其作用域都是块级作用域，凡是在声明变量之前使用变量就会报错，所以，在代码块内，使用`let`命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
      // 死区开始
      lzp = 'lut'; //  ReferenceError
      console.log(lzp); //  ReferenceError
     
      // 开始声明变量，死区结束
      let lzp; 
      console.log(lzp); // undefined
     
      lzp = 520;
      console.log(lzp); // 520
    }

> event

> loop

> **JS有三类的错误:（ JS 中的主要有哪几类错误）**

1.  **加载时错误**：加载web页面时出现的错误(如语法错误)称为加载时错误，它会动态生成错误。
2.  **运行时错误**：由于滥用HTML语言中的命令而导致的错误。
3.  **逻辑错误**：这些错误是由于对具有不同操作的函数执行了错误的逻辑而导致的

> **JS的作用域链是什么及其作用**

一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到**全局作用域**，这么一个查找过程形成的链条就叫做**作用域链**。

JS中的作用域链主要用于解析变量的值。 如果没有这个，在不同的作用域内定义了许多变量，JS很难为变量选择某个值。

> ** JS中如何将页面重定向到另一个页面？**

1.  使用 location.href：`window.location.href =“https://www.onlineinterviewquestions.com/”`
2.  使用 location.replace： `window.location.replace(" https://www.onlineinterviewquestions.com/;");`

> **列出JS中的一些设计模式:**

1.  **创建模式**：该模式抽象了对象实例化过程。
2.  **结构型模式**：这些模式处理不同的类和对象以提供新功能。
3.  **行为模式**：也称**发布-订阅模式**，定义了一个被观察者和多个观察者的、一对多的对象关系。
4.  **并行设计模式**：这些模式处理多线程编程范例。
5.  **架构设计模式**：这些模式用于处理架构设计。

> **如何在现有函数中添加新属性**

只需给现有函数赋值，就可以很容易地在现有函数中添加新属性。例如，现有一个对象`person`，通过下面的代码来为 `person` 添加新的属性：

person.country= “India”;

> ** JS中的宿主对象与原生对象有何不同？（** 请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？）

**宿主对象**:这些是运行环境提供的对象。这意味着它们在不同的环境下是不同的。例如，浏览器包含像`windows`这样的对象，但是**Node.js**环境提供像`Node List`这样的对象。 [Javascript内置对象、原生对象、宿主对象关系\_每天=生命的最后一天-CSDN博客][Javascript_-CSDN]

**原生对象**:这些是JS中的内置对象。它们也被称为全局对象，因为如果使用JS，内置对象不受是运行环境影响。

> ** js 获取原型的方法？**

*   p.proto
 *  p.constructor.prototype
 *  Object.getPrototypeOf(p)

从构造函数获得原型对象：  构造函数.prototype

从对象实例获得父级原型对象：1.对象实例.\_proto\_       2.Object.getPrototypeOf(对象实例）

> ** JS中为什么需要原型对象**

JS使用构造函数创建对象时，每个实例对象的方法都存放在独立的内存中，不能共享；使用原型对象可以解决上面浪费内存空间。

[https://jingyan.baidu.com/article/597a0643a743aa712b52439b.html][https_jingyan.baidu.com_article_597a0643a743aa712b52439b.html]

> ** JavaScript 原型，原型链？有什么特点？ **

每个对象都会在其内部初始化一个属性，就是prototype(原型)==(在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。)

function Person(age) {
        this.age = age       
    }
    Person.prototype.name = 'kavin'
    var person1 = new Person()
    var person2 = new Person()
    console.log(person1.name) //kavin
    console.log(person2.name)  //kavin

[javascript——原型与原型链 - 雅昕 - 博客园][javascript_ - _ -]

原型链：当我们去访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里面找这个属性，这个属性prototype就会有自己的prototype。  
就这样一层一层的寻找，也就是我们平时所说的原型链的概念。

关系

instance.constructor.prototype=instance._proto_

JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与  
之相关的对象也会继承这一改变。

> **什么是DOM和BOM**

*  **DOM**  指的是文档对象模型，它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。
 *  **BOM**  指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。

BOM  
的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）  
对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 locati  
on 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对  
象的子对象。

> ** 三种事件模型是什么？ **

**事件** 是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型。

1.  **DOM0级模型：** ，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js属性来指定监听函数。这种方式是所有浏览器都兼容的。
2.  **IE 事件模型：** 在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。
3.  **DOM2 级事件模型：** 在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。

> **常用的正则表达式 **

暂时先不了解

> **谈谈你对模块化开发的理解？ **

1.   我对模块的理解是，一个模块是实现一个特定功能的一组方法。在最开始的时候，js 只实现一些简单的功能，所以并没有模块的概念，但随着程序越来越复杂，代码的模块化开发变得越来越重要。
2.  由于函数具有独立作用域的特点，最原始的写法是使用函数来作为模块，几个函数作为一个模块，但是这种方式容易造成全局变量的污染，并且模块间没有联系。
3.  后面提出了对象写法，通过将函数作为一个对象的方法来实现，这样解决了直接使用函数作为模块的一些缺点，但是这种办法会暴露所有的所有的模块成员，外部代码可以修改内部属性的值。
4.  现在最常用的是立即执行函数的写法，通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。

> ** js 的几种模块规范？ **

js 中现在比较成熟的有四种模块加载方案：

*  第一种是 CommonJS 方案，它通过 require 来引入模块，通过 module.exports 定义模块的输出接口。这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。
 *  第二种是 AMD 方案，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范。
 *  第三种是 CMD 方案，这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同。
 *  第四种方案是 ES6 提出的方案，使用 import 和 export 的形式来导入导出模块。这种方案和上面三种方案都不同。

> **requireJS的核心原理是什么？ **

require.js 的核心原理是通过动态创建 script 脚本来异步引入模块，然后对每个脚本的 load 事件进行监听，如果每个脚本都加载完成了，再调用回调函数。

> **谈谈JS的运行机制 **

*   所有同步任务都在主线程上执行，形成一个执行栈
 *  主线程之外还有一个“任务队列”。只要异步任务有了结果，就在“任务队列”之中放置一个事件
 *  一旦“执行栈”中所有同步任务都执行完成，系统就会读取“任务队列”，看看里面有哪些事件，哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
 *  主线程不断重复上面第三步

>  **事件循环**

主线程从“任务队列”中读取事件，这个过程是不断循环的 ，所以整个的这种运行机制就是事件循环

> **60.宏任务和微任务**

*  任务队列里面包括宏任务和微任务
 *  宏任务和微任务就是区分异步里面谁先执行
 *  先执行微任务再执行宏任务（有微则微 无微则宏）
 *  异步里先执行promise这种，最后执行settimeout这种，nexttick也是微任务
 *  同步肯定按顺序执行

> 61.JavaScript事件循环机制相关问题

关键字：单线程非阻塞、执行栈、事件队列、宏任务(setTimeout()、setInterval(),setTimeout、setInterval、script、setImmedate、IO、Promise.resolve)、微任务(new Promise(),process.nextTick、Promise、async await、mutation observer)

*  宏任务、微任务、同步任务的执行顺序
    
        setTimeout(function () {
            console.log(1);
        });
         
        new Promise(function(resolve,reject){
            console.log(2)
            resolve(3)
        }).then(function(val){
            console.log(val);
        })
        console.log(4);
        // 2
        // 4
        // 3
        // 1
    
    先按顺序执行同步任务，Promise新建后立即执行输出2，接着输出4，异步任务等同步任务执行完后执行，且同一次事件循环中，微任务永远在宏任务之前执行。这时候执行栈空了，执行事件队列，先取出微任务，输出3，最后取出一个宏任务，输出1。

事件循环--浏览器

执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。

> **62.重绘和回流 **

*  重绘：当页面中元素 样式改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将样式赋予给元素并重新绘制它，这个过程称为重绘。
 *  回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
 *  回流要比重绘消耗性能开支更大。
 *  回流必将引起重绘，重绘不一定会引起回流。

> **对象是什么？ **

arguments对象是函数中传递的参数值的集合。它是一个类似数组的对象，因为它有一个length属性，我们可以使用数组索引表示法arguments\[1\]来访问单个值，但它没有数组中的内置方法，如：forEach、reduce、filter和map。

我们可以使用Array.prototype.slice将arguments对象转换成一个数组。

function one() {
      return Array.prototype.slice.call(arguments);
    }

注意:箭头函数中没有arguments对象。

当我们调用函数four时，它会抛出一个`ReferenceError: arguments is not defined error`。使用rest语法，可以解决这个问题

const four = (...args) => args;

这会自动将所有参数值放入数组中。

>  ES6 模块与 CommonJS 模块、AMD、CMD 的差异。

[https://blog.csdn.net/u013681954/article/details/97299399][https_blog.csdn.net_u013681954_article_details_97299399]

>  generator

调用之后会返回一个value、next 和done，value表示当前的值，done表示是否结束，结束后值为 true，每次执行都需要调用next才会继续执行

es6==============================================

> **1.const let var 区别？**

*  var声明变量存在变量提升，let和const不存在变量提升
 *  let声明变量和const声明常量，两个都可以形成块级作用域
 *  const声明之后必须赋值，否则会报错;一旦赋值就不能改变,为什么不能改变？因为是全局的
 *  var是不受限于块级的，而let是受限于块级
 *  ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
 *  const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
 *  var会与window相映射（会挂一个属性），而let不与window相映射

> **2.变量提升:变量提升会优先声明**

变量提升意思是 var声明变量时 先声明 再赋值

var a = 5;
    function test3(){
            var a;
            cosnole.log(a)
    }
    test3();      ------------>undefined
      
    
    var a = 5;
    function test3(){
    var a = 3;
    console.log(a)
    }
    test3()    -------------->3 (变量提升）

函数提升：将整个代码块提升到他所在的作用域，最开始执行

var a = 1;
    function foo() {
    var a = function(){} ----->函数提升
    a = 10;
    console.log(a)------------10
    return
    }
    foo()
    console.log(a)--------------1

匿名函数不会被提升

> **3.什么是匿名函数**

*  语法:(function()\{...\}());
 *  前面的括号包含函数体，后面的括号就是给匿名函数传递参数并立即执行之
 *  匿名函数的作用是避免全局变量的污染以及函数名的冲突
 *  小括号的作用:小括号对返回的，就是一个匿名函数的Function 对象

(function(x,y){
    alert(x+y);
    return x+y;
    }(3,4));

[JS匿名函数理解 - 辉夜 - 博客园][JS_ - _ - 1]

> **4.JS执行上下文**

当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫做执行上下文。 （代码从上往下执行的过程就是执行上下文）

运行环境:

*  全局执行上下文，函数上下文与eval上下文(全局环境)
 *  全局上下文指：window对象(全局环境)
 *  函数上下文：指this自己(.函数环境)
 *  eval上下文：一般不会用

> **5.js中this对象的指代**

*  全局环境中this指向window对象
 *  当前函数中，this指当前对象
 *  箭头函数没有this指向，this指向就箭头函数外部的函数，指向上下文

> 谈谈This对象的理解。

著作权归作者所有。  
商业转载请联系作者获得授权，非商业转载请注明出处。  
作者：萧强  
链接：https://www.zhihu.com/question/19636194/answer/25081397  
来源：知乎  
   
javascript 中的 this 有 五种情况：  
1.全局范围：它 会指向 全局对象（ 浏览器下指window）  
2.全局函数调用：它 还是指向全局对象。  
3.对象函数调用：调用某个对象的函数， 它指向 当前对象。  
4.使用 new 实例化对象时：它指向 新创建的 对象。  
5.调用某些方法时：如： Function.prototype 上的 call 或者 apply 方法 以及 with等它指向 传入的对象。

>  如何判断一个对象是否属于某个类

if(spear instanceof Array)\{console.log('yes');\}

> **6.箭头函数，使用箭头函数应注意什么？**

优点:

*  语法简洁,函数定义不再使用关键字function(),而是用()=>来进行定义
 *  解决了this指向的问题,有一个确定的作用域
 *  如果只有一个形参，可以不打小括号
 *  如果只有一条执行语句，可以不打大括号
 *  只有一条执行语句，并且需要返回这条语句的结果，可以不用写return

注意:

1.  用了箭头函数，this就不是指向window，而是父级（指向是可变的）
2.  不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
3.  不能够使用arguments对象
4.  不可以使用yield命令，因此箭头函数不能用作 Generator 函数

举例子：

箭头函数的写法：
    // ES5
    var x = function(x, y) {
         return x * y;
    }
     
    // ES6
    const x = (x, y) => x * y;

*  箭头函数是匿名函数的一种简写方式
 *  （）内是参数，一个参数的时候可以省略
 *  =>后面是返回值，省略了return
 *  词法作用域，不会绑定this;箭头函数会默认绑定外层的this的值，所以箭头函数中this的值和外层this的值是一样的
 *  如果函数部分只是一个语句，则可以省略return关键字和大括号\{\}

以下两者等价
    const x = (x, y) => x * y;
     
    const x = (x, y) => { return x * y };

> **7.模板字符串**

模版字符串，用\`（反引号）标识，用$\{\}将变量括起来。

var name="zzw";
    `${name},no matter what you do,I trust you.`

[ES6模板字符串 - WhiteSpace - 博客园][ES6_ - WhiteSpace -]

> **8. ... 展开运算符**

可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

数组合并的时候用

// 数组合并
    var array1 = [1, 2, 3,4];
    var array2 = [4, 5, 6];
    var array3 = [...array1, ...array2, 7, 8]; //[1,2,3,4,4,5,6,7,8]
    array1.push(...array2 )// 当然也可以使用concat等数组合并方法，但是扩展运算符提供了一种新的方式

> **结构赋值 **

所谓的解构赋值其实就是分解出一个对象的解构，分成两个步骤：

1.  变量的声明
2.  变量的赋值

let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type, name } = node;
    console.log(type); // "Identifier"
    console.log(name); // "foo"

> **9.promise(异步)--解决异步问题**

promise是回调地狱的一个解决方案

promise是一个对象,可以获取异步操作的消息,promise提供统一的API,各种异步操作都能处理

2个特点:

*  对象的状态不受外界影响 （3种状态）
    
     *  Pending状态（进行中）
     *  Fulfilled状态（已成功）
     *  Rejected状态（已失败）
 *  一旦状态改变就不会再变 （两种状态改变：成功或失败）
    
     *  Pending -> Fulfilled
     *  Pending -> Rejected

var promise = new Promise(function(resolve, reject){
        // ... some code
        if (/* 异步操作成功 */) {
            resolve(value);
        } else {
            reject(error);
        }
    })

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是`resolve`和`reject`。它们是两个函数，由JavaScript引擎提供，不用自己部署。  
 resolve作用是将Promise对象状态由“未完成”变为“成功”，也就是`Pending -> Fulfilled`，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；而reject函数则是将Promise对象状态由“未完成”变为“失败”，也就是`Pending -> Rejected`，在异步操作失败时调用，并将异步操作的结果作为参数传递出去。

**then:**

Promise实例生成后，可用`then`方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数：

1.  Promise对象状态改为Resolved时调用 （必选）
2.  Promise对象状态改为Rejected时调用 （可选）

routeInfo (type = 'edit') {
        return new Promise((resolve, reject) => {
          this.listData(type).then(result => {
            return new Promise((resolve) => {
              let res = result.list[0]
              if (result.list.length !== 1) {
                console.warn('待办结果不唯一')
              }
              resolve(res)
            })
          }).then(res => {
            this.dataValidator(res, type).then(res => {
              resolve({
                name: this.info[this.typeCode][type].routerName,
                query: this.info[this.typeCode][type].query(res),
                params: this.info[this.typeCode][type].params && this.info[this.typeCode][type].params(res)
              })
            }).catch(e => {
              reject(e)
            })
          }).catch(e => {
            reject(e)
          })
        })
      }

**all:**多个请求一起发出并根据请求顺序获取和使用数据的场景

getData () {
          Promise.all([
            this.getCreditData(),
            this.getProjectData()
          ]).then(result => {
          }).finally(() => {
            this.loading.detail = false
          })
        },

** catch:**reject状态时才会进入,捕获错误信息

let p2 = new Promise((resolve, reject) => {
            reject('123');
    }).catch(e => e);

**finally() :**成功失败都进finally

finally()方法用于指定不管Promise对象最后状态如何，都会执行的操作。

Promise.then(result => \{\}).catch(error => \{\}).finally(() =>\{\})

[图灵社区][Link 7]

> **10.Symbol（第七种基本数据类型）**

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

好处：用来定义对象的唯一属性名（类似于id一样是唯一标识）

缺点：

Symbol类型是不能通过Object.keys()或者for...in来枚举,因为不包含在对象自身的属性名集合(property name)中

因此：使用JSON.stringify()将对象转成JSON字符串的时候，Symbol这个属性也会排除在外

（1）**为什么引入Symbol?**

之前的对象属性名是字符串,容易造成属性名冲突

**（2）typeof运算符用于Symbol类型值,返回symbol**

let name = Symbol()
    console.log(typeof name)   // Symbol

（3)**Symbol的值和谁都不相等,是独一无二的值.**

let symbol1 = Symbol()
     let symbol2 = Symbol()
     console.log(symbol1 === symbol2)  // false
     console.log(symbol1 == symbol2)   // false
     symbol1和symbol2相等吗?

不相等.因为Symbol类型的值是独一无二的值.

（4）**.为什么Symbol不能用new关键字?**

let obj = new Symbol()     // TypeError

symbol值不是对象，所以不能添加属性

（5）**console.log(Symbol(‘Alice’) + “bruce”)   // TypeError,为什么错误?**

Symbol值不能与其他类型的值进行运算

（6）**如何读取Symbol的属性值?**

let name = Symbol()
     let obj = {}
     obj[name] = “Alice”
     cosnole.log(obj[name])

Symbol值定义属性时，必须放在方括号内，不能用点运算符。

（7）Symbol的值显示的转成字符串或者布尔值,但是不能转成数值.

（8）获取对象属性的两种方法

Object.getOwnPropertySymbols()   和  Object.getOwnPropertyNames()

> **11.set数据结构**

**理解：**  
Set本身是一个构造函数，用来生成Set数据结构。类似于数组，但是成员的值是唯一分，不重复的。

**用法**:

1.//  数组去重
      [...new Set([1,2,3,3])]  // [1,2,3]
    //  字符串去重
      [...new Set([‘zyy’])].join(‘’)   // ‘zy’

**注意**:

向Set加入值的时候，不会发生类型转换，所以5和’5’是两个不同的值。Set内部判断两个值是否不同，使用的算法叫做“same-value-zero equality”,它类似于精确相等运算符（===）

let set = new Set()
    set.add(NaN)
    set.add(NaN)
    console.log(set)   // Set{NaN}
    // 也就是说NaN是相等的
    let set = new Set()
    set.add({})
    set.add({})
    console.log(set.size)		// 2
    // 也就是说，上面的2个空对象是不相等的

> ** 什么是\`Set\`对象，它是如何工作的？ **

**Set** 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

[什么是\`Set\`对象，它是如何工作的？-码云笔记][Set_-]

> 什么是Proxy？ （代理--不会）

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

> 数组去重有几种方法

[...new Set(arr)]

let arr = [1,2,3,4,4,1]
    let newArr = arr.reduce((pre,cur)=>{
        if(!pre.includes(cur)){
          return pre.concat(cur)
        }else{
          return pre
        }
    },[])
    console.log(newArr);// [1, 2, 3, 4]

=================================================================================(下面不是高频的)

> 11.Map

**理解：**

类似于对象，也是键值对的集合，但”键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Object结构提供了”字符串-值” 的对应，Map结构提供了”值-值”的对应，是一种更完善Hash结构实现。

**用法:**

const map = new Map({
    [‘name’: ‘张三’],
    ['title', 'Author']
    })
    map.size  // 2
    map.has(‘name’)  // true
    map.get(‘name’)  // ‘张三’

经典题：  
set特点：是构造函数    类似于数组，但是里面的值是唯一的  
1.实现数组去重和set的交集，并集，差集

// 数组去重
    console.log([...new Set([1,2,2])])    // [1,2]
    console.log(Array.from(new Set([1,2,2])))   //[1,2]
    
    let set1Arr = new Set([1,2,3])
    let set2Arr = new Set([2,3,4])
    // 交集
    let jiao = new Set([...set1Arr].filter(x => set2Arr.has(x)))
    console.log(“jiao”,jiao)  // set(2){2,3}
    // 并集
    console.log( new Set([...set1Arr,...set2Arr]))  // Set(4){1,2,3,4}
    // 差集
    let cha = new Set([...set1Arr].filter(x => !set2Arr.has(x)))
    console.log(“cha”,cha)   // 	Set(1) {1}

给定一个整数无序数组和变量 sum，如果存在数组中任意两项和使等于 sum 的值，则返回true。否则, 返回false。例如，数组\[3, 5, 1, 4\]和 sum = 9，函数应该返回true，因为4 + 5 = 9。

//常规版本
    const findSum = (arr, val) => {
       let searchValues = new Set();
       searchValues.add(val - arr[0]);
       for (let i = 1, length = arr.length; i < length; i++) {
            let searchVal = val - arr[i];
            if (searchValues.has(arr[i])) {
              return true;
            } else {
            searchValues.add(searchVal);
             }
          };
         return false;
    };
    
    
    //简洁的版本：
    const findSum = (arr, sum) =>
    arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));
    
    let findS = findSum([3, 5, 1, 4], 9)
    console.log(findS) //true

Set上的forEach()方法

forEach()方法还会被传递一个回调函数，该回调函数接受3个参数

1.  Set中下个位置
2.  与第一个参数相同的值
3.  目标Set本身

由于Set没有键，为了使forEach方法与数组和map的forEach方法一致：将Set中的每一项同时认定为键与值。

let set = new Set([1, 2]);
     set.forEach(function(value, key, ownerSet) { 
    console.log(`${key} ${value}`) 
    console.log(ownerSet === set); 
    })
    1 1
    True
    2 2
    True

> 8.解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

类模板字符串的功能

[js面试笔试--ES6的解构\_evior-CSDN博客][js_--ES6_evior-CSDN]

> 9.import、export导入导出

ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

>  9.修饰器 @

decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

> 10.class 类的继承

ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

> 23.Promise 中reject 和 catch 处理上有什么区别

reject 是用来抛出异常，catch 是用来处理异常

reject 是 Promise 的方法，而 catch 是 Promise 实例的方法

reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch

网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

> 14.Proxy代理

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

> 15.ECMAScript 6 怎么写 class ，为何会出现 class？

ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

//定义类
    class Point { 
      constructor(x,y) { 
          //构造方法
           this.x = x; //this关键字代表实例对象
           this.y = y; 
      } toString() {
           return '(' + this.x + ',' + this.y + ')'; 
      }
    }

> 21.字符串的截取两个方法（subString subStr）的区别？

1.  stringObject.substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符
2.  stringObject.substring(start,stop): 用于提取字符串中介于两个指定下标之间的字符

> 19.下面的输出结果是多少

const promise = new Promise((resolve, reject) => {
        console.log(1);
        resolve();
        console.log(2);
    })
    
    promise.then(() => {
        console.log(3);
    })
    
    console.log(4);

1 2 4 3

Promise 新建后立即执行，所以会先输出 1，2，而 `Promise.then()` 内部的代码在 当次 事件循环的 结尾 立刻执行 ，所以会继续输出4，最后输出3

> 20.使用结构赋值，实现两个变量的值的交换

let a = 1;let b = 2;
    [a,b] = [b,a];

> 21.设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key

let name = Symbol('name');
     let product = {
        [name]:"洗衣机",    
        "price":799
      };
      Reflect.ownKeys(product);

> 22.下面Set结构，打印出的size值是多少

let s = new Set();
    s.add([1]);
    s.add([1]);console.log(s.size);

答案：2

两个数组\[1\]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值

都能存储到Set结构中，所以size为2

> 24.使用class 手写一个promise

//创建一个Promise的类
      class Promise{
        constructor(executer){//构造函数constructor里面是个执行器
          this.status = 'pending';//默认的状态 pending
          this.value = undefined//成功的值默认undefined
          this.reason = undefined//失败的值默认undefined
          //状态只有在pending时候才能改变
          let resolveFn = value =>{
            //判断只有等待时才能resolve成功
            if(this.status == pending){
              this.status = 'resolve';
              this.value = value;
            }
          }
          //判断只有等待时才能reject失败
          let rejectFn = reason =>{
            if(this.status == pending){
              this.status = 'reject';
              this.reason = reason;
            }
          }    
          try{
            //把resolve和reject两个函数传给执行器executer
            executer(resolve,reject);
          }catch(e){
            reject(e);//失败的话进catch
          }
        }
        then(onFufilled,onReject){
          //如果状态成功调用onFufilled
          if(this.status = 'resolve'){
            onFufilled(this.value);
          }
          //如果状态失败调用onReject
          if(this.status = 'reject'){
            onReject(this.reason);
          }
        }
      }

> 26.将下面for循环改成for of形式

let arr = [11,22,33,44,55];
    let sum = 0;
    for(let i=0;i<arr.length;i++){
        sum += arr[i];
    }

答案：

let arr = [11,22,33,44,55];
    let sum = 0;
    for(value of arr){
        sum += value;
    }

> **28.forEach、for in、for of三者区别**

forEach更多的用来遍历数组
    for in 一般常用来遍历对象或json
    for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
    for in循环出的是key，for of循环出的是value

> 29.说一下es6的导入导出模块

// 只导入一个
    import {sum} from "./example.js"
    // 导入多个
    import {sum,multiply,time} from "./exportExample.js"
    // 导入一整个模块
    import * as example from "./exportExample.js"

导出通过export关键字

//可以将export放在任何变量,函数或类声明的前面
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    export var year = 1958;
    
    //也可以使用大括号指定所要输出的一组变量
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export {firstName, lastName, year};
    
    //使用export default时，对应的import语句不需要使用大括号
    let bosh = function crs(){}
    export default bosh;
    import crc from 'crc';
    
    //不使用export default时，对应的import语句需要使用大括号
    let bosh = function crs(){}
    export bosh;
    import {crc} from 'crc';

> `13.`堆栈内存(没看)

当浏览器加载页面时，会形成两个虚拟的内存；一个栈内存，堆内存；

栈内存：

1.  提供代码的运行环境；
2.  存储基本数据类型；

堆内存： `存储引用数据类型`；

> 28.函数的递归

递归： 针对的是函数； 是JS中一种重要的思想；   
函数： 分为定义和执行   
函数递归： 在函数体内部，调用函数自己本身，让其执行；这就是递归；

> 29.求1-100之间是3倍数的和（% : 取模；取余数）

var total = 0;
    for(var i=0;i<100;i++){
    if(i%3===0){
    total += i;
    }
    }

> 30.数组的插入排序

> 30.数组的冒泡排序

> 31.数组的快速排序（`快速排序快速排序的原理`： 首先取原有数组中的中间项；接下来循环原有的数组每一项，和中间项进行比较，如果比中间项的小的放在左边的数组中，比中间项大的放在右边的数组中；然后再对左边和右边数组进行刚才的操作；最后把所有的小数组和中间项串在一起就是排好的数组；）

> 32.随机验证码

var code = document.getElementById("code");
    function getCode() {
    // 准备一个62个字符串；
    // 产生随机数；随机数可以作为字符的索引；
    // 随机索引范围【0-61】
    var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    // 随机数；
    var i =0;
    var newStr = "";
    while(i<4){
    var num = Math.round(Math.random()*(61-0)+0);
    newStr+=str[num];
    i++;
    }
    code.innerHTML = newStr;
    }
    getCode();
    // 把函数的空间地址赋值给code的onclick属性；
    code.onclick = getCode;

> 43.看下列代码会有什么样的输出？

var foo = "11"+2-"1";  
    console.log(foo);//112-1=111
    console.log(typeof foo);//”number”

考点：  
1、数字和字符串都可以用加法运算符，数字和字符串相加，结果就是一个字符串  
2、但是减法运算符只能用于两个数字之间，想要执行减法运算，必须把两边数字都变成数字类型的  
答案：”111”、”number”

> 45.已知数组var stringArray = \[“This”, “is”, “Baidu”, “Campus”\]，alert出”This is Baidu Campus”。

考点：数组的join方法的使用,将一个数组通过指定字符分隔组成一个想要的字符串  
答案：alert(stringArray.join(“ ”))

> 46.已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

function combo(msg){
        var arr=msg.split("-");//[get,element,by,id]
        for(var i=1;i<arr.length;i++){
            arr[i]=arr[i].[0].toUpperCase()+arr[i].substring(1);//Element
        }
        msg=arr.join("");//msg=” getElementById”
        return msg;
    }

> 47.var numberArray = \[3,6,2,4,1,5\];

1）实现对该数组的倒排，输出\[5,1,4,2,6,3\]

2）实现对该数组的降序排列，输出\[6,5,4,3,2,1\]

> 51.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

var iArray = []; 
    function getRandom(istart, iend){
            var iChoice = iend - istart +1;
            return Math.floor(Math.random() * iChoice+ istart);
    }
    Math.random()就是获取0-1之间的随机数（永远获取不到1）
    for(var i=0; i<10; i++){
    var result= getRandom(10,100);
            iArray.push(result);
    }
    iArray.sort();

> 52.把两个数组合并，并删除第二个元素。

考点：1、数组的concat、splice用法  
splice() 方法删除数组的元素，或者向数组中添加元素，然后返回被删除的项目。  
参数1：从何处开始删除数组的元素（使用负数则从数组的末尾开始）  
参数2：要删除的元素个数（如果是0，就代表不删除）  
参数3，4，5。。。：要添加的元素

var array1 = ['a','b','c'];

var bArray = \[‘d’,’e’,’f’\];  
var cArray = array1.concat(bArray);  
cArray.splice(1,1);

> **53.写一个function，清除字符串前后的空格。（兼容所有浏览器）**

使用自带接口trim()，考虑兼容性(IE9以下浏览器不支持)：  
考点：1、原型扩展 2、正则表达式 3、字符串的replace方法

if(typeof String.prototype.trim !=”function”){
    String.prototype.trim=function(){
    return this.replace(/^\s+|\s+$/g,”“);
    }
    }
    var str=” hello “;

> 54.Javascript中, 以下哪条语句一定会产生运行错误？ 答案( BC )             ??????????????

A、var \_变量=NaN;      //   
B、var 0bj = \[\];             // Invalid or unexpected token  
C、var obj = //;             
D、var obj = \{\};  
//正确答案：BC

> **56.Javascript创建对象的几种方式？**

构造函数方式，原型模式，混合构造函数原型模式，工厂方式，动态原型方式

**混合构造函数+原型模式：**

function Robot(name){
        this.name=name;
    }

Robot.prototype.say=function(){
        alert("大家好，我叫"+this.name);
    };
    var alphaGo=new Robot("阿尔法狗");
    alphaGo.say();

**工厂方式：**

function create(name,age){
        var o={};
        o.name=name;
        o.age=age;
        return o;
    }
    var p1=create("张三",20);

**动态原型方式：**

> 59.documen.write和 innerHTML 的区别？

*  document.write 指定位置输出
 *  dom.innerHTML 可以重绘指定元素的内容
 *  document.write和innerHTML的区别

> 61.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数  
Ajax是页面无刷新请求数据操作

> 62.将数字 12345678 转化成 RMB形式 如： 12,345,678

//思路：先将数字转为字符， str= str + ” ;  
//利用反转函数，每三位字符加一个 ‘,’最后一位不加； re()是自定义的反转函数，最后再反转回去！

for(var i = 1; i <= re(str).length; i++){
        tmp += re(str)[i - 1];
        if(i % 3 == 0 && i != re(str).length){
            tmp += ',';
        }
    }

> 64.什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？

一个运算符如果有一个操作数，为一元运算符，两个为二元，三个为三元运算符，三元表达式则为一个三元运算表达式！

> 71.如果某一个接口很缓慢，用户离开这个页面该怎么处理？

> 84.内建对象：Object,Array，自定义对象

var Obj = new Object()
    // 添加属性
    obj.name = "小明"
    // 添加方法
    obj.sleep = function(){
    console.log(this.name + '在')
    }

内建对象可以通过几种方式创建

1.  new关键字创建对象
2.  通过字面量创建对象   var fun = new fun()
3.  构造函数对象
4.  用中括号法访问属性

> **87.什么是数组？什么是对象**

数组：用于在变量中存储多个值，以下角标为标识

方法：

cocat()   .............................合并数组

pop....................................删除最后一位

push.................................添加最后以为

shift.................................. 删除第一位

unshift.............................增加第一位

reverse............................反转

slice...................................截取指定位置数组

sort.................................数组排序

splice...............................删除指定位置

toString.............................转成字符串并返回

indexOf............................数组的索引

map()同forEach

forEach   遍历数组，没有返回值

forEach(value,index,self)

value:遍历数组的数据

index:对应索引

self: 数组自身

map:同forEach功能

map的回调函数会执行结果，然后map将所有回调函数的返回值组成一个新数组返回

forEach与map区别

相同点：

1.都是循环遍历数组中的每一项

2.都有3个参数，item（当前每一项），index(索引值），arr(原数组）

不同点：

forEach:遍历数组，无返回值

map遍历数组,有返回值

> **93.js有几种弹出窗**

alert.confirm,prompt

*  alert：警告窗
 *  confirm：确认窗口
 *  prompt:信息输入窗口

>  find和filter的区别

> **VUE面试题**

**-------------------**

**vue中更新版本/升级添加版本号/项目升级/打包部署/等**

> **1.对MVVM的理解**

*  M：model层，在model层对数据进行操作和修改数据
 *  V：View(视图层）
 *  VM:ViewModel监听模型数据的改变和控制视图行为。相当于模型层和视图层的一个桥梁，起连接作用。

在MVVM模式下，View和Modal没有直接的联系，而是通过ViewModal进行交互，Modal和ViewModal之间交互是双向的，因此View数据的变化会同步到Modal上，Modal数据的变化也会立即反应到View上。

ViewModal通过数据双向绑定把View和Modal层连接起来，而View和Modal之间的工作同步是完全自动的，无需别人干涉，因此开发者只关注业务逻辑，不需要动手操作DOM，不需要关注状态的同步问题，复杂的数据状态完全由MVVM管理

> **2.生命周期：Vue实例从创建到销毁的过程。从开始创建，初始化数据，编译模板，挂载DOM->渲染，更新->渲染，销毁等一系列过程。**

[Vue - 生命周期详解 - 简书Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给...https://www.jianshu.com/p/672e967e201c][Vue - _ - _Vue_DOM_-_-_Vue _...https_www.jianshu.com_p_672e967e201c]

*  beforeCreate(创建前）：只是单纯的创建$el和data,数据观测和初始化时间还未开始，因此无法访问methods,data,computed--data:undefiend;$el:undefiend
 *  created(创建后)：data初始化完成，数据观测完成，属性和方法的运算，初始化事件（data)，watch/event事件回调，但是$el属性仍在创建中。data可获取，$el:undefiend.
 *  beforeMounte(挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。（自己理解：vue实例的$el和data都初始化完成，但data还是挂载之前虚拟的DOM节点，实例已完成一下配置，编译模板，把data里面的数据和模板生成html,完成了el和data。初始化，data尚未替换,此时还没有挂载html在页面上--data:xxx;$el:xxx('虚拟‘））
 *  mounted(载入后）：在el被创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置。用上面编译好的html内容替换el属性指向DOM对象。完成模板的html渲染到html页面上。此过程是ajax交互过程（自己理解：挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。用真实数据替换虚拟DOM--data:xxx;$el:真实）
 *  beforeUpdate（更新前）： 重新渲染之前触发（自己理解：data数据已经发生改变，但是未渲染）
 *  updated（更新后）：数据已经更改完成，dom也重新render完成，更改数据会陷入死循环（自己理解：data数据已经发生改变，并且旧数据代替新数据）
 *  beforeDestory（销毁前）：在实例销毁之前调用。实例仍然完全可用
 *  destoryed（销毁后）：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

**(1).生命周期的作用？**

生命周期有很多钩子函数，通过钩子函数让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

**(2).生命周期总共有几个阶段？**

8个，创建前/后；载入前/后；更新前/后；销毁前/后

**(3).第一次页面加载会出发那几个钩子？**

beforeCreate, created, beforeMount, mounted

**(4).DOM渲染在哪个周期已经完成？**

mounted

**(5)简单描述每个周期具体适合那些场景？**

*  beforeCreate:可以在这个上加loading事件，在加载实例时触发
 *  created:初始化完成时的事件写在这里，如在这结束loading事件，改变data数据，异步请求的调用 
 *  mounted:挂载元素，获取到DOM节点  
 *  beforeDestory:清除组件中定时器；可以做停止确认框事件[https://www.jianshu.com/p/4b8ff44d7fce![icon-default.png_t_L892][]https://www.jianshu.com/p/4b8ff44d7fce][https_www.jianshu.com_p_4b8ff44d7fce_icon-default.png_t_L892_https_www.jianshu.com_p_4b8ff44d7fce]
 *  nextTick:改变dom元素后,用这个方法获取更新后DOM。nexTick()方法延时调用函数事件来渲染视图

问题：nextTick举例子：DOM没加载完获取会出现undefiend,获取不到改字段

[Cannot read property 'clearValidate' of undefined\_QQ帝国-CSDN博客这个错误是因为你的dom元素还没有加载完，你就想使用resetFields置空。也就是你写的this.$refs\['addForm'\].resetFields();这个里面的addForm还没有加载出来呢。解决：nextTick（）Vue.nextTick用于延迟执行一段代码详细讲解：https://www.jianshu.com/p/a7550c0e164fthis.$nex...![favicon32.ico][]https://blog.csdn.net/QQ\_Empire/article/details/89356135][Cannot read property _clearValidate_ of undefined_QQ_-CSDN_dom_resetFields_this._refs_addForm_.resetFields_addForm_nextTick_Vue.nextTick_https_www.jianshu.com_p_a7550c0e164fthis._nex..._favicon32.ico_https_blog.csdn.net_QQ_Empire_article_details_89356135]

举例子：简单理解Vue中的nextTick - 简书

\[更改数据后当你想立即使用js操作新的视图的时候需要使用它\]

注意：2.1.0新增：如果没有提供回调且在支持Promise环境中，则返回一个Promise.请注意Vue不自带Promise的polyfill,如果你的目标浏览器不原生支持Promise,你需要自己提供，请查阅-------Vue官网--异步更新队列

[深入响应式原理 — Vue.js][_ Vue.js]

changeTxt:function(){
          let that=this;
          that.testMsg="修改后的文本值";  //修改dom结构
           
          that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
            let domTxt=document.getElementById('h').innerText; 
            console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
            if(domTxt==="原始值"){
              console.log("文本data被修改后dom内容没立即更新");
            }else {
              console.log("文本data被修改后dom内容被马上更新了");
            }
          });
        },

(6)created和mounted的区别

*  created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
 *  mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

[简单理解Vue中的nextTick - 简书][Vue_nextTick -]

> **3.VUE双向绑定原理**

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter/getter，在数据发生变化时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据的变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：

1.在自身实例化时往属性订阅器（dep）里面添加自己

2.自身必须有一个update（）方法

3.待属性变动dep.motice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

> **4.Vue组件间的参数传递；（vue组件传值）**

**一：父子关系组件**

1.父向子传值

父组件向子组件传值用props属性。首先，在子组件里定义一个props值用来接收父组件数据；然后调用子组件并v-bind绑定这个props值 = 父组件的data值。

父组件代码：

<template>
      <div class="home">
        <HelloWorld :newMsg="msg" /> 
        //绑定子组件newMsg(props值) = 父组件msg(data值)
      </div>
    </template>
    
    <script>
    import HelloWorld from "@/components/HelloWorld.vue";
    export default {
      name: "Home",
      data(){
        return{msg:'Welcome to Vue.js'} //父组件数据msg
      },
      components: {HelloWorld}
    };
    </script>

子组件代码：

<template>
      <div>
        <h1>{
       { newMsg }}</h1>  //直接调用newMsg，显示“Welcome to Vue.js”
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      props: {newMsg: String}  //为子组件定义newMsg(props值)接收父组件msg
      //或者props:['newMsg']
    };
    </script>

2.子组件向父组件传值

子组件向父组件传值有两种方式：

（1）：利用$emit()方法。 首先在子组件中用`$emit()`向上传递一个自定义事件并附带想要传递的数据；然后在父组件v-on监听这个自定义事件并自动接收到数据；最后在响应该事件的方法中进行数据操作。

子组件代码：

父组件代码：

<template>
      <div class="home">
        <HelloWorld @change="handle" /> //监听到子组件传递来的事件并响应handle方法
        <span>{
       {newMsg}}</span>  //直接调用newMsg，显示“Welcome to Vue”
      </div>
    </template>
    
    <script>
    import HelloWorld from "@/components/HelloWorld.vue";
    export default {
      name: "Home",
      data() {
        return {newMsg:""}
      },
      methods:{
        handle(msg){           //定义handle方法，将自动接收到的msg值给了自己的newMsg
          this.newMsg = msg
        }
      },
      components: {HelloWorld}
    };
    </script>

（2）利用ref属性。ref是vue的内部属性，类似于id,class标识。首先在子组件上定义ref值(例:`ref="son"`)；然后在父组件中用`this.\$refs.son`即可获取到son这个ref的组件，进行操作。

子组件代码：

父组件代码：

<template>
      <div class="home">
        <HelloWorld ref="son" />  //在子组件上定义一个ref 名为"son"
      </div>
    </template>
    
    <script>
    import HelloWorld from "@/components/HelloWorld.vue";
    export default {
      name: "Home",
      mounted(){
        console.log(this.$refs.son.msg)  //获取到ref名为"son"的子组件内msg数据，在控制台显示“Welcome to Vue”
      },
      components:{HelloWorld}
    };
    </script>

**二：兄弟关系组件:**

1.  兄弟之间传递数据需要借助事件车，通过事件车的方式传递数据
2.  创建一个vue实例，让各个兄弟共同使用一个事件机制
3.  传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据）
4.  接收数据方，通过mounted()触发bus.$on(方法名，function(接收数据的参数）\{用该数据接收的传递过来的数据\}），此时函数中的this已经发生了改变，可以使用箭头函数。  
    自己总结:(先单独创建一个eventVue.js文件,在兄弟组件中引入这个js事件,并且兄弟之间传递数据需要借助一个中间人,这个中间人可以是父组件,在父组件中引入兄弟组件,传递数据的组件通过触发bus.$emit事件传数据,接收数据的组件通过bus.$on接收参数,这样就达成了兄弟组件的传递)

举例子：

我们可以创建一个单独的js文件eventVue.js,内容如下

import Vue from 'vue'
    export default new Vue

假如父组件如下：

子组件a如下：

<template>
          <div class="components-a">
               <button @click="abtn">A按钮</button>
          </div>
    </template>
    <script>
    import eventVue from '../../js/event.js'
    export default {
          name: 'app',
          data () {
            return {
                    ‘msg':"我是组件A"
            }
          },
          methods:{
               abtn:function(){
                       eventVue .$emit("myFun",this.msg)   //$emit这个方法会触发一个事件
               }
          }
    }
    </script>

子组件b如下：

<template>
         <div class="components-a">
             <div>{
       {btext}}</div>
         </div>
    </template>
    <script>
    import eventVue from '../../js/event.js'
    export default {
       name: 'app',
       data () {
            return {
               'btext':"我是B组件内容"
            }
       },
       created:function(){
           this.bbtn();
       },
       methods:{
           bbtn:function(){
                eventVue .$on("myFun",(message)=>{   //这里最好用箭头函数，不然this指向有问题
                     this.btext = message      
                })
           }
        }
    }
    </script>

三：页面关系组件

在vuecli3.0以后，项目结构对组件级别作了明确的区别：入口组件(App) - 页级组件(View) - 零件组件(Component)。一般在开发中我们也会尽量按照这种结构去划分模块，但页级组件没有父组件，如果说页级组件之间需要传值，那就不能用“总线转送”的方法了。  
vuex： 这是官方提供的一个插件，可称为“状态管理仓库”，用来管理项目中需要跨页共享反复调用的状态(状态你可以理解成就是数据、变量、方法)。

vuex的存放仓库为Store，内部结构可分五大块：  
state： 状态库，寄放基础状态。  
mutations： 同步方法，可理解成相当于组件内的computed属性，接收state进行改装。  
actions： 异步方法，只针对mutations，接收并改装。  
getters： 过滤器，对state调用前进行改装、派生并返回数据。  
modules： 模块，在复杂项目中用modules处理Store，使分工更清晰。

自己总结

vuex:状态管理库,分5大模块:

*  state:状态库
 *  mutations:相当于computed属性,改变state状态(同步方法)
 *  actions:对mutations进行改变(异步方法)
 *  getters:过滤器,对state调用前的状态进行修改
 *  modules: 模块,处理Store，使分工更清晰

vue页面之间传值:

1.  使用vue-router通过跳转链接带参数传参。
2.  使用本地缓存localStorge。
3.  使用vuex数据管理传值。

说说vue的动态组件

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。

主要考查面试这 component的 is属性。

[https://zhuanlan.zhihu.com/p/33036996][https_zhuanlan.zhihu.com_p_33036996]

> **5.Vue的路由实现：hash模式和history模式**

[vue-router路由模式详解 - 古兰精 - 博客园一、路由模式解析 要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。 如果有进行过服务器开发或者对http协议有所了解就会知![favicon.svg][]https://www.cnblogs.com/goloving/p/9147551.html][vue-router_ - _ - _ _vue-router_URL_URL_ _http_favicon.svg_https_www.cnblogs.com_goloving_p_9147551.html] hash模式：在浏览器中符号“\#”，\#以及\#后面的字符称之为hash,用window.location.hash读取  
URL：http://www.abc.com/\#/hello **hash 的值为 \#/hello**

特点：hash虽然在URL中，但不被包括在HTTP请求中；因为hash发生变化的url都会被浏览器记录下来，，从而你会发现浏览器的前进后退都可以用了，用来指导浏览器动作，对服务器安全无用，hash不会重加载页面，前端路由

hash模式下，hash符号之前的内容会被包含在请求中。如 [http://www.xxx.com][http_www.xxx.com]，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

### history路由 ###

随着history api的到来，前端路由开始进化了，前面的**hashchange，你只能改变\#后面的url片段，而history api则给了前端完全的自由**

history api可以分为两大部分：切换和修改

（1）切换历史状态

包括`back、forward`、`go`三个方法，对应浏览器的前进，后退，跳转操作，有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

history.go(-2);//后退两次
    history.go(2);//前进两次
    history.back(); //后退
    hsitory.forward(); //前进

（2）修改历史状态

包括了`pushState、replaceState`两个方法，这两个方法接收三个参数：stateObj，title，url

history.pushState({color:'red'}, 'red', 'red')
    
    window.onpopstate = function(event){
        console.log(event.state)
        if(event.state && event.state.color === 'red'){
            document.body.style.color = 'red';
        }
    }
    
    history.back();
    
    history.forward();

history模式：它采用的是HTML5的新特性；且提供了2个新方法：pushState(),replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听状态变更。

history模式下，前端URL必须和实际向后端发起请求的URL一致，如**[http://www.xxx.com/items/id][http_www.xxx.com_items_id]**。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

> 6.Vue与React的区别？-------（不会）

相同点：

React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：+

一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；

不同点：

React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

> **7.vue的优点是什么？vue如何性能优化**

可重用性：可以将公共部分抽取出组件

低耦合。使用了双向绑定原理

性能优化：

**代码层面优化：**

根据不用场景选择合适的条件

1.  v-show和v-if的使用(v-show:频繁的切换场景)[vue中v-if与v-show使用方法与区别vue中v-if与v-show使用方法与区别:这次给大家带来vue中v-if与v-show使用方法与区别，vue中v-if与v-show使用的注意事项有哪些，下面就是实战案例，一起来看一下。 v-if与v-show区别：在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因![icon-default.png_t_L9C2][]https://www.gxlcms.com/JavaScript-248140.html][vue_v-if_v-show_vue_v-if_v-show_vue_v-if_v-show_vue_v-if_v-show_ v-if_v-show_ v-if _Vue.js _icon-default.png_t_L9C2_https_www.gxlcms.com_JavaScript-248140.html]，[v-if和v-show哪个优先级更高？-面试哥][v-if_v-show_-]
2.  computed 和 watch  区分使用场景[vue中computed和watch的区别，以及适用场景 - 吴小明- - 博客园][vue_computed_watch_ - _- -]

**Webpack 层面的优化：**

1.  Webpack 对图片进行压缩[   webpack 压缩图片\_yin\_you\_yu的博客-CSDN博客][_webpack _yin_you_yu_-CSDN]
2.  提取公共代码，抽成公共组件
3.  减少 ES6 转为 ES5 的冗余代码

[https://www.jianshu.com/p/41d161310949][https_www.jianshu.com_p_41d161310949]

> **8.路由之间跳转**

声明式（标签跳转<router-link to='home'>）

编程式（js跳转router.push（‘/home’））

vue -router声明式路由导航和编程式路由导航

前提：$router:路由器对象；$route:当前路由信息

一：声明式路由导航===>>>即：<router-link>

<router-link to='xxx' tag='li'> To PageB </router-link>

注意：<router-link>会默认解析成a标签，可以通过tag属性指定解析成什么标签

编式路由导航===>>>即写js的方式（$router.push）

[vue-router传递参数的几种方式\_土家稀哥-CSDN博客][vue-router_-CSDN]

编程式导航传递的参数有两种类型：字符串，对象

字符串

字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数

this.$router.push("home")

对象

想要传递参数主要以对象的方式来写，分为两种方式：命名路由，查询参数，下面分别说明两种方式的用法和注意事项

命名路由

命名路由的前提就是注册路由的地方需要给路由命名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 6][]

命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标 页面接收传递参数时使用params

特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的

使用方法如下：

this.$router.push({name: 'news', params: {userId: 123})

代码如下

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
     
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        routerTo(){
          this.$router.push({ name: 'news', params: { userId: 123 }});
        }
      }
    }
    </script>
     
    <style>
    </style>

接受传递的参数：

<template>
      <div>
        this is the news page.the transform param is {
       {this.$route.params.userId}}
      </div>
    </template>
    <script>
      
    </script>

查询参数

查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数而不能用name，目标页面接收传递的参数使用query。

注意：和name配对的是params，和path配对的是query

使用方法如下

this.$router.push({ path: '/news', query: { userId: 123 }});

代码如下：

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
     
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        routerTo(){
          this.$router.push({ path: '/news', query: { userId: 123 }});
        }
      }
    }
    </script>
     
    <style>
    </style>

接收参数如下：

<template>
      <div>
        this is the news page.the transform param is {
       {this.$route.query.userId}}
      </div>
    </template>
    <script>
    </script>

相关API

*  this.$router.push(path):相当于点击路由链接（可以返回当前路由页面）===>>>队列方式（先进先出）
 *  this.$router.replace(path):用新路由替换当前路由（不可返回当前路由页面）===>>>栈的方式（先进后出）
 *  this.$router.back():请求（返回）上一个记录路由
 *  this.$router.go(-1):请求（返回）上一个记录路由

<div>
    <ul>
    <li v-for="(message,index) in messages" :key="message.id">
    <router-link :to="`/home/message/detail/${message.id}`">{
       {message.title}}</router-link>
    <button @click="pushShow(message.id)">push查看</button>
    <button @click="replaceShow(message.id)">replace查看</button>
    </li>
    </ul>
    <button @click="$router.back()">回退</button>
    <hr />
    <router-view></router-view>
    </div>
    
    
    
    methods:{
    pushShow(id){
    this.$router.push(`/home/message/detail/${id}`)
    }
    replaceShow(id){
    this.$router.replace(`/home/message/detail/${id}`)
    }
    }

> **9.组件传值.sync   **

原理-----\-vue子父组件传值

vue2.4版本后添加了.sync修饰符:可以在子组件中修改值

<HelloWorld :msg.sync="msg" @parentFun='change'/>   //使用sync修饰符//在父组件中监听msg是否发生了变化
    watch:{			　　　
    　msg:(newValue,oldValue)=>{				　　　
    　console.log(oldValue);				
    　console.log(newValue);
    	}	
    }

子组件中：要修改值需要触发函数  **update:msg    : update是固定的,后面跟着的是变量  **

changeMsg: function() {
         this.$emit('update:msg','hello')
         console.log(this.$props.msg)
    },

> **11.vuex是什么？怎么使用？使用场景**

全局存储数据用的-----状态管理

*  在main.js引入store，注入。用来读取状态集中store中
 *  新建了一个目录store，….. export 。

场景:单页应用中，组件之间的状态

State：存放数据状态，不可直接修改里面数据

[vuex是什么，怎么使用，使用场景？\_LuckyandLucky的博客-CSDN博客][vuex_LuckyandLucky_-CSDN]

先看这个：[vue使用--vuex快速学习与使用 - kevin\_峰 - 博客园][vue_--vuex_ - kevin_ -]

再看这个：[https://segmentfault.com/a/1190000015782272][https_segmentfault.com_a_1190000015782272]

> **12.如何让css在当前组件中起作用**

就在当前组件内使用，当前组件<style>写成<style  scoped>

> **13.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？**

[怎么定义vue-router的动态路由?怎么获取传过来的动态参数?\_mnilz的博客-CSDN博客\_定义vue-router的动态路由\--可以通过query ,param两种方式区别:query通过url传参，刷新页面还在 params刷新页面不在了 params的类型:配置路由格式:/router/:id传递的方式:在path后面跟上对应的值传递后形成的路径:/router/123//在APP.vue中 <router-link :to="'/user/'+userId" replace>用户</router-link...![favicon32.ico][]https://blog.csdn.net/mnilz/article/details/106568551][vue-router_mnilz_-CSDN_vue-router_--_query _param_query_url_ params_ params_router_id_path_router_123_-- _-params --_APP.vue_ _router-link _to_user_userId_ replace_router-link..._favicon32.ico_https_blog.csdn.net_mnilz_article_details_106568551] 在router目录下的index.js文件中，对path属性加上/:id

接收传递的参数 params.id

> **14.vue-router有哪几种导航钩子？**

“导航”：表示路由正在发生改变。

注意：**参数或查询的改变并不会触发进入/离开的导航守卫**

3种：

一种是全局导航钩子：全局前置守卫：router.beforeEach(to,from,next)；

作用：

*  跳转前进行判断拦截
 *  to:route即将进入的目标路由对象
 *  from:route当前导航正要离开的路由

next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

*  next():进行管道中的下一个钩子。如果全部钩子执行完了，则导航状态就是confirmed（确认的）
 *  next(false):中断当前的导航。如果浏览器的URL改变了（可能是用户手动或者浏览器后退按钮），那么URL地址会重置到form路由对应的地址。
 *  next('/')或者next(\{path: '/'\}):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航，你可以向next传递任意位置对象，且允许设置诸如replace:true,name:'home'之类的选项以及任何用在router-link的to prop或router.push中的选项。
 *  next(error):如果传入next的参数是一个Error实例，则导航会被终止且错误会被传递给router.onError()注册过的回调。

全局解析守卫：router.beforeResolve .这和router.beforeEach类似，区别在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫[导航守卫 | Vue RouterVue.js 官方的路由管理器。![logo.png][]https://router.vuejs.org/zh/guide/advanced/navigation-guards.html\#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB][_ Vue RouterVue.js _logo.png_https_router.vuejs.org_zh_guide_advanced_navigation-guards.html_E5_85_A8_E5_B1_80_E5_89_8D_E7_BD_AE_E5_AE_88_E5_8D_AB]第二种：组件内的钩子(组件声明周期）：beforeRouteEnter, beforeRouteUpdate, beforeRouteleave

第三种：单独路由独享组件：beforeEnter

> **Vue中的钩子函数（**[https://segmentfault.com/a/1190000013956945][https_segmentfault.com_a_1190000013956945]**）**

钩子函数分为生命周期钩子和路由守卫钩子

生命周期钩子

beforeCreate(){
          console.log('组件实例化之前')
      },
      created(){
          console.log('组件实例化完毕，单页面还未显示')
      },
      beforeMount(){
          console.log('组件挂载前，页面仍未展示，但虚拟Dom已经配置')
      },
      mounted(){
        console.log('组件挂在后，此方法执行后，页面显示')
     },
     beforeUpdate(){
         console.log('组件更新前，页面仍未更新，但虚拟Dom已经配置')
     },
     updated(){
         console.log('组件更新，此方法执行后，页面显示')
     },
     beforeDestroy(){
         console.log('组件销毁前')
     },
     destroyed(){
         console.log('组件销毁')
     },

路由守卫钩子

*  全局守卫：router.beforeEach,  router.beforeResolve, router.afterEach
 *  路由独享守卫：beforeEnter
 *  组件内的守卫：beforeRouteEnter, beforeRouteUpdate, beforeRouteleave

路由导航解析流程：？？？

1.  导航被触发。
2.  在失活的组件里调用离开守卫。
3.  调用全局的 `beforeEach` 守卫。
4.  在重用的组件里调用 `beforeRouteUpdate` 守卫 (2.2+)。
5.  在路由配置里调用 `beforeEnter`。
6.  解析异步路由组件。
7.  在被激活的组件里调用 `beforeRouteEnter`。
8.  调用全局的 `beforeResolve` 守卫 (2.5+)。
9.  导航被确认。
10. 调用全局的 `afterEach` 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 `beforeRouteEnter` 守卫中传给 `next` 的回调函数。

> **15.说出至少4种vue当中的指令和他的用法？**

v-if

v-on：事件绑定

v-bind:class:绑定属性样式

<div class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
    data: {
    isActive: true,
    hasError: false
    }

v-modal:绑定数据

<template>
      <div>
        <div class="message">{
       { info.message }}</div>
        <div><input v-model="info.message" type="text"></div>
        <button @click="change">click</button>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            info: {}
          }
        },
        methods: {
          change () {
            this.info.message = 'hello world'
          }
        }
      }
    </script>

v-for:循环

v-bind(冒号就是v-bind的缩写,是为了动态绑定数据)

注意:

加上了冒号是为了动态绑定数据，等号后面可以写变量。

如果不使用冒号，等号后面就可以写字符串等原始类型数据。这时就无法进行动态绑定数据了。

> **16.vue-loader是什么？用途是什么？**

解析.vue文件的一个加载器

用途：加载由 vue-loader 提取出的 CSS 代码

[9. vue-loader是什么？使用它的用途有哪些 - 大牛半路出家 - 博客园][9. vue-loader_ - _ -]

> 17.scss是什么？在vue.cli中的安装使用步骤是？有那几大特性？

css的预编译

第一步：先装css-loader、node-loader、sass-loader等加载器模块

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：在同一个文件，配置一个module属性

第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

特性：

可以用变量，例如（$变量名称=值）；  
可以用混合器，例如（）  
可以嵌套

> **18.为什么使用key?**

key作为唯一标识，当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们，否则vue为了效率只会替换相同标签内部的内容

> **19.说出vue.cli项目中src目录每个文件夹和文件的用法？**

*  assets文件夹放静态资源
 *  components放组件
 *  router是定义路由相关配置
 *  view视图
 *  app.vue是一个应用主组件
 *  main.js是入口文件

> **20.vue.cli中怎么使用自定义组件？有遇到过哪些问题吗？**

第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default \{

第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’

第三步：注入到vue的子组件的components属性上面,components:\{smithButton\}

第四步：在template视图view中使用，

问题：命名需要注意smithButton命名，使用的时候则smith-button。

> **21.active-class是哪个组件的属性？**

vue-router模块的route-link组件,用来做选中样式的切换

[vue active-class的用法 - 简书][vue active-class_ -]

> **22.keep-alive**

Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

[keep-alive实现原理 - 简书][keep-alive_ -]

> **23.v-if与v-show的区别？**

*  v-show是css切换，如果，display：none在源码中也不显示   (block显示）
 *  v-if条件渲染，是完整的销毁和重新创建       v-if="false",当为false时不会渲染页面

v-if:是真正的条件渲染，因为它会在确保切换过程中条件块内的事件监听器和子组件适当的被销毁和重建\--这句话的意思是如果一个组件通过  v-if 来控制显示隐藏每次切换条件的到显示的时候都会有一个完整的生命周期 beforeCreate - created - beforeMount - mounted

v-if:也是惰性的：如果在初始渲染时条件为假，则什么也不做，一直到条件第一次变为真时， 才会开始渲染条件块。

v-show:不管初始条件是什么，元素总是会被渲染，并且只是简单的基于CSS进行切换。---v-show 只有第一次加载的时候才会执行完整的生命周期，钩子函数只有第一次加载的时候才执行。之后每次切换状态都不会执行生命周期的beforeCreate 到 mounted的钩子.

v-if有更高的切换开销，而v-show有更高的初始化渲染开销。因此，如果频繁的切换，使用v-show比较好；如果在运行时改变很少，用v-if.

> **24.绑定class的数组用法**

*  对象方法：v-bind:class="\{'name':'snsn','price':11\}
 *  数组方法：v-bind:class="\[class1,class2\]"
 *  行内：v-bind:style="\{color:color,fontSize:fontSize+'px\}"

> **25.计算属性和watch的区别**

computed:监听值，计算出一个新的值

get:读取当前属性值,根据计算并返回当前属性值

set:监听当前属性值的变化,当属性值变化时,更新相关属性数据

// 计算一个全名,fullName不可以在data中定义
    data: {
       firstName: 's',
       lastName:'ss'
    }
    computed:{
    fullName: {
    get(){   //回调函数,读取当前属性值,根据计算并返回当前属性值
    return this.firstName + this.lastName
    },
    set(val){ // 监事当前属性值的变化,当属性值变化时,更新相关属性数据
    this.firstName = val[0]
    this.lastName = val[1]
    }
    }
    }

watch:监听值的变化,

它是一个对象,有哪些属性?

*  handler:深度监听对应的函数名必须为handler
 *  deep:是否深度监听
 *  immediate:是否立即执行

<div>
          <p>FullName: {
       {fullName}}</p>
          <p>FirstName: <input type="text" v-model="firstName"></p>
    </div>
     
    new Vue({
      el: '#root',
      data: {
        firstName: 'Dawei',
        lastName: 'Lou',
        fullName: ''
      },
      watch: {
        firstName(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        }
      } 
    })

*  immediate和handler,deep

watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
        immediate: true,
        deep: true
      }
    }

computed 和 methods 有什么区别？

1.  computed是**属性访问**，而methods是**函数调用**
2.  computed带有**缓存功能**，而methods不是
3.  methods是一个方法，它可以接受参数，而computed不能

<div id="app">
        <h1>{
       {message}}</h1>
        <p class="test1">{
       {methodTest}}</p>
        <p class="test2-1">{
       {methodTest()}}</p>
        <p class="test2-2">{
       {methodTest()}}</p>
        <p class="test2-3">{
       {methodTest()}}</p>
        <p class="test3-1">{
       {computedTest}}</p>
        <p class="test3-2">{
       {computedTest}}</p>
    </div>
    
    
    <script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: '我是消息，'
        },
        methods: {
            methodTest() {
                return this.message + '现在我用的是methods'
            }
        },
        computed: {
            computedTest() {
                return this.message + '现在我用的是computed'
            }
        }
    })
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[https://segmentfault.com/a/1190000014478664?utm\_source=tag-newest][https_segmentfault.com_a_1190000014478664_utm_source_tag-newest]

举个生活中例子

垃圾分类？为什么我们有可回收垃圾

就是可以把一些可回收的垃圾重复利用，避免了浪费。同样computed就是这个作用，把计算过的数据/处理过的利用缓存功能，存起来，进行资源的复用，避免不必要的请求，优化了用户体验。

1.computed 和 watch有什么区别？

computed:

1.  计算值
2.  应用:简化template里面\{ \{\}\}计算和处理props和$emit的传值
3.  具有缓存性:页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数

watch:

1.  观察的动作
2.  应用:监听props,$emit或本组件的值执行异步操作
3.  无缓存性,页面重新渲染不发生变化也会执行

[Vue中computed和watch的区别和不同的使用场景\_江上晚风吟\_的博客-CSDN博客][Vue_computed_watch_-CSDN]

> **26.事件修饰符**

*  .stop事件：阻止冒泡事件发生
 *  .prevent:防止事件加载跳转到下一个页面
 *  .once:事件只执行一次

> **27.组件中data为什么是函数？(为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？)**

因为组件是用来复用的，JS里对象是引用关系，这样作用域没有隔离。而new Vue的实例，是不会被复用的，因此不存在引用对象的问题。（**一个组件的 `data` 选项必须是一个函数**，每个实例可以维护一份被返回对象的独立的拷贝：）

data: function () {
      return {
        count: 0
      }
    }

参考Vue官网：

[组件基础 — Vue.js][_ Vue.js 1]

[API — Vue.js][API _ Vue.js]

组件基础---组件的复用

> **28.怎么理解单向数据流**

这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。  
一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：  
在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：

export default {
      props: {
        value: String
      },
      data () {
        return {
          currentValue: this.value
        }
      }
    }

如果是对 prop 值的转换，可以使用计算属性：

export default {
      props: ['size'],
      computed: {
        normalizedSize: function () {
          return this.size.trim().toLowerCase();
        }
      }

> **29.slot插槽**

单个插槽：

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

命名插槽：

solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。  
这样可以将父组件模板中 slot 位置，和子组件 slot 元素产生关联，便于插槽内容对应传递

作用于插槽：

可以访问组件内部数据的可复用插槽(reusable slot)  
在父级中，具有特殊特性 `slot-scope` 的`<template>` 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象。

[vue\_插槽的理解和使用 - 圆圆方方 - 博客园][vue_ - _ -]

> **31.vue路由  动态路由  怎么动态添加路由**
> 
> **route和router的区别：**

动态路由实际上指的是路由传参，比如列表调详情，动态添加路由是vue router中的addRoutes方法

*  route是“路由信息对象”，包括path,params,hash,query,fullPath,matched，name等路由信息参数。
 *  而router是“路由实例“对象包括路由的跳转方法，钩子函数等

[vue 实现动态路由 - 简书][vue _ -]

[Vue路由（vue-router）详细讲解指南 - 有梦想的咸鱼前端 - 博客园][Vue_vue-router_ - _ -]

> **32.vue.js的两个核心是什么？**

数据驱动，组件系统

> **33.v-on可以绑定多个方法吗？**

可以

> **34.vue等单页面应用以及优缺点？**

*  优点：可以通过API实现响应的数据绑定和组合的视图组件
 *  缺点：如果数据很多，页面加载慢

> **35.this.$route.params与this.$route.query的区别。（开发中遇到什么问题?）**

this.$route.query的使用

A:传参数

this.$router.push({
          path:'/custom',
          query:{
                id:id
           }
    })

B:接收参数

this.$route.query.id

C.在url中的形式（url带参数）

[http://172.19.186.224:8080/\#/monitor?id=1][http_172.19.186.224_8080_monitor_id_1]

D.页面之间用路由跳转传参时，刷新跳转后传参页面，数据还会显示存在。

this.$route.params的使用

A.传参

this.$router.push({
    path:'/custom',
    params:{
    id:id
    }
    })

B:接收参数

this.$route.params.id

C.在url中的形式（url不带参数）

[http://172.19.186.224:8080/\#/monitor][http_172.19.186.224_8080_monitor]

D.页面之间用路由跳转传参时，刷新页面跳转传参的页面，数据不存在

> **37.封装组件的注意事项**

**数据从父组件传入**

props属性中添加验证规则：

props: {
      length: {
        type: [String],
        default: 3
      }
    }

**父组件中处理事件**

处理事件的方法尽量写在父组件中，以保证通用组件中的数据不被污染。

** 留一个slot**

> **38.vue路由跳转方式有哪些？**

[Vue 路由跳转的几种方式 - 简书][Vue _ -]

> ** 39.Vue中mixin和extend的使用场景**

mixin全局脱敏用过，还有返回按钮用过

混入是全局注册的，使用时要小心，因为他会影响每一个之后创建的 Vue实例。当然使用恰当，他会帮你更的处理逻辑

> **40.路由拦截**

主要思路：

*  登录成功的时候存一个状态
 *  例如存在localStorage里
 *  通过路由钩子判断一下

登录页面：sessionStorage.setItem("isLogin", true);

loginApi.login(params).then((res) => {
            if (res.code == 1) {
              this.$toast("登录成功");
              sessionStorage.setItem("isLogin", true);
              // localStorage.setItem("token", res.token);
              this.$router.push({
                name: "invoiceList",
                query: {
                  housecode: this.housecode,
                  ownername: this.ownername,
                },
              });
            } else {
              this.$toast(res.message);
            }

局部拦截的页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 7][]

> **41.Vue-引入图片的两种方式**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 8][]

> **42.vue更新数组时触发视图更新的方法**

面试的时候回答：

*  变异方法--会改变原始数组：push(),pop(),shift(),unshift()，splice(),sort(),reverse()
 *  非变异方法--不会改变原始数组，会返回一个新数组，可以用新数组替换旧数组：filter(),concat(),slice()

在实例创建完成之后添加心得属性，他不会触发视图。

解决办法：Vue.set( target, key, value )

*  target：要更改的数据源(可以是对象或者数组)
 *  key：要更改的具体数据
 *  value ：重新赋的值

=============================================================================

详解：

举例子：

example1.items = example1.items.filter(function (item) {
      return item.message.match(/Foo/)
    })

注意事项：

由于JS的限制，Vue不能检测以下变动的数组

1.  当你利用索引直接设置一个项时，例如：vm.items\[indexOfItem\] = newValue
2.  当你修改数组的长度时，例如：vm.items.length = newLength

举例子：

var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和`vm.items[indexOfItem] = newValue` 相同的效果，同时也将`触发状态更新：`

// Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)

你也可以使用`vm.$set`实例方法，该方法是全局方法 `Vue.set` 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

[56.vue更新数组时触发视图更新的方法 - 大牛半路出家 - 博客园][56.vue_ - _ -]

> 44.axios和ajax优缺点的理解

[axios和ajax优缺点的理解\_changbozizf的博客-CSDN博客\_axios优点][axios_ajax_changbozizf_-CSDN_axios]

> **45.location.href的用法**

location.href可直接获取当前路径

> **46.SPA首屏加载慢如何解决**

*  将公用的js库用script引入，让浏览器并行加载
 *  加loading,提高用户体验

> **47.delete和vue.delete删除数组区别**

*  delete只是被删除的元素变成了empty/undefined其他元素的键值不变
 *  Vue.delete直接删除数组改变了数组的键值

<template>
      <div class="vue-delete">
        <p class="title tag-blue">
          delete和Vue.delete删除数组的区别
        </p>
        <ul>
          <li :key="index" v-for="(item, index) in a">a---{
       {item}}</li>
        </ul>
        <button @click="handleA">处理a数组</button>
        <ul>
          <li :key="index" v-for="(item, index) in b">b---{
       {item}}</li>
        </ul>
        <button @click="handleB">处理b数组</button>
      </div>
    </template>
    <script>
    export default {
      name: "vueDelete",
      data() {
        return {
          a: [1,2,3,4],
          b: [1,2,3,4],
        }
      },
      methods: {
        handleA() {
          delete this.a[1]
          this.$set(this.a)
          console.log(this.a)
        },
        handleB() {
          this.$delete(this.b, 1)
          console.log(this.b)
        }
      }
    }
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 9][]

> **51.static和assets的区别**

static和assets的区别，原理就在于**webpack是如何处理静态资源的**

assets：

1）在vue组件中，所有模板和css都会被vue-html-loader和css-loader解析，并查找资源url。

例：<img src="./logo.png" />  或者  background: url("./logo.png")

因为./logo.png是相对的资源路径，将会由webpack解析为模块依赖；

2）由于logo.png不是js，当被视作模块依赖时，需要使用url-loader和file-loader处理它，vue-cli已经配好了这些loader（webpack）因此可以使用相对/模块路径。

3）由于这些资源可能在构建过程中被内联、复制、重命名，所以它们基本是代码的一部分，即webpack处理的静态资源放在/src目录中，和其它资源文件放在一起。

## **static：** ##

1）static目录下的文件并不会被webpack处理，它们会直接复制到最终目录（dist/static）下。

必须使用绝对路径引用这些文件，这是通过在config.js的build.assetsPublicPath和nuild.assetsSubDirectory连接确定的。

2）任何放在static/的文件需要以绝对路径形式引用：/static/\[name\]。

如果更改assetsSubDirectory的值为assets，那么路径需更改为：/assets/\[filename\]。

总结：assets里面的资源会被webpack打包进代码，static里面的资源就直接引用了；

一般在static里放一些类库的文件，assets放属于项目的资源文件

[https://www.cnblogs.com/dream111/p/13499384.html][https_www.cnblogs.com_dream111_p_13499384.html]

> **52.v-for与v-if的优先级**

v-for优先级大于v-if,如果在同一个节点，就是先循环在判断

> **53.单页面与多页面的区别及优缺点 **

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

多页面应用优点：

每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_17_color_FFFFFF_t_70_g_se_x_16][]

优点：1.**为什么多页应用的首屏时间快？** 首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。

**为什么搜索引擎优化效果好（SEO）？** 搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。

2.缺点：**但是它也有缺点，就是切换慢**

[24.单页面应用和多页面应用区别及优缺点 - 大牛半路出家 - 博客园][24._ - _ -]

> **54.渐进式框架的理解**

是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。

> **55.Vue的响应式原理**

// html
    <body>
      <div>
        <span>{
       {name}}</span>
        <span>{
       {data}}</span>
      </div>
    <body>
    
    //js
    <script src="vue.js"></script>
    <script>
      // 生成model数据模型
      function getDataApi() {
        // 模拟接口返回
        return {
          name: 'mvc',
          data: 'mvc 数据信息'
        }
      }
      new Vue({
        el: 'body',
        data() {
          return {
            name:'',
            data: '',
          }
        },
        mounted() {
          const result = getDataApi();
          this.name = result.name;
          this.data = result.data;
        }
    })
    </script>

当new Vue在实例化的时候，首先将data方法里返回的对象属性都挂载上setter方法，而setter方法里将页面上的属性进行绑定，当页面加载时，浏览器提供的DOMContentloaded事件触发后，调用mounted挂载函数，开始获取接口数据，获取完成后给data里属性赋值，赋值的时候触发前面挂载好的setter方法，从而引起页面的联动，达到响应式效果。

> **37.聊聊对vue.js的template编译的理解 **

就是先转化成AST树，再得到的render函数返回VNode(Vue的虚拟DOM节点)

> **第一次进入组件或者页面，会执行哪些生命周期？**

beforeCreate, created, beforeMount, mounted

>  谈谈你对keep-alive的了解

[谈谈你对keep-alive的理解 - 简书][keep-alive_ - 1]

> ref是什么？

基本用法，本页面获取dom元素

<template>
      <div id="app">
        <div ref="testDom">11111</div>
        <button @click="getTest">获取test节点</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        getTest() {
          console.log(this.$refs.testDom)
        }
      }
    };
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_16_color_FFFFFF_t_70_g_se_x_16 1][]

获取子组件中的data

子组件
    
    <template>
      <div>
          {
       { msg }}
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: "hello world"
        }
      }
    }
    </script>
    
    父组件
    
    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          console.log(this.$refs.hello.msg)
        }
      }
    };
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16 3][]

### 调用子组件中的方法 ###

子组件
    <template>
      <div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        open() {
          console.log("调用到了")
        }
      }
    }
    </script>
    
    父组件
    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          this.$refs.hello.open();
        }
      }
    };
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_17_color_FFFFFF_t_70_g_se_x_16 1][]

子组件调用父组件方法

子组件
    <template>
      <div>
    </div>
    </template>
    
    <script>
    export default {
      methods: {
        open() {
          console.log("调用了");
          //  调用父组件方法
          this.$emit("refreshData");
        }
      }
    }
    </script>
    
    父组件
    <template>
      <div id="app">
        <HelloWorld ref="hello" @refreshData="getData"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          this.$refs.hello.open()
        },
        getData() {
          console.log('111111')
        }
      }
    };
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_17_color_FFFFFF_t_70_g_se_x_16 2][]

> nextTick是什么？

[Vue的nextTick是什么？ - JoeJoan - 博客园][Vue_nextTick_ - JoeJoan -]

[Vue.nextTick 到底有什么用？ - 牧羊狼 - 博客园][Vue.nextTick _ - _ -]

> **Vue中如何做样式穿透 **

stylus的样式穿透 使用>>>
    
    外层 >>> 第三方组件
    样式
    
    .wrapper >>> .swiper-pagination-bullet-active
    background: #fff
    
    sass和less的样式穿透 使用/deep/
    
    外层 /deep/ 第三方组件 {
    样式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
    background: #fff;
    }

> **scoped原理 **

**何为scoped？**

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

[Vue中的scoped实现原理 - samirah - 博客园][Vue_scoped_ - samirah -]

> **Vuex是单向数据流还是双向数据流？ **

[掘金][Link 8]

[Vuex的单向数据流\_LylBrave的博客-CSDN博客][Vuex_LylBrave_-CSDN]

> diff算法

[详解vue的diff算法 - \_wind - 博客园][vue_diff_ - _wind -]

> 介绍一下SPA以及SPA有什么缺点？

[掘金][Link 9]

> Vue双向绑定和单向绑定

[掘金][Link 10]

> props和data优先级谁高？

[谁先执行？props还是data或是其他？ vue组件初始化的执行顺序详解\_HzDoctor的博客-CSDN博客][props_data_ vue_HzDoctor_-CSDN]

> **如何定义router-link组件的属性？**

[Vue中router-link组件的属性\_dreamingbaobei3的博客-CSDN博客][Vue_router-link_dreamingbaobei3_-CSDN]

> **v-model是什么？有什么作用？**

[v-model是什么?怎么使用？\_啵雨的博客的博客-CSDN博客\_v-model][v-model_-CSDN_v-model]

> Vue.js中标签如何绑定事件？

[\[js\]vue中通过ref获取到元素，如何给元素绑定点击事件? - mmaotai - 博客园][js_vue_ref_ - mmaotai -]

> .如何实现自定义指令？它有哪些钩子函数？还有哪些钩子函数参数？

[自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？ - 让心去旅行 - 博客园][v-check_v-focus_ - _ -]

> 请描述封装Vue组件的作用工程。

[Vue封装组件的过程\_感恩、奋进、自信-CSDN博客\_vue封装组件][Vue_-CSDN_vue]

> vue-loader是什么？它的用途有哪些？

[vue-loader是什么？使用它的用途有哪些？ - 让心去旅行 - 博客园][vue-loader_ - _ -]

> 描述Vue.js的一些 特性？

> 描述Vue.js的特点

> sass是什么？如何在Vue中安装和使用？

[在vue中安装使用sass的方法\_liuxing393724034的博客-CSDN博客\_vue 安装sass][vue_sass_liuxing393724034_-CSDN_vue _sass]

> 如何在Vue.js中循环插入图片？

[vue的 v-for 循环中图片加载路径问题 - 前端海 - 博客园][vue_ v-for _ - _ -]

> 如何为选框元素自定义绑定数据值？

[vue的checkbox多选框获取其是否选中和获取其自定义属性值 - 唠叨的意志 - 博客园][vue_checkbox_ - _ -]

> 什么情况下会产生片段实例？

在以下情况下会产生片段实例模板包含多个顶级元素；模板只包含普通文本；模板只包含其他组件（其他组件可能是一个片段实例）；模板只包含一个元素指令，如vue- router的< router-view>；模板根节点有一个流程控制指令，如v-if或v-for。

这些情况让实例有未知数量的顶级元素，模板将把它的DOM内容当作片段。片段实例仍然会正确地渲染内容。不过，模板没有一个根节点，它的$el指向一个锚节点，即一个空的文本节点（在开发模式下是一个注释节点）。

注意：在Vue2.0中，组件的模板只允许有且只有一个根节点。  
[2021最新VueJS面试题(附答案)\_shi\_xingwen的博客-CSDN博客\_vue面试题2021][2021_VueJS_shi_xingwen_-CSDN_vue_2021]

> ** 实现多个根据不同条件显示不同文字的方法。**

通过“v-if,v-else”指令可以实现条件选择。但是，如果是多个连续的条件选择，则需要用到计算属性computed。例如在输入框中未输入内容时，显示字符串‘请输入内容’，否则显示输入框中的内容，代码如下。

<div id="app">
     
    <input type="text  v-model="inputvalue">
     
    <hl>  {  { showValue } }</h1>
     
    </div>
     
    var app = new Vue ( {
     
     e1："#app'， 
    data：{
    inputvalue：'  '
    computed: {
     showValue:function ( ) {
    return this. inputvalue | | '请输入内容'
           }
    }
    })

> ** 说一下Vue.js页面闪烁\{ \{message\}\}.**

业务场景：最近在做JSP项目，然后又引入vue.js做前端，然后启动页面时候出现\{ \{message\}\}占位符显示出来，然后再加载页面，有点闪屏问题，体验不是很好，这种情况有可能是网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染

方法①：出现这种，可以检查一下样式文件是否放在文件最前面，js文件要放在最后面，这也是一种规范。或者也可以使用link引用

方法②：通过网上资料找到vue.js中的v-cloak命令，v-cloak用法：

css文件
    <style>
       @import "${css}/project/index.css";
        [v-cloak]{
            display: none;!important;
        }
    </style>
    html文件
    <div id="app" v-cloak>
      <div class="container"></div>
    </div>

> **如何解决数据层级结构太深的问题？ **

vue 在渲染组件时，如果数据结构太深。再动态修改数据时，组件并不会更新。使用this.$forceUpdate()

> **.Vue.js文件中的样式覆盖不生效的问题如何解决？ **

**有两个解决办法**

**方法一**

你可以在一个组件中同时使用有作用域和无作用域的样式：

**方法二**

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

只作用于css！！！！！！！！！！！！！！

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

如果是sass/less的话可能无法识别，这时候需要使用 /deep/ 选择器了。

> 在Vue.js开发环境下调用接口，如何避免跨域？

> **什么是数据的丢失？**

如果在初始化时没有定义数据，之后更新的数据是无法触发页面渲染更新的，这部分数据是丢失的数据（因为没有设置特性），这种现象称为数据的丢失

> **如何检测数据变化？**

[2021最新VueJS面试题(附答案)\_shi\_xingwen的博客-CSDN博客\_vue面试题2021][2021_VueJS_shi_xingwen_-CSDN_vue_2021]

**微信小程序**

> **1.请谈谈微信小程序主要目录和文件的作用？**

*  App.js 项目的入口文件，写入全局的公共方法，像本地存储的数据；
 *  App.json 底部tab, 标题栏和路等设置；
 *  App.wxss 公共样式，引入iconfont等；
 *  pages 里面包含一个个具体的页面；
 *  index.json (配置当前页面标题和引入组件等)；
 *  index.wxml (页面结构--模板文件)；
 *  index.wxss (页面样式表)；
 *  index.js (页面的逻辑，请求和数据处理等)；
 *  project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；

> ** 2 请谈谈wxml与标准的html的异同？到其他**

相同:都是用来描述页面的结构；

不同:

*  多了一些 wx:if 这样的属性以及 \{ \{ \}\} 这样的表达式
 *  WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
 *  都由标签、属性等构成；
 *  标签名字不一样，且小程序标签更少，单一标签更多；
 *  组件封装不同， WXML对组件进行了重新封装，
 *  小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

> ** 3.请谈谈WXSS和CSS的异同？**

相同:都是用来描述页面的样子；

不同:

*  WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
 *  WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位rpx；
 *  WXSS 仅支持部分 CSS 选择器；
 *  WXSS 提供全局样式与局部样式

> 4.你是怎么封装微信小程序的数据请求的？

1.在根目录下创建api目录及index.js文件和request.js文件；

![20200715180415338.png][]

2.在request.js 封装基础的get, post 和 put，delete方法和一个请求公共的方法，创建函数设置请求体，带上token和异常处理等；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 10][]                ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 11][]

3.根据页面数据请求的需要, 导出增删改查4个方法

![20200715181313524.png][]

4.index.js-------------->是写请求接口的,引入4个方法,并根据不同接口使用不同函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 12][]

5.在具体的页面中导入；

> **5 小程序页面间有哪些传递数据的方法？**

*  使用全局变量实现数据传递

在`app.js`中可以定义全局变量`globalData`， 旧页面将要传递的数据赋值存放在里面，新页面调用全局变量获取传递数据值。

*  使用的时候通过`getApp()`拿到存储的信息
 *  这种方式一般适用于多个页面或者全部页面都需要获取使用同一个数据，比如一开始进入首页就获取到的用户信息等；

// app.js
    
    App({
         // 全局变量
      globalData: {
        name: null
      }
    })
    
    //pageA.js
    ···
    getApp().globalData.name = "jake";
    
    
    //pageB.js
    ···
    this.setData({
      userName: getApp().globalData.name
    });

*  页面跳转或重定向时，使用url带参数传递数据

在使用`wx.navigateTo`或者`wx.redirectTo`的时候，可以将部分数据放在url里面，在新页面`onLoad`的时候获取且初始化。

//pageA.js
    
    // Navigate
    wx.navigateTo({
      url: '../pageB/pageB?name=jake&gender=male',
    })
    
    // Redirect
    wx.redirectTo({
      url: '../pageB/pageB?name=jake&gender=male',
    })
    
    // pageB.js
    ...
    Page({
      onLoad: function(option){
        console.log(option.name + 'is' + option.gender);
        this.setData({
          option: option
        });
      }
    })

*  使用组件模板 template传递参数
 *  使用缓存传递参数

**使用小程序中的本地缓存Storage，旧页面将传递数据存入缓存中，新页面通过调用获取缓存的API得到数据。**

注意：

*  Storage每次存入会覆盖掉原来该 key 对应的内容。
 *  如果用户主动删除小程序或因存储空间原因被系统清理，Storage中数据将被清除。
 *  单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

//pageA.js
    ···
    wx.setStorageSync('sessionId', "session");
    
    
    //pageB.js
    ···
    var sessionId = wx.getStorageSync('sessionId');

*  使用数据库传递数据

> **6.请谈谈小程序的双向绑定和vue的异同？**

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

> **7 请谈谈小程序的生命周期函数？**

*  生命周期函数-onLoad: 页面加载;(一个页面只会调用一次)
 *  onShow() 页面显示/切入前台时触发，一般用来发送数据请求；(每次打开页面都会调用一次)
 *  onReady() 页面初次渲染完成时触发(一个页面只会调用一次，代 表页面已经准备妥当，可以和视图层进行交互)
 *  onHide() 页面隐藏(当navigateTo或底部tab切换时调用)
 *  onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时

> 8 简述微信小程序原理？

*  小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
 *  它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
 *  它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
 *  功能可分为webview和appService两个部分；
 *  webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
 *  两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

> **9.小程序视图渲染结束回调？**

使用setData(data, callback)，在callback回调方法中添加后续操作代码

> **10.this.setData**

赋值用的,会让页面重新渲染,如果直接用data里赋值,页面不会重新渲染,与vue的不同之处

> **11.方法传值**

问题:点击方法怎么获得传的值?

可以data-参数名 = "传的值"    wxml

e.currentTarget.dataset.属性值 js

接收值：options.属性值

> **12.小程序2点间距离**

获取当前用的地理位置   wx.getlocal

用wx.getlocal拿到经纬度,再用后台返的经纬度,再在前端方法计算2点间距离

PC端

1.引入腾讯地图js文件

2.页面创建一个节点(div)

3.初始化新建地图实例的一个方法

搜索:通过调用腾讯地图的API实现

> **13.e:事件对象**

> 14.json:小程序页面的配置

例如:页面标题,颜色什么的都可以在这里面设置

主要文件:

app.json   全局配置  tarBar

app.js       入口文件必须有的

> **15.小程序页面间有哪些传递数据的方法**

var app = get App()

app:存储全局变量或者存在本地

缓存中:localStorage:用于微信小程序自己的方法

> **16.小程序跳转方式有几种?**

*  wx.navigateTo:          正常跳转可以返回
 *  wx.redirectTo             跳转后当前页面关闭
 *  wx:relanuch           跳转页面后所有页面
 *  wx:swichTab          调到tab页
 *  前3个不能跳转到tab页

> **17.wxss和css有哪些不一样**

在css上做了一些补充和修改

1.  单位:rpx
2.  用import引入外部样式

例如:2个页面相同样式比较多就可以用引入  的方式

> **18.如何提高微信小程序的应用速度？**

[微信小程序之提高应用速度小技巧 - 程序员大本营![icon-default.png_t_L892][]https://www.pianshen.com/article/3958856342/][- _icon-default.png_t_L892_https_www.pianshen.com_article_3958856342]

1.  提高页面加载速度
2.  用户行为预测
3.  组件化方案
4.  减少默认data的大小

> 19.组件间通信

[小程序中父子组件间的通信与事件 - 与f - 博客园![icon-default.png_t_L892][]https://www.cnblogs.com/fps2tao/p/11368357.html][- _f - _icon-default.png_t_L892_https_www.cnblogs.com_fps2tao_p_11368357.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 14][]

> 20.前端分页--分页

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 15][]

> **22.组件传值 **

**1.父组件引用子组件**

父组件json文件中(局部的)

"usingComponets":{
    
    "customerSelector":"/compnents/customerSelector/index"
    
        }

子组件中json

{
      "component": true
    }

2.父组件中给组件传的值

<empty-image tableList="{
       {tableList.list}}"></empty-image>

3.子组件接收

// 无数据
    Component({
      properties: {
        tableList: {
          type: Array,
          value: []
        }
      }
    })

2**：子组件传值给父组件**

子组件在需要传值时，使用triggerEvent传给父组件一个事件( myevent ），并传递想要给父组件的值( sonParam )

![20200715152751917.png][]

在父组件中，子组件的引用处，通过这个myevent事件绑定一个方法( onMyEvent )

![format_png][]

在父组件的js中，定义这个方法onMyEvent，在这个方法内就可以获取到子组件传递过来的值了

![20200715152835976.png][]

> **23.app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义？ **

*  pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
 *  window字段 —— 小程序所有页面的顶部背景颜色（"navigationBarBackgroundColor": "\#fff"”,），文字颜色定义在这里的
 *  tab字段—小程序全局顶部或底部tab

> **24.小程序的wxss和css有哪些不一样的地方？ **

新像素单位 rpx样式可直接使用import导入

1、尺寸单位 rpx

rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

2、使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束

/** index.wxss **/
    
    @import './base.wxss';
    
    .container{
        color: red;
    }

> ** 25.小程序有哪些参数传值的方法？**

给HTML元素添加data-属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象；  
设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值；  
在navigator中添加参数传值。

> **26.小程序简单介绍下三种事件对象的属性列表？**

*  基础事件（BaseEvent）

1.  type: 事件类型
2.  timeStamp：事件生成时的时间戳
3.  target：触发事件的组件的属性值集合
4.  currentTarget：当前组件的一些属性集合

*  自定义事件（CustomEvent）

1.  detail

*  触摸事件（TouchEvent）

1.  touches
2.  changedTouches

> **27.小程序关联微信公众号如何确定用户的唯一性？**

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union\_id.后端需要进行对称解密。

> **28.微信小程序如何实现下拉刷新？ **

用view代替scroll-view，设置onPullDownRefresh函数实现，在json文件中设为enablePullDownRefresh:true

> **29.bindtap和catchtap的区别？ **

*  bind事件绑定不会阻止冒泡事件向上冒泡
 *  catch事件绑定可以阻止冒泡事件向上冒泡

> **30.rpx:小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率的屏幕。**

> **31.页面栈及路由跳转**

路由是由一个栈维护的，这个页面栈的长度是有限的。小程序页面栈存放最多10个。

[微信小程序——页面栈及路由跳转\_五柳-CSDN博客\_小程序中的redirect会不会进入路由栈][-CSDN_redirect]

> ** 33.tabBar设置不显示**

1.  tabBar的数量少于2项或超过5项都不会显示；
2.  tabBar写法错误导致不显示；

> **34.微信小程序登录流程**

1.调用wx.login()获取临时登录凭证code,并回传到开发者服务器

> **35.授权**

wx.getSetting

> **36.微信小程序与H5的区别？ **

*  1.运行环境不同（小程序在微信运行，h5在浏览器运行）；
 *  2.开发成本不同（h5需要兼容不同的浏览器）；
 *  3.获取系统权限不同（系统级权限可以和小程序无缝衔接）；
 *  4.应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

1.浏览器的存储方式有哪些?

> 如何自定义头部？

> 如何自定义底部？

### ** uni-app面试题** ###

> 生命周期

> 条件编译

**React面试题**

> [React面试题，全全全！！！（全家桶）\_qq\_40055200的博客-CSDN博客\_react 面试][React_qq_40055200_-CSDN_react]

**HTTP面试题**

> **1.HTTP有哪些请求方法?**

HTTP1.0定义了3中方法:GET,POST,HEAD

HTTP1.1新增了5种请求:OPTIONS,PUT,DELETE,TRACE和CONNECT

> **2.以上方法具体有什么作用?**

*  GET:请求指定的页面信息，并返回实体主体
 *  POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。
 *  PUT:从客户端向服务器传送的数据取代指定的文档的内容。
 *  DELETE: 请求服务器删除指定的页面的数据。
 *  HEAD:  只请求页面的首部。
 *  OPTIONS:允许客户端查看服务器的性能

> **3.GET和POST有什么区别?**

1.  数据传输不同:GET请求通过URL传输数据,而POST的数据通过请求体传输
2.  安全性不同:POST数据因为在请求体内,所以有一定的安全性保证;而GET的数据在URL中,通过历史记录,缓存很容易查到数据信息

> **4..什么是幂等性**

幂等不管进行多少次重复操作,都是实现相同的结果.

> **5.REST请求中哪些是幂等操作(rest:前后台通信的一种方式)**

*  GET,PUT,DELETE都是幂等操作,而POST不是
 *  GET请求很好理解，对资源做查询多次，此实现的结果都是一样的。
 *  PUT请求的幂等性可以这样理解，将A修改为B，它第一次请求值变为了B，再进行多次此操作，最终的结果还是B，与一次执行的结果是一样的，所以PUT是幂等操作。
 *  同理可以理解DELETE操作，第一次将资源删除后，后面多次进行此删除请求，最终结果是一样的，将资源删除掉了。
 *  POST不是幂等操作，因为一次请求添加一份新资源，二次请求则添加了两份新资源，多次请求会产生不同的结果，因此POST不是幂等操作。(对于POST请求，两次调用POST请求，可能就会在服务器创建两份资源，所以当然不是幂等的。)

> **6.PUT和POST都是给服务器发送资源的,有什么区别?**

区别:幂等性（PUT方法是幂等的：连续调用一次或者多次的效果相同（无副作用），而POST方法是非幂等的。）

我们在开发一个博客系统，当我们要创建一篇文章的时候往往用`POST https://www.jianshu.com/articles`，这个请求的语义是，在articles的资源集合下创建一篇新的文章，如果我们多次提交这个请求会创建多个文章，这是非幂等的。

而`PUT https://www.jianshu.com/articles/820357430`的语义是更新对应文章下的资源（比如修改作者名称等），这个URI指向的就是单一资源，而且是幂等的，比如你把『刘德华』修改成『蔡徐坤』，提交多少次都是修改成『蔡徐坤』

GET和POST方法区别?

*  get重点在从服务器上获取资源,post重点在向服务器发送数据
 *  get传输数据是通过URL请求，以field（字段）= value的形式，置于URL后，并用"?"连接，多个请求数据间用"&"连接，如http://127.0.0.1/Test/login.action?name=admin&password=admin，这个过程用户是可见的；  
    post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；
 *  Get传输的数据量小，因为受URL长度限制，但效率较高；  
    Post可以传输大量数据，所以上传文件时只能用Post方式；(自己总结:get传输数据量小,但是高效;post传输数据量大)
 *  get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等；  
    post较get安全性较高；(自己总结:post安全性比get高)
 *  get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。  
    post支持标准字符集，可以正确传递中文字符。(get只支持ASCII字符;post支持标准字符集)

> **7.PUT和PATCH都是给服务器发送修改资源，有什么区别？**

**PUT和PATCH都是更新资源，而PATCH用来对已知资源进行局部更新.**

比如我们有一篇文章的地址`https://www.jianshu.com/articles/820357430`,这篇文章的可以表示为:

article = {
        author: 'dxy',
        creationDate: '2019-6-12',
        content: '我写文章像蔡徐坤',
        id: 820357430
    }

当我们要修改文章的作者时，我们可以直接发送`PUT https://www.jianshu.com/articles/820357430`，这个时候的数据应该是

{
        author:'蔡徐坤',
        creationDate: '2019-6-12',
        content: '我写文章像蔡徐坤',
        id: 820357430
    }

这种直接覆盖资源的修改方式应该用put，但是你觉得每次都带有这么多无用的信息，那么可以发送`PATCH https://www.jianshu.com/articles/820357430`，这个时候只需要:

{
        author:'蔡徐坤',
    }

> **8.http的请求报文是什么样的？**

请求报文有4部分组成:

*  请求行:请求方法,地址,http版本信息.他们用空格分隔.例如, GET /index.html HTTP/1.1
 *  请求头部:由关键字和值组成,用英文冒号分隔;
 *  空行
 *  请求体

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 16][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 17][]

*  请求体: post put等请求携带的数据  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 18][]

> **9.http的响应报文是什么样的？**

请求报文有4部分组成:

*  响应行:由协议版本,状态码和状态码原因短语组成;例如HTTP/1.1 200 OK
 *  响应头:响应部首组成
 *  空行
 *  响应体:服务器响应的数据

![20200701162519126.jpg][]

![20200701113006313.png][]

> **10.HTTP的部首有哪些？**

// ✨重点

**通用首部字段（请求报文与响应报文都会使用的首部字段）**

*  Cache-Control  控制缓存 ✨(比说）![439e446a78fc44b88cff0dc2de1bd8aa.png][]
 *  Connection 连接管理、逐条首部 ✨--TCP![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_9_color_FFFFFF_t_70_g_se_x_16][]
 *  Date 创建报文的日期✨(必说）--[HTTP协议之响应头Date与Age - 扫驴 - 博客园][HTTP_Date_Age - _ -]
 *  Transfor-Encoding 报文主体的传输编码格式 ✨(必说）

**请求首部字段（请求报文会使用的首部字段）**

*  Accept 客户端请求的浏览器类型 ✨![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_11_color_FFFFFF_t_70_g_se_x_16][]
 *  Accept-Encoding 优先可处理的编码格式✨![5aba7b5496b9456390141972b50fb35f.png][]
 *  Accept-Language 优先可处理的自然语言✨![3fc89b2cac684bbeaef04a1918c56c92.png][]
 *  Accept-Charset 优先可以处理的字符集✨
 *  Authorization web的认证信息 ✨(必说）
 *  Host 请求资源所在服务器 ✨![4c33f66f2d4241f986ea307e7f17182d.png][]
 *  User-Agent 客户端程序信息 ✨![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**响应首部字段（响应报文会使用的首部字段）**

*  Accept-Ranges 能接受的字节范围✨
 *  Location 令客户端重定向的URI ✨
 *  Server 服务器的信息 ✨![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_8_color_FFFFFF_t_70_g_se_x_16][]
 *  ETag 能够表示资源唯一资源的字符串 ✨

**实体首部字段（请求报文与响应报文的的实体部分使用的首部字段）**

*  Allow 资源可支持http请求的方法 ✨                  // Allow：GET, HEAD
 *  Content-Language 实体的资源语言✨               //Content-Lanuage: zh-CN
 *  Content-Encoding 实体的编码格式✨                   // Content-Encoding: gizp    
 *  Content-Length 实体的大小（字节）✨              // Content-Length: 15000
 *  Content-Type 实体媒体类型✨
 *  Content-Range实体主体的位置返回✨
 *  Last-Modified 资源最后的修改资源 ✨
 *  Expires 实体主体的过期资源 ✨  
    [http协议基础（十）实体首部字段 - 疯了的小蜗 - 博客园][http_ - _ -]

> **11.HTTP的状态码有哪些？**

2XX 成功

*  200 OK，表示从客户端发来的请求在服务器端被正确处理 ✨(请求成功)
 *  204 No content，表示请求成功，但响应报文不含实体的主体部分
 *  206 Partial Content，进行范围请求

3XX 重定向

*  301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
 *  302 found，临时性重定向，表示资源临时被分配了新的 URL ✨(重定向,临时被分配新的url)
 *  303 see other，表示资源存在着另一个 URL，应使用 GET 方法丁香获取资源
 *  304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
 *  307 temporary redirect，临时重定向，和302含义相同

4XX 客户端错误

*  400 bad request，请求报文存在语法错误 ✨(请求无效,提交数据的字段名与后端要的不一样)[HTTP 400 错误 - 请求无效 (Bad request) - beppezhang - 博客园][HTTP 400 _ - _ _Bad request_ - beppezhang -]
 *  401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息 ✨(token失效)[POST请求返回：401 Unauthorized\_释梦燃的博客-CSDN博客][POST_401 Unauthorized_-CSDN]
 *  403 forbidden，表示对请求资源的访问被服务器拒绝 ✨(一般为跨域问题,请求头不一样)
 *  404 not found，表示在服务器上没有找到请求的资源 ✨(请求路径不对)
 *  408 Request timeout, 客户端请求超时(请求超时)

5XX 服务器错误

*  500 internal sever error，表示服务器端在执行请求时发生了错误 ✨
 *  503 service unavailable，服务器正忙✨

> 12.同样是重定向307，303，302的区别？同样是重定向307，303，302的区别？

302是http1.0的协议状态码，在http1.1版本的时候为了细化302状态码又出来了两个303和307。

303明确表示客户端应当采用get方法获取资源，他会把POST请求变为GET请求进行重定向。 307会遵照浏览器标准，不会从post变为get。

> **13.为什么有了HTTP为什么还要HTTPS？**

https是安全版的http，因为http协议的数据都是明文进行传输的，所以对于一些敏感信息的传输就很不安全，HTTPS就是为了解决HTTP的不安全而生的。

> **14.HTTPS是如何保证安全的？**

对称加密：即通信的双方都使用同一个秘钥进行加解密，比如特务接头的暗号，就属于对称加密

对称加密虽然很简单性能也好，但是无法解决首次把秘钥发给对方的问题，很容易被hacker拦截秘钥。

非对称加密：

1.  私钥 + 公钥= 密钥对
2.  即用私钥加密的数据,只有对应的公钥才能解密,用公钥加密的数据,只有对应的私钥才能解密
3.  因为通信双方的手里都有一套自己的密钥对,通信之前双方会先把自己的公钥都先发给对方
4.  然后对方再拿着这个公钥来加密数据响应给对方,等到到了对方那里,对方再用自己的私钥进行解密

非对称加密虽然安全性更高，但是带来的问题就是速度很慢，影响性能。

解决方案：

那么结合两种加密方式，将对称加密的密钥使用非对称加密的公钥进行加密，然后发送出去，接收方使用私钥进行解密得到对称加密的密钥，然后双方可以使用对称加密来进行沟通。

此时又带来一个问题，中间人问题：

如果此时在客户端和服务器之间存在一个中间人,这个中间人只需要把原本双方通信互发的公钥,换成自己的公钥,这样中间人就可以轻松解密通信双方所发送的所有数据。

所以这个时候需要一个安全的第三方颁发证书（CA），证明身份的身份，防止被中间人攻击。

证书中包括：签发者、证书用途、使用者公钥、使用者私钥、使用者的HASH算法、证书到期时间等

![2019-06-14-12-30-18][]

但是问题来了，如果中间人篡改了证书，那么身份证明是不是就无效了？这个证明就白买了，这个时候需要一个新的技术，数字签名。

数字签名就是用CA自带的HASH算法对证书的内容进行HASH得到一个摘要，再用CA的私钥加密，最终组成数字签名。

当别人把他的证书发过来的时候,我再用同样的Hash算法,再次生成消息摘要，然后用CA的公钥对数字签名解密,得到CA创建的消息摘要,两者一比,就知道中间有没有被人篡改了。

这个时候就能最大程度保证通信的安全了。

> **14.Http与Https的区别：**

1.  HTTP 的URL 以**http://** 开头，而HTTPS 的URL 以**https://** 开头
2.  HTTP 是不安全的，而 HTTPS 是安全的
3.  HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
4.  在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
5.  HTTP 无法加密，而HTTPS 对传输的数据进行加密
6.  HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

> **15.一次完整的HTTP请求所经历的7个步骤**

在一次完整的HTTP通信过程中，web浏览器与web服务器之间要经历7个步骤

1.  建立TCP连接
2.  web浏览器向web服务器发送请求命令
3.  web浏览器发送请求头信息
4.  web服务器应答
5.  web服务器发送应答信息
6.  web服务器向浏览器发送浏览器发送数据
7.  web服务器关闭TCP连接

1.web浏览器首先要通过网络与Web服务器服务器之间通过TCP建立连接，TCP与IP协议共同构建Internet

7.若浏览器或者服务器的头信息中加入了这样一段代码connection：Keep-alive则TCP连接会保持打开状态，可以继续通过相同的连接发送请求

[HTTP面试题（四）：一次完整的HTTP请求所经历的7个步骤\_小杨的博客-CSDN博客][HTTP_HTTP_7_-CSDN]

[.1一次完整的HTTP请求所经历的7个步骤 - Ruthless - 博客园][.1_HTTP_7_ - Ruthless -]

> 16.HTTP1.1版本新特性

*  默认持久连接节省通信量,只要客户端服务端任意一端没有明确提出断开TCP连接,就一直保持连接,可以发送多次HTTP请求
 *  管线化,客户端可以同时发出多个HTTP请求,而不用一个个等待响应
 *  断点续化(实际上就是利用http消息头使用分块传输编码,将实体主体分块传输)

> **17.TCP/IP面试整理**

[TCP/IP 面试题整理\_我真的不会Coding的博客-CSDN博客][TCP_IP _Coding_-CSDN]

[youHTTP、TCP、IP协议常见面试题\_weixin\_42716620的博客-CSDN博客][youHTTP_TCP_IP_weixin_42716620_-CSDN]

> **一般如何处理用户敏感信息？  **

对数据进行加密，md5等

### jsencrypt介绍 ###

在做项目中的登录功能时一般是通过form表单或者ajax方式将参数提交到服务器进行验证，在这个过程中，在前端对登录密码先进行一次加密的话，安全性肯定要优于直接提交的方式。

使用方法：

安装：

npm install jsencrypt

引入

import JSEncrypt from 'jsencrypt'

创建js文件

// import JSEncrypt from 'jsencrypt/bin/jsencrypt'
    
    // 密钥对生成 ：有一个地址，会生产一对公钥和私钥
    
    const publicKey = ''
    
    const privateKey = ''
    
    // 加密
    export function encrypt(txt) {
      const encryptor = new JSEncrypt()
      encryptor.setPublicKey(publicKey) // 设置公钥
      return encryptor.encrypt(txt) // 对数据进行加密
    }
    
    // 解密
    export function decrypt(txt) {
      const encryptor = new JSEncrypt()
      encryptor.setPrivateKey(privateKey) // 设置私钥
      return encryptor.decrypt(txt) // 对数据进行解密
    }

登录form使用

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

> **浏览从输入网址到回车发生了什么；**

通俗的说：

搜索浏览器自身的缓存（浏览器会检查是否有响应的cookie）

搜索本机其他浏览器缓存

host解析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 19][]

> **前端安全性问题（CSRF、XSS） **

[web大前端开发中一些常见的安全性问题\_在web前端的道路上,越走越远!-CSDN博客\_常见的前端安全性问题有哪些][web_web_-CSDN]

跨站脚本攻击(XSS攻击）

XSS是常见的Web攻击术之一。所谓的跨站脚本攻击指的是： 恶意攻击者往Web页面注入恶意Script代码，用户浏览这些网页的时候，就会执行这些代码，从而窃取用户得cookie信息.

解决方案：输入过滤：对用户输入的数据做一定的过滤。如输入的格式是否符合条件，像电话号

跨域请求伪造（CSRF攻击）：是一中常见Web攻击

CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是转账.

解决办法：手机验证码

文件上传漏洞：

解决方案：

1.  检查服务器是否判断了文件上传类型及后缀
2.  定义上传文件为白名单，即只有白名单里面类型的文件可以上传

> 前端跨域、浏览器缓存、cookie, session, token, localstorage, sessionstorage；

> ** TCP连接(三次握手, 四次挥手)**

[TCP协议三次握手和四次握手机制-动画详解\_code\_monkey的博客-CSDN博客\_tcp三次握手详解][TCP_-_code_monkey_-CSDN_tcp]

> **WEB前端性能**

[前端性能优化以及前端安全\_holily\_的博客-CSDN博客][holily_-CSDN]

Html:

1.  避免代码的深层及嵌套。因为层级越深在初始化的时候越占内存
2.  尽量少使用html5丢弃的iframe标签，因为在页面加载时候回先加载iframe标签，加载完在加载其他的标签
3.  像img,link,script等元素的src或者href的属性值不为空，就算我们写src=””浏览器仍然会发送请求
4.  在html文档开始就指定字符集。这样做目的是有助于浏览器加载时能立即解析html代码

CSS部分：

1.  少使用!Important
2.  公共样式抽取，减少代码冗余，重复的样式
3.  用link代替@important
4.  将样式置顶，这样做好处是文档加载完之前样式就已经加载完，不用等样式加载完毕后再加载

1.  尽量减少全局变量，和全局方法的定义
2.  用setTimeout或者加载loading避免页面失去响应
3.  尽量减少多余代码，公共代码进行封装

优化网站性能：

1.  减少http请求：合并文件
2.  减小cookie大小
3.  将js和css从外部引入
4.  优化图片

为什么要减小Cookie的大小?

如果对某个域(Domain)保存了Cookie，那么针对这个域的所有请求，都会发送这些所有的Cookie（哪怕当前请求根本用不着，例如针对图片的请求），大量地、重复地发送Cookie毫无疑问会增加网络的流量，并因此而降低请求被执行的性能。

如果我没有记错的话，这个文件的体积是不允许超过4KB（4096字节）的。

--------------------

> **浏览器面试题**

> 1.浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程。

浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程。

加载过程：

*  浏览器根据DNS服务起解析得到域名的IP地址
 *   向IP的机器发送HTTP请求
 *  服务器收到，处理并发送HTTP请i去
 *  浏览器得到返回内容

渲染过程

*  根据HTML结构生成  DOM 树
 *  根据CSS生成CSSOM
 *  将DOM和CSSOM整合形成 RenderTree
 *  根据RenderTree 开始渲染和展示
 *  遇到<script>时，会执行并阻塞渲染

**React面试题**

**git面试题**

**1.强制推送   **             git push -- force

**2.克隆远程代码**

git clone url

**3.查看提交日志**

git log

**4.拉取远程代码自动合并到当前分支（超级好用的命令）**

git pull origin 分支名

**5.查看分支本地分支**

git branch

**6.查看远程分支**

git branch -a

**7.本地新建分支a**

git branch 分支a

**8.将当前分支切换到 分支a**

git checkout 分支a

[CSDN]: https://mp.csdn.net/mp_blog/creation/editor/119530785
[HTML5 _from_ - _ -]: https://www.cnblogs.com/ninghu996926/p/11582396.html
[CSS3 iconfont_WU567_-CSDN]: https://blog.csdn.net/WU567_/article/details/104982557
[Cookie_ LocalStorage _ SessionStorage-_-bubuko.com]: http://www.bubuko.com/infodetail-1813807.html
[cookie_-CSDN]: https://bbs.csdn.net/topics/330203634
[http_cookie_johnhuster_-CSDN]: https://blog.csdn.net/john1337/article/details/104571244?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-104571244.nonecase&utm_term=http%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%B8%A6cookie&spm=1000.2123.3001.4430
[embed]: http://www.w3cschool.cn/html5/html5-embed.html
[track]: http://www.w3cschool.cn/htmltags/tag-track.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020111218302294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[- _ -]: https://www.cnblogs.com/kunmomo/p/10792968.html
[th]: https://www.w3school.com.cn/tags/tag_th.asp
[td]: https://www.w3school.com.cn/tags/tag_td.asp
[DNS_ninghuax_-CSDN_dns]: https://blog.csdn.net/qq_38218238/article/details/82425974
[title_h1_b_strong_i_em]: https://www.cnblogs.com/1463069300limingzhi/p/10853675.html
[box-sizing_border-box _...-]: https://www.imooc.com/qadetail/277827
[css]: https://zhidao.baidu.com/question/81427828.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200812140446751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[20200706103906243.png]: https://img-blog.csdnimg.cn/20200706103906243.png
[-webkit-overflow-scrolling_touch_ - Hrone -]: https://www.cnblogs.com/hrone/p/10143960.html
[Link 1]: https://juejin.cn/post/6844903447376953357
[div_div_100px_ - _ -]: https://www.cnblogs.com/xutongbao/p/9924883.html
[Flex_flex_ _flex_flex-grow_Mirage_-CSDN]: https://blog.csdn.net/qq_43413788/article/details/106005924
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200812214909890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200812222203695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[Link 2]: https://www.jianshu.com/p/bd7d1597d12d
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200812222934621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200812223134719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[CSS3_ -]: https://www.jianshu.com/p/5856c4ae91f2
[-]: https://www.jianshu.com/p/ad0be1cad554
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e91cd81e897d4061bc1ac5f795b935a5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9ead0db9a0e540d591e6aab8d6f762ad.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/382f00f37f464eab84d4b425cd4525dd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9ff38585c2584e5eb8651c073cd1fc60.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_14,color_FFFFFF,t_70,g_se,x_16
[line-height _ height _ - _i -]: https://www.cnblogs.com/expedition/p/11294002.html
[syx_12_-CSDN]: https://blog.csdn.net/syx_12/article/details/119927532
[- _ - 1]: https://www.cnblogs.com/starwei/p/12459706.html
[css reset - _ -]: https://www.cnblogs.com/maggie-pan/p/6392185.html
[CSDN 1]: https://mp.csdn.net/mp_blog/creation/editor/120143987
[Number_string_boolean_null_undefined]: https://blog.csdn.net/qq_40471415/article/details/88837412#Numberstringbooleannullundefined_1
[1.toString]: https://blog.csdn.net/qq_40471415/article/details/88837412#1toString_3
[2.]: https://blog.csdn.net/qq_40471415/article/details/88837412#2_9
[1.parseInt]: https://blog.csdn.net/qq_40471415/article/details/88837412#1parseInt_17
[2.parseFloat]: https://blog.csdn.net/qq_40471415/article/details/88837412#2parseFloat_31
[js_Baron_-CSDN_js]: https://blog.csdn.net/qq_40471415/article/details/88837412
[JS_-CSDN_js]: https://blog.csdn.net/qq_41999617/article/details/81174185
[https_segmentfault.com_a_1190000016418021_utm_source_tag-newest]: https://segmentfault.com/a/1190000016418021?utm_source=tag-newest
[js _new_-CSDN_js new]: https://blog.csdn.net/qq_27674439/article/details/99095336?utm_term=js%E4%B8%ADnew%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-0-99095336&spm=3001.4430
[js_ - _ -]: https://www.cnblogs.com/lvmylife/p/5763214.html
[JS CLass_ - _web_ -]: https://www.cnblogs.com/zcl997136048/p/9283687.html
[Js_--_sunshine_-CSDN_js]: https://blog.csdn.net/qq_22896159/article/details/81779667
[Link 3]: https://www.cnblogs.com/leftJS/p/10948138.html
[js_ - _ - 1]: https://www.cnblogs.com/wangzisheng/p/10025550.html
[Link 4]: https://juejin.im/post/5b684f30f265da0f9f4e87cf
[Link 5]: https://juejin.cn/post/6844904016325902344?from=from_parent_mindnote
[https_github.com_mqyqingfeng_Blog_issues_22]: https://github.com/mqyqingfeng/Blog/issues/22
[JavaScript_ underscore _ _ Issue _26 _ mqyqingfeng_Blog _ GitHub]: https://github.com/mqyqingfeng/Blog/issues/26
[https_segmentfault.com_a_1190000007535316]: https://segmentfault.com/a/1190000007535316
[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_9]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9
[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_10]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/10
[es6--]: https://links.jianshu.com/go?to=http%3A%2F%2Fes6.ruanyifeng.com%2F%23docs%2Fclass-extends
[15 _ http2 _ _ Issue _14 _ Advanced-Frontend_Daily-Interview-Question _ GitHub]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/14
[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_15]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15
[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_21]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/21
[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_22]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22
[JavaScript _ this _ _ - _ -]: https://www.cnblogs.com/youngGao/p/8252998.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210909232336161.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_16,color_FFFFFF,t_70,g_se,x_16
[Link 6]: http://baike.baidu.com/view/3615006.htm
[js_6]: https://www.cnblogs.com/ranyonsue/p/11201730.html
[JS_ - _ -]: https://www.cnblogs.com/humin/p/4556820.html
[js new_new_ - _ -]: https://www.cnblogs.com/echolun/p/10903290.html
[Javascript_-CSDN]: https://blog.csdn.net/foamflower/article/details/9165691
[https_jingyan.baidu.com_article_597a0643a743aa712b52439b.html]: https://jingyan.baidu.com/article/597a0643a743aa712b52439b.html
[javascript_ - _ -]: https://www.cnblogs.com/loveyaxin/p/11151586.html
[https_blog.csdn.net_u013681954_article_details_97299399]: https://blog.csdn.net/u013681954/article/details/97299399
[JS_ - _ - 1]: https://www.cnblogs.com/ClareZjy/p/6365891.html
[ES6_ - WhiteSpace -]: https://www.cnblogs.com/xiaowie/p/11601599.html
[Link 7]: https://www.ituring.com.cn/article/66566?from=from_parent_mindnote
[Set_-]: https://www.mybj123.com/6712.html
[js_--ES6_evior-CSDN]: https://blog.csdn.net/qq_30904985/article/details/81300883
[Vue - _ - _Vue_DOM_-_-_Vue _...https_www.jianshu.com_p_672e967e201c]: https://www.jianshu.com/p/672e967e201c
[icon-default.png_t_L892]: https://csdnimg.cn/release/blog_editor_html/release1.9.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L892
[https_www.jianshu.com_p_4b8ff44d7fce_icon-default.png_t_L892_https_www.jianshu.com_p_4b8ff44d7fce]: https://www.jianshu.com/p/4b8ff44d7fce
[favicon32.ico]: https://g.csdnimg.cn/static/logo/favicon32.ico
[Cannot read property _clearValidate_ of undefined_QQ_-CSDN_dom_resetFields_this._refs_addForm_.resetFields_addForm_nextTick_Vue.nextTick_https_www.jianshu.com_p_a7550c0e164fthis._nex..._favicon32.ico_https_blog.csdn.net_QQ_Empire_article_details_89356135]: https://blog.csdn.net/QQ_Empire/article/details/89356135
[_ Vue.js]: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97
[Vue_nextTick -]: https://www.jianshu.com/p/a7550c0e164f
[https_zhuanlan.zhihu.com_p_33036996]: https://zhuanlan.zhihu.com/p/33036996
[favicon.svg]: https://common.cnblogs.com/favicon.svg
[vue-router_ - _ - _ _vue-router_URL_URL_ _http_favicon.svg_https_www.cnblogs.com_goloving_p_9147551.html]: https://www.cnblogs.com/goloving/p/9147551.html
[http_www.xxx.com]: http://www.xxx.com/
[http_www.xxx.com_items_id]: http://www.xxx.com/items/id
[icon-default.png_t_L9C2]: https://csdnimg.cn/release/blog_editor_html/release1.9.2/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L9C2
[vue_v-if_v-show_vue_v-if_v-show_vue_v-if_v-show_vue_v-if_v-show_ v-if_v-show_ v-if _Vue.js _icon-default.png_t_L9C2_https_www.gxlcms.com_JavaScript-248140.html]: https://www.gxlcms.com/JavaScript-248140.html
[v-if_v-show_-]: http://www.mianshigee.com/question/30751mcx/
[vue_computed_watch_ - _- -]: https://www.cnblogs.com/wuqilang/p/11241604.html
[_webpack _yin_you_yu_-CSDN]: https://blog.csdn.net/yin_you_yu/article/details/80419884
[https_www.jianshu.com_p_41d161310949]: https://www.jianshu.com/p/41d161310949
[vue-router_-CSDN]: https://blog.csdn.net/crazywoniu/article/details/80942642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201110154740224.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[vuex_LuckyandLucky_-CSDN]: https://blog.csdn.net/LuckyandLucky/article/details/104209839?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
[vue_--vuex_ - kevin_ -]: https://www.cnblogs.com/xihao/p/11420884.html
[https_segmentfault.com_a_1190000015782272]: https://segmentfault.com/a/1190000015782272
[vue-router_mnilz_-CSDN_vue-router_--_query _param_query_url_ params_ params_router_id_path_router_123_-- _-params --_APP.vue_ _router-link _to_user_userId_ replace_router-link..._favicon32.ico_https_blog.csdn.net_mnilz_article_details_106568551]: https://blog.csdn.net/mnilz/article/details/106568551
[logo.png]: https://router.vuejs.org/logo.png
[_ Vue RouterVue.js _logo.png_https_router.vuejs.org_zh_guide_advanced_navigation-guards.html_E5_85_A8_E5_B1_80_E5_89_8D_E7_BD_AE_E5_AE_88_E5_8D_AB]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
[https_segmentfault.com_a_1190000013956945]: https://segmentfault.com/a/1190000013956945
[9. vue-loader_ - _ -]: https://www.cnblogs.com/dream111/p/13498766.html
[vue active-class_ -]: https://www.jianshu.com/p/37ec484a3633
[keep-alive_ -]: https://www.jianshu.com/p/9523bb439950
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0594dec434a74cb08c19a95dc3753ca7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_20,color_FFFFFF,t_70,g_se,x_16
[https_segmentfault.com_a_1190000014478664_utm_source_tag-newest]: https://segmentfault.com/a/1190000014478664?utm_source=tag-newest
[Vue_computed_watch_-CSDN]: https://blog.csdn.net/qq_35035975/article/details/106356169
[_ Vue.js 1]: https://cn.vuejs.org/v2/guide/components.html
[API _ Vue.js]: https://cn.vuejs.org/v2/api/#Vue-extend
[vue_ - _ -]: https://www.cnblogs.com/mandy-dyf/p/11528505.html
[vue _ -]: https://www.jianshu.com/p/51fb8003f312
[Vue_vue-router_ - _ -]: https://www.cnblogs.com/dengyao-blogs/p/11562257.html
[http_172.19.186.224_8080_monitor_id_1]: http://172.19.186.224:8080/#/monitor?id=1
[http_172.19.186.224_8080_monitor]: http://172.19.186.224:8080/#/monitor
[Vue _ -]: https://www.jianshu.com/p/7ebf759653f1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200903105438820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201110161439346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[56.vue_ - _ -]: https://www.cnblogs.com/dream111/p/13520349.html
[axios_ajax_changbozizf_-CSDN_axios]: https://blog.csdn.net/changbozizf/article/details/105456089?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-1-105456089.nonecase&utm_term=axios%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201116115912607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_dream111_p_13499384.html]: https://www.cnblogs.com/dream111/p/13499384.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/072e36b4d4f54f2d9fbdfe83f3385f71.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_17,color_FFFFFF,t_70,g_se,x_16
[24._ - _ -]: https://www.cnblogs.com/dream111/p/13499363.html
[keep-alive_ - 1]: https://www.jianshu.com/p/61cc584290f4
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0a9360fff71e4cb39e22003da1bc1555.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_15_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/4718c36195054ee8bf2165de2b99b1e4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a6845306d2204a269702704652d8123e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_17_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/e44f1adc469f4a76905cde477df01e82.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_17,color_FFFFFF,t_70,g_se,x_16
[Vue_nextTick_ - JoeJoan -]: https://www.cnblogs.com/Joe-and-Joan/p/11203749.html
[Vue.nextTick _ - _ -]: https://www.cnblogs.com/edwardwzw/p/12132330.html
[Vue_scoped_ - samirah -]: https://www.cnblogs.com/luov/p/9648343.html
[Link 8]: https://juejin.cn/post/6986891961559056421
[Vuex_LylBrave_-CSDN]: https://blog.csdn.net/qq_25461519/article/details/81408210
[vue_diff_ - _wind -]: https://www.cnblogs.com/wind-lanyan/p/9061684.html
[Link 9]: https://juejin.cn/post/6844903929306693645
[Link 10]: https://juejin.cn/post/6844903942254510087
[props_data_ vue_HzDoctor_-CSDN]: https://blog.csdn.net/qq_37918241/article/details/107086333
[Vue_router-link_dreamingbaobei3_-CSDN]: https://blog.csdn.net/dreamingbaobei3/article/details/103936888
[v-model_-CSDN_v-model]: https://blog.csdn.net/qq_25503949/article/details/107283152
[js_vue_ref_ - mmaotai -]: https://www.cnblogs.com/iiiiiher/p/13572453.html?ivk_sa=1024320u
[v-check_v-focus_ - _ -]: https://www.cnblogs.com/rxqlx/p/10288328.html
[Vue_-CSDN_vue]: https://blog.csdn.net/tangxiujiang/article/details/79620542
[vue-loader_ - _ -]: https://www.cnblogs.com/rxqlx/p/10288062.html
[vue_sass_liuxing393724034_-CSDN_vue _sass]: https://blog.csdn.net/liuxing393724034/article/details/83588069
[vue_ v-for _ - _ -]: https://www.cnblogs.com/chenjianbao/p/10793960.html
[vue_checkbox_ - _ -]: https://www.cnblogs.com/l-y-z/p/9186978.html
[2021_VueJS_shi_xingwen_-CSDN_vue_2021]: https://blog.csdn.net/shi_xingwen/article/details/114655369
[20200715180415338.png]: https://img-blog.csdnimg.cn/20200715180415338.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200715151047394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200715151101975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[20200715181313524.png]: https://img-blog.csdnimg.cn/20200715181313524.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200715150657923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[- _icon-default.png_t_L892_https_www.pianshen.com_article_3958856342]: https://www.pianshen.com/article/3958856342/
[- _f - _icon-default.png_t_L892_https_www.cnblogs.com_fps2tao_p_11368357.html]: https://www.cnblogs.com/fps2tao/p/11368357.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200709164454276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2020070916462242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200709164730687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[20200715152751917.png]: https://img-blog.csdnimg.cn/20200715152751917.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTY4OTI3My8yMDE5MDgvMTY4OTI3My0yMDE5MDgxNTE1MDQwNTA4My0yMzY4NTgwMzEucG5n?x-oss-process=image/format,png
[20200715152835976.png]: https://img-blog.csdnimg.cn/20200715152835976.png
[-CSDN_redirect]: https://blog.csdn.net/qq_42049445/article/details/104536394
[React_qq_40055200_-CSDN_react]: https://blog.csdn.net/qq_40055200/article/details/108549121
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200701110857287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200701110917705.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200701112819623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[20200701162519126.jpg]: https://img-blog.csdnimg.cn/20200701162519126.jpg
[20200701113006313.png]: https://img-blog.csdnimg.cn/20200701113006313.png
[439e446a78fc44b88cff0dc2de1bd8aa.png]: https://img-blog.csdnimg.cn/439e446a78fc44b88cff0dc2de1bd8aa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/aef186c5fb0c4132a174cc71f66b9000.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_9,color_FFFFFF,t_70,g_se,x_16
[HTTP_Date_Age - _ -]: https://www.cnblogs.com/saolv/p/7828529.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2220f0c6f0f7430b9e0b3fecc1c41032.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_11,color_FFFFFF,t_70,g_se,x_16
[5aba7b5496b9456390141972b50fb35f.png]: https://img-blog.csdnimg.cn/5aba7b5496b9456390141972b50fb35f.png
[3fc89b2cac684bbeaef04a1918c56c92.png]: https://img-blog.csdnimg.cn/3fc89b2cac684bbeaef04a1918c56c92.png
[4c33f66f2d4241f986ea307e7f17182d.png]: https://img-blog.csdnimg.cn/4c33f66f2d4241f986ea307e7f17182d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a85cf1bb8c714609a0361f3f244f2f43.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/19a8ea4618cb4e59a15e85822838135e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_8,color_FFFFFF,t_70,g_se,x_16
[http_ - _ -]: https://www.cnblogs.com/insane-Mr-Li/p/10142445.html
[HTTP 400 _ - _ _Bad request_ - beppezhang -]: https://www.cnblogs.com/beppezhang/p/5824986.html
[POST_401 Unauthorized_-CSDN]: https://blog.csdn.net/ShiMengRan107/article/details/101781145
[2019-06-14-12-30-18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS82LzE0LzE2YjU0NWM5YmI2ZDJmNzk_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ?x-oss-process=image/format,png
[HTTP_HTTP_7_-CSDN]: https://blog.csdn.net/weixin_44478378/article/details/107309754
[.1_HTTP_7_ - Ruthless -]: https://www.cnblogs.com/linjiqin/p/3560152.html
[TCP_IP _Coding_-CSDN]: https://blog.csdn.net/qq_40086556/article/details/82017916
[youHTTP_TCP_IP_weixin_42716620_-CSDN]: https://blog.csdn.net/weixin_42716620/article/details/82888576?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.no_search_link&spm=1001.2101.3001.4242.0
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/5f8f7dcdb4404ab3aebb3c12bcbf03c9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDAwNTUyMDA=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200810222635591.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[web_web_-CSDN]: https://blog.csdn.net/a401461843/article/details/77622299/
[TCP_-_code_monkey_-CSDN_tcp]: https://blog.csdn.net/qq_35860138/article/details/82054793
[holily_-CSDN]: https://blog.csdn.net/holily_/article/details/102622686