web前端面试宝典-基础篇(一)

其实感觉前端的面试就是一些零碎的知识点，最后上升为架构而已。这篇博客我也会将架构设计融入其中。大致通过以下几个分类进行分析:

  • HTML/CSS部分
  • JavaScript部分
  • 数据结构部分（算法）
  • 框架之Angular.js
  • 框架之Vue.js
  • 框架之React.js
  • 移动端
  • HTTP
  • WEB安全
  • WEB渗透之Kali Linux
  • 前端性能
  • 设计模式
  • 正则表达式
  • 前端架构设计

一、HTML/CSS部分

1.1 什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

1.2 什么是css Hack？

一般来说，css Hack就是针对不同的浏览器写不同css样式。css hack一般来说是为了兼容IE浏览器的。
IE浏览器Hack一般又分为三种: 条件Hack、属性Hack、选择器Hack。

// 1.条件Hack
<!--[if IE]>
    <style>
        .test {color:red;}
    </style>
<![endif]-->

// 2.属性Hack
.test {
    color: #090\9; /* For IE8+ */
    *color: #f00;  /* For IE7 and earlier */
    _color: #ff0;  /* For IE6 and earlier */
}

// 3.选择器Hack
*html .test{
    color: #090; /* For IE6 and earlier */
}

*+html .test {
    color: #ff0; /* For IE7 */
}

1.3 什么是同步？异步？

当我在学习前端的时候，看到这个问题的时候，让不不禁想起了学习Linux时，一直想的一个问题。什么是异步，同步？什么是阻塞，非阻塞当时这个问题困惑了我很久，一直搞不清楚有什么区别，异步不就是非阻塞吗，同步不就是阻塞吗？下面咱们就唠唠嗑来说说这里面的玄机。在这里咱们主要来以网络I/O为例:

1.3.1 同步和异步

实际上同步与异步是针对***应用程序***与***内核***的交互而言的。同步过程中进程触发IO操作并等待或者轮询的去查看IO操作是否完成。异步过程中进程触发IO操作后，直接返回，做自己的事情，IO交给内核来处理，完成后内核通知进程IO完成。

（这里大家不禁要问了，什么是IO，如果你是做后端开发的，IO对于你来说很容易理解，但是纯做前端的话就不容易理解了。IO就是input/output，输入输出。比如文件的读写操作，网络的请求和得到数据的操作等等。不懂的童鞋要去学习操作系统了）
直接上图吧:

同步与异步.png

1.3.2 阻塞与非阻塞

简单理解为需要做一件事情能不能立即得到返回应答。如果不能立刻获得返回，需要等待，那就阻塞了，否则就可以理解为非阻塞。详细区别如下图所示:
阻塞与非阻塞.png

需要注意了, 这里的立即返回，是针对内核来说的。就是说这个应用程序的某些代码会不会阻塞内核（CPU）的执行。而同步异步是针对于应用程序来说的，到底某些代码会不会影响下面代码的执行。

1.4 px和rem和em的区别？

px和rem和em都是长度单位, 区别是px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，它的值是继承父级元素的字体大小(其实也不能说是父级，应该说是自身，如果自身没有设置font-size, 则去找父级，然后父级没设置，在往上找，如果没有找到，就是浏览器默认的字体)。下面举例说明:

    /* 1. em的案列 */
    .test {
      font-size: 20px;  /* 这句话声明之后就代表了1em = 20px;但是后面的代码与这个没有关系 */
      text-indent: 2em;  /* 单位转换之后2em = 40px */
    }
    
    /* 2.rem的案列 -- rem是根据html的font-size大小定的，一般用于移动端网站开发时使用，进行屏幕适配。*/
    html {
        font-size: 40px;
    }
    
    .test {
        font-size: 1rem; /* 单位转换后为40px */
    }

1.5 浏览器的内核分别是什么?

IE: trident内核
Firefox: gecko内核
Safari: webkit内核
Opera: 以前是presto内核，Opera现已改用Google Chrome的Blink内核。
Chrome: Blink(基于Webkit内核，google和Opera公同开发)

1.6 清除浮动的影响的方法？

这个问题之前一直说一直说，没有时间去总结。咱们从下面几种方式进行探究。

  • 1.空的div方式(不是特别好，如果清除浮动地方多了，就会有多个空标签)
    /* 在要清除浮动的地方加上<div class="clearfix"></div> */
    .clearfix {
        clear: both;
        height: 0px;
    }
  • 2.使用overflow方式进行清除浮动带来的影响。
    /* 想要使用overflow清除浮动带来的影响，一般分为两步骤：
        1. 给它加一个父元素
        2. 在父元素上写overflow: hidden;
    */
    <div style="overflow:hidden;">
        <div class="right">
                
        </div>
    </div>
  • 3.使用伪元素的方式进行清除浮动带来的影响。
    /* 这里说明一下，一般使用这种方式也是需要给它加一个父元素的... */
    .test::after {
         content:"";        
         display:block;        
         height:0;        
         clear:both;        
         /* visibility:hidden;    */
    }

