分享一篇前端面试总结文章

时间 2019-11-29

原文原文链接

文章来源于https://juejin.im/post/5bee888fe51d4557fe34e356，感谢原文做者的分享。另推荐一篇文章：[前端技术清单]css

基础知识

本部分主要从如下几个方面来回顾前端相关的基础知识：html

HTML相关
CSS相关
JAVASCRIPT相关
DOM相关
HTTP相关
webpack相关

Html

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。在选择标签时请遵循如下原则： 1.尽量少的使用无语义的标签div和span； 2.在语义不明显时，既可使用div或者p时，尽可能用p, 由于p在默认状况下有上下间距，对兼容特殊终端有利； 3.不要使用纯样式标签，如：b、font、u等，改用css设置。 4.须要强调的文本，能够包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）； 5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和通常单元格要区分开，表头用th，单元格用td； 6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途； 7.每一个input标签对应的说明文本都须要使用label标签，而且经过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

2 meta viewport

<meta charset=’utf-8′> 声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/> 页面描述
<meta name=”keywords” content=””/> 页面关键词 
<meta name=”author” content=”name, email@gmail.com”/> 网页做者
<meta name=”robots” content=”index,follow”/> 搜索引擎抓取 
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> 
<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit)
 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
 <meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓
<meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”> uc强制竖屏
<meta name=”x5-orientation” content=”portrait”> QQ强制竖屏
<meta name=”full-screen” content=”yes”> UC强制全屏
<meta name=”x5-fullscreen” content=”true”> QQ强制全屏
<meta name=”browsermode” content=”application”> UC应用模式
<meta name=”x5-page-mode” content=”app”> QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”><meta http-equiv=”cache-control” content=”no-cache”><meta http-equiv=”expires” content=”0″>复制代码

3 canvas

经常使用api: 1.fillRect(x,y,width,height)实心矩形 2.strokeRect(x,y,width,height)空心矩形 3.fillText("Hello world",200,200);实心文字 4.strokeText("Hello world",200,300)空心文字

CSS

1.盒模型

①ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法以下：
前端

/* 标准模型 */vue

box-sizing:content-box;html5

/*IE模型*/ react

box-sizing:border-box;
webpack

②几种得到宽高的方式
css3

dom.style.width/height
es6

这种方式只能取到dom元素内联样式所设置的宽高，也就是说若是该节点的样式是在style标签中或外联的CSS文件中设置的话，经过这种方法是获取不到dom的宽高的
web

dom.currentStyle.width/height

这种方式获取的是在页面渲染完成后的结果，就是说无论是哪一种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。

window.getComputedStyle(dom).width/height

这种方式的原理和2是同样的，这个能够兼容更多的浏览器，通用性好一些。

dom.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的。

dom.offsetWidth/offsetHeight

这个就没什么好说的了，最经常使用的，也是兼容最好的

2，css reset 和 normalize.css 有什么区别

二者都是经过重置样式，保持浏览器样式的一致性；
前者几乎为全部标签添加了样式，后者保持了许多浏览器样式，保持尽量的一致；
后者修复了常见的桌面端和移动端浏览器的bug：包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出如今各浏览器和操做系统中的与表单相关的bug。
前者中含有大段的继承链；
后者模块化，文档较前者来讲丰富；

3，清除浮动不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：{clear:both;height:0;overflow:hidden;}

给浮动元素父级设置高度；

父级同时浮动（须要给父级同级元素添加浮动）；

父级设置成inline-block，其margin: 0 auto居中方式失效；

利用br标签的clear属性；

给父级添加overflow:hidden 清除浮动方法；

万能清除法 after伪类清浮动（如今主流方法，推荐使用）；

.float_div:after{

content:"."; clear:both;

display:block; height:0;

overflow:hidden;

visibility:hidden;

}

.float_div{

zoom:1

}

4，画三角形

#item { width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 50px solid transparent;

border-bottom: 50px solid blue;

background: white;

}

JavaScript

1，什么是当即执行函数？使用当即执行函数的目的是什么？

常见两种方式 1.(function(){...})() (function(x){ console.log(x); })(12345)

2.(function(){...}()) (function(x){ console.log(x); }(12345))

做用不破坏污染全局的命名空间，若须要使用，将其用变量传入如（function(window){...}(window)

