前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性

目录

一、ES6/7/8新特性

二、性能优化

三、数据交互

四、H5新特性

---

一、ES6/7/8新特性

1.ES6中新增了哪些数据类型？

Symbol类型（基本）

Set类型（复杂）

Map类型（复杂）

WeakSet类型（复杂）

WeakMap类型（复杂）

TypedArray类型（复杂）

2.ES6新增了哪些特性？

const----->声明常量     let----->声明变量关键字

map和set数据类型

模板字符串

对象数组解构赋值

函数剩余参数----->...arg

延展运算符----->...

函数默认参数----->fn（name='zs'）

对象字面量的增强（属性名和属性值相同，可缺省）

Promise异步对象

Class类的支持

3.使用let声明的变量和var声明的变量有什么区别？

使用let声明的变量有块级作用域，并且没有变量的声明提升，使用let声明的变量在声明之前调用会报语法错误；

使用var声明的变量没有块级作用域，在声明之前调用会报undefined

4.谈谈对async/await的使用方式和场景？

async是用来修饰函数的声明，使用async修饰的函数会变成一个异步函数

await用来修饰函数的调用，被await修饰的函数必须返回一个promise异步对象，使用await修饰后，就会将promise异步对象转换成一个同步操作。

5.箭头函数有什么作用及实际应用场景？

作用：箭头函数可以使函数内部的this指向和函数外部保持一致。

箭头函数之所以可以让函数内部的this指向和外部保持一致是因为箭头函数内部没有this指向。

实例：可以在ajax的回调函数中使用箭头函数让回调函数中的this指向事件源，可以在定时器的第二个参数中使用箭头函数，避免函数内部的this指向全局window。

6.class类如何实现继承？

使用extends关键字实现继承

class Person{(props){

        this.name=name

        this.age = age

        }

}

class Student extends Person{(props){

        this.score = score

        }

}

7.谈谈对promise的理解？

Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

promise本身并没有提供任何的逻辑代码，它可以帮助我们改造或优化传统使用回调函数实现的异步操作，让我们以一种更优雅的方式来实现异步操作。

最显著的一个特点就是通过promise可以解决传统的回调地狱。

代码层面：Promise提供了一个构造函数，在使用的时候必须通过new创建一个实例对象，在创建实例对象的时候需要传递一个匿名函数，这个匿名函数需要两个参数（resolve,reject），resolve成功处理函数，reject失败处理函数，什么时候触发成功处理函数和失败处理函数，由具体业务逻辑来决定。

let pro = new Promise((resolve,reject)=>{

//

}).then((data)=>{

})

resolve和reject需要通过Promise实例对象提供的then方法来传递。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise提供了两个静态方法all和race。

all可以一次执行多个promise实例，返回值是数组。

race也可以一次执行多个promise实例，哪个实例最先执行完，就返回哪个的执行结果。

promise的两个特点：

（1）Promise对象的状态不受外界影响

1）pending 初始状态

2）fulfilled 成功状态

3）rejected 失败状态

Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态

（2）Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

二、性能优化

1.什么是渐进增强和优雅降级？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更高的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能，当浏览器支持时，它们会自动地呈现出来并发挥作用）。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们能否正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不知与完全失效）

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

2.什么是页面的回流和重绘？

回流：回流是指当页面的结构或者标签的尺寸发生变化的时候，浏览器需要对页面进行重排，并重新渲染。

重绘：重绘是指当页面上的标签的外观（比如字体颜色，或背景颜色）发生改变的时候，浏览器需要对页面进行渲染。

所以回流一定会引起页面的重绘，重绘不一定会引起回流。

要提高页面性能，就要尽可能地减少页面地回流和重绘。

3.针对页面优化性能，你有哪些方案？

资源加载方面：

减少http请求次数：具体方案，代码合并（合并css,js），使用精灵图；

减少http请求数据量：代码压缩（css,js,html），合理设置缓存；

启动CDN加速服务

代码层面：

避免滥用全局变量， 减少作用域查找（能用局部变量就不要声明全局变量），不要滥用闭包

减少DOM操作，操作DOM的时候对已经查找到的DOM对象进行缓存，避免重复查找。

使用图片懒加载，避免单次加载图片数量过多导致页面卡顿

将script标签写在页面底部，因为js的加载会阻塞页面的渲染。

不要在本地书写大量的cookie，因为cookie会伴随每一次http请求

4.什么是CDN加速？

CDN全称内容分发网络，是运营商所提供的一项增值服务，花钱就可以拥有这项加速服务。

