前端面试题整理【一】

HTTP

常见状态码

2开头 （请求成功）表示成功处理了请求的状态代码

• 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区别

webpack

打包体积

为了减小包的打包体积，可以从以下几个方面进行优化：

• 提取第三方库或通过引用外部文件的方式引入第三方库
• 代码压缩插件UglifyJsPlugin
• 服务器启用gzip压缩
• 按需加载资源文件 require.ensure
• 优化devtool中的source-map
• 剥离css文件，单独打包
• 去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致

打包效率

• 开发环境采用增量构建，启用热更新
• 开发环境不做无意义的工作如提取css计算文件hash等
• 配置devtool
• 选择合适的loader，个别loader开启cache 如babel-loader
• 第三方库采用引入方式
• 提取公共代码
• 优化构建时的搜索路径 指明需要构建目录及不需要构建目录
• 模块化引入需要的部分

JavaScript怎样添加、移除、移动、复制、创建和查找节点？

①创建新节点

createDocumentFragment  //创建新DOM片段
createElement //创建一个元素
createTextNode //创建一个文本节点
复制代码

②添加 移除 替换 插入

appendChild() //添加
removeChild //移除
replaceChild //替换
insertBofore //插入
复制代码

③查找

getElementsByTagName() //通过标签名查找
getElementsByName() //通过元素的name属性查找
getElementById() //通过元素的id查找

如何理解闭包

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

闭包的作用： ①读取其他函数内部的变量 ②变量保存在内存中

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

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

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

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

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

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

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

网站性能优化

网站性能优化主要从以下几个方面进行优化： ①资源文件js css 图片合并压缩 ②减少页面dom操作，操作多的话可以考虑使用虚拟dom ③减少http请求 ④使用cdn加速 cdn的作用：cdn可以处理整个网站 70%-95%的访问量，从而解决网站的并发量，简单的说就是通过在不同地点缓存内容，然后通过负载平衡等技术将用户请求定向到最近的缓存服务器上获取内容，提高用户访问网站的响应速度。 ⑤减少cookie大小。

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

涉及的主要流程或步骤有： ①浏览器根据请求的URL，交给DNS域名解析，找到真实的ip，交给域名解析。 ②服务器交给后端处理完成后返回的数据，浏览器接收文件HTML,CSS,JS图片等。 ③浏览器对加载的资源进行语法解析，建立相应的数据内部结构。 ④解析html，创建dom树，自上而下的顺序 ⑤解析css，优先级：浏览器默认设置<用户设置<外部样式<内联样式

常见的HTML状态码及其的含义

1XX：信息状态码 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

2XX：成功状态码 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求，但尚未处理

3XX：重定向 301 Moved Permanently 请求的网页已永久移动到新位置。 302 Found 临时性重定向。 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。 304 Not Modified 自从上次请求后，请求的网页未修改过。

4XX：客户端错误 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。 401 Unauthorized 请求未授权。 403 Forbidden 禁止访问。 404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误 500 Internal Server Error 最常见的服务器端错误。 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

对浏览器内核的理解

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

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

最开始渲染引擎和js引擎没有太区分，后来越来越独立化，然后内核一般就是指渲染引擎了。

html5有哪些新特性

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

iframed的缺点

①iframe会阻塞页面的 onload事件 ②搜索引擎不能够解读 iframe 页面，不利于 seo ③iframe和主页面共享连接池，然而浏览器对相同域的链接是有限制的，所以这会影响页面的并行加载。 ④如果想要绕开以上的2个问题，可以考虑通过js动态复职给 iframe添加src值。

web标准以及w3c标准

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

xhtml和html有什么区别

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

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

由于XHTML的语法较为严谨，所以如果你是习惯松散结构的HTML编写者，那需要注意XHTML的规则。

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

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

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

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

html的全局属性有哪些

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

canvas和svg的区别

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

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

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

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

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

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

总的来说，他们的作用都是让元素不可见。区别在于： display：none会让元素完全从 dom 树中消失，渲染的时候不占据任何空间。 visibility：hidden不会让元素从渲染树 dom 中消失，而且还是会占据一定的空间，只是内容不可见而已。

link与@import的区别

1.link是html 的方式，@import是css的方式 2.link最大限度支持并行下载，@import过多嵌套导致串行下载 3.link可以通过rel="alternate stylesheet"指定候选样式 4.总体来说：link优于@import

清除浮动的几种方式

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}

复制代码

为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

css3有哪些新特性

主要的新特性有：

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

介绍一下css盒子模型

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

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

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

base64的原理及优缺点

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

说说你对作用于链的理解

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

js原型，原型链有什么特点

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

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

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

谈谈对this的理解

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

事件模型是什么

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

ajax的优缺点

优点： 通过异步模式，提升了用户体验. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。 Ajax可以实现动态不刷新（局部刷新）

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

怎么解决跨域问题

跨域问题可以从jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面等方面来解决。一般由后台设置允许跨域。

哪些操作会造成内存泄漏

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

简述vue、react、angular

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

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

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

eval是什么

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

null和undefine的区别

undefine: 表示不存在这个值，如果变量被声明了没有赋值。 null： 变量被定义赋值了，但是为空的情况，没有任何属性方法和值 在验证null时，一定要使用 === ，因为 ==无法分别null 和 undefined

谈谈对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);
复制代码

同步和异步的区别

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

渐进增强和优雅降级

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

attribute和property的区别是什么？

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

谈谈对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使得异步代码看起来像同步代码，这正是它的魔力所在。

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

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

说说你对Promise的理解

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

Promise对象有以下两个特点:

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