关于面试

html(初级)

1. 行内元素有哪些？块级元素有哪些？空元素（void）有哪些？

   （1）行内元素：a，b，span，img，input，strong，label，button，select，textarea，em

   （2）块级元素：div，ul（无序列表），ol，li，dl（自定义列表），dt（自定义列表项），dd（自定义列表项的定义），p，h1-h6，blockquote（块引用）

   （3）空元素（void）：即没有内容的HTML元素。br（换行），hr（水平分割线），meta，link，input，img

2. 页面导入样式时，使用link和@import有什么区别

   （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的

   内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS

   （2）页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载

   （3）link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别

   （4）link支持使用JavaScript控制DOM修改样式；而@import不支持。

3. src和href的区别

   （1）href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的连接，用于超链接

   （2）src是执行外部资源的位置，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时会将其指向的资源下载并应用到

   文档中。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕

4. 常用浏览器，内核

   （1）Trident内核：（国产的绝大部分浏览器）IE，360，搜狗

   Gecko内核：Firefox，NetScape6及以上

   Presto内核：Opera7及以上

   Webkit内核：（国产大部分双核浏览器其中一核）Safari（苹果），Chrome

   （2）浏览器内核：主要分成两部分：渲染引擎和JS引擎。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，

   内核就倾向于只指渲染引擎

   （3）渲染引擎：负责取得网页内容（HTML，XML，图像等）、整理讯息（加入CSS等），以及计算网页的显示方式，后会输出至

   显示器或打印机。

   （4）JS引擎：解析和执行JavaScript来实现网页的动态效果。

5. 对HTML语义化的理解

   （1）用正确的标签做正确的事情

   （2）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析

   （3）即使在没有样式CSS情况下也以一种文档格式显示，并且是易于阅读的

   （4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO

   （5）使阅读源代码的人更容易将网站分块，便于阅读维护理解

html(中级)

1. HTML5新特性

   （1）HTML5新特性：主要是关于图像、位置、存储、多任务等功能的增加。包括：

   a.绘画canvas（通过脚本实现绘画）

   b.用于媒介回放的video和audio元素

   c.本地离线存储localStorage、sessionStorage

   d.语义化更好的内容元素：article、footer、header、nav、section

   e.表单元素：datalist（规定输入域的选项列表）、output（用于不同元素的输出）、keygen（提供一种验证用户的可靠方法）

   f.input类型：color、date、month、week、number、email（检测是否为一个email格式的地址）、range（滑动条）、

   search、url、tel（输入电话号码，-time选择时间）

   （2） HTML5新标签的浏览器兼容问题：当在页面中使用HTML5新标签时，可能会得到三种不同的结果：

   a.新标签被当做错误处理并被忽略，在DOM构建时会当做这个标签不存在

   b.新标签被当做错误处理，在DOM构建时，这个新标签会被构造成行内元素

   c.新标签被识别成HTML5标签，然后用DOM节点对齐进行替换

   （3）解决兼容性问题：

   a.实现标签被识别。通过document.createElement(tagName)即可让浏览器识别新标签，浏览器支持新标签后，还可以为其

   添加CSS样式

   b.JavaScript解决方案：

   1）使用html5shim。

   2）使用kill IE6

   （4）如何区分HTML和HTML5：

   a.DOCTYPE声明

   b.新增的元素

   （5）HTML5移除的元素：

   a.纯表现的元素：big，center，font，strike（删除线），u（下划线），s（删除线）

   b.对可用性产生负面影响的元素：frame，frameset，noframes

   （6）iframe的缺点

   a.会阻塞主页面的onload事件

   b.搜索引擎的检索程序无法解读这种页面，不利于SEO