1.7 margin折叠现象?

要想解释这个现象，还是要了解BFC的。这里的我就不啰嗦了，就直接说一下解决方案了。（我经常使用的方案, 其他方案自行百度）

    /* 这个很简单和上一个题目一样
    */
    在父层加上overflow:hidden;

其他CSS的问题待续吧(CSS3动画、渐进、Canvas、SVG等等先忽略)，特别是less、sass、stylus等预处理语言，面试中也是常问的重点。

二、JavaScript部分

这一部分涉及的内容就多了，那么我会从ES5和ES6都会讲解到。
先列个目录

2.1 如何快速合并两个数组？

这个问题看起来很简单，实则没有那么简单。给大家提几个问题，合并数组什么方式最好也就是说性能最佳？合并之后用不用去重？等等都需要考虑。网上给出了push和concat的对比。(温馨提示:如果不懂call和apply的童鞋，自行学习。)

2.1.1. 先使用代码来对比（concat函数与Array.prototype.push.apply）

    function testClass() {
            var testArray1 = [];
            var testArray2 = [];
            this.resetArray = function() {
                for (var i = 0; i < 100000; i++) {
                    testArray1.push(i);
                    testArray2.push(i + 100000);
                }
            }
            this.applyTest = function() {
                var startTime = 0,
                    endTime = 0;
                console.log('开始合并的时间是：' + (startTime = new Date().getTime()));
                var aa = Array.prototype.push.apply(testArray1, testArray2);
                console.log(aa);
                console.log('合并完成的时间是：' + (endTime = new Date().getTime()));
                console.log('合并数组所用的时间是：' + (endTime - startTime));
            }
            this.concatTest = function() {
                var startTime = 0,
                    endTime = 0;
                console.log('开始合并的时间是：' + (startTime = new Date().getTime()));
                var aa = testArray1.concat(testArray2);
                console.log(aa.length);
                console.log('合并完成的时间是：' + (endTime = new Date().getTime()));
                console.log('合并数组所用的时间是：' + (endTime - startTime));
            }
        }


        var apply = new testClass();
        apply.resetArray();
        apply.applyTest();


        var concat = new testClass();
        concat.resetArray();
        concat.concatTest();

通过测试结果可知:
使用Array.prototype.push.apply 方式性能非常低下，在20w的数据下，执行时间将近是concat方法的11-17倍左右。

2.1.2 Array.prototype.concat.apply 和 concat对比

很多程序员喜欢直接使用Array构造函数下的原型对象上的方法，以此缩短搜索函数的时间，这种方式是否能够带来性能的提升？
在这里只需要将第一个函数中的代码改成

    var aa = Array.prototype.concat.apply(testArray1, testArray2);

根据测试的结果，使用Array.prototype.concat.apply的方式还是比直接使用concat函数慢些。之前我也没有注意过，这次测试，我感觉问题大了。难道之前想错了，经过又一轮的测试，证明了我的猜测。下一轮的对比您应该想到了，就是call和apply的性能。(这个对比大家自行研究，结论就是call的性能在chrome浏览上明显比apply性能要高很多)

2.1.3 Array.prototype.concat.call 和 concat对比

将第一个函数中的代码改成如下:

    var aa = Array.prototype.concat.call(testArray1, testArray2);

最后的测试结果验证使用Array.prototype.concat.call比直接使用concat方法性能提升了一倍。因此最后的得出的结论就是数据合并性能最高的方式就是使用Array.prototype.concat.call。
各位兄弟姐妹，这只是我自己的测试结果，如果有出入，欢迎指正。至于去重的算法及其性能优化放到算法一节说吧。

2.2 说说你对原型链的理解？

这个问题也是相当有点难度的问题。首先要搞清楚什么是原型对象、什么是构造函数、什么是实例化对象。如果和我一样都清楚的童鞋，您只需看图即可。

数组对象原型链 .png

这张图表明了如果数组实例化之后，它原型的整个指向。还有一种情况就是当实例化对象时，采用var a = {}或者new Object();它的指向如下:

Obj.png

2.3 说说你对js中面向对象编程的理解？

