人人网一面

人人网面经

---

2018-09-13 人生的第一次面试（视频面试），对方是个小姐姐。一开始就出现各种意外，视频通信我一直听不见她的声音也看不见她的影像，然后就是各种测试不通，最后还是借用了一下室友的电脑进行了一次一个多小时的面试。

以下就是面试过程

1.自我介绍（5分钟左右）

**2.项目的介绍，**然后小姐姐好像对项目不怎么感兴趣，就简单问了个项目用的东西百度地图实现站点定位（10分钟左右）

3.本次面试的重点——CSS（30~40分钟）

“看你的简历上写了个 项目整体样式布局调整 接下来聊聊这个吧 ”——小姐姐说。

• 问题：ul标签下五个li标签，实现奇数行黑色，偶数行红色

ul li{
      background: black;
}
ul li:nth-child(even){
      background: red;
}

ps:好像我最后写成了奇数红色，偶数黑色了~~

• 问题：两个嵌套的div，外部div设置margin-top 30px，内部div设置margin-top 20px，它们分别到顶部的高度是多少？

不假思索的答复：30px和50px（很是疑惑为什么会问这么简单的问题，一下子没想起margin重叠的问题，后面想起来了这个好像可以通过BFC解决，但是又不敢说了，怕说多了错的更多）

“哦哦，这样啊~~你自己下去试试看，效果是怎么样的”——顿时我感觉到了一股凉意。

html 部分

<div class="parent">
      <div class="child"></div>
</div>

css部分

.parent{
       width: 200px;
       height: 200px;
       background: red;
       margin-top: 30px;
}
.child{
       width: 100px;
       height: 100px;
       background: silver;
       margin-top: 20px;
}

效果图如下

哇~~！啪啪的打脸呀

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

解决思路如下：

1.外层元素padding代替
2.内层元素透明边框 border:1px solid transparent;
3.内层元素绝对定位 postion:absolute: 外层元素内层元素 加float:left;或display:inline-block;
4.内层元素padding:1px;

具体情况再酌情处理。

• 问题：文档流知道吗？有哪几种？浮动塌陷的原因以及怎么处理它？

文档流：将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流（normal flow）。

定位：相对定位 (position:relative)、绝对定位 (position:absolute)和固定定位 (position:fixed)。

浮动：浮动的元素可以在左右移动，直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。浮动的元素离普通流。

浮动塌陷：当元素设置浮动而父元素的宽高没有设置时，高度会塌缩为0。

CSS 浮动为什么会塌陷以及解决方案

ps:以前没遇见过浮动塌陷的情况过，问到这个问题的时候一直处理懵逼状态中~~

• 问题：以下两种书写方式的结果分别是什么？知道原因吗？

<p><span>hello</span><span>world!</span></p>

// 分行书写
<p>
  <span>hello</span>
  <span>world!</span>
</p>

结果如下图所示：

多了个空格？？？黑人问号？这是什么鬼！还有这种操作的，我顿时就傻了。

“哦哦，这样啊~~你自己下去试试看，效果是怎么样的”。

下来自己敲了一遍，还真是这样的！！

网上的说法是：span的换行符在页面上被显示为空白，多个span间无空白则正常

ps:就算有多个换行符仍旧表示为一个空格。

- 问题：CSS选择器有哪些？它们的特殊值分别是多少？

选择器的特殊性有选择器本身的组件确定。特殊值表述为4个部分，如：0，0，0，0。

1. 结合符和通配符对特殊性没有任何贡献值，加0，0，0，0
2. 标签或伪元素选择器，加0，0，0，1；
3. 类选择器、属性选择器或伪类，加0，0，1，0；
4. ID选择器，加0，1，0，0；
5. 内联样式特殊性，加1，0，0，0；
6. 重要声明 ！important，最高优先级。

• 问题：什么是盒模型？它有几种类型？

盒模型，顾名思义，就是一个盒子。元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。

CSS盒模型分为IE盒模型和W3C盒模型。其实，IE盒模型是怪异模式（Quirks Mode）下的盒模型，而W3C盒模型是标准模式（Standards Mode）下的盒模型。

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

• 问题：用CSS实现一个三角形

.triangle{
            height:0;
            width:0;
            border:50px solid #e5c3b2;
            border-color:transparent transparent #e5c3b2 transparent;
 }

ps: 前面笔试的时候正好碰见有这个问题，所以直接就给写出来了。这种方式主要是利用CSS3 提供transparent的透明属性实现的。其实还有通过伪类实现的方式，这儿就不在贴代码了。

到这里CSS部分提出来的问题印象比较深的大概就是这几个了。

4.浏览器存储和JavaScript（10多分钟）

• 问题：你知道浏览器存储有哪些吗？它们之间的区别是什么？

浏览器存储：cookie、localStorage以及sessionStorage。

区别如下：

• cookie在浏览器请求中每次都会附加请求头中发送给服务器。大小不能超过4k。
• localStorage保存数据会一直保存没有过期时间，不会随浏览器发送给服务器。大小5M或更大。
• sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。大小5M或更大。

另外，我还简单讲了一下indexedDB（H5规范里的浏览器内置数据库）。

• 问题：讲讲js中的var、const和let吧

