html

doctype的作⽤是什么？

DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析

⽂档解析类型有：

• BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。
  （如果没有声明 DOCTYPE，默认就是这个模式）
• CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯。

这三种模式的区别是什么？

• 标准模式(standards mode)：⻚⾯按照 HTML 与 CSS 的定义渲染
• 怪异模式(quirks mode)模式： 会模拟更旧的浏览器的⾏为
• 近乎标准(almost standards)模式： 会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），除此之外符合标准定义

HTML、XHTML、XML有什么区别？

• HTML(超⽂本标记语⾔): 在html4.0之前HTML先有实现再有标准，导致HTML⾮常混乱和松散
• XML(可扩展标记语⾔): 主要⽤于存储数据和结构，可扩展，⼤家熟悉的JSON也是相似的作⽤，但是更加轻量⾼效，所以XML现在市场越来越⼩了
• XHTML(可扩展超⽂本标记语⾔): 基于上⾯两者⽽来，W3C为了解决HTML混乱问题⽽⽣，并基于此诞⽣了HTML5，开头加⼊ 的做法因此⽽来，如果不加就是兼容混乱的HTML，加了就是标准模式。

什么是data-属性？

HTML的数据属性，⽤于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数据的⽬的。

你对HTML语义化的理解？

语义化是指使⽤恰当语义的html标签，让⻚⾯具有良好的结构与含义，⽐如

标签就代表段落，

代表正⽂内容等等。

语义化的好处主要有两点：

• 开发者友好：使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护
• 机器友好：带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录

这对于简书、知乎这种富⽂本类的应⽤很重要，语义化对于其⽹站的内容传播有很⼤的帮助，但是对于功能性的web软件重要性⼤打折扣，⽐如⼀个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。

HTML中行内元素与块级元素的区别

1. 行内元素：设置宽高无效；对margin仅设置左右方向有效，上下无效，padding有效；不会自动进行换行。
2. 块级元素：宽高、margin、padding都识别；可以自动换行。
3. 行内块元素：宽高、margin、padding都识别；不自动换行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

HTML5与HTML4的不同之处

• ⽂件类型声明（<!DOCTYPE>）仅有⼀型：。
• 新的解析顺序：不再基于SGML。
• 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed,figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
• 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
• input元素的新类型：date, email, url等等。
• 新的属性：ping（⽤于a与area）, charset（⽤于meta）, async（⽤于script）。
• 全域属性：id, tabindex, repeat。
• 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

html5有哪些新特性、移除了哪些元素？

HTML5现在已经不是 SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加

• 绘画canvas
• 用于媒介回放的 video和audio元素
• 本地离线存储 localStorage(长期) sessionStorage
• 语意化更好的内容元素：article、footer、header、nav、section、aside
• 表单控件：calendar、date、time、email、url、search
• 新的技术webworker、websocket、Geolocation

移除的元素：

• 纯表现的元素：basefont、big、center、font、s、strike、tt、u
• 对可用性产生负面影响的元素：frame、frameset、noframes

如何处理HTML5新标签的浏览器兼容问题?

1. 使用 html5shiv 框架

// [if lt IE 9]  如果是ie9以下，就取消注释
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
// ![endif]

2. IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签，再给新标签样式加上 display:block

如何处理浏览器兼容问题

1. 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
   解决方案：在css中使用通配符 *
2. 几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。
   解决方案：使用float属性为img布局
3. 超链接点击过后hover样式就不出现的问题？
   解决方法是改变CSS属性的排列顺序: L-V-H-A (link visited hover active)
4. cursor:hand 显示手型在 safari 上不支持
   解决方案：统一使用 cursor:pointer

HTML5头部为什么只需要写

html5不基于SGML（标准通用置标语言）,因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为，而HTML4.0基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

有哪些常⽤的meta标签？

• charset，⽤于描述HTML⽂档的编码形式

<meta charset="UTF-8" >

• http-equiv，顾名思义，相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期

<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

• viewport，控制视⼝的⼤⼩和⽐例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

src和href的区别？

• src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。
• href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。

