面试常见问题

148 阅读11分钟

1. vue2.0和vue2.0比较增加了那些特性,做了那些优化?(像proxy,slots静态资源,静态树)

重构响应式系统,使用Proxy替换Object.defineProperty;

Proxy优势

(1)可直接监听数组类型的数据变化。

(2)监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升。

(3)直接实现了对象属性的新增和删除

(4)重构了虚拟dom

(5)模板编译的优化,将一些静态节点编译成常量。

Slot优化,将slot编译为lazy函数,将slot的渲染决定权交给子组件。

模板中的内联事件的提取并重用。(原本每次渲染都重新生成内联函数)

代码结构调整,使得体积更小

使用Typescript替换Flow

2.为什么要用proxy,这些优化带来了什么具体说下; (1)可直接监听数组类型的数据变化。

(2)监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升。

(3)直接实现了对象属性的新增和删除 (4)重构了虚拟dom

(5)模板编译的优化,将一些静态节点编译成常量。

3.vue能不能监听到数组的变化?根据你的回答会有下一步的提问,他是怎么处罚的,注意不是问响应式原理。 可以,使用watch

4.响应式原理,怎么patch的遵循的原则是什么,源码里面是怎么做的,怎么对比的;

**5.v-if ,v-for的优先级,为什么v-for加key不加key的区别;

**7.nextTick的原理和$set的原理都结合源码去描述?

**9.vue组件之前的通信,需要6,7种需求,有什么缺点需要怎么解决。

10.vue和react的区别,react在你接触之后发展增加了什么特性;* **11.react的生命周期,redux的原理,react的虚拟dom,还有一些里面的坑、

12.webpack的了解程度,多个执行顺序,怎么优化体积,项目中都做了什么;

13.es6转es5是怎么转的这个过程是什么,不是要结果

14.https,完整描述整个过程;

15.http的状态码具体会问到每个状态码代表什么

16.http2.0和1.0的区别,3.0和2.0的区别

17.安全xss,crsf xss是跨站脚本攻击:XSS 攻击是指攻击者在网站上注入恶意的客户端代码,通过恶意脚本对客户端网页进行篡改,从而在用户浏览网页时,对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。 (1)反射型 XSS 只是简单地把用户输入的数据 “反射” 给浏览器,这种攻击方式往往需要攻击者诱使用户点击一个恶意链接,或者提交一个表单,或者进入一个恶意网站时,注入脚本进入被攻击者的网站。 (2)存储型 XSS 会把用户输入的数据 “存储” 在服务器端,当浏览器请求数据时,脚本从服务器上传回并执行。这种 XSS 攻击具有很强的稳定性。(eg见的一个场景是攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论,浏览器中执行这段恶意的 JavaScript 代码) (3)基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构,是纯粹发生在客户端的攻击。 防范:浏览器将禁止页面的Javascript 访问带有 HttpOnly 属性的Cookie 输入检查:对于用户的任何输入要进行检查、过滤和转义。建立可信任的字符和 HTML 标签白名单,对于不在白名单之列的字符或者标签进行过滤或编码。 输出检查:在变量输出到 HTML 页面时,可以使用编码或转义的方式来防御 XSS 攻击

crsf 跨站请求伪造 CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任,可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器,从而在并未授权的情况下执行在权限保护之下的操作。 防御 : (1)验证码被认为是对抗 CSRF 攻击最简洁而有效的防御方法。 从上述示例中可以看出,CSRF 攻击往往是在用户不知情的情况下构造了网络请求。而验证码会强制用户必须与应用进行交互,才能完成最终请求。因为通常情况下,验证码能够很好地遏制 CSRF 攻击。 (2)根据 HTTP 协议,在 HTTP 头中有一个字段叫 Referer,它记录了该 HTTP 请求的来源地址。通过 Referer Check,可以检查请求是否来自合法的”源” (3) 添加 token 验证

18.协商缓存和强缓存 强缓存:当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。

cache-control: max-age=xxxx,public 客户端和代理服务器都可以缓存该资源; 客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,如果用户做了刷新操作,就向服务器发起http请求