CDN主要是对网站的静态资源进行加速，CDN在全国会有很多节点服务器，当你购买了一个CDN服务以后，CDN服务器会对你的网站的静态资源进行缓存处理，当第二次有人访问的时候，那么服务器就会从就近的CDN节点服务器上获取网站所需的静态资源，由于CDN服务器的性能比较高，并且距离客户端的物理距离比较近，所以就可以实现加速。

启用CDN服务只需要在运营商提供的后台进行配置，不需要要对代码进行任何修改。

5.什么是SEO？

SEO搜索引擎优化，就是让搜索引擎去抓取我们的网页。

为了让搜索引擎抓取我们的网页，我们可以在书写代码的时候做一些工作，比如合理设置网页title，keywords，description；因为搜索引擎在抓取网页以后首先回去分析这几个关键信息。

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

因为浏览器对请求静态资源文件会有一个并发数量限制，每次只能请求同一个域名下的若干个资源文件，如果把资源文件存放在多个不同的域名下面就会突破浏览器的限制；其次。启用多个静态资源服务器，可以减轻主服务器的压力。

7.移动端点击事件会有多少毫秒的延时？什么原因造成的？如何解决?

移动端点击事件会有300ms的延时

原因：是因为浏览器为了保留双击缩放的功能造成的，早期浏览器都有一个双击缩放的功能，在用户点击一次以后，浏览器会等待第二次点击，如果用户在300ms内进行了第二次点击，那么浏览器就会执行缩放功能，如果300ms内没有再次点击，则会当作单击事件处理；

解决方案：

使用touch触摸事件来模拟点击事件；

使用fastclick插件来解决；

静止网页缩放功能；

8.网站攻击方式？

常见的网站攻击方式：XSS（跨站脚本攻击）、 CSRF（跨站请求伪造）

9.谈谈对js中的垃圾回收机制？

主要有以下两种方式：

（1）标记清除

大部分浏览器以此方式进行垃圾回收，当变量进入执行环境（函数中声明变量）的时候，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”，在离开环境之后还有的变量则是需要被删除的变量。

标记方式不定，可以是某个特殊位的反转或维护一个列表等，垃圾收集器给内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记。在此之后再被加上的标记的变量即为需要回收的变量，因为环境中的变量已经无法访问到这些变量。

（2）引用计数

这种方式常常会引起内存泄漏，低版本的IE使用这种方式。

机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个该值的引用时次数减1。当该值引用次数为0时就会被回收。

10.JS是单线程还是多线程？

JS是单线程，单位时间内只能处理一个进程。

11.JS是如何实现异步操作的？

JS虽然是单线程，但是浏览器都是多线程的，js中的异步操作基本都是由浏览器提供的子线程来完成的。

12.分别介绍下MVC、MVVM、MVP这三种设计模式？

MVC：是后端语言的一种设计模式，主要是实现对代码分层。

M：数据模型层，主要是操作数据库；

V：视图层，主要是负责进行界面展示，可以认为前端的html,css,js充当的就是视图层

C：业务控制层，主要负责具体的业务逻辑，负责将model数据层的数据交给view视图层进行展示。

MVVM：是前端的一种设计模式，vue就是基于这种模式去设计的，是从MVC演变过来的。由M（数据层）V（视图层）VM（数据视图连接层）三层构成。

M层主要负责数据和方法的初始化；

V层负责展示页面，可以认为html,css充当的角色就是视图层的角色；

VM层用来将M和V层进行连接，将数据层的数据传递到视图层进行展示，将视图层的操作传递到数据层进行持久化；

MVP：也是从后端的MVC设置模式中演化过来的，主要应用于安卓开发中。

M：数据层

V：UI逻辑层

P：业务逻辑层

三、数据交互

1.常见的http状态码都有哪些？

100------>正在初始化

101------>正在切换协议

200或者以2开头的两位数------>都是代表响应主体的内容已经成功返回了

202------>表示接受

301------>永久重定向/永久转移

302------>临时重定向/临时转移（一般用来做服务器负载均衡）

304------>本次获取的内容是读取缓存中的数据，会每次去服务器校验

400------>参数出现错误（客户端传递给服务器端的参数出现错误）

401------>未认证，没有登录网站

403------>禁止访问，没有访问权限

404------>客户端访问的地址不存在

500------>未知的服务器错误

503------>服务器超负荷

2.你知道的http请求方式有哪几种？

GET：请求指定的页面信息，并返回实体主体；

