2019独角兽企业重金招聘Python工程师标准>>>
摘要:前端的东西特别多,面试的时候我们如何从容应对,作为一个老兵,我在这里分享几点我的经验。
一、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
的异步编程,以及它的语法糖 async
和 awiat
,传统的异步编程。ES6 之前,异步编程大致如下
-
回调函数
-
事件监听
-
发布/订阅
传统异步编程方案之一:协程,多个线程互相协作,完成异步任务。
-
async、await:Generator 函数的语法糖。有更好的语义、更好的适用性、返回值是 Promise。
-
async => *
-
await => yield
基本用法
async function timeout (ms) { await new Promise((resolve) => { setTimeout(resolve, ms) })}async function asyncConsole (value, ms) { await timeout(ms) console.log(value)}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、如果没有命中,浏览器就会把请求发送给服务器,进入缓存协商阶段。
- 更多分享请关注,微信公众号:xiaohumuhe13,或今日头条号:(大话前端),还能获得海量视频资源哦~
- 我的目标:做最好最全的前端资源分享