script标签中defer和async的区别？

• defer：script被异步加载后并不会⽴刻执⾏，而是要等到整个页面在内存中正常渲染结束后，才会执行。多个 defer 脚本会按照它们在页面出现的顺序加载。
• async：同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适⽤。

有⼏种前端储存的⽅式？

cookies、localstorage、sessionstorage

这些⽅式的区别是什么？（追问）

1. 存储大小不同：cookie不能超过4k，localStorage、sessionStorage：5m或者更多
2. 数据有效期：cookie可以设置生命周期，localStorage 一直保持，手动清除，sessionStorage 关闭页面或者浏览器就清除了
3. 作用域不同：sessionStorage只能在当前页面有效，localStorage、cookie：不同页面也会存在

img 的 title 和 alt 有什么区别

• title: 通常当⿏标滑动到元素上的时候显示title,
• alt: 是<img>的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示。

css

element-ui用过的东西

Tree树形控件，Table表格，Pagination分页，Loading加载，Message消息提示，NavMenu导航菜单，Calendar日历，InfiniteScroll无限滚动，Icon图标，Button按钮，Link文字链接，Cascader级联选择器，Select选择器

CSS选择器的优先级是怎样的？

CSS选择器的优先级是：内联样式(1000) > ID选择器(100) > 类选择器(10) > 标签选择器(1)
多重样式：外部样式、内部样式和内联样式同时应用于同一个元素，优先级如下：外部<内部<内联 (如果外部样式放在内部样式的后面，则外部优先级高)

link和@import的区别？

• link属于HTML标签，⽽@import是CSS提供的。
• ⻚⾯被加载时，link会同时被加载，⽽@import引⽤的CSS会等到⻚⾯被加载完再加载。
• import只在IE 5以上才能识别，⽽link是HTML标签，⽆兼容问题。
• link⽅式的样式权重⾼于@import的权重。
• 当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是dom可以控制的。

有哪些⽅式（CSS）可以隐藏⻚⾯元素？

• opacity:0 ：本质上是将元素的透明度改为0，就看起来隐藏了，但是依然占据空间且可以交互
• visibility:hidden : 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了
• overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
• display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局
• z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
• transform: scale(0,0) : 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互

em\px\rem区别？

• px：绝对单位，⻚⾯按精确像素展示。
• em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了font-size按⾃身来计算，整个⻚⾯内1em不是⼀个固定的值。
• rem：相对单位，相对根节点html的字体⼤⼩来计算，CSS3新加属性，chrome/firefox/IE9+⽀持

块级元素⽔平居中的⽅法？

1. margin:0 auto
2. position; left:50%; transform:translateX(-50%)
3. justify-content:center (里面内容居中)

块级元素垂直居中的⽅法？

1. 使用flex布局，设置align-items:center (里面内容居中)
2. display: table-cell; vertical-align: middle; (里面内容居中)
3. position; top:50%; transform:translateY(-50%)

三栏布局，中间自适应

1. float布局：左右写上宽度，浮动，中间不管，默认就是自适应（顺序左右中）
2. position布局：三个都absolute，左右写上宽度，中间的left:200px;right:200px;这就是自适应
3. table布局：父级display:table;子级table-cell;左右写宽，中间不写宽
4. flex布局：左右写上宽度，中间 flex-grow:1;

让不定宽高元素水平居中的方法?

1. display:table; margin:0 auto;
2. float:left; position; left:50%; transform:translateX(-50%)

CSS有⼏种定位⽅式？

• static: 正常⽂档流定位，此时 top, right, bottom, left 和 z-index 属性⽆效，块级元素从上往下纵向排布，⾏级元素从左向右排列。
• relative：相对定位，此时的『相对』是相对于正常⽂档流的位置。
• absolute：相对于最近的⾮ static 定位祖先元素的偏移，来确定元素位置，⽐如⼀个绝对定位元素它的⽗级、和祖⽗级元素都为relative，它会相对他的⽗级⽽产⽣偏移。
• fixed：指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如那种回到顶部的按钮⼀般都是⽤此定位⽅式。
• sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应⽤中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。

