前端面试记录

2017-06-28 本文已影响25人 camiler

好吧，正式做了两年的前端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、
持续更新中...

前端面试记录

猜你喜欢

热点阅读