一次电话面试的问题总结

记录一次电话面试问的问题，当时有点紧张，有点懵逼，后来总结一下，问的问题比较基础，太失败 ┭┮﹏┭┮

1、get和post区别

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

2、有哪些请求方式

有八种！！！

get:向服务器请求指定的资源

post:向服务器提交数据请求处理，数据被包含在请求中

put:向服务器上传指定的数据

delete:向服务器发送请求删除指定数据

options:返回服务器对指定资源数据支持的HTTP请求方法，一般用于测试服务器功能的可用性

head:返回服务器上对指定资源数据的HTTP请求头，在不需要返回全部数据的情况下测试指定功能大可用性

track:回显服务器收到的请求，只要进行功能测试诊断

connect:HTTP1.1协议中预留请求方式，可以将连接改为管道方式到的代理服务器

3、H5和CSS3新特性

H5新特性

拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

CSS3新特性

新选择器：nth-child(n) nth-of-type(n) first-child last-child
transform过渡
圆角radius
阴影shadow
渐变
弹性布局flex
transition特效
Animation动画
支持背景的rgba写法
多列布局

4、vue、react区别

相同点：

都有组件化开发和Virtual DOM
都支持props进行父子组件间数据通信
都支持数据驱动视图，不直接操作真实DOM，更新状态数据界面就自动更新
都支持服务器端渲染
都支持native的方案，React的React Native，Vue的Weex

不同点：

数据绑定：vue实现了数据的双向绑定，react数据流动是单向的
件写法不一样* React的做法是JSX，也就是把HTML和CSS全都写进JavaScript了，即‘all in js’* Vue的做法是webpack+vue-loader的单文件组件格式，即html，css，js 写在同一个文件里
state对象在react应用中不可变的，需要使用setState方法更新状态；* 在vue中，state对象不是必须的，数据由data属性在vue对象中管理
virtual DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件数，对于React而言，每当应用的状态被改变是，全部组件都会重新渲染* 所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
React严格上只针对MVC的view层，Vue则是MVVM模式

5、seo搜索引擎优化

SEO搜索引擎优化，是一种常见的网站优化手段。它是利用搜索引擎收录规则，使网站在百度、谷歌等搜索引擎平台上的自然排名得到提高。SEO优化的目的是让网站在相关关键词排名结果中占据领先位置，这种优化手段能获取更多的免费流量，为企业降低广告成本，从而带来更好的推广效果。

SEO分“站内SEO”和“站外SEO”两种优化手段：

一、站内SEO。顾名思义为网站自身内部的优化，企业可根据行业性质挖掘关键词，并合理设置网站标题等页面设置，原创优质相关性强的网站文章，调整页面关键词密度。这样通常能让搜索引擎在收录企业网站时，认为该网站的内容与关键词匹配度高，从而获得较好排名。

二、站外SEO。就是利用自身网站以外第三方网站为自己站引流，例如在微博、B2B、站群、贴吧等第三方平台中添加外部链接指向自身网站。企业在选择投放外部链接的平台时，尽量选择与自身网站相关性较高、整体质量较好的网站。

6、vue生命周期

beforeCreate

实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作

created

数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染

beforeMount

DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术

mounted

数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去

beforeUpdate

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的

beforeDestroy

这个周期是在组件销毁之前执行

destroyed

组件销毁完毕调用

7、小程序生命周期

app.js

onLaunch 生命周期函数–监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onShow 生命周期函数–监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShow

onHide 生命周期函数–监听小程序隐藏当小程序从前台进入后台，会触发 onHide

onError 错误监听函数当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

page.js

onLoad 生命周期函数–监听页面加载

onReady 生命周期函数–监听页面初次渲染完成

onShow 生命周期函数–监听页面显示

onHide 生命周期函数–监听页面隐藏

onUnload 生命周期函数–监听页面卸载

8、讲讲mpvue

WePY是一个“类Vue”的框架

因为WePY是在代码开发风格上借鉴了Vue，本身和Vue没有什么关系；

而这个mpvue是从整个Vue的核心代码上经过二次开发而形成的一个框架，相当于是给Vue本身赋能，增加了开发微信小程序的能力。

彻底的组件化开发能力：提高代码
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力

9、url地址到最终页面渲染

1.DNS解析：将域名地址解析为ip地址

浏览器DNS缓存

系统DNS缓存

路由器DNS缓存

网络运营商DNS缓存

递归搜索：blog.baidu.com

.com 域名下查找DNS解析

.baidu域名下查找DNS解析

blog域名下查找DNS解析

出错了

2.TCP：TCP三次握手

第一次握手：由浏览器发起，告诉服务器我要发送请求了

第二次握手：由服务器发起，告诉浏览器我准备接收了，你赶紧发送把

第三次握手：有浏览器发送，告诉服务器，我马上就发了，准备接收把

3.发送请求

