Html

1. head标签有什么作用？其中什么标签必不可少

   用于定义文档的头部，它是所有头部元素的容器。在该标签中可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

   下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

2. SVG和Canvas的区别

   （1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG中，每个被绘制的图形均被视为对象。如果 SVG对象的属性发生变化，那么浏览器能够自动重现图形。

   其特点如下：

   • 不依赖分辨率
   • 支持事件处理器
   • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
   • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
   • 不适合游戏应用

   （2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

   其特点如下：

   • 依赖分辨率
   • 不支持事件处理器
   • 弱的文本渲染能力
   • 能够以 .png 或 .jpg 格式保存结果图像
   • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

3. title与h1的区别、b与strong的区别、i与em的区别

   title属性没有明确意义只表示是个标题，h1则表示层次明确的标题，对页面信息的抓取有很大的影响

   b表示内容展示为粗体字，strong表示强调的文本，文字会以加粗显示，告诉搜索引擎和浏览器这是一段强调文本。

   i表示内容展示为斜体字，em同理，但是以斜体显示。

4. src和href的区别

   src和href都是用来引用外部的资源，它们的区别如下：

   • src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
   • href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

5. 对HTML语义化的理解

   语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

   语义化的优点如下：

   • 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
   • 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

   常见的语义化标签有：

   <header></header>  头部
   
   <nav></nav>  导航栏
   
   <section></section>  区块（有语义化的div）
   
   <main></main>  主要区域
   
   <article></article>  主要内容
   
   <aside></aside>  侧边栏
   
   <footer></footer>  底部
   

6. DOCTYPE的作用

   DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

   浏览器渲染页面的两种模式（可通过document.compatMode获取）：

   • CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
   • BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

7. script标签中defer和async的区别

   如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

   defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

   • 执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
   • 脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