• const定义的变量不可以修改，而且必须初始化。
• var定义的变量可以修改，如果不初始化会输出undefined，不会报错。还有变量提升的风险。
• let是块级作用域，函数内部使用let定义后，对函数外部无影响。

• 问题：js怎么判断一个变量是对象还是数组？

这个问题一提出来我马上就回答 Object.prototype.toString.call()，并且说这种方式是最准确的。然后小姐姐还是再问了一次，你还有其他方法吗？

她一问，我就又想到了typeof，但是使用typeof来判断最后的得值都是’object’，它并不能直接判断的，所以只好对小姐姐说暂时没想出来~~

1、判断数组可以用Array.isArray。

 var a=[];
 var b={};
 Array.isArray(a);//true
 Array.isArray(b)//false

2、如果你只是用typeof来检查该变量，不论是array还是object，都将返回‘objec’。 此问题的一个可行的答案是是检查该变量是不是object，并且检查该变量是否有数字长度（当为空array时长度也可能为0,object的长度为undefined）。

var a=[];
var b={};
typeof a === 'object' && !isNaN(a.length)//true
typeof b === 'object' && !isNaN(b.length)//false

3、调用toString( )方法试着将该变量转化为代表其类型的string。

var a=[];
var b={};
Object.prototype.toString.call(a)  === '[object Array]'//true
Object.prototype.toString.call(b)  === '[object Array]'//false

• 问题：js中假值有哪些？

false、null、undefined、0、’’ (空字符串)、NaN

ps：当时直接把false给忘了，小姐姐问我false不是吗？大写尴尬~~

• 问题：promise知道不？试用promise封装原生的ajax

这个问题还是很简单，主要需要注意的有两点：一、promise的三个状态以及改变状态的两个方法；二、XMLHttpRequest的兼容性以及get和post的使用区别。

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 代码
    }else if(typeof ActiveXObject != 'undefined'){// IE6, IE5 代码
        if(typeof arguments.callee.activeXString != 'string'){
            var versions = ['MSXML2.XMLHttp.6.0','MSLXML2.XMLHttp.3.0','MSXML.XMLHttp'];
            for(var i = 0; i < versions.length; i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                }catch(e){
                    console.log(e);
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error('不支持XHR');
    }
}

function getJSON (method,url, data) {
    return new Promise( (resolve, reject) => {
        var xhr = createXHR;
        xhr.open(method, url, true)
        if(method == 'post' || method == 'POST'){
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(this.responseText, this)
                } else {
                    var resJson = { code: this.status, response: this.response }
                    reject(resJson, this)
                }
            }
        }
        if(data){
           xhr.send(data);
        }else{
           xhr.send(null);
        }
    })
}

• 问题：知道事件捕获和冒泡不？怎么防止冒泡和捕获？取消默认事件是什么？

1、一个完整的JS事件流是从window开始，最后回到window的一个过程。
2、事件流被分为三个阶段捕获过程、目标过程、冒泡过程。

防止冒泡和捕获

• s冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。
• w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

取消默认事件

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

• 问题：知道target和currentTarget吗？

target和currentTarget都是event上面的属性，target是真正发生事件的DOM元素，而currentTarget是当前事件发生在哪个DOM元素上。处于目标阶段时 target == currentTarget

ps：target和currentTarge这个问题没答出来，真的忘了~~

• 问题：实现给ul下的5个li标签添加事件处理程序？ 用事件委托做？

我说只会for循环注入，>_<额~~

定义：利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。
使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到
它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

<ul id="color-list">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
</ul>

js 循环

(function(){
    var color_list = document.getElementById('color-list');
    var colors = color_list.getElementsByTagName('li');
    for(var i=0;i<colors.length;i++){
        colors[i].addEventListener('click',showColor,false);
    };
    function showColor(e){
        var x = e.target;
        alert("The color is " + x.innerHTML);
    };
})();
//js 事件委托
(function(){
    var color_list = document.getElementById('color-list');
    color_list.addEventListener('click',showColor,false);
    function showColor(e){
        var x = e.target;
        if(x.nodeName.toLowerCase() === 'li'){
            alert('The color is ' + x.innerHTML);
        }
    }
})();

ps：WTF???事件委托就这么简单~~

• 问题：闭包知道吗？有哪些用途？

MDN：闭包是函数和声明该函数的词法环境的组合。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。需要注意的就是外层函数执行后被垃圾回收之后它被调用的内部变量将会存储在内存中，所以仍旧能够访问到它。

用途

1、匿名自执行函数
2、结果缓存
3、封装
4、实现类和继承

全面理解Javascript闭包和闭包的几种写法及用途

---

总结

虽然是第一次面试，实际上并没有什么紧张感，可能对面是个小姐姐的缘故吧。不知道为什么她实际对我做的项目并没有什么兴趣。她一个劲的问我CSS相关的问题，还不时出点编程题让我现敲。毕竟是第一次面试没什么经验，感觉被套路的时候有很多。不过，这说到底还是自己的基础知识太不扎实了，随便问点基础的问题就给考到了。最后结束的时候，她问我有什么问题的吗？我就只问了一个问题，“你觉得我有哪些需要提升的吗？”她就说这些知识其实在平时的积累中都是能够了解到的，只是因为自己平时没有注意才出现了这么多基础问题。呜呜~~感觉自己弱爆了！