请求报文：HTTP协议的通信内容

4.接受响应

响应报文

5.渲染页面

遇见HTML标记，浏览器调用HTML解析器解析层Token并构建层dom树
遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树
遇到script标记，调用JavaScript解析器，处理script代码（绑定事件，修改dom树/cssom树）
将dom树和cssom树合并成一个渲染树
根据渲染树来计算布局
将各个节点绘制到屏幕上（渲染）

6.断开连接：TCP四次挥手

第一次挥手：由浏览器发起，发送给服务器，我东西发送完了（请求报文），你准备关闭吧
第二次挥手：由服务器发起，告诉浏览器，我东西接收完了（请求报文），我主板关闭了，你也准备吧
第三次挥手：由服务器发起，告诉浏览器，我东西发送完了（响应报文），你准备关闭吧
第四次挥手：由浏览器发起，告诉服务器，我东西接收完了，我准备关闭了（响应报文），你也准备吧

10、讲讲虚拟DOM

用JavaScript模拟DOM树，并渲染这个DOM树
比较新老DOM树，得到比较的差异对象
把差异对象应用到渲染的DOM树。

11、讲讲路由机制

一、概念

通过改变 URL，在不重新请求页面的情况下，更新页面视图。

二、实现方式

更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：

1.Hash — 利用 URL 中的hash("#");

2.利用 History interface 在HTML5中新增的方法。

12、浏览器内核

目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

13、解决不同浏览器兼容问题

第一类：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）

解决方案：给float标签添加display：inline，将其转换为行内元素

第二类：表单元素行高不一致

解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）

第三类：设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度；

解决方案：给容器添加overflow：hidden；

第四类：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；

解决方案：给img添加border：0；或者是border：none；

第五类：min-height在IE6下不兼容

解决方案：

1）min-height：value；

  _height：value；

2）min-height：value；

 height：auto！important；height：value；

第六类：图片默认有间隙

解决方案：

1）给img标签添加左浮动float：left；

2）给img标签添加display：block；

第七类：按钮默认大小不一

解决方案：

1）用a标签来模拟按钮，添加样式；

2）如果按钮是一张背景图片，那么直接给按钮添加背景图；

第八类：百分比的bug

解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%

解决方案：给右边浮动的子元素添加clear：right；

第九类：鼠标指针bug

描述：cursor：hand；只有ie浏览器识别，其他浏览器不识别

解决方案：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；

第十类：透明度属性

解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）

兼容其他浏览器：opacity：value；（取值范围0–1）

第十一类：上下margin的重叠问题

描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；

解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

14、请求码

200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用

1xx（临时响应）

表示临时响应并需要请求者继续执行操作的状态代码。

100 （继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。

101 （切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx （成功）

表示成功处理了请求的状态代码。

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

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

202 （已接受）服务器已接受请求，但尚未处理。

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

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

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

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

3xx （重定向）

表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。

307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4xx（请求错误）

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

400 （错误请求）服务器不理解请求的语法。（解决办法传参格式不正确）

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

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

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

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

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

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

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

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

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

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

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

413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。

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

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

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

5xx（服务器错误）

这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误）服务器遇到错误，无法完成请求。（解决办法传参数不正确）

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

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

503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

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

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

15、http 和 https 有何区别？如何灵活使用？

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

16、如何进行网站性能优化

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验

从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源

JavaScript 压缩和模块打包
按需加载资源
在使用 DOM 操作库时用上 array-ids
缓存
启用 HTTP/2
应用性能分析
使用负载均衡方案
为了更快的启动时间考虑一下同构
使用索引加速数据库查询
使用更快的转译方案
避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
用于未来的一个建议：使用 service workers + 流
图片编码优化

17、MVVM

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

18、JS哪些操作会造成内存泄露

1.意外的全局变量引起的内存泄露

function leak(){  leak="xxx";//leak成为一个全局变量，不会被回收
}

2.闭包引起的内存泄露

3.没有清理的DOM元素引用

4.被遗忘的定时器或者回调

5.子元素存在引起的内存泄露

19、浏览器缓存有哪些，通常缓存有哪几种

一、http缓存

二、websql

localstorage

sessionstorage

flash缓存

20、什么是闭包，如何使用它，为什么要使用它？

什么是闭包？

1.密闭的容器，类似于set,map容器，存储数据的
2.闭包是一个对象，存放数据的格式：key：value

形成条件？

1.函数嵌套
2.内部函数引用外部函数的局部变量

闭包的优缺点？

1.延长外部函数局部变量的生命周期
2.容易造成内存泄漏
3.用完闭包要及时清除（销毁）

21、请解释一下JavaScript的同源策略

同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。

同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。

那么什么叫相同域，什么叫不同的域呢？

当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。

同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。

本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

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

1）创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

23、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面

24、vue的响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

25、什么是vue.js

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。