8. 常用的meta标签有哪些

   meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

   常用的meta标签如下：

   描述HTML文档的编码类型：<meta charset="UTF-8" >
   页面关键词：<meta name="keywords" content="关键词" />
   页面描述：<meta name="description" content="页面描述内容" />
   页面重定向和刷新：<meta http-equiv="refresh" content="0;url=" />
   适配移动端，可以控制视口的大小和比例：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       其中，content 参数有以下几种：
   
       width viewport ：宽度(数值/device-width)
       height viewport ：高度(数值/device-height)
       initial-scale ：初始缩放比例
       maximum-scale ：最大缩放比例
       minimum-scale ：最小缩放比例
       user-scalable ：是否允许用户缩放(yes/no）
   搜索引擎索引方式：<meta name="robots" content="index,follow" />
       其中，content 参数有以下几种：
   
       all：文件将被检索，且页面上的链接可以被查询；
       none：文件将不被检索，且页面上的链接不可以被查询；
       index：文件将被检索；
       follow：页面上的链接可以被查询；
       noindex：文件将不被检索；
       nofollow：页面上的链接不可以被查询。
   

9. HTML5有哪些更新

   • 新增语义化标签：nav、header、footer、aside、section、article
   • 音频、视频标签：audio、video
   • 数据存储：localStorage、sessionStorage
   • DOM查询操作：document.querySelector()、document.querySelectorAll()
   • canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
   • input标签新增属性：placeholder、autocomplete、autofocus、required
   • history API：go、forward、back、pushstate

10. 行内元素有哪些？块级元素有哪些？空元素有哪些？

    • 行内元素有：a b span img input select strong；
    • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

    空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

    • 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
    • 鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

11. 说一下web worker

    在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 它的作用就是为 JavaScript 创造多线程环境，它和主线程互不干扰，这样就可以把处理大量数据的逻辑计算放在worker里，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

    如何创建 web worker：

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

CSS

基础

1. css选择器及其优先级

   对于选择器的优先级：

   • 标签选择器、伪元素选择器：1
   • 类选择器、伪类选择器、属性选择器：10
   • id 选择器：100
   • 内联样式：1000

   注意事项：

   • !important声明的样式的优先级最高；
   • 如果优先级相同，则最后出现的样式生效；
   • 继承得到的样式的优先级最低；
   • 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）它们的权值都为 0 ；
   • 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
   • 权重的比较规则是从左往右逐个等级比较，前一等级相等才往后比。比如1,0,0,0 > 0,2,2,2。

2. css中可继承与不可继承的属性有哪些

   不可继承的：

   1. display：规定元素应该生成的类型
   2. 文本属性：
   • vertical-align：垂直文本对齐
   • text-decoration：规定添加到文本的装饰
   • text-shadow：文本阴影效果
   • white-space：空白符的处理
   • unicode-bidi：设置文本的方向

   2. 盒子模型的属性：width、height、margin、border、padding

   3. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

   4. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

   5. 生成内容属性：content、counter-reset、counter-increment

   6. 轮廓样式属性：outline-style、outline-width、outline-color、outline

   7. 页面样式属性：size、page-break-before、page-break-after

   8. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

   可继承的：

   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：文本颜色
   3. 元素可见性
   • visibility：控制元素显示隐藏
   4. 列表布局属性
   • list-style：列表风格，包括list-style-type、list-style-image等
   5. 光标属性
   • cursor：光标显示为何种形态

3. display的属性值及作用

   属性值	作用
   none	元素不显示，并且会从文档流中移除。
   block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
   inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
   inline-block	默认宽度为内容宽度，可以设置宽高，同行显示。
   list-item	像块类型元素一样显示，并添加样式列表标记。
   table	此元素会作为块级表格来显示。
   inherit	规定应该从父元素继承display属性的值。

4. display的block、inline和inline-block的区别

   • block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
   • inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
   • inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

5. 隐藏元素方式有哪些

   • display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

   • visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。

   • opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

   • position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

   • z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。

   • clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

   • transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

6. link和@import的区别

   两者都是外部引用CSS的方式，它们的区别如下：

   • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
   • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
   • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
   • link支持使用Javascript控制DOM去改变样式；而@import不支持。

7. display:none与visibility:hidden的区别

   这两个属性都是让元素隐藏，不可见。两者区别如下：

   1. 在渲染树中
   • display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
   • visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
   2. 是否是继承属性
   • display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
   • visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

   3. 修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

   4. 如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

8. 伪元素和伪类的区别和作用

   • 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素
   • 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。
   • 总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

9. 对盒模型的理解

   CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

   盒模型都是由四个部分组成的，分别是margin、border、padding和content。

   标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

   • 标准盒模型的width和height属性的范围只包含了content，
   • IE盒模型的width和height属性的范围包含了border、padding和content。

   可以通过修改元素的box-sizing属性来改变元素的盒模型：

   • box-sizeing: content-box表示标准盒模型（默认值）
   • box-sizeing: border-box表示IE盒模型（怪异盒模型）

10. CSS3中有哪些新特性

    • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
    • 圆角 （border-radius:8px）
    • 多列布局 （multi-column layout）
    • 阴影和反射 （Shadoweflect）
    • 文字特效 （text-shadow）
    • 文字渲染 （Text-decoration）
    • 线性渐变 （gradient）
    • 旋转 （transform）
    • 增加了旋转,缩放,定位,倾斜,动画,多背景

11. 常见的图片格式及使用场景

    1. BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。
    2. GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。
    3. JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。
    4. PNG-8是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8。
    5. PNG-24是无损的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。
    6. SVG是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时，看到的还是线和曲线，而不会出现像素点。SVG图片在放大时，不会失真，所以它适合用来绘制Logo、Icon等。
    7. WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。
       • 在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
       • 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
       • WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

12. 对精灵图的理解

    CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

    优点：

    • 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
    • CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

    缺点：

    • 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
    • CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
    • 维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

13. CSS预处理器/后处理器是什么？为什么要使用它们？

    预处理器， 如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。

    后处理器，如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

    使用原因，css预处理器为css增加一些编程特性，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，无需考虑浏览器的兼容问题，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

14. 对line-height的理解

    （1）line-height的概念：

    • line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
    • 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
    • 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
    • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
    • line-height 和 height 都能撑开一个高度；

    （2）line-height 的赋值方式：

    • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
    • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
    • 百分比：将计算后的值传递给后代

15. 对媒体查询的理解

    媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

16. 单行、多行文本溢出隐藏

    • 单行文本溢出

    overflow: hidden;            // 溢出隐藏
    text-overflow: ellipsis;      // 溢出用省略号显示
    white-space: nowrap;         // 规定段落中的文本不进行换行
    

    • 多行文本溢出

    overflow: hidden;            // 溢出隐藏
    text-overflow: ellipsis;     // 溢出用省略号显示
    display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
    -webkit-line-clamp:3;        // 显示的行数
    

    注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 。

17. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

    浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

    解决办法：

    1. 为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
    2. 将所有<li>写在同一行。不足：代码不美观。
    3. 将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
    4. 消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal。

18. Css性能优化

    加载性能：

    （1）css压缩：将写好的css进行打包压缩，可以减小文件体积。

    （2）css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。

    （3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

    选择器性能：

    （1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

    （2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

    （3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

    （4）尽量少的去对标签进行选择，而是用class。

    （5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

    （6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

    渲染性能：

    （1）慎重使用高性能属性：浮动、定位。

    （2）尽量减少页面重排、重绘。

    （3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

    （4）属性值为0时，不加单位。

    （5）属性值为浮动小数0.**，可以省略小数点之前的0。

    （6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

    （7）不使用@import前缀，它会影响css的加载速度。

    （8）选择器优化嵌套，尽量避免层级过深。

    （9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

    （10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

    （11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

    可维护性、健壮性：

    （1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

    （2）样式与内容分离：将css代码定义到外部css中。

19. CSS3新特性

    1. CSS3选择器
    2. CSS3边框与圆
    3. CSS3背景与渐变
    4. CSS3过渡
    5. CSS3变换
    6. CSS3动画

页面布局

1. 常见的页面布局单位，它们的使用场景和区别

   常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

   （1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

   • CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
   • 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

   （2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

   （3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。

   • em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
   • rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

   （4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

   • vw：相对于视窗的宽度，视窗宽度是100vw；
   • vh：相对于视窗的高度，视窗高度是100vh；
   • vmin：vw和vh中的较小值；
   • vmax：vw和vh中的较大值；

   百分比和vw/vh的区别：

   • 百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
   • vw/vm：相对于视窗的尺寸

   px、em、rem的区别及使用场景：

   三者的区别：

   • px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
   • em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
   • em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

   使用场景：

   • 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
   • 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

2. 两栏布局的实现

   一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

   • 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

   .outer {
     height: 100px;
   }
   .left {
     float: left;
     width: 200px;
     background: tomato;
   }
   .right {
     margin-left: 200px;
     width: auto;
     background: gold;
   }
   复制代码
   

   • 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

   .left{
        width: 100px;
        height: 200px;
        background: red;
        float: left;
    }
    .right{
        height: 300px;
        background: blue;
        overflow: hidden;
    }
   复制代码
   

   • 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

   .outer {
     display: flex;
     height: 100px;
   }
   .left {
     width: 200px;
     background: tomato;
   }
   .right {
     flex: 1;
     background: gold;
   }
   复制代码
   

   • 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

   .outer {
     position: relative;
     height: 100px;
   }
   .left {
     position: absolute;
     width: 200px;
     height: 100px;
     background: tomato;
   }
   .right {
     margin-left: 200px;
     background: gold;
   }
   复制代码
   

   • 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

   .outer {
     position: relative;
     height: 100px;
   }
   .left {
     width: 200px;
     background: tomato;
   }
   .right {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 200px;
     background: gold;
   }
   

3. 三栏布局的实现

   三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：

   • 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

   .outer {
     position: relative;
     height: 100px;
   }
   
   .left {
     position: absolute;
     width: 100px;
     height: 100px;
     background: tomato;
   }
   
   .right {
     position: absolute;
     top: 0;
     right: 0;
     width: 200px;
     height: 100px;
     background: gold;
   }
   
   .center {
     margin-left: 100px;
     margin-right: 200px;
     height: 100px;
     background: lightgreen;
   }
   

   • 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。

   .outer {
     display: flex;
     height: 100px;
   }
   
   .left {
     width: 100px;
     background: tomato;
   }
   
   .right {
     width: 100px;
     background: gold;
   }
   
   .center {
     flex: 1;
     background: lightgreen;
   }
   

   • 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式**，中间一栏必须放到最后：**

   .outer {
     height: 100px;
   }
   
   .left {
     float: left;
     width: 100px;
     height: 100px;
     background: tomato;
   }
   
   .right {
     float: right;
     width: 200px;
     height: 100px;
     background: gold;
   }
   
   .center {
     height: 100px;
     margin-left: 100px;
     margin-right: 200px;
     background: lightgreen;
   }
   

   • 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

   .outer {
     height: 100px;
     padding-left: 100px;
     padding-right: 200px;
   }
   
   .left {
     position: relative;
     left: -100px;
   
     float: left;
     margin-left: -100%;
   
     width: 100px;
     height: 100px;
     background: tomato;
   }
   
   .right {
     position: relative;
     left: 200px;
   
     float: right;
     margin-left: -200px;
   
     width: 200px;
     height: 100px;
     background: gold;
   }
   
   .center {
     float: left;
   
     width: 100%;
     height: 100px;
     background: lightgreen;
   }
   

   • 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

   .outer {
     height: 100px;
   }
   
   .left {
     float: left;
     margin-left: -100%;
   
     width: 100px;
     height: 100px;
     background: tomato;
   }
   
   .right {
     float: left;
     margin-left: -200px;
   
     width: 200px;
     height: 100px;
     background: gold;
   }
   
   .wrapper {
     float: left;
   
     width: 100%;
     height: 100px;
     background: lightgreen;
   }
   
   .center {
     margin-left: 100px;
     margin-right: 200px;
     height: 100px;
   }
   

4. 水平垂直居中的实现

   • 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

   .parent {
       position: relative;
   } 
   
   .child {
       position: absolute;    
       left: 50%;    
       top: 50%;    
       transform: translate(-50%,-50%);
   }
   

   • 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

   .parent {
       position: relative;
   }
    
   .child {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
   }
   

   • 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

   .parent {
       position: relative;
   }
    
   .child {
       position: absolute;
       top: 50%;
       left: 50%;
       margin-top: -50px;     /* 自身 height 的一半 */
       margin-left: -50px;    /* 自身 width 的一半 */
   }
   

   • 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

   .parent {
       display: flex;
       justify-content:center;
       align-items:center;
   }
   

5. 对Flex布局的理解及其使用场景

   Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

   以下6个属性设置在容器上：

   • flex-direction属性决定主轴的方向（即项目的排列方向）。
   • flex-wrap属性定义，如果一条轴线排不下，如何换行。
   • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
   • justify-content属性定义了项目在主轴上的对齐方式。
   • align-items属性定义项目在交叉轴上如何对齐。
   • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

   以下6个属性设置在项目上：

   • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
   • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
   • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
   • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
   • flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
   • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

   简单来说： flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

定位与浮动

1. 为什么需要清除浮动？清除浮动的方式

   浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

   浮动的工作原理：

   • 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
   • 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

   浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

   浮动元素引起的问题？

   • 父元素的高度无法被撑开，影响与父元素同级的元素
   • 与浮动元素同级的非浮动元素会跟随其后
   • 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

   清除浮动的方式如下：

   • 给父级div定义height属性
   • 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
   • 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
   • 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

   .clearfix:after{
       content: "\200B";
       display: table; 
       height: 0;
       clear: both;
     }
     .clearfix{
       *zoom: 1;
     }
   

2. 对BFC的理解，如何创建BFC

   先来看两个相关的概念：

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

   块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

   通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

   创建BFC的条件：

   • 根元素：body；
   • 元素设置浮动：float 除 none 以外的值；
   • 元素设置绝对定位：position (absolute、fixed)；
   • display 值为：inline-block、table-cell、table-caption、flex等；
   • overflow 值为：hidden、auto、scroll；

   BFC的特点：

   • 垂直方向上，自上而下排列，和文档流的排列方式一致。
   • 在BFC中上下相邻的两个容器的margin会重叠
   • 计算BFC的高度时，需要计算浮动元素的高度
   • BFC区域不会与浮动的容器发生重叠
   • BFC是独立的容器，容器内部元素不会影响外部元素
   • 每个元素的左margin值和容器的左border相接触

   BFC的作用：

   • 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
   • 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
   • 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

3. 什么是margin重叠问题？如何解决

   问题描述： 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

   计算原则： 折叠合并后外边距的计算原则如下：

   • 如果两者都是正数，那么就去最大者
   • 如果是一正一负，就会正值减去负值的绝对值
   • 两个都是负值时，用0减去两个中绝对值大的那个

   解决办法： 对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠

   （1）兄弟之间重叠

   • 底部元素变为行内盒子：display: inline-block
   • 底部元素设置浮动：float
   • 底部元素的position的值为absolute/fixed

   （2）父子之间重叠

   • 父元素加入：overflow: hidden
   • 父元素添加透明边框：border:1px solid transparent
   • 子元素变为行内盒子：display: inline-block
   • 子元素加入浮动属性或定位

4. position的属性有哪些，区别是什么

   position有以下属性值：

   属性值	概述
   absolute	生成绝对定位的元素，相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。
   relative	生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。
   fixed	生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。
   static	默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。
   inherit	规定从父元素继承position属性的值

5. display、float、position的关系

   （1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。

   （2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。

   （3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。

   （4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。

   总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display’的值也需要调整；其次，元素的’float’特性的值不是"none"的时候或者它是根元素的时候，调整’display’的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display’特性值同设置值。

场景应用

1. 实现一个三角形

   CSS绘制三角形主要用到的是border属性，也就是边框。总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。

2. 实现一个扇形

   用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式

3. 画一条0.5px的线

   • 采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：

   transform: scale(0.5,0.5);
   

   • 采用meta viewport的方式

   <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
   

   这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果

4. 设置小于12px的字体

   在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

   解决办法：

   • 使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
   • 使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…；
   • 使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

5. 如何解决1px的问题？

   1px 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述：

   window.devicePixelRatio = 设备的物理像素 / CSS像素。
   复制代码
   

   打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型，输出的结果就是2： 这就意味着设置的 1px CSS 像素，在这个设备上实际会用 2 个物理像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些。 解决1px 问题的三种思路：

   思路一：直接写 0.5px

   如果之前 1px 的样式这样写：

   border:1px solid #333
   

   可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里，达到这样的效果（这里用 JSX 语法做示范）：

   <div id="container" data-device={{window.devicePixelRatio}}></div>
   

   然后就可以在 CSS 中用属性选择器来命中 devicePixelRatio 为某一值的情况，比如说这里尝试命中 devicePixelRatio 为2的情况：

   #container[data-device="2"] {
     border:0.5px solid #333
   }
   

   直接把 1px 改成 1/devicePixelRatio 后的值，这是目前为止最简单的一种方法。这种方法的缺陷在于兼容性不行，IOS 系统需要8及以上的版本，安卓系统则直接不兼容。

   思路二：伪元素先放大后缩小

   这个方法的可行性会更高，兼容性也更好。唯一的缺点是代码会变多。

   思路是先放大、后缩小：在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果。

   代码如下：

   #container[data-device="2"] {
       position: relative;
   }
   #container[data-device="2"]::after{
         position:absolute;
         top: 0;
         left: 0;
         width: 200%;
         height: 200%;
         content:"";
         transform: scale(0.5);
         transform-origin: left top;
         box-sizing: border-box;
         border: 1px solid #333;
       }
   }
   

   思路三：viewport 缩放来解决

   这个思路就是对 meta 标签里几个关键属性下手：

   <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
   

   这里针对像素比为2的页面，把整个页面缩放为了原来的1/2大小。这样，本来占用2个物理像素的 1px 样式，现在占用的就是标准的一个物理像素。根据像素比的不同，这个缩放比例可以被计算为不同的值，用 js 代码实现如下：

   const scale = 1 / window.devicePixelRatio;
   // 这里 metaEl 指的是 meta 标签对应的 Dom
   metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
   

   这样解决了，但这样做的副作用也很大，整个页面被缩放了。这时 1px 已经被处理成物理像素大小，这样的大小在手机上显示边框很合适。但是，一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。