2，async/await

ES7 提出的async 函数，终于让 JavaScript 对于异步操做有了终极解决方案。No more callback hell。 async 函数是 Generator 函数的语法糖。使用关键字 async 来表示，在函数内部使用 await 来表示异步。想较于 Generator，Async 函数的改进在于下面四点：

内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用同样；
更好的语义。async 和 await 相较于 * 和 yield 更加语义化；
更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await命令后面则能够是 Promise 或者原始类型的值（Number，string，boolean，但这时等同于同步操做）；
返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator对象方便，能够直接使用 then() 方法进行调用。

下面是使用示例：

做用：异步代码的新方式 promise示例

const makeRequest = () => {

return getJSON() .then(data => {

if (data.needsAnotherRequest) {

return makeAnotherRequest(data) .then(moreData => {

console.log(moreData) return moreData })

} else {

console.log(data) return data } })

} async/await示例 const makeRequest = async () => {

const data = await getJSON() if (data.needsAnotherRequest) { const moreData = await makeAnotherRequest(data); console.log(moreData) return moreData

} else {

console.log(data) return data

}

HTTP

常见状态码

200 （成功）服务器已成功处理了请求。一般，这表示服务器提供了请求的网页。

201 （已建立）请求成功而且服务器建立了新的资源。

202 （已接受）服务器已接受请求，但还没有处理。

203 （非受权信息）服务器已成功处理了请求，但返回的信息可能来自另外一来源。

204 （无内容）服务器成功处理了请求，但没有返回任何内容。

205 （重置内容）服务器成功处理了请求，但没有返回任何内容。

206 （部份内容）服务器成功处理了部分 GET 请求

3开头（请求被重定向）表示要完成请求，须要进一步操做。一般，这些状态代码用来重定向。

300 （多种选择）针对请求，服务器可执行多种操做。服务器可根据请求者 (user agent)选择一项操做，或提供操做列表供请求者选择。
301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD请求的响应）时，会自动将请求者转到新位置。
302 （临时移动）服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。
303 （查看其余位置）请求者应当对不一样的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理）请求者只能使用代理访问请求的网页。若是服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向）服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求）服务器不理解请求的语法。

401 （未受权）请求要求身份验证。对于须要登陆的网页，服务器可能返回此响应。

403 （禁止）服务器拒绝请求。

404 （未找到）服务器找不到请求的网页。

405 （方法禁用）禁用请求中指定的方法。

406 （不接受）没法使用请求的内容特性响应请求的网页。

407 （须要代理受权）此状态代码与 401（未受权）相似，但指定请求者应当受权使用代理。

408 （请求超时）服务器等候请求时发生超时。

409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。

410 （已删除）若是请求的资源已永久删除，服务器就会返回此响应。

411 （须要有效长度）服务器不接受不含有效内容长度标头字段的请求。

412 （未知足前提条件）服务器未知足请求者在请求中设置的其中一个前提条件。

413 （请求实体过大）服务器没法处理请求，由于请求实体过大，超出服务器的处理能力。

414 （请求的 URI 过长）请求的 URI（一般为网址）过长，服务器没法处理。

415 （不支持的媒体类型）请求的格式不受请求页面的支持。

416 （请求范围不符合要求）若是页面没法提供请求的范围，则服务器会返回此状态代码。

417 （未知足指望值）服务器未知足"指望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误多是服务器自己的错误，而不是请求出错。

500 （服务器内部错误）服务器遇到错误，没法完成请求。

501 （还没有实施）服务器不具有完成请求的功能。例如，服务器没法识别请求方法时可能会返回此代码。

502 （错误网关）服务器做为网关或代理，从上游服务器收到无效响应。

503 （服务不可用）服务器目前没法使用（因为超载或停机维护）。一般，这只是暂时状态。

504 （网关超时）服务器做为网关或代理，可是没有及时从上游服务器收到请求。

505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

GET 与POST区别

常见面试题

1.怎样添加、移除、移动、复制、建立和查找节点？

①建立新节点

createDocumentFragment //建立新DOM片断

createElement //建立一个元素

createTextNode //建立一个文本节点

②添加移除替换插入

appendChild() //添加

removeChild //移除

replaceChild //替换

insertBofore //插入

③查找

getElementsByTagName() //经过标签名查找

getElementsByName() //经过元素的name属性查找

getElementById() //经过元素的id查找

querySelectorAll()和querySelector（）复制代码

2.如何理解闭包

定义和用法：一个父函数里面包含了一个子函数，子函数调用了父函数内部的变量，若是子函数在外部被调用，就产生了闭包。简单的说，闭包就是可以读取其余函数内部变量的函数。

闭包的做用：

①读取其余函数内部的变量

②变量保存在内存中

注意：使用过多的闭包会消耗大量内存，形成网页的性能问题，能够在函数执行完成以前把不须要的局部变量删除。

3.sessionStorge , localStorge , cookie , Web Storage之间的区别

①数据存储大小 cookie：4kb webStorge：5mb

②数据存储有效期限 cookie：根据本身的设置时间 sessionStorage：关闭窗口后失效

localStorage：永久有效除非js删除或者浏览器删除 ③做用域 cookie和localStorage是在同源窗口，同一个浏览器共享的，sessionStorage只在同一个标签页共享。

4.请指出document load和document ready的区别？

ready：页面的文档结构加载完成，不包括图片视频等非文字内容。 load：全部页面元素都加载完成 ready的速度比load快

5.网站性能优化

网站性能优化主要从如下几个方面进行优化：

①资源文件js css 图片合并压缩

②减小页面dom操做，操做多的话能够考虑使用虚拟dom

③减小http请求

④使用cdn加速 cdn的做用：cdn能够处理整个网站 70%-95%的访问量，从而解决网站的并发量，简单的说就是经过在不一样地点缓存内容，而后经过负载平衡等技术将用户请求定向到最近的缓存服务器上获取内容，提升用户访问网站的响应速度。

⑤减小cookie大小

6.简述从浏览器地址栏输入url到显示页面的步骤

涉及的主要流程或步骤有：

①浏览器根据请求的URL，交给DNS域名解析，找到真实的ip，交给域名解析。

②服务器交给后端处理完成后返回的数据，浏览器接收文件HTML,CSS,JS图片等。

③浏览器对加载的资源进行语法解析，创建相应的数据内部结构。

④解析html，建立dom树，自上而下的顺序

⑤解析css，优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

⑥将css与dom合并，构建渲染树

⑦布局重绘重排，页面完成渲染。

7.对浏览器内核的理解

主要分为渲染引擎和js引擎渲染引擎：主要负责取得网页的（html，xml，图片等），整理信息结合css渲染页面，计算网页的显示方式，浏览器内核的不一样对网页的语法解释也会有所不一样，因此渲染效果也会有所不一样，这也是咱们须要作兼容性处理的缘由。

js引擎：解析和执行js来达到网页的动态交互效果。

9.html5有哪些新特性

新增了 canvas，video，audio，nav，section，footer，header等元素。表单控件，calendar、date、time、email、url、search 存储技术：localStorage，sessionStorage等新的技术：webworker, websocket, Geolocation

10.iframe的缺点

①iframe会阻塞页面的 onload事件

②搜索引擎不可以解读 iframe 页面，不利于 seo

③iframe和主页面共享链接池，然而浏览器对相同域的连接是有限制的，因此这会影响页面的并行加载。

④若是想要绕开以上的2个问题，能够考虑经过js动态复职给 iframe添加src值。

11.web标准以及w3c标准

标签闭合，标签小写，不乱嵌套，使用外链形式的css和js，结构层，表现层，行为层分离。

12.xhtml和html有什么区别

TML与XHTML之间的差异，主要分为功能上的差异和书写习惯的差异两方面。

关于功能上的差异，主要是XHTML可兼容各大浏览器、手机以及PDA，而且浏览器也能快速正确地编译网页。

因为XHTML的语法较为严谨，因此若是你是习惯松散结构的HTML编写者，那须要注意XHTML的规则。

13.Doctype做用，严格模式与混杂模式如何区分？它们有何意义?

Doctype处于文档的最前面，用来告诉浏览器的解析器，文档的类型。严格模式的js运行和排版是按照浏览器支持的最高标准的。混杂模式就是兼容性模式，当页面兼容很差的时候，就能够选用这种模式，防止页面布局错落没法站点工做。

14.行内元素有哪些，块级元素有哪些，空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素：a b span img input select strong 块级元素：div ul li ol dl dt dd h1 h2 h3 p 空元素：br hr link meta 块级元素独占一行，行内元素合一并行一行

15.html的全局属性有哪些

class：为元素设置类标识 data-**：为元素添加自定义属性 draggable：设置元素是否能够拖曳 id：元素的id，同一个id文档内是惟一的 style：元素样式 title：鼠标上移显示信息

16.canvas和svg的区别

svg绘制出来的图片有独立dom节点，能够绑定事件，是矢量图，放大图片不会有锯齿。 canvas绘制出来的图片是一个画布，等于就是一张图，放大会产生锯齿。

17.css sprite是什么，有什么优缺点

就是将多个小图标拼接在一张图片上，减小对图片的请求，使用 background-size来定位到相关图片上。

优势： ①减小HTTP请求数，极大地提升页面加载速度； ②增长图片信息重复度，提升压缩比，减小图片大小； ③更换风格方便，只需在一张或几张图片上修改颜色或样式便可实现；

缺点： ①图片合并麻烦； ②维护麻烦，修改一个图片可能须要重新布局整个图片，样式；

18.display: none;与visibility: hidden;的区别

总的来讲，他们的做用都是让元素不可见。区别在于： display：none会让元素彻底从 dom 树中消失，渲染的时候不占据任何空间。 visibility：hidden不会让元素从渲染树 dom 中消失，并且仍是会占据必定的空间，只是内容不可见而已。

19.link与@import的区别

1.link是html 的方式，@import是css的方式 2.link最大限度支持并行下载，@import过多嵌套致使串行下载 3.link能够经过rel="alternate stylesheet"指定候选样式 4.整体来讲：link优于@import

20.清除浮动的几种方式

1.clear：both，添加一个空标签div 2.父级div定义伪类:after和zoom 3.父级div定义overflow:hidden 4.父级div也浮动，须要定义宽度 5.结尾处加br标签clear:both

例如：

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{display:inline-table}
.clearfix{height:1%}
.clearfix{display:block;*zoom:1}复制代码

21.为何要初始化css样式

由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。

22.css3有哪些新特性

主要的新特性有：

新增各类css选择器
圆角 border-radius
多列布局
阴影和反射
文字特效text-shadow
线性渐变
旋转transform
动画效果

23.介绍一下css盒子模型

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

24.css的优先级算法是怎么样的

优先级为: !important > id > class > tag 且important 比内联优先级高。

25.base64的原理及优缺点

优势:能够将二进制数据转化为可打印字符，方便传输数据，对数据进行简单的加密，肉眼安全。缺点：内容编码后体积变大，编码和解码须要CPU额外工做量。

26.说说你对做用于链的理解

做用域链中的变量都是向上访问的，变量访问到windows对象后终止，向下访问是不容许的。简单的说，做用域就是变量函数的可访问范围。

27.js原型，原型链有什么特色

每一个对象在内部都是会初始化一个属性的，prototype（原型），当咱们访问一个对象的属性时，若是这个对象不存在这个属性，那么他就会去 prototype中查找，而后 prototype中还有本身的 prototype，就这样一直找下去，这就是原型链的概念。

28.什么是事件代理，事件委托

假如咱们有一个 ul 列表，里面有4个li，咱们能够在 li 上绑定 click 事件，可是也能够在她们的父节点 ul上绑定，这种在父节点上绑定事件来代替子节点事件的方法，就叫作事件委托。

29.谈谈对this的理解

this老是指向函数的直接调用者（而非间接调用者）若是有new关键字，this指向new出来的那个对象在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this老是指向全局对象Window

30.事件模型是什么

w3c中定义的事件发生的过程的3个阶段：捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling）

31.ajax的优缺点

优势： 经过异步模式，提高了用户体验. 优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用. Ajax在客户端运行，承担了一部分原本由服务器承担的工做，减小了大用户量下的服务器负载。 Ajax能够实现动态不刷新（局部刷新）

缺点： 安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。不容易调试。

32.怎么解决跨域问题

跨域问题能够从jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面等方面来解决。通常由后台设置容许跨域。

33.哪些操做会形成内存泄漏

内存泄漏是指一些对象咱们不在使用它的时候，他任然存在 setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏闭包使用不当。

简述vue、react、angular

1、Angular特性：由本身实现一套模板编译规则，数据变化依赖脏检查，基本属性包括：数据双向绑定、基本模板指令、自定义指令、表单验证、路由操做、依赖注入、过滤器、内置服务、自定义服务、组件、模块。运行效率较低，数据变动检测方式。学习angular会迫使你学习特有的预发，上手成本很大，代码看起来很干净依赖注入，即一个对象将依赖项提供给另外一个对象（客户端）的模式。致使更多的灵活性和更干净的代码。 Angular 最适合单页应用（SPA），由于它可能太臃肿而不能用于微服务。框架比较臃肿，每次用啥功能要引入一大堆东西 Angular错误提示不够清晰明显，对于初级开发者，很难看懂Angular的错误提示。（我的认为这是最大的很差之处，当初学习这个遇到不少坑啊），并且定位bug很难。面向对象编程的思想，Angular由后端开发人员设计的前端框架。详细比较：React和Vue的区别

2、React特性: 单向绑定，先更新model,而后渲染UI元素，数据在一个方向流动，使得调试更加容易。代码冗余，各类生命周期太麻烦，刚开始接触好难记。用了虚拟DOM。（对虚拟DOM的理解刚开始我不是很理解概念，建议你们去看【深刻REACT技术栈】这本书有很好的讲解）更适合大型应用和更好的可测试性 Web端和移动端原生APP通吃更大的生态系统，更多的支持和好用的工具

3、Vue特性模板和渲染函数的弹性选择简单的语法和项目配置更快的渲染速度和更小的体积四

35.eval是什么

它的功能是把对应的字符串解析成JS代码并运行应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）由JSON字符串转换为JSON对象的时候能够用eval，var obj =eval('('+ str +')')

36.null和undefine的区别

undefine: 表示不存在这个值，若是变量被声明了没有赋值。 null：变量被定义赋值了，可是为空的状况，没有任何属性方法和值在验证null时，必定要使用 === ，由于 ==没法分别null 和 undefined

37.谈谈对json的了解

json是JavaScript Object Notation的缩写，即JavaScript对象表示法，是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。json是存储和交换文本信息的语法，相似于XML。json采用彻底独立与语言的文本格式，它的语言格式相似于c语言家族。这些特性也使的json成为理想的数据交换语言。

JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
复制代码复制代码

JSON对象转换为json字符串

var last=obj.toJSONString();
var last=JSON.stringify(obj);
复制代码复制代码

38.同步和异步的区别

同步：浏览器访问服务器请求，用户看获得页面刷新，从新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操做。异步：浏览器访问服务器请求，用户正常操做，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

39.渐进加强和优雅降级

渐进加强：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

40.attribute和property的区别是什么？

attribute是dom元素在文档中做为html标签拥有的属性； property就是dom元素在js中做为对象拥有的属性。

41.谈谈对ES6的理解

es6是一个新的标准，它包含了许多新的语言特性和库，是JS最实质性的一次升级。好比’箭头函数’、’字符串模板’、’generators(生成器)’、’async/await’、’解构赋值’、’class’等等，还有就是引入module模块的概念。

可让this指向固定化，这种特性颇有利于封装回调函数

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
（3）不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用Rest参数代替。
（4）不可使用yield命令，所以箭头函数不能用做Generator函数。

async/await 是写异步代码的新方式，之前的方法有回调函数和Promise。 async/await是基于Promise实现的，它不能用于普通的回调函数。async/await与Promise同样，是非阻塞的。 async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

42.什么是面向对象的编程和面向过程的编程，以及异同和优缺点

面向过程就是对一个问题提出解决思路，而后一步步的列出函数解决，依次调用。面向对象就是将构成问题分解成各个对象，创建对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。面向对象是以功能来划分问题，而不是步骤

43.说说你对Promise的理解

所谓Promise，简单说就是一个容器，里面保存着某个将来才会结束的事件（一般是一个异步操做）的结果。从语法上说，Promise 是一个对象，从它能够获取异步操做的消息。Promise 提供统一的 API，各类异步操做均可以用一样的方法进行处理。

Promise对象有如下两个特色:

对象的状态不受外界影响，Promise对象表明一个异步操做，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）
一旦状态改变，就不会再变，任什么时候候均可以获得这个结果。