行内元素，块级元素，行级块元素

• 行内元素：a b span select strong
• 块级元素：div ul ol li dl dt dd h1 h2 h4…p
• 行级块元素：img、input

display有哪些值，说明他们的作用

• none：此元素不显示。
• block：将元素显示为块级元素，前后会带换行符。
• inline:默认值，元素会被显示为内联元素，前后没有换行符。
• inline-block:行内块级元素。

css3的新特性

1. RGBA和透明度
2. background属性
3. text-shadow属性：向文本设置阴影。
4. font-face属性：定义自己的字体
5. border-radius属性
6. box-shadow属性：向框添加一个或多个阴影。（盒阴影）
7. word-wrap：属性允许长单词或 URL 地址换行到下一行。

如何理解z-index？

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，⽽且z-index只能影响设置了position值的元素。

如何理解层叠上下⽂？

层叠上下⽂是HTML元素的三维概念，这些HTML元素在⼀条假想的相对于⾯向（电脑屏幕的）视窗或者⽹⻚的⽤户的z轴上延伸，HTML元素依据其⾃身属性按照优先级顺序占⽤层叠上下⽂的空间。

触发⼀下条件则会产⽣层叠上下⽂：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• ⼀个 z-index 值不为 "auto"的 flex 项⽬ (flex item)，即：⽗元素 display: flex|inline-flex，
• opacity 属性值⼩于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• webkit-overflow-scrolling 属性被设置 "touch"的元素

清除浮动有哪些⽅法？

1. 在浮动元素的后面添加空div：
2. 父级添加overflow属性：auto,hidden (触发BFC)
3. 使用after伪元素清除浮动

<style>
.clearfix:after {content: '';display: block;clear: both;} 
.clearfix { *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}
</style>

4. 使用before和after双伪元素清除浮动

<style>
    .clearfix:after,.clearfix:before{content: "";display: table;}
    .clearfix:after{clear: both;}
    .clearfix{*zoom: 1;}
</style>

你对盒模型的理解？

盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

标准盒模型和怪异盒模型有什么区别？

标准盒模型下：width = content；( box-sizing: content-box)
怪异盒模型下：width = content + padding + border；(box-sizing: border-box)

谈谈对BFC的理解？

书⾯解释：BFC(Block Formatting Context)这⼏个英⽂拆解

• Box:Box 是 CSS 布局的基本单位， 直观点来说，就是⼀个⻚⾯是由很多个 Box 组成的
• Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤

简⽽⾔之，它是⼀块独⽴的区域，让处于BFC内部的元素与外部的元素互相隔离

如何形成？BFC触发条件：

1. 根元素，即HTML元素
2. position: fixed/absolute
3. float 不为none
4. overflow不为visible
5. display的值为inline-block、table-cell、table-caption

作用是什么？

1. 防⽌margin发⽣重叠
2. 两栏布局，防⽌⽂字环绕等
3. 防⽌元素塌陷

你对css sprites的理解，好处是什么？

雪碧图也叫CSS精灵， 其实就是把网页中一些背景图片整合到一张图片文件中
再利用 CSS 的background-image，background-repeat，background-position 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。

好处？

• 减少网页对 HTTP 的请求数
• 提前加载资源

不足？

• Sprite后期维护困难，如果⻚⾯背景有少许改动，⼀般就要改这张合并的图⽚
• 应用麻烦，每一张图都需要计算位置，通过调整位置来展示图片，对误差的要求很严格。
• 使用图片有局限，只能用在背景图片background-image上，不能用标签来使用。

为什么有时候⼈们⽤translate来改变位置⽽不是定位？

translate()是transform的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。

⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

伪类和伪元素的区别是什么？

是什么？

• 伪类（pseudo-class） 是⼀个以冒号(:)作为前缀，被添加到⼀个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后⾯加上对应的伪类。(:active,:focus,:hover,:link)
• 伪元素⽤于创建⼀些不在⽂档树中的元素，并为其添加样式。⽐如说，我们可以通过::before来在⼀个元素前增加⼀些⽂本，并为这些⽂本添加样式。虽然⽤户可以看到这些⽂本，但是这些⽂本实际上不在⽂档树中。 (:first-letter,:first-line,:before,:after)