HEAD：类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头；

POST：向指定资源提交数据进行处理请求。数据被包含在请求体中，POST请求可能会导致新的资源的建立/或已有资源的修改。

PUT：从客户端向服务器传送的数据取代指定的文档的内容；

DELETE：请求服务器删除指定的页面

CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器；

OPTIONS：允许客户端查看服务器的性能。

TRACE：回显服务器收到的请求，主要用于测试或诊断；

PATCH：实体中包含一个表，表中说明与该URL所表示的原内容的区别；

MOVE：请求服务器将指定的页面移至另一个网络地址；

COPY：请求服务器将指定的页面拷贝至另一个网络地址；

LINK：请求服务器建立链接关系；

UNLINK：断开链接关系；

WRAPPED：允许客户端发送经过封装的请求；

LOCK：允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时对其进行编辑；

MKCOL：允许用户创建资源

Extension-mothed：在不改动协议的前提下，可增加另外的方法。

3.页面编码和被请求的资源编码如果不一致如何处理？

html的编码是gbk或gb2312，而引入的js编码为utf-8的，则需要在引入的时候：

<script src="http://www.xxx.com/test.js" charset="utf-8"></script>

同理如果你的页面是utf-8，引入的js是gbk，那么在引入的时候就需要加上charset="gbk"

4.如何解决跨域问题？

jsonp，服务器代理，cors

5.jsonp的跨域原理是什么？

动态在页面创建一个script标签，使其src属性指向后端数据接口，后端数据接口必须返回一个js函数的调用字符串，将要返回给前端的json数据作为函数的实参，当script标签加载完毕后会在浏览器中执行后端返回的函数调用，所以前端必须事先对调用的函数进行声明，因为函数是在js中声明的，所以可以在函数内部拿到服务器端调用的时候传入的实参，所以就间接实现了跨域请求数据。

6.什么是同步和异步，那种执行方式更好？

同步是指一个程序执行完了接着去执行另一个程序。

异步是指多个程序同时执行

所以异步的效率比较高，因为异步不会出现阻塞问题，前一个程序的执行不会影响下一个程序的执行。

7.GET和POST的区别，何时使用POST？

get是将要传递的参数拼在url中进行传递，传递数量少，不安全

post是将传递的参数放在请求体中传递，携带数据量大，相对安全。

要提交一些敏感数据（比如登陆密码），上传文件时，必须使用post请求。

8.请解释一下JavaScript的同源策略？

同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名、端口、协议相同的数据接口上的数据，这就是同源策略。

9.一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？

首先根据域名查询DNS服务器获取服务器IP；

然后拿着服务器IP和域名请求对应的服务器；

请求成功后web服务器会根据一系列运算，将客户端需要的数据通过网络传输到客户端浏览器；

最终由浏览器解析后呈现给终端用户。

10.网站从http协议切换到https协议需要对代码做哪些处理？

不需要对代码做任何处理，只需要在web服务器加入一个ssl的安全认证模块即可。

11.什么是RESTful APP?

RESTful的核心思想就是使用http请求方式配合资源对象的方式来完成对服务端某个资源的操作。

（HTTP动词+资源对象）

比如，GET/articles这个命令，GET是HTTP动词，/articles是资源对象

动词通常就是五种HTTP方法：

GET：读取

POST：新建

PUT：更新

PATCH：更新，通常是部分更新

DELETE：删除

四、H5新特性

1.H5新增了哪些新特性？

语义化标签：header nav footer aside article section

本地存储：sessionStorage localStorage

拖拽释放(Drag and drop)API音频，视频（audio ,video）

画布：Canvas API

地理：Geolocation API

表单控件：calendar、date 、time、email、url、search

新的技术：websocket

2.sessionSrorage和localStorage以及cookie三者有什么区别？

共同点：三者都是浏览器端的存储介质，可以存储一些数据

不同点：

sessionStorage：是将数据存储在页面的内存中，所以数据会跟随页面的关闭而销毁，存储数据相对较少5M左右，只能存储字符串；

localStorage：是将数据存储在电脑的磁盘上，存储数据量打20M左右，需要手动删除，只能存储字符串；

cookie：是http协议的重要组成部分，存储数据量相对比较少4K左右，存储cookie的时候可以设置过期时间，到达过期时间后，会自动销毁，如果没有设置，则跟随浏览器的关闭而销毁，cookie中存储的数据会伴随每一次http请求被发送到服务端，所以不建议在cookie中存储大量数据。