cache-control: max-age=xxxx,private 只让客户端可以缓存该资源;代理服务器不缓存 客户端在xxx秒内直接读取缓存,statu code:200

cache-control: max-age=xxxx,immutable 客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起http请求

cache-control: no-cache 跳过设置强缓存,但是不妨碍设置协商缓存;一般如果你做了强缓存,只有在强缓存失效了才走协商缓存的,设置了no-cache就不会走强缓存了,每次请求都回询问服务端。

cache-control: no-store 不缓存,这个会让客户端、服务器都不缓存,也就没有所谓的强缓存、协商缓存了。

协商缓请求返回来 response header 中的 etag和 last-modified,在下次请求时在 request header 就把这两个带上,服务端把你带过来的标识进行对比,然后判断资源是否更改了,如果更改就直接返回新的资源,和更新对应的response header的标识etag、last-modified。如果资源没有变,那就不变etag、last-modified,这时候对客户端来说,每次请求都是要进行协商缓存了。 发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->没过期-->返回304状态码-->客户端用缓存的老资源。

这就是一条完整的协商缓存的过程。

index.html文件采用协商缓存,理由就是要用户每次请求index.html不拿浏览器缓存,直接请求服务器,这样就保证资源更新了,用户能马上访问到新资源,如果服务端返回304,这时候再拿浏览器的缓存的index.html,切记不要设置强缓存

19.原型链,闭包,继承(那些方式都有什么优缺点)项目中怎么去运用。 在js中我们使用构造函数来创建一个对象,在每一个构造函数的内部都有一个prototye属性值,这个属性值是一个对象,这个对象包含了可以由构造函数的所有实例共享的属性和方法。当我们使用构造函数新建一个对象后,在这个对象内部将包含一个指针,这个指针指向构造函数的prototype属性对应的值,在Es5中这个指针被称为对象的原型。

当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,也就是原型链的概念。

继承:通过让子类的原型等于父类的实例,来实现继承。 优点:继承了超类型的构造函数的所有属性和方法。 缺点:1、在创建子类实例时,无法向超类型的构造函数传参,继承单一。    2、所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型引用类型的属性,另一个实例的原型属性也会被修改!) 继承:

js获取原型的方法: p.proto p.constructor.prototype Object.getPrototypeOf(p)

20.算法怎么样,说一个大概的实现一个思路,复杂度是多少

21.项目中的优化(防抖节流引用场景,具体怎么去实现)

22.http通信原理,

23.http是无状态的协议,为了保存状态,有几种解决方案

24.http报文格式,请求行和状态行有哪些内容

25.301,302区别,302响应行还有什么信息

26. MVVMvue双向绑定排序算法复杂度,稳定性hashmap,算法react虚拟DOM,diff算法

27. 了解http2.0吗?

28. 多路复用是解决对头拥塞的终极解决方案吗?那什么是终极解决方案?

29. 浏览器缓存了解吗,说一说

30. 怎么规避强缓存(文件名后加hash)

31. 垃圾回收机制 由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。 标记清除: 当变量进入执行环境是,就标记这个变量为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到他们。当变量离开环境时,则将其标记为“离开环境”。 引用计数: 引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数就减1。当这个引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其所占的内存空间给收回来。这样,垃圾收集器下次再运行时,它就会释放那些引用次数为0的值所占的内存。

32. 哪些行为会造成内存泄露 (1)意外的全局变量引起的内存泄露 (2)闭包引起的内存泄露。闭包可以维持函数内局部变量,使其得不到释放。 上例定义事件回调时,由于是函数内定义函数,并且内部函数--事件回调的引用外暴了,形成了闭包。 (3)没有清理的DOM元素引用 (4)被遗忘的定时器或者回调 避免内存泄漏 1)减少不必要的全局变量,或者生命周期较长的对象,及时对无用的数据进行垃圾回收;

2)注意程序逻辑,避免“死循环”之类的 ;

3)避免创建过多的对象 原则:不用了的东西要及时归还。

33. 浏览器上怎么查看内存泄露

使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。

34. 数组监听 vue用watch

35. 发布订阅者

36. 两个有序数组合并找中位数

37. n个台阶一次只能一步或两步,多少种走法

38. O(N)排序