区别？
伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

你对flex的理解？

web应⽤有不同设备尺⼨和分辨率，这时需要响应式界⾯设计来满⾜复杂的布局需求，Flex弹性盒模型的优势在于开发⼈员只是声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局

你对媒体查询的理解？

是什么？
媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和颜⾊。媒体查询，添加⾃CSS3，允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪，⽽不必改变内容本身,⾮常适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。

如何使⽤？
媒体查询包含⼀个可选的媒体类型和，满⾜CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会⽣效。

js面试题

介绍一下防抖和节流

• 防抖：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，就重新计时。（王者回城，搜索框）
• 节流：函数执行一次以后，让该函数在一定的时间段内不会再次执行。直至过了时间段后才会重新执行。 （王者技能冷却）

介绍一下重绘和回流

• 回流：当渲染树(render tree)的一部分或者全部元素因为尺寸，布局，显示和隐藏，或者元素内部的文字结构发生变化，导致页面需要重新构建的时候，回流就产生了。
• 重绘：当一个元素的尺寸，布局，显示和隐藏没有改变，而是改变了元素的外观风格的时候(比如修改字体颜色)，重绘就发生了。

结论：回流必定触发重绘，而重绘不一定触发回流。回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生。

宏任务和微任务

宏任务：执行栈中待执行的任务。如：setTimeout，setInterval，Dom事件，AJAX请求;
微任务：执行栈清空后立即执行的任务。如：Promise，async/await;
微任务->DOM渲染->宏任务

解释下变量提升？

JavaScript引擎的⼯作⽅式是，先解析代码，获取所有被声明的变量，然后再⼀⾏⼀⾏地运⾏。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

理解闭包吗？

是什么？
MDN的解释：闭包是函数和声明该函数的词法环境的组合。
按照我的理解就是：闭包 =『函数』和『函数体内可访问的变量总和』

闭包的作用？
闭包最⼤的作⽤就是隐藏变量，闭包的⼀⼤特性就是内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后

js有哪些类型？

基本数据类型: boolean、null、undefined、number、string、symbol
复杂数据类型: Object （array function）

如何判断是否是数组？

• Array.isArray(value)
• Object.prototype.toString.call(value)===‘[object Array]’

js的类型判断

1. typeof: 最大问题是判断数组和null等数据类型时，结果都是object
2. instanceof: 不支持基础类型判断
3. object.prototype.toString.call(value)

JavaScript的作⽤域链理解吗？

作用域：是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。
全局作用域：未定义直接赋值的变量、最外层函数和最外层函数外面定义的变量、所有window对象的属性
作用域链：如果父级也没呢？再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链 。

你对原型链的理解？

绝⼤部分的函数都有⼀个 prototype 属性,这个属性是原型对象⽤来创建新对象实例,⽽所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性。

每个对象都有__proto__属性，此属性指向该对象的构造函数的原型。
对象可以通过 __proto__与上游的构造函数的原型对象连接起来，⽽上游的原型对象也有⼀个 __proto__，这样就形成了原型链。

原型链实现继承

Child.prototype = new Parent(‘duck’);

缺点：当某一个实例修改原型链上某一个属性时，其它实例的属性也会被修改。不能实现super功能，不能对父级进行传参

构造函数实现继承

function Child(){
Parent.call(this,‘name’)
}

缺点：并不能够继承父类原型上的方法和属性

你对this的理解？

this的指向不是在编写时确定的,⽽是在执⾏时确定的，同时，this不同的指向在于遵循了⼀定的规则。在默认情况下，this是指向全局对象的，⽐如在浏览器就是指向window。

• this 总是指向函数的调用者
• 如果有 new 关键字，this 指向 new 出来的那个对象
• 在 dom 事件中，this 指向目标元素
• 箭头函数的 this 指向他所在的函数级作用域，并且不可改变