JS

数据类型

1. JS有哪些数据类型，它们的区别是什么

   JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

   其中 Symbol 和 BigInt 是ES6 中新增的数据类型。

   这些数据可以分为原始数据类型和引用数据类型：

   • 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
   • 堆：引用数据类型（对象、数组和函数）

2. 数据类型检测的方式有哪些

   typeof，其中数组、对象、null都会被判断为object，其他判断都正确。

   instanceof，instanceof只能正确判断引用数据类型，而不能判断基本数据类型。

   constructor，一是判断数据的类型，二是对象实例通过constrcutor对象访问它的构造函数。

   Object.prototype.toString.call()，使用 Object 对象的原型方法 toString 来判断数据类型。

3. 判断数组的方式有哪些

   • 通过Object.prototype.toString.call()做判断

   Object.prototype.toString.call(obj).slice(8,-1) === 'Array';
   

   • 通过原型链做判断

   obj.__proto__ === Array.prototype;
   

   • 通过ES6的Array.isArray()做判断

   Array.isArrray(obj);
   

   • 通过instanceof做判断

   obj instanceof Array
   

   • 通过Array.prototype.isPrototypeOf

   Array.prototype.isPrototypeOf(obj)
   

4. null和undefined的区别

   undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

5. typeof null的结果是什么？

   typeof null 的结果是Object。历史遗留问题。

6. instance操作符的实现原理及实现

   instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

   function myInstanceof(left, right) {
     // 获取对象的原型
     let proto = Object.getPrototypeOf(left)
     // 获取构造函数的 prototype 对象
     let prototype = right.prototype; 
    
     // 判断构造函数的 prototype 对象是否在对象的原型链上
     while (true) {
       if (!proto) return false;
       if (proto === prototype) return true;
       // 如果没有找到，就继续从其原型上找，Object.getPrototypeOf方法用来获取指定对象的原型
       proto = Object.getPrototypeOf(proto);
     }
   }
   

7. 为什么0.1 + 0.2 != 0.3，如何让其相等？

   计算机是通过二进制的方式存储数据的，所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。由于0.1转换成二进制时是无限循环的，所以在计算机中0.1只能存储成一个近似值。（除了那些能表示成 x/2^n 的数可以被精确表示以外，其余小数都是以近似值得方式存在的）。

   解决办法：

   1. 最常用的方法就是将浮点数转化成整数计算。因为整数都是可以精确表示的。
   2. toFixed（）保留小数点后几位

8. isNaN和Number.isNaN函数的区别

   函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

   函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

9. ==操作符的强制类型转换规则

   1. 会先判断是否在对比 null 和 undefined，是的话就会返回 true
   2. 判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number
   3. 判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断
   4. 判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断

