查看: 2334|回复: 0

[JavaScript/JQuery] web前端面试总结(非常经典)

发表于 2018-2-14 08:00:02

摘要:前端的东西特别多,面试的时候我们如何从容应对,作为一个老兵,我在这里分享几点我的经验。

一、javascript 基础(es5)

1、原型:这里可以谈很多,只要围绕 [[ prototype ]] 谈,都没啥问题
2、闭包:牵扯作用域,可以两者联系起来一起谈
3、作用域:词法作用域,动态作用域
4、this:不同情况的调用,this 指向分别如何。顺带可以提一下 es6 中箭头函数没有 this, arguments, super 等,这些只依赖包含箭头函数最接近的函数
5、call,apply,bind 三者用法和区别:参数、绑定规则(显示绑定和强绑定),运行效率(最终都会转换成一个一个的参数去运行)、运行情况(call,apply 立即执行,bind 是return 出一个 this “固定”的函数,这也是为什么 bind 是强绑定的一个原因)。
6、json jsonp json 数据格式,什么是真正的json,理解跨域的原理,如何解决跨域。

二、JS 基础(ES6) let,const:let 产生块级作用域(通常配合 for 循环或者 {} 进行使用产生块级作用域),const 申明的变量是常量(内存地址不变)

Promise:这里你谈 promise 的时候,除了将他解决的痛点以及常用的 API 之外,最好进行拓展把 eventloop 带进来好好讲一下,microtask、macrotask 的执行顺序,如果看过 promise 源码,最好可以谈一谈 原生 Promise 是如何实现的。Promise 的关键点在于callback 的两个参数,一个是 resovle,一个是 reject。还有就是 Promise 的链式调用(Promise.then(),每一个 then 都是一个责任人)。

Generator:遍历器对象生成函数,最大的特点是可以交出函数的执行权 function 关键字与函数名之间有一个星号; 函数体内部使用 yield 表达式,定义不同的内部状态; next 指针移向下一个状态

这里你可以说说 Generator 的异步编程,以及它的语法糖 asyncawiat,传统的异步编程。ES6 之前,异步编程大致如下

回调函数 事件监听 发布/订阅

传统异步编程方案之一:协程,多个线程互相协作,完成异步任务。

async、await:Generator 函数的语法糖。有更好的语义、更好的适用性、返回值是 Promise。 async => * await => yield

基本用法

  1. async function timeout (ms) {
  2. await new Promise((resolve) => {
  3. setTimeout(resolve, ms)
  4. })
  5. }
  6. async function asyncConsole (value, ms) {
  7. await timeout(ms)
  8. console.log(value)
  9. }
  10. asyncConsole('hello async and await', 1000)
复制代码

注:最好把2,3,4 连到一起讲

AMD,CMD,CommonJs,ES6 Module:解决原始无模块化的痛点 AMD:requirejs 在推广过程中对模块定义的规范化产出,提前执行,推崇依赖前置 CMD:seajs 在推广过程中对模块定义的规范化产出,延迟执行,推崇依赖就近 CommonJs:模块输出的是一个值的 copy,运行时加载,加载的是一个对象(module.exports 属性),该对象只有在脚本运行完才会生成 ES6 Module:模块输出的是一个值的引用,编译时输出接口,ES6 模块不是对象,它对外接口只是一种静态定义,在代码静态解析阶段就会生成。 三、框架相关 数据双向绑定原理:常见数据绑定的方案 Object.defineProperty(vue):劫持数据的 getter 和 setter 脏值检测(angularjs):通过特定事件进行轮循 发布/订阅模式:通过消息发布并将消息进行订阅 VDOM:三个 part, 虚拟节点类,将真实 DOM 节点用 js 对象的形式进行展示,并提供 render 方法,将虚拟节点渲染成真实 DOM 节点 diff 比较:对虚拟节点进行 js 层面的计算,并将不同的操作都记录到 patch 对象 re-render:解析 patch 对象,进行 re-render

补充1:VDOM 的必要性?

创建真实DOM的代价高:真实的 DOM 节点 node 实现的属性很多,而 vnode 仅仅实现一些必要的属性,相比起来,创建一个 vnode 的成本比较低。

触发多次浏览器重绘及回流:使用 vnode ,相当于加了一个缓冲,让一次数据变动所带来的所有 node 变化,先在 vnode 中进行修改,然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改,以减少浏览器的重绘及回流。

补充2:vue 为什么采用 vdom?

引入 Virtual DOM 在性能方面的考量仅仅是一方面。

性能受场景的影响是非常大的,不同的场景可能造成不同实现方案之间成倍的性能差距,所以依赖细粒度绑定及 Virtual DOM 哪个的性能更好还真不是一个容易下定论的问题。

Vue 之所以引入了 Virtual DOM,更重要的原因是为了解耦 HTML 依赖,这带来两个非常重要的好处是:

不再依赖 HTML 解析器进行模版解析,可以进行更多的 AOT 工作提高运行时效率:通过模版 AOT 编译,Vue 的运行时体积可以进一步压缩,运行时效率可以进一步提升; 可以渲染到 DOM 以外的平台,实现 SSR、同构渲染这些高级特性,Weex 等框架应用的就是这一特性。

综上,Virtual DOM 在性能上的收益并不是最主要的,更重要的是它使得 Vue 具备了现代框架应有的高级特性。

vue 和 react 区别 相同点:都支持 ssr,都有 vdom,组件化开发,实现 webComponents 规范,数据驱动等 不同点:vue 是双向数据流(当然为了实现单数据流方便管理组件状态,vuex 便出现了),react 是单向数据流。vue 的 vdom 是追踪每个组件的依赖关系,不会渲染整个组件树,react 每当应该状态被改变时,全部子组件都会 re-render。

上面提到的每个点,具体细节还得看自己的理解

为什么用 vue :简洁、轻快、舒服、没了 四、缓存

首先得明确 http 缓存的好处

1、减少了冗余的数据传输,减少网费
2、减少服务器端的压力
3、Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间
4、加快客户端加载网页的速度

常见 http 缓存的类型

1、私有缓存(一般为本地浏览器缓存)
2、代理缓存

然后谈谈本地缓存

本地缓存是指浏览器请求资源时命中了浏览器本地的缓存资源,浏览器并不会发送真正的请求给服务器了。它的执行过程是

1、第一次浏览器发送请求给服务器时,此时浏览器还没有本地缓存副本,服务器返回资源给浏览器,响应码是200 OK,浏览器收到资源后,把资源和对应的响应头一起缓存下来。
2、第二次浏览器准备发送请求给服务器时候,浏览器会先检查上一次服务端返回的响应头信息中的Cache-Control,它的值是一个相对值,单位为秒,表示资源在客户端缓存的最大有效期,过期时间为第一次请求的时间减去Cache-Control的值,过期时间跟当前的请求时间比较,如果本地缓存资源没过期,那么命中缓存,不再请求服务器。
3、如果没有命中,浏览器就会把请求发送给服务器,进入缓存协商阶段。



回复

使用道具 举报