如何改变this指向？

• bind: 改变this指向，并返回一个新函数
• call：执行函数并改变this指向，参数依次传入，用逗号分开
• apply：和call类似，但把参数放到数组中

箭头函数的this指向哪⾥？

箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于⾃⼰的this,它的所谓的this是捕获其所在上下⽂的 this值，作为⾃⼰的 this 值,并且由于没有属于⾃⼰的this,⽽箭头函数是不会被new调⽤的，这个所谓的this也不会被改变.

箭头函数中的this：首先从它的父级作用域中找，如果父级作用域还是箭头函数，再网上找，如此直至找到this的指向。
箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.

箭头函数和普通函数的区别

• 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
• 不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
• 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
• 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

js中null和undefined的区别?

• null是一个表示”无”的对象,转为数值时为0
• undefined是一个表示”无”的原始值,转为数值时为NaN
• 当声明的变量还未被初始化时,变量的默认值为undefined
• null用来表示"没有对象"，即该处不应该有值。
• undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
• typeof null 会返回object，typeof undefined 返回 undefined
• undefined=null:false; undefinednull:true

var const let 的区别

• const 是常量 ，不能改变
• const 和 let 没有变量提升
• const 和 let 的变量属于块级作用域

数组去重的一些方法

1. for 循环去重(一层)，用includes判断，再 push 到新数组中
2. for 循环去重(两层)，slice删除重复的
3. 利用对象属性名不能重复的特性去重
4. Set去重：var mySet = new Set([1, 2, 2, 3, 4, 4]);
   (Array.from / […mySet]可以将Set结构转换成数组)

Set 实现并集，交集，差集

并集：new Set([…a, …b])
交集：new Set([…a].filter(x=>b.has(x)))
差集：new Set([…a].filter(x=>!b.has(x)))

map知识

1. map转数组：通过扩展运算符( […map] )
2. 数组转map：new Map([数组名]),直接把数组放进去

以下输出什么？

console.log([‘1’,‘2’,‘3’].map(parseInt));

JavaScript 什么是window对象? 什么是document对象?说说你的理解

• document 是 window 的一个对象属性。
• window 对象表示浏览器中打开的窗口。
• 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
• 所有的全局函数和对象都属于Window 对象的属性和方法。
  • 例如，可以只写 document，而不必写 window.document。
  • 同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写Window.alert()。
• document 对 Document 对象的只读引用。

JavaScript的参数是按照什么⽅式传递的？

• 基本类型按值传递
• 复杂类型按引用传递
• 按共享传递

js的函数调用？

• 直接调用: fun()
• 方法调用：cat.say()
• 构造函数调用: cat.say
• call、apply调用: Object.prototype.toString.call({})

如何在JavaScript中实现不可变对象？

1. 深克隆，但是深克隆的性能⾮常差，不适合⼤规模使⽤
2. Immutable.js，Immutable.js是⾃成⼀体的⼀套数据结构，性能良好，但是需要学习额外的API
3. immer，利⽤Proxy特性，⽆需学习额外的api，性能良好

JavaScript的基本类型和复杂类型的区别？

1. 内存分配不同：基本类型存储在栈中，复杂类型存储在内存堆中。
2. 参数传递不同：基本类型是按值传递，复杂类型是按引用传递。
3. 复制变量时不同：基本类型的赋值与原变量完全独立，互不影响。而复杂数据类型是相互影响的。

JavaScript中函数被在new之后都发生了什么？

1. 创建对象
2. 设置对象的原型为构造函数的 prototype
3. 通过this将属性和方法添加至这个对象。
4. 最后返回this指向的新对象。

深浅拷贝

• 浅拷贝：
  1. Object.assign(obj,obj1…)
  2. … 展开运算符
  3. for in 语句 遍历对象
• 深拷贝：
  1. JSON.parse(JSON.stringify()) (问题：会将对象里面属性值为undefined的属性去掉； 如果属性值为null，则会保留该属性)
  2. 利用递归来实现深拷贝

js可以实现动画为什么还要用css实现