10. 其他值到字符串的转换规则

    1. Null 和 Undefined 类型 ，null 转换为 “null”，undefined 转换为 “undefined”，
    2. Boolean 类型，true 转换为 “true”，false 转换为 “false”。
    3. Number 类型的值直接转换，不过那些极小和极大的数字会使用指数形式。
    4. Symbol 类型的值直接转换，但是只允许显式强制类型转换，使用隐式强制类型转换会产生错误。
    5. 对普通对象来说，除非自行定义 toString() 方法，否则会调用 toString()（Object.prototype.toString()）来返回内部属性 [[Class]] 的值，如"[object Object]"。如果对象有自己的 toString() 方法，字符串化时就会调用该方法并使用其返回值。

11. 其他值到数值的转换规则

    1. Undefined 类型的值转换为 NaN。
    2. Null 类型的值转换为 0。
    3. Boolean 类型的值，true 转换为 1，false 转换为 0。
    4. String 类型的值转换如同使用 Number() 函数进行转换，如果包含非数字值则转换为 NaN，空字符串为 0。
    5. Symbol 类型的值不能转换为数字，会报错。
    6. 对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。

12. 其他值到布尔值的转换规则

    以下这些是假值： undefined、 null 、false、0 、 NaN和 “”

    假值的布尔强制类型转换结果为 false。从逻辑上说，假值列表以外的都应该是真值。

13. Object.is()与操作符'==='、'=='的区别

    1. 使用双等号（==）进行相等判断时，如果两边的类型不一致，则会进行强制类型转化后再进行比较。

    2. 使用三等号（===）进行相等判断时，如果两边的类型不一致时，不会做强制类型准换，直接返回 false。

    3. 使用 Object.is 来进行相等判断时，一般情况下和三等号的判断相同，它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 是相等的。

