js面试问题总结

1.虚拟DOM

虚拟dom为什么能够提高性能

JS对象的结构树表示dom树的结构，用这个树构建一个真正的dom树，插到文档中记录状态变更，重新构造一个新的对象树，然后用新的树和旧的树去做比较，记录两者之间的差异，将差异的部分更新到真正的dom树上面，只会渲染差异部分并不会渲染全部

2.cookie localStorage sessionStorage

相同点：都是存储在客户端

不同点：大小不一。cookie 不能超过4k ， sessionStorage和 localStorage 5M 左右

有效时间：localStorage存储时间持久，浏览器关闭后数据不会消失，sessionStorage数据在浏览器窗口关闭后自动删除，设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭

服务器之间的交互方式： cookie会把数据自动传递给服务端，服务端也可以写cookie到客户端，sessionStorage和localStorage 不会自动将数据传给服务端，会保存在本地

3.什么是闭包

闭包就是能使得外部变量获取内部变量的函数，在本质上闭包就是将内部函数和外部函数连接起来的一个桥梁，最大的用处有两个： 可以读取函数内部的变量；让这些变量的值始终保持在内存中

闭包的好处

延长变量的生命周期

避免全局污染

私有成员存在

安全性提高

4.从输入url到显示页面都经历了什么

浏览器输入url这一过程详解

1.在浏览器中输入url

2.浏览器先在缓存中查找缓存中有的话从缓存中拿取，没有的话发送http请求

3.在发送http请求之前 解析域名

4.浏览器想服务端发送tcp请求与浏览器建立三次握手

5.握手成功发送http请求，请求数据包

6.服务端接收到请求并且将数据返回给浏览器

7.浏览器接收到数据

8.读取页面内容，浏览器渲染，解析 html源码

9.生成dom树 解析css样式 js交互

10.客户端与服务端交互

11.ajax查询

5.改变this指向的bind apply call 的区别

bind需要手动调用，apply call 是立即调用

call 需要一个参数一个参数的传递 apply 需要传入一个数组

在箭头函数中 call和 apply失效

如果你需要传递的参数不多可以使用call

如果参数很多可以整理成数组 进行传递

如果想生成一个新的函数长期绑定给某个函数给某个对象使用都可以用bind

6.为什么jsonp不是真正的ajax

jsonp是根据动态插入这一特点来进行的

真正的ajax是通过XMLHttpRequest来读取本页内容的

不同点：实质不同，ajax是通过跨域，jsonp是通过script标签并不遵循同源策略。jsonp只支持get请求，ajax既支持get也支持post put Delete

7.如何进行网站的性能优化

1.减少http请求

2.css选择器优化

3.当数据量很大时使用懒加载

4.对浏览器使用优雅降级和渐进增强的方案( 优雅降级是指：一开始针对浏览器的版本进行页面构建，然后再根据高级浏览器进行交互，追加更好的使用体验。渐进增强是指：一开始就构建站点的完整功能。然后针对浏览器进行测试和修复)

5.使用压缩的js css包

6.减少请求的数量

7.优化网络连接

8.优化资源加载

9.减少重绘回流

10.性能更好的API

11.webpack优化

8.new操作符干了什么

1.

new

创建了一个空对象并且用this引用这个空对象，同时还继承了函数的原型

2. 属性和方法都被加入到this引用的对象中

3.对象由this引用，并且在最后隐式返回了this

9.dom选择器优先级以及权重值计算

行内样式：1000

ID选择器：0100

类选择器 伪类选择器 属性选择器：0010

标签选择器 伪元素选择器 ：0001

通配符 子选择器 相邻选择器 ：0000

10.foreach 和 map之间的区别

map会产生一个数组 foreach不会 map可以进行链式操作 foreach不能

前端面试必备