最新前端vue,js,css,性能优化面试题66道题
最新前端vue，js，css，性能优化⾯试题66道题
这些是我总结的前端常会遇到的⾯试题，⼤家可以多多参考
希望⼤家可以留下意见，我也可以吸收不⾜
1.js其中基本数据类型有哪些
五种： undefined、null、Boolean、Number和String。
复杂的数据类型—Object，Object本质上是由⼀组⽆序的名值对组成的。
Object、Array和Function则属于引⽤类型
ES6新增有个symbol复杂数据类型
2.数据类型undefined 和 null 区别
null： Null类型，代表“空值”，代表⼀个空对象指针，使⽤typeof运算得到 “object”，所以你可以认为它是⼀个特殊的对象值。
undefined： Undefined类型，当⼀个声明了⼀个变量未初始化时，得到的就是undefined。
null是javascript的关键字，可以认为是对象类型，它是⼀个空对象指针，和其它语⾔⼀样都是代表“空值”，不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引⼊的，为了区分空指针对象和未初始化的变量，它是⼀个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。
**3.http 和 https 有何区别？ **
http是HTTP协议运⾏在TCP之上。所有传输的内容都是明⽂，客户端和服务器端都⽆法验证对⽅的⾝份。
https是HTTP运⾏在SSL/TLS之上，SSL/TLS运⾏在TCP之上。所有传输的内容都经过加密，加密采⽤对称加密，但对称加密的密钥⽤服务器⽅的证书进⾏了⾮对称加密。此外客户端可以验证服务器端的⾝份，如果配置了客户端验证，服务器⽅也可以验证客户端的⾝份
4。我们请求接⼝常会遇到的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 协议版本。
5.如何进⾏⽹站性能优化
1. 从⽤户⾓度⽽⾔，优化能够让页⾯加载得更快、对⽤户的操作响应得更及时，能够给⽤户提供更为友好的体验。
2. 从服务商⾓度⽽⾔，优化能够减少页⾯请求数、或者减⼩请求所占带宽，能够节省可观的资源。
  总之，恰当的优化不仅能够改善站点的⽤户体验并且能够节省相当的资源利⽤。
  前端优化的途径有很多，按粒度⼤致可以分为两类，第⼀类是页⾯级别的优化，例如 HTTP请求数、脚本的⽆阻塞加载、内联脚本的位置优化等 ；第⼆类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图⽚优化以及 HTML结构优化等等。另外，本着提⾼投⼊产出⽐的⽬的，后⽂提到的各种优化策略⼤致按照投⼊产出⽐从⼤到⼩的顺序排列。