14. Javascript中如何进行隐式类型转换

    JavaScript 中的隐式类型转换主要发生在+、-、*、/以及==、>、<这些运算符之间。而这些运算符只能操作基本类型值，所以在进行这些运算前的第一步就是将两边的值用ToPrimitive转换成基本类型，再进行操作。

    ToPrimitive方法是js中每个值隐含自带的方法，用来将值（无论是基本类型还是对象）转换为基本类型值。如果值为基本类型，直接返回值本身；如果值为对象，
    ToPrimitive(obj,type)
    
    如果对象是Date对象，type默认为string
    
    其他一律默认为number
    
    （1）当type为number时规则如下：
    
    调用obj的valueOf方法，如果为原始值，则返回，否则下一步；
    调用obj的toString方法，后续同上；
    抛出TypeError 异常。
    
    (2）当type为string时规则如下：
    
    调用obj的toString方法，如果为原始值，则返回，否则下一步；
    调用obj的valueOf方法，后续同上；
    抛出TypeError 异常。
    

基础

1. new操作符的实现原理

   （1）首先创建了一个新的空对象

   （2）设置原型，将对象的原型设置为函数的 prototype 对象。

   （3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）

   （4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

2. map和Object的区别

   	Map	Object
   意外的键	Map默认情况不包含任何键，只包含显式插入的键。	Object 有一个原型, 原型链上的键名有可能和自己在对象上的设置的键名产生冲突。
   键的类型	Map的键可以是任意值，包括函数、对象或任意基本类型。	Object 的键必须是 String 或是Symbol。
   键的顺序	Map 中的 key 是有序的。因此，当迭代的时候， Map 对象以插入的顺序返回键值。	Object 的键是无序的
   Size	Map 的键值对个数可以轻易地通过size 属性获取	Object 的键值对个数只能手动计算
   迭代	Map 是 iterable 的，所以可以直接被迭代。	迭代Object需要以某种方式获取它的键然后才能迭代。
   性能	在频繁增删键值对的场景下表现更好。	在频繁添加和删除键值对的场景下未作出优化。

3. Javascript脚本延迟加载的方式有哪些

   延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

   一般有以下几种方式：

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

4. Javascript类数组对象的定义

   一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也可以被看作是类数组对象，因为它含有 length 属性值，代表可接收的参数个数。

   常见的类数组转换为数组的方法有这样几种：

   （1）通过 call 调用数组的 slice 方法来实现转换

   Array.prototype.slice.call(arrayLike);
   

   （2）通过 call 调用数组的 splice 方法来实现转换

   Array.prototype.splice.call(arrayLike, 0);
   

   （3）通过 apply 调用数组的 concat 方法来实现转换

   Array.prototype.concat.apply([], arrayLike);
   

   （4）通过 Array.from 方法来实现转换

   Array.from(arrayLike);
   

5. 数组有哪些原生方法

   数组和字符串的转换方法：toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。

   数组尾部操作的方法：pop() 和 push()，push 方法可以传入多个参数。

   数组首部操作的方法：shift() 和 unshift() 。

   重排序的方法：reverse() 和 sort()，sort() 方法可以传入一个函数来进行比较，传入前后两个值，如果返回值为正数，则交换两个参数的位置。

   数组连接的方法：concat() ，返回的是拼接好的数组，不影响原数组。

   数组截取办法：slice()，用于截取数组中的一部分返回，不影响原数组。

   数组插入方法：splice()，影响原数组

   查找特定项的索引的方法：indexOf() 和 lastIndexOf()

   迭代方法：every()、some()、filter()、map() 和 forEach() 方法

   数组归并方法：reduce() 和 reduceRight() 方法

6. 为什么函数的arguments参数是类数组而不是数组？如何遍历类数组？

   arguments是一个对象，它的属性是从 0 开始依次递增的数字，还有callee和length等属性，与数组相似；但是它却没有数组常见的方法属性，如forEach, reduce等，所以叫它们类数组。

   遍历类数组：

   1. 使用Array.from方法将类数组转化成数组

   2. 使用展开运算符将类数组转化成数组

   3. 使用call和apply方法

      function foo(){ 
        Array.prototype.forEach.call(arguments, a => console.log(a))
      }
      

7. 什么是DOM？什么是BOM？

   DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。

   BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的方法和接口。BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

8. 对AJAX的理解，实现一个AJAX请求

   AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

   实现AJAX请求：

   const SERVER_URL = "/server";
   let xhr = new XMLHttpRequest();
   // 创建 Http 请求
   xhr.open("GET", url, true);
   // 设置状态监听函数
   xhr.onreadystatechange = function() {
     if (this.readyState !== 4) return;
     // 当请求成功时
     if (this.status === 200) {
       handle(this.response);
     } else {
       console.error(this.statusText);
     }
   };
   // 设置请求失败时的监听函数
   xhr.onerror = function() {
     console.error(this.statusText);
   };
   // 设置请求头信息
   xhr.responseType = "json";
   xhr.setRequestHeader("Accept", "application/json");
   // 发送 Http 请求
   xhr.send(null);
   

9. Javascript为什么要进行变量提升，它导致了什么问题

   为什么要进行变量提升：

   • 解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间
   • 声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行

   导致的问题：

   ​ 在块级作用域中，全局定义的变量可能会被覆盖掉，而导致结果为undefined。

10. ES6模块与CommonJS模块有何异同

    ES6 Module和CommonJS模块的区别：

    • 导出方式的不同：前者使用export关键字，有默认导出、分别导出和批量导出之分，默认导出只能使用一次；后者使用module.exports和exports.变量名导出

    • 导入方式的不同：前者使用import关键字，需要用一对 {} 大括号来接收我们需要导入的方法或函数，大括号中的变量或函数名必须与导出时的名称一模一样，如果我们想修改导入的变量或函数的名称，可以通过 as 关键词来命名，如果我们要想将所有的变量或函数都导入，可以通过 * 来整体导入，命名导出的变量都是通过 {} 来接收的，那么去掉 {} ，接收的就是默认导出的变量了，因为导出的变量是匿名的，因此我们可以随意地起个变量名用于接收；后者通过 require 方法来导入模块的，其参数为模块文件路径，要特别注意的是，我们导入模块后接收到的其实是一个对象，也就是 module.exports 的值，我们能从该对象中获取到所需的变量或函数，另外，比较特别的是，require 方法还可以接收一个表达式作为参数，因此，我们是可以动态的改变并决定模块的加载导入路径的。

    • 对于模块的依赖，CommonJS是动态的，ES6 Module 是静态的

    • CommonJS导入的是值的拷贝，ES6 Module导入的是值的引用

    ES6 Module和CommonJS模块的共同点：

    • CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值，即对对象内部属性的值进⾏改变。

11. 如何判断一个对象是否属于某个类

    • 第一种方式，使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

    • 第二种方式，通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，但是这种方式不是很安全，因为 constructor 属性可以被改写。

    • 第三种方式，如果需要判断的是某个内置的引用类型的话，可以使用 Object.prototype.toString() 方法来打印对象的[[Class]] 属性来进行判断。

12. for…of和for…in的区别

    • for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；

    • for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；

    • 对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；

    • for…in 循环主要是为了遍历对象而生，不适用于遍历数组；for…of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。

13. 数组的遍历方法有哪些

    方法	是否改变原数组	特点
    forEach()	否	数组方法，不改变原数组，没有返回值
    map()	否	数组方法，不改变原数组，有返回值，可链式调用
    filter()	否	数组方法，过滤数组，返回包含符合条件的元素的数组，可链式调用
    for…of	否	for…of遍历具有Iterator迭代器的对象的属性，返回的是数组的元素、对象的属性值，不能遍历普通的obj对象，将异步循环变成同步循环
    every() 和 some()	否	数组方法，some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.
    find() 和 findIndex()	否	数组方法，find()返回的是第一个符合条件的值；findIndex()返回的是第一个返回条件的值的索引值
    reduce() 和 reduceRight()	否	数组方法，reduce()对数组正序操作；reduceRight()对数组逆序操作

14. forEach和map方法有什么区别

    这方法都是用来遍历数组的，两者区别如下：

    • forEach()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组，该方法没有返回值；
    • map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

15. Javascript中有哪些缓存

    DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。

    CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队）

    浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。

    服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

16. 深拷贝和浅拷贝

    浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；深拷贝是另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化；浅拷贝的时候如果数据是基本数据类型，那么就如同直接赋值那种，会拷贝其本身，如果除了基本数据类型之外还有一层对象，那么对于浅拷贝而言就只能拷贝其引用，对象的改变会反应到拷贝对象上；但是深拷贝就会拷贝多层，即使是嵌套了对象，也会都拷贝出来。

    浅拷贝实现：

    1. 赋值
    2. ES6中的Object.assign方法
    3. rest展开运算符

    深拷贝实现：

    1. 如果对象只有一层，依然可以使用ES6中的Object.assign方法，实现深拷贝

    2. 用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。

    3. 递归拷贝

       
       function deepClone(initalObj, finalObj) {    
         var obj = finalObj || {};    
         for (var i in initalObj) {        
           if (typeof initalObj[i] === 'object') {
             obj[i] = (initalObj[i].constructor === Array) ? [] : {};            
             arguments.callee(initalObj[i], obj[i]);
           } else {
             obj[i] = initalObj[i];
           }
         }    
         return obj;
       }
       var str = {};
       var obj = { a: {a: "hello", b: 21} };
       deepClone(obj, str);
       

    4. 使用Object.create()方法

17. 数组的排序

    1. 冒泡排序

       使用双层循环进行操作，将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），每次内层循环，确定一个最大（最小）的数，每次外层循环确定循环剩下的轮次
       function MaoPaoSort(arr){
           for(var i = 0;i<arr.length-1;i++) {
               for(var j = 0;j<arr.length-i-1;j++){ // 需要注意循环次数
                   if(arr[j]>arr[j+1]){
                       //把大的数字放到后面
                       var str = arr[j];
                       arr[j] = arr[j+1];
                       arr[j+1] = str;
                   }
               }
           }
       }
       var arr = [3,5,1,2,7,8,4,5,3,4];
       MaoPaoSort(arr);
       console.log(arr);//[1, 2, 3, 3, 4, 4, 5, 5, 7, 8]
       

    2. 快速排序

       实现思路是二分法和递归思想，将一个数组的排序问题看成是两个小数组的排序问题，以一个数为基准(中间的数)，比基准小的放到左边，比基准大的放到右边，而每个小的数组又可以继续看成更小的两个数组，一直递归下去，直到数组长度大小最大为2。
       function quickSort(arr){
           //如果数组长度小于1，没必要排序，直接返回，需要注意
           if(arr.length<=1) return arr;
           //pivot 基准索引，长度的一半
           let pivotIndex = Math.floor(arr.length/2);//奇数项向下取整
           //找到基准，把基准项从原数组删除
           let pivot = arr.splice(pivotIndex,1)[0];
           //定义左右数组
           let left = [];
           let right = [];
           //把比基准小的放left,大的放right
           arr.forEach(element => {
               if(element<pivot){
                   left.push(element)
               }else{
                   right.push(element)
               }
           });
           return quickSort(left).concat([pivot],quickSort(right)) // 需要注意
       

}

   var arr=[4,56,3,67,44,5,66];
   console.log(quickSort(arr));//[3, 4, 5, 44, 56, 66, 67]
   ```

3. 插入排序

   ```js
   将要排序的数组分成两部分，第一个部分可以认为已经排序，第二部分是待排序的，每次从待排序的部分取出索引最小的元素插入到已经排序部分的适当位置
   1.从第一个元素开始，该元素可以认为已经被排序；
   2.取出下一个元素，在已经排序的元素序列中从后向前扫描；
   3.如果该元素（已排序）大于新元素，将该元素移到下一位置；
   4.重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；
   5.将新元素插入到该位置后；
   6.重复步骤2~5。
   function InsertSort(arr) {
       let len = arr.length;
       let preIndex, current;
       for (let i = 1; i < len; i++) {
           preIndex = i - 1;
           current = arr[i];
           while (preIndex >= 0 && current < arr[preIndex]) {
               arr[preIndex + 1] = arr[preIndex];
               preIndex--; // 需要注意
           }
           arr[preIndex + 1] = current;
       }
       return arr;
   }
   
   var arr = [3,5,7,1,4,56,12,78,25,0,9,8,42,37];
   InsertSort(arr);
   ```

18. 数组去重

    1. indexOf去重，indexOf在找到目标元素后会返回目标元素下标，没找到则返回-1。
    2. ES6 Set去重，Array.from（new Set（array））。
    3. Object键值对去重，利用对象的属性不能相同的特点进行去重。
    4. 利用splice直接在原数组进行双层循环操作，外层循环元素，内层循环时比较值值相同时，则删去这个值注意点:删除元素之后，需要将数组的长度也减1。

ES6

1. let、const、var的区别

   （1）块级作用域： 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：

   • 内层变量可能覆盖外层变量
   • 用来计数的循环变量泄露为全局变量

   （2）变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

   （3）给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。

   （4）重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。

   （5）暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。

   （6）初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

   （7）指针指向： let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。

2. const对象的属性可以被修改吗?

   const保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），其值就保存在变量指向的那个内存地址，因此等同于常量，这时就无法修改。

   但对于引用类型的数据（主要是对象和数组）来说，变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了，这时就可以修改。

3. 如果new一个箭头函数会怎么样

   箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数。

4. 箭头函数与普通函数的区别

   （1）箭头函数比普通函数更加简洁

   （2）箭头函数没有自己的this

   （3）箭头函数继承来的this指向永远不会改变

   （4）call()、apply()、bind()等方法不能改变箭头函数中this的指向

   （5）箭头函数不能作为构造函数使用

   （6）箭头函数没有自己的arguments

   （7）箭头函数没有prototype

   （8）箭头函数不能用作Generator函数，不能使用yeild关键字

5. 箭头函数的this指向哪里

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

6. 对rest参数的理解

   Rest 参数（剩余参数语法）可以把一个不定数量的参数表示为一个数组。但rest参数必须放在最后。

7. ES6中模板语法

   模板语法使得字符串不仅更容易拼了，也更易读了，代码整体的质量都变高了。——允许用$的方式嵌入变量。但这还不是问题的关键，模板字符串的关键优势有两个：在模板字符串中，空格、缩进、换行都会被保留。模板字符串完全支持“运算”式的表达式，可以在${}里完成一些计算，也可以写入变量。

8. ES6字符串处理

   （1）存在性判定：在过去，当判断一个字符/字符串是否在某字符串中时，只能用 indexOf > -1 来做。现在 ES6 提供了三个方法：includes、startsWith、endsWith，它们都会返回一个布尔值来告诉你是否存在。

   （2）自动重复：可以使用 repeat 方法来使同一个字符串输出多次（被连续复制多次）

原型

1. 对原型、原型链的理解

   原型：每个构造函数被创建后都有一个属性，prototype，它对应着一个对象，即原型对象，每个对象都有__proto__指向它的原型对象。它的作用就是让属性和方法可以共享。它其中的一个属性是构造器，指向它的构造函数。

   原型链：找某个属性或某个方法的时候，先从构造函数内部找，找不到就通过__proto__（指针）去找构造函数的原型对象prototype。如果原型对象也没有，又通过原型对象的指针__proto__去找上一级的构造函数，如果构造函数内部又没有，就又找原型对象prototype。如果又没有，就又重复之前的过程，直到找到object的原型对象为止。通过__proto__一层一层往上找的过程中就像有一根绳子，这根绳子就是原型链。

   原型和原型链可以是用来存放实例中共有的那部份属性、方法，大大减少了内存消耗，同时对于实现继承有重要作用。

2. 原型修改、重写

   实例中的指针仅指向原型，而不是指向构造函数。

   重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的关系；它们引用的仍然是最初的原型。

3. 判断原型链指向

   p.__proto__  // Person.prototype
   Person.prototype.__proto__  // Object.prototype
   p.__proto__.__proto__ //Object.prototype
   p.__proto__.constructor.prototype.__proto__ // Object.prototype
   Person.prototype.constructor.prototype.__proto__ // Object.prototype
   p1.__proto__.constructor // Person
   Person.prototype.constructor  // Person
   

异步编程

1. 异步编程的实现方式

   JavaScript中的异步机制可以分为以下几种：

   • 回调函数 的方式，使用回调函数的方式有一个缺点是，多个回调函数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦合度太高，不利于代码的可维护。
   • Promise 的方式，使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。
   • generator 的方式，它可以在函数的执行过程中，将函数的执行权转移出去，在函数外部还可以将执行权转移回来。当遇到异步函数执行的时候，将函数执行权转移出去，当异步函数执行完毕时再将执行权给转移回来。因此在 generator 内部对于异步操作的方式，可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来，因此需要有一个自动执行 generator 的机制，比如说 co 模块等方式来实现 generator 的自动执行。
   • async 函数 的方式，async 函数是 generator 和 promise 实现的一个自动执行的语法糖，它内部自带执行器，当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动执行。

2. setTimeout、Promise、Async/Await的区别

   JS是单线程语言，包括同步任务、异步任务，异步任务又包括宏观任务和微观任务。它们的执行顺序：同步任务——>微观任务——>宏观任务——>微观任务——>宏观任务。

   setTimeout属性宏任务；Promise本身是同步的，但在执行resolve或者rejects时是异步的，即then方法是异步的，也就是说then方法属于微任务，Async/Await中await语法后面紧跟的表达式是同步的，但接下来的代码是异步的，属于微任务。

3. 对Promise的理解

   Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步编程的困境，避免了地狱回调，它比传统的解决方案回调函数和事件更合理和更强大。一个 Promise 实例有三种状态，分别是pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。状态的改变是通过 resolve() 和 reject() 函数来实现的，可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。

4. Promise的基本使用

   Promise有五个常用的方法：then()、catch()、all()、race()、finally。

   （1）使用new实例化一个Promise对象，Promise的构造函数中传递一个参数。这个参数是一个函数，该函数用于处理异步任务。

   （2）并且传入两个参数：resolve和reject，分别表示异步执行成功后的回调函数和异步执行失败后的回调函数；

   （3）通过 promise.then() 处理返回结果。这里的 p 指的是 Promise实例。

5. Promise.all和Promise.race的区别和使用场景

   all接收一个数组，数组的每一项都是一个promise对象。当数组中所有的promise的状态都达到resolved的时候，all方法的状态就会变成resolved，如果有一个状态变成了rejected，那么all方法的状态就会变成rejected。可以完成并行任务。

   race方法和all一样，接受的参数是一个每项都是promise的数组，但是与all不同的是，当最先执行完的事件执行完之后，就直接返回该promise对象的值。如果第一个promise对象状态变成resolved，那自身的状态变成了resolved；反之第一个promise变成rejected，那自身状态就会变成rejected。当要做一件事，超过多长时间就不做了，可以用这个方法来解决。

6. 对Async/Await的理解

   1）async 函数是 Generator 函数的语法糖，使用 关键字 async 来表示，在函数内部使用 await 来表示异步
   2）ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案
   3）async 作为一个关键字放到函数的前面，用于表示函数是一个异步函数，该函数的执行不会阻塞后面代码的执行
   4）await是等待，只能放到async函数里面，在后面放一个返回promise对象的表达式
   5）async和await是为了解决大量复杂不易读的Promise异步的问题

7. Await等待的是什么

   一般来说，都认为 await 是在等待一个 async 函数完成。不过按语法说明，await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有特殊限定）。

8. Async/Await对比Promise的优势

   • 代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调⽤也会带来额外的阅读负担

   • Promise传递中间值⾮常麻烦，⽽async/await⼏乎是同步的写法，⾮常优雅

   • 错误处理友好，async/await可以⽤成熟的try/catch，Promise的错误捕获⾮常冗余

   • 调试友好，Promise的调试很差，由于没有代码块，你不能在⼀个返回表达式的箭头函数中设置断点，如果你在⼀个.then代码块中使⽤调试器的步进(step-over)功能，调试器并不会进⼊后续的.then代码块，因为调试器只能跟踪同步代码的每⼀步。

闭包

1. 对闭包的理解

   函数嵌套函数，内部函数可以访问外部函数的变量和参数，而参数和变量不会被垃圾回收机制所回收

   闭包有两个常用的用途：

   • 闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。
   • 闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

   优缺点

   • 缺点：如果滥用闭包，容易在ie下，造成内存的溢出，而在非ie浏览器下，会让内存过分消耗，导致浏览器的解析速度变慢
   • 优点：缓存一个变量，让已给变量可以被后续的方法延续使用

2. 对作用域和作用域链的理解

   1）全局作用域和函数作用域

   （1）全局作用域

   • 最外层函数和最外层函数外面定义的变量拥有全局作用域
   • 所有未定义直接赋值的变量自动声明为全局作用域
   • 所有window对象的属性拥有全局作用域
   • 全局作用域有很大的弊端，过多的全局作用域变量会污染全局命名空间，容易引起命名冲突。

   （2）函数作用域

   • 函数作用域声明在函数内部的变量，一般只有固定的代码片段可以访问到
   • 作用域是分层的，内层作用域可以访问外层作用域，反之不行

   2）块级作用域

   • 使用ES6中新增的let和const指令可以声明块级作用域，块级作用域可以在函数中创建也可以在一个代码块中的创建（由{ }包裹的代码片段）
   • let和const声明的变量不会有变量提升，也不可以重复声明
   • 在循环中比较适合绑定块级作用域，这样就可以把声明的计数器变量限制在循环内部。

   作用域链： 在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个变量就是自由变量。如果在自己作用域找不到该变量就去父级作用域查找，依次向上级作用域查找，直到访问到window对象就被终止，这一层层的关系就是作用域链。

3. 对执行上下文的理解

   javascript中代码的运行环境分为一下三种：

   1. 全局级别的代码，这个是默认代码的运行环境，一旦代码被载入，引擎最先进入的就是这个环境。
   2. 函数级别的代码，当执行一个函数时，运行函数体中的代码。
   3. eval的代码，在eval函数内运行的代码。

   我们可以将执行上下文看做当前代码的运行环境或者作用域。

   对执行上下文的理解可以归纳总结一下几点：

   1. 单线程
   2. 同步执行
   3. 唯一的一个全局上下文
   4. 函数的执行上下文的个数没有限制
   5. 每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。
   6. 执行上下文的建立过程分为建立阶段和执行阶段

this

1. 对this的理解

   this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。

   • 第一种是函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。
   • 第二种是方法调用模式，如果一个函数作为一个对象的方法来调用时，this 指向这个对象。
   • 第三种是构造器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
   • 第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。其中 apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。call 方法接收的参数，第一个是 this 绑定的对象，后面的其余参数是传入函数执行的参数。也就是说，在使用 call() 方法时，传递给函数的参数必须逐个列举出来。bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变，其他情况下都不会改变。

   这四种方式，使用构造器调用模式的优先级最高，然后是 apply、call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式

2. bind()、call()和apply()的区别

   • call接收两个参数，第一个参数是this指向，后面一个是一个参数列表，和apply一样，改变this指向后函数会立即执行，且此方法只是临时改变this指向一次。

• bind方法和call方法很相似，第一个参数也是this的指向，后面传入的也是一个参数列表（但是这个参数列表可以分多次传入）改变this指向后不会立即执行，而是返回一个永久改变this指向的函数
  • apply，接收两个参数，第一个参数是this的指向，第二个参数是函数接收的参数，以数组的形式传入，改变this指向后原函数回立即执行，且此方法只是临时改变this指向一次

3. 实现call()、apply()、bind()函数

   （1）call 函数的实现步骤：

   • 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
   • 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
   • 处理传入的参数，截取第一个参数后的所有参数。
   • 将函数作为上下文对象的一个属性。
   • 使用上下文对象来调用这个方法，并保存返回结果。
   • 删除刚才新增的属性。
   • 返回结果。

   Function.prototype.myCall = function(context) {
     // 判断调用对象
     if (typeof this !== "function") {
       console.error("type error");
     }
     // 获取参数
     let args = [...arguments].slice(1),
       result = null;
     // 判断 context 是否传入，如果未传入则设置为 window
     context = context || window;
     // 将调用函数设为对象的方法
     context.fn = this;
     // 调用函数
     result = context.fn(...args);
     // 将属性删除
     delete context.fn;
     return result;
   };
   复制代码
   

   （2）apply 函数的实现步骤：

   • 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
   • 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
   • 将函数作为上下文对象的一个属性。
   • 判断参数值是否传入
   • 使用上下文对象来调用这个方法，并保存返回结果。
   • 删除刚才新增的属性
   • 返回结果

   Function.prototype.myApply = function(context) {
     // 判断调用对象是否为函数
     if (typeof this !== "function") {
       throw new TypeError("Error");
     }
     let result = null;
     // 判断 context 是否存在，如果未传入则为 window
     context = context || window;
     // 将函数设为对象的方法
     context.fn = this;
     // 调用方法
     if (arguments[1]) {
       result = context.fn(...arguments[1]);
     } else {
       result = context.fn();
     }
     // 将属性删除
     delete context.fn;
     return result;
   };
   复制代码
   

   （3）bind 函数的实现步骤：

   • 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
   • 保存当前函数的引用，获取其余传入参数值。
   • 创建一个函数返回
   • 函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。

   Function.prototype.myBind = function(context) {
     // 判断调用对象是否为函数
     if (typeof this !== "function") {
       throw new TypeError("Error");
     }
     // 获取参数
     var args = [...arguments].slice(1),
       fn = this;
     return function Fn() {
       // 根据调用方式，传入不同绑定值
       return fn.apply(
         this instanceof Fn ? this : context,
         args.concat(...arguments)
       );
     };
   };
   

面向对象

1. 对象创建的方式有哪些

   （1）第一种是工厂模式，工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。

   （2）第二种是构造函数模式。js 中每一个函数都可以作为构造函数，只要一个函数是通过 new 来调用的，那么就可以把它称为构造函数。执行构造函数首先会创建一个对象，然后将对象的原型指向构造函数的 prototype 属性，然后将执行上下文中的 this 指向这个对象，最后再执行整个函数，如果返回值不是对象，则返回新建的对象。因为 this 的值指向了新建的对象，因此可以使用 this 给对象赋值。构造函数模式相对于工厂模式的优点是，所创建的对象和构造函数建立起了联系，因此可以通过原型来识别对象的类型。但是构造函数存在一个缺点就是，造成了不必要的函数对象的创建，因为在 js 中函数也是一个对象，因此如果对象属性中如果包含函数的话，那么每次都会新建一个函数对象，浪费了不必要的内存空间，因为函数是所有的实例都可以通用的。

   （3）第三种模式是原型模式，因为每一个函数都有一个 prototype 属性，这个属性是一个对象，它包含了通过构造函数创建的所有实例都能共享的属性和方法。因此可以使用原型对象来添加公用属性和方法，从而实现代码的复用。这种方式相对于构造函数模式来说，解决了函数对象的复用问题。但是这种模式也存在一些问题，一个是没有办法通过传入参数来初始化值，另一个是如果存在一个引用类型如 Array 这样的值，那么所有的实例将共享一个对象，一个实例对引用类型值的改变会影响所有的实例。

   （4）第四种模式是组合使用构造函数模式和原型模式，这是创建自定义类型的最常见方式。因为构造函数模式和原型模式分开使用都存在一些问题，因此可以组合使用这两种模式，通过构造函数来初始化对象的属性，通过原型对象来实现函数方法的复用。这种方法很好的解决了两种模式单独使用时的缺点，但是有一点不足的就是，因为使用了两种不同的模式，所以对于代码的封装性不够好。

   （5）第五种模式是动态原型模式，这一种模式将原型方法赋值的创建过程移动到了构造函数的内部，通过对属性是否存在的判断，可以实现仅在第一次调用函数时对原型对象赋值一次的效果。这一种方式很好地对上面的混合模式进行了封装。

   （6）第六种模式是寄生构造函数模式，这一种模式和工厂模式的实现基本相同，我对这个模式的理解是，它主要是基于一个已有的类型，在实例化时对实例化的对象进行扩展。这样既不用修改原来的构造函数，也达到了扩展对象的目的。它的一个缺点和工厂模式一样，无法实现对象的识别。

2. 对象继承的方式有哪些

   （1）第一种是以原型链的方式来实现继承，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。

   （2）第二种方式是使用借用构造函数的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。

   （3）第三种方式是组合继承，组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。

   （4）第四种方式是原型式继承，原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。

   （5）第五种方式是寄生式继承，寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是自定义类型时。缺点是没有办法实现函数的复用。

   （6）第六种方式是寄生式组合继承，组合继承的缺点就是使用超类型的实例做为子类型的原型，导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型，这样就避免了创建不必要的属性。

Vue

基础

1. 对Vue的理解

   Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，但在实际开发中，并没有强制要求开发者之后使用某一特定功能，而是根据需求逐渐扩展。这同时也体现了Vue的设计的理念。

2. Vue的基本原理

   当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

3. 双向数据绑定的原理

   Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

   1. 对需要observe（观察）的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
   2. compile（编译）解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
   3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
   4. MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

4. v-model的实现原理

   本质上是语法糖

   原理实现靠的是v-bind 绑定响应式数据和触发v-on:input事件并传递数据

5. 使用Object.defineProperty()来进行数据劫持有什么缺点

   在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。

   在 Vue3.0 中已经不使用这种方式了，而是通过使用 Proxy 对对象进行代理，从而实现数据劫持。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法。

6. MVVM、MVC、MVP的区别

   MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。

   在开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。

   （1）MVC

   MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。

   （2）MVVM

   MVVM 分为 Model、View、ViewModel：

   • Model代表数据模型，数据和业务逻辑都在Model层中定义；
   • View代表UI视图，负责数据的展示；
   • ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

   Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

   这种模式实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM。

   （3）MVP

   MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller。在 MVC 模式中使用观察者模式，来实现当 Model 层数据发生变化的时候，通知 View 层的更新。这样 View 层和 Model 层耦合在一起，当项目逻辑变得复杂的时候，可能会造成代码的混乱，并且可能会对代码的复用性造成一些问题。MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦，Presenter 还包含了其他的响应逻辑。

7. MVVM的优缺点

   优点：

   1. 低耦合:view/viewController可以独立于Model而进行变化和修改,与此同时,一个viewModel可以绑定到不同的view/ViewController上
   2. 可重用性:可以把一些视图逻辑放在一个ViewModel里面,让很多view/ViewController进行重用
   3. 独立开发:通过MVVM,开发人员可以专注于逻辑开发在viewModel里面,而设计人员也可以专注于页面设计,并且使用ExpressionBlend可以更加容易设计页面和生成XAML(Extensible Application Markup Language)代码.
   4. 可测试:通常来说,要进行,界面测试比较困难,而MVVM可以对viewModel进行测试.

   缺点：

   1. 类会增多，每个VC都附带一个viewModel，类的数量*2。
   2. viewModel会越来越庞大，我们把逻辑给了viewModel，那势必Model也会变得很复杂，里面的属性和方法越来越多。
   3. 调用复杂度增加，数据都是从viewModel来，不知道真实的模型是谁。

8. Computed、Wacth、Methods的区别

   • computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
   • watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。
   • method 事件处理：触发事件总会调用执行对应函数。

9. slot是什么？有什么作用？原理是什么？

   slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。

   原理：当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.$slot中，默认插槽为vm.$slot.default，具名插槽为vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用$slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。

10. 如何保存页面的当前状态

    既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况：

    • 组件会被卸载
    • 组件不会被卸载

    那么可以按照这两种情况分别得到以下方法：

    组件会被卸载：

    （1）将状态存储在LocalStorage / SessionStorage

    只需要在组件即将被销毁的生命周期 componentWillUnmount （react）中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。

    比如从 B 组件跳转到 A 组件的时候，A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性，用来控制 A 组件是否读取 Storage 中的状态。

    优点：

    • 兼容性好，不需要额外库或工具。
    • 简单快捷，基本可以满足大部分需求。

    缺点：

    • 状态通过 JSON 方法储存（相当于深拷贝），如果状态中有特殊情况（比如 Date 对象、Regexp 对象等）的时候会得到字符串而不是原来的值。（具体参考用 JSON 深拷贝的缺点）
    • 如果 B 组件后退或者下一页跳转并不是前组件，那么 flag 判断会失效，导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage，会造成很奇怪的现象

    （2）路由传值

    通过 react-router 的 Link 组件的 prop —— to 可以实现路由间传递参数的效果。

    在这里需要用到 state 参数，在 B 组件中通过 history.location.state 就可以拿到 state 值，保存它。返回 A 组件时再次携带 state 达到路由状态保持的效果。

    优点：

    • 简单快捷，不会污染 LocalStorage / SessionStorage。
    • 可以传递 Date、RegExp 等特殊对象（不用担心 JSON.stringify / parse 的不足）

    缺点：

    • 如果 A 组件可以跳转至多个组件，那么在每一个跳转组件内都要写相同的逻辑。

    组件不会被卸载：

    （1）单页面渲染

    要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。

    优点：

    • 代码量少
    • 不需要考虑状态传递过程中的错误

    缺点：

    • 增加 A 组件维护成本
    • 需要传入额外的 prop 到 B 组件
    • 无法利用路由定位页面

    除此之外，在Vue中，还可以是用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行 被包裹在keep-alive中的组件的状态将会被保留：

11. 常见的事件修饰符及其作用

    • .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
    • .prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
    • .capture ：与事件冒泡的方向相反，事件捕获由外到内；
    • .self ：只会触发自己范围内的事件，不包含子元素；
    • .once ：只会触发一次。

12. v-if、v-show、v-html的原理

    • v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
    • v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；
    • v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

13. v-if和v-show的区别

    • v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）
    • v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多（由它们的原理决定）
    • v-if 有更高的切换开销，v-show 切换开销小
    • v-if 有配套的 v-else-if 和 v-else，而 v-show 没有
    • v-if 可以搭配 template 使用，而 v-show 不行

14. data为什么是一个函数而不是对象

    JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。

    而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。

    所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。

15. 对keep-alive的理解？

    keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防⽌重复渲染 DOM
    keep-alive 包裹动态组件时，会缓存不活动的组件实例，⽽不是销毁它们
    keep-alive 可以设置以下 props 属性：

    • include - 字符串或正则表达式。只有名称匹配的组件会被缓存
    • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
    • max - 数字。最多可以缓存多少组件实例

16. Vue中封装的数组方法有哪些？其如何实现页面的更新？

    push()、pop()、shift()、unshift()、splice()、sort()、reverse()，因为这些方法可以更改原数组，符合响应式的理念。

    简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组的__ob__，也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化（也就是通过target__proto__ == arrayMethods来改变了数组实例的型），然后手动调用notify，通知渲染watcher，执行update。

17. Vue单页面应用和多页面应用的区别

    SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。

    MPA多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。

    区别：

18. 对SPA单页面的理解，它的优缺点分别是什么

19. Vue的template到render的过程

20. Vue data中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？

21. 对React和Vue的理解，它们的异同

22. Vue的优点

    轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；

    简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

    双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；

    组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；

    视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

    虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；

    运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue 存在很大的优势。

23. Vue如何监听对象或者数组某个属性的变化

24. Vue模板编译的原理

25. 对SSR的理解

26. Vue的性能优化有哪些

生命周期

1. 简单说一下Vue的生命周期
2. created和mounted的区别
3. 一般在那个生命周期请求异步数据
4. keep-alive与生命周期

组件通信

1. 组件通信的方式有哪些

路由

1. 路由的hash和history模式的区别
2. Vue-Router的懒加载如何实现
3. 如何获取页面的hash变化
4. $route和$router的区别
5. params和query的区别
6. 对前端路由的理解

Vuex

1. Vuex的原理以及自己的理解
2. Vuex中actions和mutations的区别
3. Vuex和localStorage的区别
4. Redux和Vuex有什么区别，它们的共同思想是什么
5. 为什么要使用Vuex或Redux
6. Vuex有哪几种属性

Vue3.0

1. Vue3.0有什么更新
2. defineProperty和proxy的区别
3. Vue3.0为什么要用proxy

虚拟DOM

1. 对虚拟DOM的理解
2. 虚拟DOM的解析过程
3. 虚拟DOM真的比真是DOM性能要好吗
4. DIFF算法原理
5. Vue中key的作用

React

基础

1. 对React的理解

计算机网络

HTTP协议

HTTPS协议

HTTP状态码

DNS

网络模型

TCP和UDP

Websocket

浏览器原理

安全

进程与线程

缓存

组成

渲染原理

本地存储

同源策略

事件机制

垃圾回收机制

1. 哪些情况会导致内存泄露

性能优化

CDN

懒加载

节流与防抖

回流与重绘

图片优化

Webpack优化