首先我们这边是在成都,前端圈子本来就比较小,比如大公司的招聘都是北京,深圳,杭州那边的交叉面试官;所以对于自己职位的预期比较高的,还是要想清楚的;
如果是小公司的话,太创业性质的,面试的内容估计大家自己也都能自己判断,有部分java web的,如果你对自己的前端发展有较为清晰的规划还是远离这种落后前后端未分离的模式,除非你就是想去重构的;
下面把一些自己面试过程中遇到的一些问题总结一下;
常问的基础
js
js的东西是看逻辑和基本功的,这部分的基础奠定了比较深面试官的好感;
1 原型链继承
原型链的上座率很高,但是有感觉技术栈是mvvm的会比较少问这个;
原型链最基本的要搞清楚prototype 和 _ proto _ 是什么关系,原型链就是靠这两玩起来;
首先是要搞清楚下面这段里,b.prototype = new a() 是在干嘛
var a = function(name) {
this.name = name
}
a.prototype.sayName = function(){
console.log(this.name)
}
var b = function() {
}
b.prototype = new a();
一般new a()有三个操作 ;
var b = {} ;
b.__proto__ = a.prototype;
a.call(b);
这个理解起来比较简单,就是把a的prototype给了b的_ proto ,
关系就是b.prototype. proto _ -> a. prototype -> null
最后把b.prototype打印出来是这样的:
b的prototype是自己的属性和一个
2 闭包
闭包不用说了吧,这个回答出来概念,尽量还是准确的好,平时我总是爱按自己理解回答,比如就是函数里返回一个函数,这样说的太表象了,根本没有把闭包这种让人又爱又恨的点解释清楚,为什么他能够引起内存溢出,还要哪哪都有他?
标准概念是:
闭包是指那些能够访问独立(自由)变量的函数 (变量在本地使用,但定义在一个封闭的作用域中)。换句话说,这些函数可以“记忆”它被创建时候的环境。
这句话就很精髓,闭包说的就是函数,函数式主体,但是这个函数和一般的函数有什么区别呢?这个函数被绑了一个环境,函数可以分分钟取到这个环境中的变量;
那么问题来了,你认为面试问闭包只是问闭包的概念吗,no no ,问闭包我认为的有一个重要的意图就是看基础玩的转不转;
玩的转不转就看你怎么用闭包了,用的好不好,一说到使用那么相关的一大堆内容就来了, 基础的比如回调,立即执行,这些讲白了都是闭包,难点的什么柯里化,设计模式中都是闭包;这一点还需要深钻一下
html && css
这部分的基础不做具体的说明了,主要是新特性的东西;提几个点;
- 元素垂直居中,很多种方式,定高的不定高的;
- html5中localstorage和sessionstorage的区别;还有Localstorage的大小,这个最好是很知道,看你的熟悉程度,安卓和IOS上还不一样哦
- flex这个基本上躲不掉的
兼容性问题
IE不支持的:
(1) IE9以下不支持事件捕获
(2) IE不支持_ proto _
(3) 在DOM3里已经加入了getElementsByClassName这个方法,然而IE9、10以外的其它版本均不支持
(4)IE6的双倍边距Bug
(5)常见症状是IE6中后面的一块被顶到下一行
解决方案:display : inline
(6)IE的事件机制
cancelBubble returnValue 主要是这两个
网络协议
开始问网路协议就有些往全栈偏了
(1) 如果restful的某个方法不支持了怎么做?
request的header中重新设置method ,restful已经是老生常谈了,很早就提出来了,如果会问到让你设计url,以接口的层面考虑下restful架构中东东
- 资源不是动词,但可以是服务
bad: POST /accounts/1/transfer/500/to/2
good :
POST /transaction HTTP/1.1
Host: 127.0.0.1
from=1&to=2&amount=500.00
- 不要在url中加版本号
bad
http://www.example.com/app/1.0/foo
http://www.example.com/app/1.1/foo
http://www.example.com/app/2.0/foo
good
(2) 网络请求码
你知道200 ,302 ,301 ,304 ,400 ,500 ,503都没什么;这些是童子功,但是如果你能知道204,205酱紫的就会显得比较专业;
(3) json相较于其他数据传输格式有什么好的?
(4) 长轮询除了ajax,websoket还有什么方式?
这些问题回答上了能显得你还不错~
(1) promise是怎么实现的?
.then的时候把作为参数的回调函数存起来,到了你执行resolve的时候从数组中把存入回调函数拿出来执行;具体的看源码,有点绕......
(2) promise除了解决地狱回调还有什么好处呢?
a. 能return哦~ return的有两种内容一个是promise对象本身,一个可以是数据,返回第一种就是要接着进行数据访问的,就是回调地狱的解决;
b. 他能catch,在最后去处理错误,不会中断ajax的进程;
(3) bind函数是怎么实现的?
简单来说就是闭包+apply;详细见MDN的Polyfill
(4) jquery , react ,vue这些框架都是怎么初始化的?
大公司都爱问这样的问题,主要是看你有没有看过源码,就算没有看过,思想知不知道;这个也是区分高手和小白的区别,当然回答的好有一百种方式,最简单可能是从设计模式着手;
浏览器的编译原理
知道DOMTree,CSSTree,RenderTree这些都没什么,主要是知道流程,和看你知道的多深,比如说html文件是怎么被解析的,DOMTree,CssTree主要长什么样子等,并且这里面有一个比较重要的概念就是重排和重绘。
(1) 重排和重绘
重排一定会引起重绘,重绘不一定引起重排 ;
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
http://www.cnblogs.com/zichi/p/4720000.html
Firefox:Gecko引擎
Safari:WebKit引擎
Chrome:Blink引擎
IE: Trident引擎
Edge: EdgeHTML引擎