1. 不占用JS主线程；
2. 可以利用硬件加速；
3. 浏览器可对动画做优化（元素不可见时不动画减少对FPS影响）

从输入URL到页面加载发生了什么

DNS解析-TCP连接-发送HTTP请求-服务器处理请求并返回HTTP报文-浏览器解析渲染页面-连接结束

es6的新特性

1. const、let
2. 模板字符串
3. 解构赋值：const {x,y} = arr
4. for…of (for循环), for…in(对象的遍历)
5. 展开运算符 (…)
6. 剩余参数 (…)
7. 箭头函数

dom中 attribute 和 property 的区别

1. property: 是 dom 节点对象的属性(btn.className,tabIndex)
2. attribute: 是 html 标签的属性(btn.getAttribute(‘id’))

函数声明与函数表达式的区别

函数声明有变量提升，而函数表达式(赋值的那种函数)没有变量提升

js的垃圾回收机制

什么是垃圾？
一般来说没有被引用的对象就是垃圾，就是要被清除，垃圾过多会导致程序运行的速度过慢，所以js有自动的垃圾回收机制来清理这些垃圾

如何检垃圾？

• 标记-清除算法 Mark-Sweep GC
  1. 标记阶段：从根集合出发，将所有活动对象及其子对象打上标记
  2. 清除阶段：遍历堆，将非活动对象（未打上标记）的连接到空闲链表上
• 引用计数：看内存的地址上有几个指针指向，当为 0 的时候，说明要被回收。

说说js中的严格模式

• 只要在 .js 文件第一行增加 ‘use strict’ 的声明，就开启了严格模式
• 在严格模式下 this 不会指向 window，而是指向 undefined
• 消除 js 不合理，不严谨的地方，减少怪异行为
• 帮助我们养成良好的编码习惯

async/await是什么？

async 函数，就是 Generator 函数的语法糖，它建⽴在Promises上，并且与所有现有的基于Promise的API兼容。

1. Async—声明⼀个异步函数(async function someName(){…})

2. ⾃动将常规函数转换成Promise，返回值也是⼀个Promise对象

3. 只有async函数内部的异步操作执⾏完，才会执⾏then⽅法指定的回调函数

4. 异步函数内部可以使⽤await