　⼀、页⾯级优化
3. JavaScript 压缩和模块打包
4. 按需加载资源
5. 在使⽤ DOM 操作库时⽤上 array-ids
6. 缓存
7. 启⽤ HTTP/2
8. 应⽤性能分析
9. 使⽤负载均衡⽅案
10. 为了更快的启动时间考虑⼀下同构
11. 使⽤索引加速数据库查询
12. 使⽤更快的转译⽅案
13. 避免或最⼩化 JavaScript 和 CSS 的使⽤⽽阻塞渲染
14. ⽤于未来的⼀个建议：使⽤ service workers + 流
15. 图⽚编码优化
相同点
·
都⽀持服务器端渲染
· 都有Virtual DOM，组件化开发，通过props参数进⾏⽗⼦组件数据的传递，都 实 现webComponent规范
· 数据驱动视图
· 都有⽀持native的⽅案,React的React native,Vue的weex
不同点
· React严格上只针对MVC的view层,Vue则是MVVM模式
· virtual DOM不⼀样,vue会跟踪每⼀个组件的依赖关系，不需要重新渲染整个组件树.⽽对于React⽽⾔，每当应⽤的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个⽣命周期函数⽅法来进⾏控制
· 组件写法不⼀样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了，即’all in js’; Vue推荐的做法是webpack+vue-loader的单⽂件组件格式，即html,css,jd写在同⼀个⽂件;
· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
· state对象在react应⽤中不可变的，需要使⽤setState⽅法更新状态；在vue中,state对象不是必须的，数据由data属性在vue对象中管理
7.什么是mvvm mvc是什么区别 原理是什么？
⼀、MVC（Model-View-Controller）
MVC是⽐较直观的架构模式，⽤户操作->View（负责接收⽤户的输⼊操作）->Controller（业务逻辑处理）->Model（数据持久化）-
>View（将结果反馈给View）。
MVC使⽤⾮常⼴泛，⽐如JavaEE中的SSH框架
三、MVVM（Model-View-ViewModel）
如果说MVP是对MVC的进⼀步改进，那么MVVM则是思想的完全变⾰。它是将“数据模型数据双向绑定”的思想作为核⼼，因此在View 和Model之间没有联系，通过ViewModel进⾏交互，⽽且Model和Vie
wModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，⽽数据源数据的变化也会⽴即反应view。
8.px和em的区别
px表⽰像素 (计算机屏幕上的⼀个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺⼨变化⽽变化；
em表⽰相对于⽗元素的字体⼤⼩。em是相对单位 ，没有⼀个固定的度量值，⽽是由其他元素尺⼨来决定的相对值。
**
9.优雅降级和渐进增强**
渐进增强 ：⼀开始就针对低版本浏览器进⾏构建页⾯，完成基本的功能，然后再针对⾼级浏览器进⾏效果、交互、追加功能达到更好的体验。
优雅降级：⼀开始就构建站点的完整功能，然后针对浏览器测试和修复。⽐如⼀开始使⽤ CSS3 的特性构建了⼀个应⽤，然后逐步针对各⼤浏览器进⾏ hack 使其可以在低版本浏览器上正常浏览。
其实渐进增强和优雅降级并⾮什么新概念，只是旧的概念换了⼀个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，⽽优雅降级相当于向下兼容
10.eval()的作⽤
把字符串参数解析成JS代码并运⾏，并返回执⾏的结果；
eval(“2+3”);//执⾏加运算，并返回运算值。
eval(“varage=10”);//声明⼀个age变量
eval的作⽤域
functiona(){
1. eval(“var x=1”); //等效于 var x=1;
2. console.log(x); //输出1
3. }
4. a();
5. console.log(x);//错误 x是未定义
11.JS哪些操作会造成内存泄露
1）意外的全局变量引起的内存泄露
function leak(){
leak=“xxx”;//leak成为⼀个全局变量，不会被回收
}
2）闭包引起的内存泄露
3）没有清理的DOM元素会被引⽤
4）被遗忘的定时器或者回调 ）⼦元素存在引起的内存泄露
12.浏览器缓存有哪些，通常缓存有哪⼏种
⼀、http缓存
⼆、websql
cookie
localstorage存储
sessionstorage存储
flash缓存
13.bootstrap响应式实现的原理
how are you doing? 中文翻译百分⽐布局+媒体查询
⽤rem布局也是可以的
或者⽤vw和vh也是可以的
14.关于JS事件冒泡理解与JS事件代理理解（事件委托）
事件作为DOM操作重要的⼀环，需要⼤家好好理解和运⽤，今天特意看了⼀下事件冒泡和事件代理的相关资料，感触颇深，也深感⾃⼰的⽆知不知道多浪费了多少内存，废话不多说进⼊正题：
1.事件冒泡：
通俗易懂的来讲，就是当⼀个⼦元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的⼦元素）开始逐级向上传播，触发⽗级元素的点击事件
2.事件委托
事件委托，⾸先按字⾯的意思就能看你出来，是将事件交由别⼈来执⾏，再联想到上⾯讲的事件冒泡，是不是想到了？对，就是将⼦元素的事件通过冒泡的形式交由⽗元素来执⾏。下⾯经过详细的例⼦来说明事件委托：
有可能在开发的时候会遇到这种情况：如导航每⼀个栏⽬都要加⼀个事件，你可能会通过遍历来给每个栏⽬添加事件：
var ul = ElementById('parentUl');
ul.οnclick=function (event) {
var e = event||window.event,
source = e.target || e.srcElement;//target表⽰在事件冒泡中触发事件的源元素，在IE中是srcElement
LowerCase() == "li"){  //判断只有li触发的才会输出内容
alert(source.innerHTML);
}
stopPropagation(e);                          //阻⽌继续冒泡
};
function addElement() {
var li = ateElement('li');
li.innerHTML="我是新孩⼦";
ul.appendChild(li);
}
15.CSS样式覆盖规则
中国城市人口密度榜出炉规则⼀：由于继承⽽发⽣样式冲突时，最近祖先获胜。
规则⼆：继承的样式和直接指定的样式冲突时，直接指定的样式获胜
规则三：直接指定的样式发⽣冲突时，样式权值⾼者获胜。
样式的权值取决于样式的选择器，权值定义如下表。
CSS选择器
权值
标签选择器：1
类选择器：10
ID选择器：100
内联样式：1000
伪元素(:first-child等)：1
伪类(:link等)：10
可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，⽐如”#nav .current a”的权值为100 + 10 + 1 = 111。
规则四：样式权值相同时，后者获胜。
规则五：!important的样式属性不被覆盖。
!important可以看做是万不得已的时候，打破上述四个规则的”⾦⼿指”。如果你⼀定要采⽤某个样式属性，⽽不让它被覆盖的，可以在属性值后加上!important，以规则四的例⼦为例，”.byline a {color:red !important;}”可以强⾏使链接显⽰红⾊。⼤多数情况下都可以通过其他⽅式来控制样式的覆盖，不能滥⽤!important。
** 16.介绍⼀下box-sizing属性**
兼容问题
⾸先，box-sizing属性在FireFox中存在兼容问题，所以需要使⽤-moz-box-sizing做⼀下兼容。
属性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box
· 这是box-sizing的默认属性值
· 是CSS2.1中规定的宽度⾼度的显⽰⾏为
· 在CSS中定义的宽度和⾼度就对应到元素的内容框
· 在CSS中定义的宽度和⾼度之外绘制元素的内边距和边框
border-box
· 在CSS中微元素设定的宽度和⾼度就决定了元素的边框盒
· 即为元素在设置内边距和边框是在已经设定好的宽度和⾼度之内进⾏绘制
·
CSS中设定的宽度和⾼度减去边框和内间距才能得到元素内容所占的实际宽度和⾼度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。