好吧，正式做了两年的前端er，现在轮到我找工作了。其实也没打算要离开，因为一直觉得自己还像一个嗷嗷待哺的雏鸟，离开了这个温暖的窝就无法生存。无奈公司的业务调整，我们几个人都离开了，我也不得不扑哧着翅膀摇摇晃晃的飞出去。
工作期间没动力的时候就出去面试了下，主要是看看自己处于什么水平吧，发现基础确实不太扎实，也尽自己努力沉下心来系统的看书学习。面试肯定也要有所准备嘛，大半年的看书，确实对js有了更深入的理解，有些概念也慢慢明白。
现在离职两周了，面了好些了，有几个感觉挺有希望的，也谈了薪资，不知道为什么最终没有offer。最欣慰的是，有一家公司第一面觉得我基础挺扎实，嘻嘻～很高兴得到这样的肯定，但是后面要求做个项目笔试题，有点不想做吧，加上又有另外一个公司的笔试项目题，就中断了。
现在想想，我还是不够努力吧，没有珍惜任何一次机会。说不定就有个offer了呢！汲取教训吧，以后不要再这样了。言归正传，记录下最近没回答好的面试题：
1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么
- 域名解析
- 发起TCP的3次握手：
第一次：建立请求时，客户端向服务端发送一个序列包，syn=j。
第二次：服务端响应客户端的syn包，发送确认包的信息ack=j+1，自己再发送一个syn包是k。
第三次：客户端确认收到服务端的syn和ack，并向服务器发送ack包（ack=k+1）。发送后，服务端和客户端就建立起了TCP连接。 - 建立TCP连接后发起http请求
- 服务器端响应http请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的资源
- 浏览器对页面进行渲染
2、实现屏幕居中的正方形
解决难点：
- 正方形
padding-top, margin-top是百分比时，是以父级元素的宽度为标准。 - 垂直水平居中
flex，transform
代码实现一：
html,body{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.square{
width: 30%;
padding-top: 30%;
border: 1px solid #ddd;
}
代码实现二：
html,body{
width: 100%;
height: 100%;
position: relative;
}
.square{
width: 30%;
padding-top: 30%;
border: 1px solid #ddd;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
3、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
- 图片懒加载，滚动到相应位置才加载图片。
- 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
- 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
- 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
- CDN缓存图片
4、requireJS模块加载原理
依次加载require的模块，然后监听文档的onreadystatechange事件（若不支持就监听script的onload事件），判断所有模块加载成功，执行require的callback， 如果只带一个参数且不是数组，就是加载成功后return 模块。
这其中有两个问题：
- 如何解决循环依赖，造成加载死循环：
在模块加载依赖的时候，先检查模块依赖中是否存在正在注册的模块，如果存在的话，则先将模块依赖数量减一。通过这种方法用来解决循环依赖的问题。 - 如何解决重复加载：
将已经加载的模块放到一个对象中，在加载依赖时，先检查这个对象中是否存在，如果存在直接返回这个模块。
5、vue和react的区别
- 最直观的区别就是Vue比React体量更小。
- JSX vs Templates: react中所有的组件渲染都依靠JSX，偏逻辑。Vue更相对传统，基于 HTML 的模板更偏向视图形式。
- 规模上来讲：react社区比vue更繁荣，因为vue中的路由管理都是由官方同步更新，react是交由社区维护。
6、用一个函数实现add(1,2)=3, add(1)(2) = 3.....
function add(){
var args = Array.prototype.slice.call(arguments, 0);
return function sum(){
if(!arguments.length){
var s = 0;
for(var i=0; i<args.length; i++){
s += args[i];
}
return s;
}else{
var otherArgs = Array.prototype.slice.call(arguments, 0);
args.push(otherArgs);
//Array.prototype.push.apply(args, arguments);
return sum;
}
}
}，
console.log(add(1, 2)());
console.log(add(1)(2)(3)());
7、找出n以内的质数，尽量快。
一个是用sqrt，另外就是用筛选法，一次筛出2、3、5、7、...的倍数，直到i * i > n。剩下的就是质数了。
8、问为什么要雇用你，你有什么价值。
其实挺讨厌这样的问题的，我怎么知道你看中我的啥。事后想想，我觉得我可以这样说：我觉得目前为止，自己就是一颗螺丝钉，虽不起眼，但在整个机器运作中，也发挥了自己的力量。至于为什么不是其他螺丝钉，我想通过一轮一轮的面试，你们会觉得我是一个稳定的靠谱的螺丝钉吧。
9、块级元素和行内元素的区别
行内是指 display: inline的元素 ，这类元素设置margin时，只有左右会生效。padding也会生效。常用的span、em、strong都是行内元素。
块级是指元素出了内容区以为的空间都会被占满。div p ul都是块级元素。
10、position的定位
主要是relative属性和static属性，因为这两个中， static是默认的，通常没太在意。relative，通常是搭配子元素需要绝对定位的时候用，也没怎么去了解它本身的定义。
必须记住：static的元素是代表不能被positioned的，即没有top, left, right, bottom这些属性，而position不是static的情况都是可以被positioned，均有偏移属性。
那么为什么通常会将relative和absolute搭配使用，是因为absolute的元素是相对于最近的一个positioned的父级元素，这样说来其实父级元素只要不是static定位的都可以进行子元素相对父元素的绝对定位。如果绝对定位的元素没有“positioned”的父元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而滚动。
详细解读可查看这篇文章。
11、shouldComponentUpdate和setState有什么关联
setState之后，会走shouldComponentUpdate这个阶段，因为这里默认返回是true，所以都会进行re-render，如果在shouldComponentUpdate中，根据nextState和this.state或者nextProps和this.props进行比较，确认是否需要更新，返回false的情况下就不会进行re-render。
12、对ES6中class的理解
Class就是一个对象原型写法的语法糖，更清晰，更面向对象，更接近传统语言的写法。
ES5定义类的写法：
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
ES6定义：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
ES5中的构造函数就类似class中的constructor，原型上的方法就是类中声明的函数。class声明的类和ES5中构造函数使用一样。
另外用Class声明的类不会存在变量提升。完整解释。
13、
持续更新中...
网友评论