5. Await—暂停异步的功能执⾏(var result = await someAsyncCall()😉

6. 放置在Promise调⽤之前，await强制其他代码等待，直到Promise完成并返回结果

7. 只能与Promise⼀起使⽤，不适⽤于回调

8. 只能在async函数内部使⽤

async/await相⽐于Promise的优势？

• 代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调⽤也会带来额外的阅读负担
• 错误处理友好，async/await可以⽤成熟的try/catch，Promise的错误捕获⾮常冗余
• 调试友好，使用 async/await 则无需过多箭头函数，并且能像正常的同步调用一样直接跨过 await 调用。

Vue面试题

你对MVVM的理解?

MVVM 是 Model-View-ViewModel 的缩写。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；
• View：代表UI视图，负责数据的展示；
• ViewModel：监听模型数据的改变和控制视图⾏为、处理⽤户交互，简单理解就是⼀个同步View 和 Model 的对象，连接 Model 和 View

在 MVVM 架构下， View 和 Model 之间并没有直接的联系，⽽是通过 ViewModel 进⾏交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到Model中，⽽Model 数据的变化也会⽴即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，⽽ View 和 Model 之间的同步⼯作完全是⾃动的，⽆需⼈为⼲涉，因此开发者只需关注业务逻辑，不需要⼿动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统⼀管理

如何解决跨域问题

1. JSONP：jsonp的原理就是借助HTML中的<script>标签可以跨域引入资源。创建一个script标签，将src改成我们要请求的接口，并将script添加在body中，那么当浏览器解析到这个script时，会向src对应的服务器发送一个get请求，并将参数带过去。然后当浏览器接收到服务端返回的数据，就会触发参数中callbak对应的回调函数，从而完成整个get请求。
2. cors：主要就是通过设置Access-Control-Allow-Origin响应头的方法来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问
3. proxy：通过启一个代理服务器，实现数据的转发

你对Vue⽣命周期的理解？

⽣命周期是什么？
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，我们称这是Vue的⽣命周期。

各个⽣命周期的作⽤？

• beforeCreate: 组件实例被创建之初，组件的属性⽣效之前
• created: 组件实例已经完全创建，属性也绑定，但真实dom还没有⽣成
• beforeMount: 在挂载开始之前被调⽤：相关的 render 函数⾸次被调⽤
• mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调⽤该钩⼦
• beforeUpdate: 组件数据更新之前调⽤，发⽣在虚拟 DOM 打补丁之前
• updated: 组件数据更新之后
• beforeDestory: 组件销毁前调⽤
• destory: 组件销毁后调用

Vue.js 父子组件生命周期调用顺序

加载渲染过程: 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
子组件更新过程: 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父组件更新过程: 父beforeUpdate -> 父updated
销毁过程: 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

Vue.js 何时需要使用 beforeDestroy？

• 可能在当前页面中使用了$on方法，那需要在组件销毁前解绑。
• 清除自己定义的定时器
• 解除事件的绑定 scroll mousemove …

在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端返回的数据进行赋值。

本人推荐在created中调用异步请求：

• 能更快获取到服务端数据，减少页面 loading 时间；
• ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

computed和watch有什么区别?

• computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。
• watch 监听到值的变化就会执⾏回调，在回调中可以进⾏⼀些逻辑操作。⽆缓存性，⻚⾯重新渲染时值不变化也会执⾏。
• 所以⼀般来说需要依赖别的属性来动态获得值的时候可以使⽤ computed ，如果你需要在某个数据变化时做⼀些事情，使⽤watch来观察这个数据变化。

delete和vue.delete的区别

delte会删除数组的值，变成empty或undefined，其它元素不变,数组长度不变，键值对也不变
而vue.delete 删除数组元素，是直接删除了元素，改变了数组的键值

Vue是如何实现双向绑定的?

vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调

你是如何理解Vue的响应式原理的?

data的属性被转化为 getter 和 setter，getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher监听，通知dom修改刷新。

vue 如何检测数组变化

数组考虑性能原因没有用defineProperty对数组的每一项进行拦截，而是选择重写数组的方法进行重写(push shift pop splice unsihft sort reverse)

Vue中的key到底有什么⽤？

key 是为Vue中的vnode标记的唯⼀id,通过这个key,我们的diff操作可以更准确、更快速。
key的作用就是在数据变化时强制更新组件，避免“就地更新”带来的副作用。

谈谈你对 keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以实现组件的缓存，当组件切换时不会对当前组件进行卸载，常用的2个属性include(名称匹配)/exclude(名称不匹配，优先级高)，2个生命周期 activated(激活时)，deactivated(移除时)

Vue.js 组件中的 data 为什么是一个函数?

vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的，为了保证组件的数据独立性要求每个组件必须通过data函数返回一个对象作为组件的状态。

为什么 new Vue({data:{}}) 是一个对象呢？.

因为这个类创建的实例只有一个，不会被共用。

Vue中相同逻辑如何抽离？

Vue.mixin用法 给组件每个生命周期，函数等都混入一些公共逻辑

Vue组件如何通信？

• props/$emit+$on: 通过props将数据⾃上⽽下传递，⽽通过$emit和v-on来向上传递信息。
• $parent、$children: 获取父子组件实例的方式
• $attrs/$listeners: Vue2.4中加⼊的$attrs/$listeners可以进⾏跨级的组件通信
• provide/inject：以允许⼀个祖先组件向其所有⼦孙后代注⼊⼀个依赖，不论组件层次有多深，并在起上下游关系成⽴的时间⾥始终⽣效，这成为了跨组件通信的基础
• Event Bus 实现兄弟组件的通信
• vuex: 状态管理实现通信
• solt插槽或者ref实例进⾏通信的

为什么要使用异步(公共)组件

异步组件可以减少打包的结果。会将异步组件分开打包，会采用异步的方式加载组件，可以有效的解决一个组件过大的问题。不使用异步组件，如果组件功能比较多打包出来的结果就会变大。

Vue.js中为什么 v-for 和 v-if 不能连用

v-for会比v-if的优先级高一些,如果连用的话会把v-if给每个元素都添加一下,会造成性能问题

Vue.js 中 v-html 会导致哪些问题?

• 可能会导致xss攻击
• v-html会替换掉标签内部的子元素

v-show 与 v-if 有什么区别？

• v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换，更适合于频繁切换的场景。
• v-if 的话当属性初始为 false 时，组件就不会被渲染，直到条件为 true ，并且切换条件时会触发销毁/重建组件，所以总的来说在切换时开销更⾼，更适合不经常切换的场景。

Class 与 Style 如何动态绑定？

Class Style 可以通过对象语法和数组语法进行动态绑定：

vue路由传参的几种方式？

1. router-link形式
2. 通过path匹配路由的编程式导航形式
3. 通过name匹配路由的编程式导航形式（刷新页面会丢失）

vue-router 的钩子函数

1. 全局守卫： router.beforeEach
2. 全局解析守卫： router.beforeResolve
3. 全局后置钩子： router.afterEach
4. 路由独享的守卫： beforeEnter
5. 组件内的守卫： beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

导航钩子的作用

主要的作用是拦截导航，让他完成跳转或取消。

vue-router 是什么? 它有哪些组件

vue-router 是 vue 的路由插件, 组件：router-link、 router-view

active-class 是哪个组件的属性？

active-class 是 vue-router 模块的 router-link 组件的属性

location 的方法

• href 获取地址栏的完整地址
• hostname 域名
• pathname 路径
• search 查询部分
• protocol 协议
• hash 锚点链接
• screen 对象包含有关客户端显示屏幕的信息。
• navigator 浏览器的相关信息(底层内核的)

怎么定义 vue-router 的动态路由? 怎么获取传过来的值

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。
使用 router 对象的 $route.params.id 获取

vue-router 路由模式有几种？

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
• history : 依赖 HTML5 History API 和服务器配置。
• abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

$route 和 $router 的区别

• router：VueRouter的实例(类)，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。
• route：是“路由信息对象”，包括 path，params，hash，query，fullPath，name 等路由信息参数。

路由之间的跳转？

1. <router-link :to='index'>
2. $router.push('index')
3. $router.go(2)

vuex是什么？怎么使用？哪种功能场景使用它？

• Vuex ：是一个专为 Vue.js 应用程序开发的状态管理模式。
• 场景：多个组件共享数据或者是跨组件传递数据时，可以使用vuex
• vuex的流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值

vuex刷新页面数据丢失怎么解决？

1. 将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
2. 在页面刷新的时候再次请求远程数据，使之动态更新vuex数据
3. 在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

action 和 mutation区别

• mutation是同步更新数据(内部会进行是否为异步方式更新数据的检测)
• action 异步操作，可以获取数据后调用mutation提交最终数据

事件委托

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。
优点:减少内存消耗，提高性能。
通过e.currentTarget拿到目标对象

内存溢出和内存泄露

内存溢出：一种程序运行出现的错误，当程序运行需要的内存超过了剩余的内存时，就会抛出内存溢出的错误
内存泄露：占用的内存没有及时释放，内存泄露积累多了容易导致内存溢出，
常见的内存泄露：1.意外的全局变量 2.没有及时清理的计时器或回调函数 3.闭包

vue 事件修饰符

• .once 控制元素指定的事件只执行一次
• .capture 捕获事件，它会改变事件冒泡的执行顺序 (先外后内)
• .self (控制事件操作对象是自己本身的时候才起作用)
• .stop 阻止事件冒泡，相当于调用了event.stopPropagation()方法：
• .prevent 阻止默认事件(在指定的事件后进行默认事件的阻止)
• .number 能够强制的指定表单元素的内容数据类型是number
• .trim 能够去除输入内容左右两边的空格
• .lazy 只有标签的change事件执行后才会执行数据的双向绑定