2. iframe标签

   （1）优点

   iframe能够把嵌入的页面展示出来，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
   网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
   重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，减少了数据的传输，增加了网页的下载速度
   方便制作导航栏
   （2）缺点

   会产生很多页面，不利于管理
   浏览器的前进/后退按钮无效
   无法被一些搜索引擎索引到，现在搜索引擎爬虫还不能很好的处理iframe中的内容，所以不利于SEO
   多数小型的移动设备无法显示框架，兼容性差
   多框架的页面会增加服务器的http请求，对于大型网站是不可取的
   （3）综上，目前框架中的所有优点完全可以使用Ajax实现，因此不推荐使用框架

3. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

   响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
   基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
   页面头部必须有meta声明的viewport。

4. 能够设置文本加粗的样式属性是什么

   字体加粗（font一weight） 　　
   功能：用于设置字体笔划的粗细。 　　
   属性值：正常度 一 normal 　　
   相对度 一 bold, bolder, light, lighter 　　
   渐变度 一 100, 200, 300, 400(相当于normal), 500, 600, 700(相当于 bold、 lighter、 bolder、以及数值100－900。 　　
   语法为：h1 {font一weight: 属性值}

5. 介绍一下标准的css盒模型，低版本ie盒模型有什么不同

   （1）盒模型有两种， IE 盒子模型、W3C 盒子模型；
   （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
   （3）区 别： IE的width部分把 border 和 padding计算了进去;

HTML（高级）

1. 说出三种减少页面加载的方法（加载时间指感知的时间或实际加载的时间）

   CSS Sprites；
   JS、CSS源码压缩、图片大小控制合适；
   网页Gzip；
   CDN托管；
   data缓存 ；
   图片服务器；

2. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

3. 如何从浏览器的URL中获取参数信息

   浏览器宿主环境中，有一个location对象，同时这个对象也是window对象和document对象的属性。
   location对象中提供了与当前窗口加载的文档有关的的信息，即URL信息。
   location.href: 完整URL
   location.protocol: 返回协议
   location.host: 返回服务器名称和端口号
   location.hostname: 返回服务器名称
   location.port:返回服务器端口号（http默认80，https默认443）
   location.pathname:返回URL中的目录和文件名（api/sousu）
   location.search:返回查询字符串（?search=baidu&id=123#2）
   location.hash:返回hash值

4. BFC

   w3c规范中的BFC定义：
   浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline一blocks, table一cells,和 table一captions),以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的 BFC (块级格式上下文）。
   在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们 的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
   在BFC中，每一个盒子的左外边缘（margin一left)会触碰到容器的左边缘(border一left)(对于 从右到左的格式来说，则触碰到右边缘）。

   BFC的通俗理解：
   首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见 摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的 元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元 素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元 素所组成）都会垂直的沿着其父元素的边框排列。

5. 项目上线流程是怎样的？

   流程建议
   一模拟线上的开发环境
   本地反向代理线上真实环境开发即可。（apache, nginx, nodejs均可实现）

   一模拟线上的测试环境
   模拟线上的测试环境，其实是需要一台有真实数据的测试机，建议没条件搭daily的，就直接 用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。

   一可连调的测试环境
   可连调的测试环境，分为2种。一种是开发测试都在一个局域网段，直接绑hosts即可，不在 一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往 上布即可。

   一自动化的上线系统
   自动化的上线系统，可以采用Jenkins。如果没有，可以自行搭建一个简易的上线系统，原 理是每次上线时都抽取最新的trunk或master，做一个tag，再打一个时间戳的标记，然后分 发到cdn就行了。界面里就2个功能，打tag,回滚到某tag,部署。

   一适合前后端的开发流程
   开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调 时有hosts可绑即可。

   简单的可操作流程
   一代码通过git管理，新需求创建新分支，分支开发，主干发布 一上线走简易上线系统，参见上一节
   一通过gulp+webpack连到发布系统，一键集成，本地只关心原码开发
   一本地环境通过webpack反向代理的server
   一搭建基于linux的本地测试机，自动完成build+push功能

css（初级）

1. 元素的position属性

   （1）定义：规定元素的定位类型。

   （2）正常文档流：指的是没有用CSS样式去控制的HTML文档结构，代码的顺序就是网页展示的顺序。

   （3）脱离文档流：指的是元素所显示的位置和文档代码不一致。

   （4）static：默认值。没有定位，元素出现在正常的文档流中。

   relative：生成相对定位的元素，相对于其在正常文档流中的位置进行定位（不脱离文档流）。

   absolute：生成绝对定位的元素，相对于static定位以外的最近父级元素进行定位，即相对于其直接父级元素（脱离文档流）。absolute较少直接单独使用在正常的文档流中，主要运行于进行了相对定位的元素框架层里面，相对该层的左上点进行偏移。

   fixed：生成固定定位元素，相对于浏览器窗口进行定位。

   inherit：从父元素继承position属性的值。

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

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

3. 元素的display属性

   （1）定义：规定元素应该生成的框的类型

   （2）常用属性值：

   inline：默认值。元素会被显示为内联元素。

   none：元素不会被显示。

   block：元素将显示为块级元素。

   inline-block：行内块元素，即元素像行内元素一样显示，内容像块元素一样显示。

   list-item：元素像块元素一样显示，并添加样式列表标记。

   table：元素会作为块级表格来显示。

   table-caption：元素会作为一个表格标题显示。

   inherit：从父元素继承display属性。

   （3）display属性值inline和block的区别：

   block元素会独占一行，默认情况下，block元素宽度自动填满父级元素的宽度；

   block元素可以设置width、height属性，即使设置了宽度，仍然是独占一行；

   block元素可以设置margin和padding属性；

   inline元素不会独占一行，多个相邻的行内元素会排列在同一行里面，其宽度随元素的内容而变化；

   inline元素设置width、height无效；

   inline元素的margin和padding属性在水平方向上能产生边距效果，垂直方向不会产生边距效果。

   （4）display:inline-block元素显示间隙

   A、inline-block水平呈现的元素之间，HTML元素标签换行显示或标签之间有空格的情况下会有间距

   B、消除办法：移除标签之间的空格；

   使用margin-left或margin-right取负值；
   
   对父元素设置font-size为0，然后对元素的font-size初始化；
   
   对父元素设置letter-spacing（字符间距）为负值，然后设置元素的letter-spacing为0；
   
   对父元素设置word-spacing（单词间距）为负值，然后设置元素的word-spacing为0。
   

4. z-index属性

   使用了relative、absolute、fixed三种定位后，都会使正常的文档流发生一定程度的改变，造成元素出现重叠的情形。为了能让重叠的元素有序的显示出来，需要在定位的相关元素加上z-index属性。其值是一个整数值，默认为0，数值越大表示拥有的优先级越高，该属性只对使用了定位的元素有效。

5. overflow属性

   （1）定义：规定当内容溢出元素框时发生的事情

   （2）visible：默认值。内容不会被修剪，会呈现在元素框之外

   hidden：内容会被修剪，并且其余内容不可见

   scroll：内容被修剪，但浏览器会显示滚动条以便查看其余内容

   auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

   inherit：从父元素继承overflow属性的值

css(中级)

1. display:none与visibility：hidden的区别？

   display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
   visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

2. CSS3新特性

   （1）新特性：

   a.边框：border-radius（圆角）、box-shadow（阴影）、border-image（边框图片）

   b.背景：background-size（背景图片的尺寸）、background-origin（背景图片的定位区域）

   c.文本效果：text-shadow（文本阴影）、word-wrap（文本换行）

   d.转换和变形：transform（包括2D，3D转换，rotate(angle)，translate(x,y)，scale(x,y)）

   e.过渡：transition

   f.动画：animation

   g.多列：column-count（元素被分隔的列数）、column-gap（列之间的间隔）、column-rule（洌之间的宽度，样式，颜色规则）

   h.用户界面：resize（规定是否可由用户调整元素尺寸）、box-sizing（以确切的方式适应某个区域的具体内容）、outline-offset（对轮廓进行偏移）

   （2）新增伪类：

   a.element:before（在元素之前添加内容） element:after（在元素之后添加内容）

   b.element:first-of-type、element:last-of-type、element:only-of-type、element:only-child、element:nth-child(n)（第

   n个）

   c. :checked、:disabled、:enabled

   （3）四个锚点伪类的设置问题：

   a.问题描述：超链接访问后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active

   b.解决办法：爱恨原则LoVe/HAte。改变CSS属性的排列顺序，L-V-H-A 即a:link{} a:visited() a:hover{} a:active{}

   （4）transition、transform和animation的区别

   a.transform是指转换，可以将元素移动、旋转、倾斜、拉伸。没有变化的过程。而transition和animation都加上了时间属性，

   所以能产生动画效果

   b.transition是指过渡，一般由行为（hover等）触发；而animation则是自动触发

   c.transition只能设置头尾，所有样式属性一起变化；animation可以设定每一帧的样式和时间，且可以循环播放。

3. 清除浮动的方法

   （1）父级div定义height

   （2）结尾处加空div标签，样式clear:both

   （3）父级div定义伪类:after和zoom

   （4）父级div定义overflow:hidden（同时还要定义width或zoom:1，不能定义height）

   （5）父级div定义overflow:auto（同时还要定义width或zoom:1，不能定义height）

   （6）父级也浮动，需要定义width（不推荐）

   （7）父级div定义display：table（不推荐）

   （8）结尾处加br标签，样式clear:both（父元素div定义zoom:1，不推荐）

4. rgba和opacity的区别？

   （1）rgba和opacity都能实现透明效果，但最大的不同在于opacity作用于元素本身以及元素内的所有内容，而rgba只作用于元素本身，子元素不会继承透明效果。

   （2）rgba是CSS3的属性，用法说明：rgba(R,G,B,A)，参数说明R（红色值。正整数|百分数），G（绿色值。正整数|百分数），B（蓝色值。正整数|百分比），A（Alpha透明度。0（透明）~1）。IE6-8不支持rgba模式，可以使用IE滤镜处理：

   filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#AARRGGBBAA,endColorstr=#AARRGGBBAA);
   其中AA，RR，GG，BB分别表示Alpha，R，G，B，取值为00-FF。

   （3）opacity也是CSS3的属性，用法说明：opacity:value 其中value取值0（透明）~1。对于IE6-8，可以用IE滤镜处理：

   filter:alpha(opacity=50); /对应于opacity:0.5;/

5. 放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？

   • 在HTML body部分中的JavaScripts会在页面加载的时候被执行。
   • 在HTML head部分中的JavaScripts会在被调用的时候才执行。

css(高级)

1. CSS3的flexbox（弹性盒布局模型）,以及适用场景？

   该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
   试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

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

   首先，需要把元素的宽度、高度设为0。然后设置边框样式。

   width: 0;

   height: 0;

   border-top: 40px solid transparent;

   border-left: 40px solid transparent;

   border-right: 40px solid transparent;

   border-bottom: 40px solid #ff0000;

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

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

4. 全屏滚动的原理是什么？用到了CSS的哪些属性？

   原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

   overflow：hidden；transition：all 1000ms ease；

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

   1. 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
   2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

   :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

js(初级)

1. 类型判断用到哪些方法？

   typeof

   typeof xxx得到的值有以下几种类型：undefined boolean number string object function、symbol ，比较简单，不再一一演示了。这里需要注意的有三点：

   • typeof null结果是object ，实际这是typeof的一个bug，null是原始值，非引用类型
   • typeof [1, 2]结果是object，结果中没有array这一项，引用类型除了function其他的全部都是object
   • typeof Symbol() 用typeof获取symbol类型的值得到的是symbol，这是 ES6 新增的知识点

   instanceof

   用于实例和构造函数的对应。例如判断一个变量是否是数组，使用typeof无法判断，但可以使用[1, 2] instanceof Array来判断。因为，[1, 2]是数组，它的构造函数就是Array。

2. 介绍js有哪些内置对象？

   Object 是 JavaScript 中所有对象的父对象

   数据封装类对象：Object、Array、Boolean、Number 和 String

   其他对象：Function、Arguments、Math、Date、RegEx、Error

3. 字符串有哪些原生方法，列举一下？

   charAt() 返回在指定位置的字符。
   charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
   concat() 连接字符串。
   indexOf() 检索字符串。
   match() 找到一个或多个正则表达式的匹配。
   replace() 替换与正则表达式匹配的子串。
   search() 检索与正则表达式相匹配的值。
   slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
   split() 把字符串分割为字符串数组。
   toLocaleLowerCase() 把字符串转换为小写。
   toLocaleUpperCase() 把字符串转换为大写。
   toLowerCase() 把字符串转换为小写。
   toUpperCase() 把字符串转换为大写。
   substr() 从起始索引号提取字符串中指定数目的字符。
   substring() 提取字符串中两个指定的索引号之间的字符。

4. 关于数组

   Array.from(ES6)

   用于将类似于数组的对象和可遍历的对象转为真正的数组

   应用场景：DOM操作返回的数组，函数内部参数的集合，

   原理，只要含有length属性，就都可以转换

   Array.of(ES6)

   用于将数值，转换为数组

   参数里面直接放数组就可以了。

   可以用来代替Array();

   如果没有参数，就返回一个空数组

   arr.find(ES6)//按条件查找

   用于找到第一个符合条件的数组成员，参数是一个回调函数，返回值是条件，返回第一个为true的成员，如果没有，就返回undefined

   回调函数的三个参数分别为value,index,arr

   arr.findIndex(ES6)//按条件查找

   返回第一个符合条件的数组成员的位置，如果都不符合，返回-1，和find类似

   注意：

   这两个方法解决了NaN的问题

   arr.fill(es6)//填充数组

   使用特定值，填充数组

   如果只有一个参数，参数里面的值会填充整个数组

   还可以接收第二个和第三个参数，用于指定填充的开始文职和结束文职

   (不是下标)

   注意：如果填充类型为对象，被赋值的只是对象的地址（浅拷贝）arr.entries(),arr.keys(),arr.values()//遍历数组ES6

   分别是遍历键值对，键名，值的遍历

   遍历的方式有两种for of 和next手动遍历

   arr.includes()//ES6

   返回一个布尔值，检测数组中有没有给定的值

   需要注意的地方：

   如果将扩展运算符用于数组赋值，只能放在参数的最后一位，不然会报错

   arr.join()

   join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

   通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，

   function repeatString(str, n) {

   return new Array(n + 1).join(str);

   }

   console.log(repeatString("abc", 3)); // abcabcabc

   console.log(repeatString("Hi", 5)); // HiHiHiHiHi

   arr.push()和arr.pop()

   push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

   pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

   arr.shift() 和 arr.unshift()

   shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

   unshift:将参数添加到原数组开头，并返回数组的长度 。

   这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。

   arr.sort()

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

   在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，arr.reverse()

   reverse()：反转数组项的顺序。

   arr.concat()

   concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

   arr.slice()

   slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

   arr.splice()

   splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

   删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

   插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

   替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。

   splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

   arr.indexOf()和 arr.lastIndexOf() （ES5新增）

   indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。

   lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。

   这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

   arr.forEach() （ES5新增）

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

   arr.map() （ES5新增）

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

   arr.filter() （ES5新增）

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

   arr.every() （ES5新增）

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

   arr.some() （ES5新增）

   some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

   arr.reduce()和 arr.reduceRight() （ES5新增）

   这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

   这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

   传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

   Array.isArray(obj)

   是否属于数组，返回值是布尔值，如果是数组则返回true

   可代替 obj instanceof Array

   可以改变原数组的方法总共有7种：包括unshift()、shift()、push()、pop()这4种栈和队列方法，reverse()和sort()这2种数组排列方法，数组删改方法splice()

5. cookie和localStorage的区别

   （1）共同点：cookie、sessionStorage和localStorage都是由浏览器存储在本地的数据。

   （2）区别：

   a.cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密），数据始终在同源的http请求中携带，即在

   浏览器和服务器之间来回传递；localStorage不会自动把数据发给服务器，尽在本地保存

   b.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储大小也不同，cookie数据不能超过4K，同时

   因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据（如会话标识）；localStorage也有存储大小的限制，但比

   cookie大很多，可以达到5M或更大。

   c.cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；localStorage始终有效，窗口或浏览器关闭也一直

   保存，因此用作持久数据；sessionStorage在当前浏览器窗口关闭之后自动删除

   d.localStorage支持事件通知机制，可以将数据更新的通知发送给监听者，API接口使用更方便；cookie的原生接口不友好，需

   要程序员自己封装

   （3）localStorage如何删除数据：localStorage对象可以将数据长期保存在客户端，除非人为清除，提供了以下几个方法：

   a.存储：localStorage.setItem(key,value) 如果key存在，更新value

   b.获取：localStorage.getItem(key) 如果key不存在，则返回null

   c.删除：localStorage.removeItem(key) 一旦删除，key对应的数据将会全部删除

   d.全部清除：localStorage.clear()使用removeItem逐个删除太麻烦，可以使用clear，执行的结果是清除所有的localStorage对

   象保存的数据

   （4）localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据。

js(中级)

1. form表单当前页面无刷新提交？

   使用target属性取值为iframe元素的name属性值。具体如下：
   在当前页面建一个iframe并隐藏（display:none）
   给这个iframe取名（name=“id_iframe”）
   设置form表单的target属性（target=“id_iframe”）
   提交表单，就是无刷新

2. ES6的Promise对象？

   总的来说，Promise是一个让开发者更合理、更规范地用于处理异步操作的对象。它有三种状态：初始化（pending），操作成功（fulfilled），操作异常（rejected）。使用实例方法：then()和catch()用于绑定处理程序，还有all()和race()方法。

3. 常用浏览器存储方案有，cookie，session，localstorage，sessionstroage

   cookie

   cookie 本身不是用来做服务器端存储的，它是设计用来在服务器和客户端进行信息传递的，因此我们的每个 HTTP 请求都带着 cookie。但是 cookie 也具备浏览器端存储的能力（例如记住用户名和密码，也就是常用的登录功能），因此就被开发者用上了。

   使用起来也非常简单，document.cookie = …即可。

   cookie前端的用法，获取的时候

   document.cookie

   设置的时候

   document.cookie = ‘key’ +’=’+value;

   封装了一个方法用来直接获取cookie的值

   function getCookie(name) { //获取指定名称的cookie值

   // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；

   cookie后台的用法

   cookies设置值的时候是res.cookie(key,value);

   {credentials: ‘include’}//储存的时候需要在fetch请求上加上这句话，feitch默认的是拒绝cookies

   获取值的时候req.cookies.key;

   但是 cookie 有它致命的缺点：

   存储量太小，只有 4KB

   所有 HTTP 请求都带着，会影响获取资源的效率

   API 简单，需要封装才能用

   所有的api请求都会携带cookie，所以cookie不太安全，使用的时候一般都需要做加密处理

   session

   session是服务端的会话存储技术，他的生存周期只是保持在浏览器打开，浏览器关闭这个阶段之中

   在Session被创建之后，就可以调用Session相关的方法往Session中增加内容了，而这些内容只会保存在服务器中，发到客户端的只有Session id；当客户端再次发送请求的时候，会将这个Session id带上，服务器接受到请求之后就会依据Session id找到相应的Session，从而再次使用之。正式这样一个过程，用户的状态也就得以保持了。

   在使用session的时候我们一般都保存一些临时数据，常见的需求一般就是获取验证码

   locationStorage 和 sessionStorage

   后来，HTML5 标准就带来了sessionStorage和localStorage，先拿localStorage来说，它是专门为了浏览器端缓存而设计的。其优点有：

   存储量增大到 5MB

   不会带到 HTTP 请求中

   API 适用于数据存储 localStorage.setItem(key, value) localStorage.getItem(key)

   sessionStorage的区别就在于它是根据 session 过去时间而实现，而localStorage会永久有效，应用场景不同。例如，一些需要及时失效的重要信息放在sessionStorage中，一些不重要但是不经常设置的信息，放在localStorage中。

   但是sessionstroage有个致命的缺点，就是无法多标签页共享，cookie可以多标签共享和设置过期时间

4. 关于异步处理：Generator async promise 的区别

   Generator async promise这三个api都是es6新增api，也都可以理解为异步的解决方案，但是他们的适用场景不一样

   先说Generator：

   简单点可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

   执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

   形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态

   而Generator在适用场景上我们可以把它理解为任务的挂起，在js中我们使用没有任务挂起这个概念的，直到Generator的出现，在Generator的使用上我们通过yield定义不同的状态，执行的时候需要使用next进行不同状态的调用，但是他是从上到下的，也就是只要需要yield就会停止执行后面的语句，调用next后继续执行后面的语句，在实际项目开发中，我经常会遇到这样的需求，填写用户信息的时候一般都是分成几步，这时候我们就可以利用Generator的任务挂起特性进行，不同步骤的数据存储。

   然后就是promise

   promise解决了传统异步操作回调函数更加合理强大，有了promise就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

   例如常见的一个需求

   有两个接口A,B, 他们之间有依赖关系，B接口必须等到A接口的值返回成功后，拿到A接口里面的一个属性才能请求，如果利用之前的回调函数形势的话就得是层层嵌套，代码维护比较麻烦，如果利用promise的话我们可以用链式调用的形势直观的表示出这种关系

   而Async是Generator函数的语法糖，Async的出现主要是为了解决另外一个问题，刚刚说了Generator是解决任务的挂起，promise是解决异步回调问题，而async就是吧异步的操作，变成队列模式，

   因为async中使用await做状态的定义，调用的时候不需要next（），自动执行，并且会讲每个await中promise中resolve结果赋值给await的变量上以供后面的步骤使用，每一个await都会等到promise返回结果后才会继续自动往下执行，这样就实现了我在日常生活中排队执行的概念，将所有的异步任务以同步的方式定义，不需要担心那个快那个慢，因为它是一个一个自动向下的

5. 对es6的理解（说一下es6，知道es6吗）

   语法糖(箭头函数，类的定义，继承)，以及一些新的扩展（数组，字符串，对象，方法等），对作用域的重新定义，以及异步编程的解决方案（promise，async，await）、解构赋值的出现

js(高级)

1. ES6常用特性

   变量定义(let和const,可变与不可变，const定义对象的特殊情况)

   解构赋值

   模板字符串

   数组新API(例：Array.from(),entries(),values(),keys())

   箭头函数(rest参数，扩展运算符，::绑定this)

   Set和Map数据结构(set实例成员值唯一存储key值，map实例存储键值对(key-value))

   Promise对象(前端异步解决方案进化史，generator函数，async函数)

   Class语法糖(super关键字)

2. 介绍一下async和await；

   async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

   async / await是ES7的重要特性之一，也是目前社区里公认的优秀异步解决方案。目前async / await 在 IE edge中已经可以直接使用了，但是chrome和Node.js还没有支持。幸运的是，babel已经支持async的transform了，所以我们使用的时候引入babel就行。在开始之前我们需要引入以下的package，preset-stage-3里就有我们需要的async/await的编译文件。

3. 说说严格模式的限制

   严格模式主要有以下限制：

   变量必须声明后再使用

   函数的参数不能有同名属性，否则报错

   不能使用with语句

   不能对只读属性赋值，否则报错

   不能使用前缀0表示八进制数，否则报错

   不能删除不可删除的属性，否则报错

   不能删除变量delete prop，会报错，只能删除属性delete global[prop]

   eval不会在它的外层作用域引入变量

   eval和arguments不能被重新赋值

   arguments不会自动反映函数参数的变化

   不能使用arguments.callee

   不能使用arguments.caller

   禁止this指向全局对象

   不能使用fn.caller和fn.arguments获取函数调用的堆栈

   增加了保留字（比如protected、static和interface）

   设立"严格模式"的目的，主要有以下几个：

   消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

   消除代码运行的一些不安全之处，保证代码运行的安全；

   提高编译器效率，增加运行速度；

   为未来新版本的Javascript做好铺垫。

   注：经过测试IE6,7,8,9均不支持严格模式。

4. 总结前端性能优化的解决方案

   优化原则和方向

   性能优化的原则是以更好的用户体验为标准，具体就是实现下面的目标：

   多使用内存、缓存或者其他方法

   减少 CPU 和GPU 计算，更快展现

   优化的方向有两个：

   减少页面体积，提升网络加载

   优化页面渲染

   减少页面体积，提升网络加载

   静态资源的压缩合并（JS 代码压缩合并、CSS 代码压缩合并、雪碧图）

   静态资源缓存（资源名称加 MD5 戳）

   使用 CDN 让资源加载更快

   优化页面渲染

   CSS 放前面，JS 放后面

   懒加载（图片懒加载、下拉加载更多）

   减少DOM 查询，对 DOM 查询做缓存

   减少DOM 操作，多个操作尽量合并在一起执行（DocumentFragment）

   事件节流

   尽早执行操作（DOMContentLoaded）

   使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS 模板渲染页面 HTML 的时间

5. 对MVC，MVP和MVVM的理解

   MVC即model\view\controller，是最常见的软件架构模式。view是指用户界面，controller则处理业务逻辑，而model则用来存储数据。view传送指令到controller，controller完成业务逻辑后要求model改变状态，model将新数据发送给view，使用户得到反馈。各部分的通信都是单向的。

   MVP将controller改为presenter，在这种模式中，各个部分之间的通信都是双向的。view与model不发送直接联系，都通过presenter传递。view非常薄，不部署任何业务逻辑，而presenter非常厚。

   MVVM将presenter改为viewModel，和MVP模式非常相似，唯一的区别在于它是双向绑定，view改变，自动反应在viewModel上，反之亦然。

6. Map和Set
   Map
   Map是一组键值对的结构，具有极快的查找速度。

举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：

var names = [‘Michael’, ‘Bob’, ‘Tracy’];
var scores = [95, 75, 85];
给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。

如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：

var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);
m.get(‘Michael’); // 95
初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set(‘Adam’, 67); // 添加新的key-value
m.set(‘Bob’, 59);
m.has(‘Adam’); // 是否存在key ‘Adam’: true
m.get(‘Adam’); // 67
m.delete(‘Adam’); // 删除key ‘Adam’
m.get(‘Adam’); // undefined
由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();
m.set(‘Adam’, 67);
m.set(‘Adam’, 88);
m.get(‘Adam’); // 88
Set
Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重复元素在Set中自动被过滤：

var s = new Set([1, 2, 3, 3, ‘3’]);
s; // Set {1, 2, 3, “3”}
注意数字3和字符串’3’是不同的元素。

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
小结
Map和Set是ES6标准新增的数据类型，请根据浏览器的支持情况决定是否要使用。