在没有学习面向对象编程的时候，大家更多的是函数(就是一些功能性代码的集合)，而面向对象的思想是从另外一个角度出发来解决函数的局限性。它把对象作为程序的基本单元，其实对象就是对事物的一种抽象描述。
人们发现，现实世界中的事物，都可以用「数据」和「能力」来描述。比如我要描述一个人，「数据」就是他的年龄、性别、身高体重，「能力」就是他能做什么工作，承担什么样的责任。描述一台电视，「数据」就是它的屏幕尺寸、亮度，「能力」就是播放《葫芦娃》。

面向对象的世界里，到处都是对象。对象不光有「数据」和「能力」，还可以接受命令。例如你可以让「狗」这个对象「吃狗粮」，就可以把「吃狗粮」的命令发给「狗」让其执行，然后我们就实现了「狗吃狗粮」的需求。

现在对象有了，如何进行面向对象的编程呢?很简单，依次向不同的对象发送命令就可以了。比如产品经理说要把大象装进冰箱里，用面向对象来实现，我们会先定义一个「冰箱」对象，它的「数据」就是当前的冷冻温度，或者该冰箱已经有了多少头大象，「能力」就是开门、关门。还有一个「大象」对象，它的「数据」可以是大象的智商、体积，「能力」就是「自己跑到冰箱里去」。然后我们依次：

向冰箱下达「开门」的命令。

向大象下达「进冰箱」的命令。

向冰箱下达「关门」的命令。

大家好好理解一下就可以整明白，当然还有其他的编程思想。比如面向接口、面向切面都是常用编程思想。（具体到后面再讲解吧）

2.4 JavaScript（ES5）中封装、多态、继承的实现方式?

2.4.1 JavaScript实现封装

→原始模式

var cat = {
    name: '',
    color: ''
}

这种方式缺点是: 1.如果生成的对象很多就会很麻烦。2.不能看出实例之间的联系

→简单工厂模式

function Cat(name, color) {
    var obj = {};
    obj.name = name;
    obj.color = color;
    return obj;
}

var cat1 = Cat("金毛", "黄色");
var cat2 = Cat("泰迪", "棕色");

这种方式可以解决代码重复的问题，但是依然不能反映出实例对象之间的关系。

→构造函数模式

    function Cat(name, color) {
        this.name = name;
        this.color = color;
    }
    var cat1 = new Cat("金毛", "黄色");
    var cat2 = new Cat("泰迪", "棕色");

构造函数的方式确实好用，但是存在一个浪费内存的问题。所以就要使用原型模式。

→原型模式

    function Cat(name, color){
　　　　this.name = name;
　　　　this.color = color;
　　}
　　Cat.prototype.type = "猫科动物";
　　Cat.prototype.eat = function(){alert("吃老鼠")};

还有等等一些模式进行封装，大家自行去查询即可。

2.4.2 JavaScript中继承的实现

→原型继承

    // 基类
    var Person = function() {
        this.name = '张三';
        this.age = 20;
    };
    
    Person.prototype = {
        say: function() {
            console.log('Person.prototype');
        }
    };
    
    // 子类
    var Student = function() {
        
    };
    
    // 这样就可以继承了Person里面的所有的方法。
    Student.prototype = new Person();
    Student.prototype.getTeacher = function(){
        console.log('Student.prototype.getTeacher');
    };

这种继承存在一些问题，就是无法通过参数定义对象。

→构造函数实现继承

    function Person(){
        this.race = '人类';
    }
    Person.prototype={
        eat:function(){
            alert('123')
        }
    };

    /*学生对象*/
    function Student(name, skin) {
        // People(), 
        Person.apply(this, arguments);
        this.name = name;
        this.skin = skin;
    }

构造函数这种方式的继承利用apply这个方法改变this的指针来完成继承的。

→组合模式实现继承

组合模式就是将上述的原型继承和构造函数继承的组合。

    function Person(name, age) {}
    Person.prototype.say = function() {}


    function Student(name, age, no) {
        /*会自动调用Person的方法，同时将name age传递过去*/
        Person.call(this, name, age);
        //自己的属性
        this.no = no;
    }
    Student.prototype = new Person();

通过这种方式进行继承会更加完善。至于其他的继承方式在这就不一一列举了，比如寄生虫组合继承、拷贝继承等等。

2.4.3 JavaScript中重载的实现

这里只说一种方式实现重载（根据arguments个数）

    function add() {
        var sum = 0 ;
        for ( var i = 0 ; i < arguments.length; i ++ ) {
            sum += arguments[i];
        }
        return sum;
    }
    alert(add());
    alert(add( 1 , 2 ));
    alert(add( 1 , 2 , 3 ));

内容太多了，请移步web前端面试宝典-基础篇(二)
有问题请联系QQ:136062834，一直感觉良好的攻城狮。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容