2020常见面试题

面试了几家公司，把题目整理如下，答案仅供参考。一面偏基础，大部分会或似曾相识。过与不过，看的是基础全不全面、扎不扎实。会是应该的，答案要详细，有的题要能说出多种写法——靠平时积累。

下面按 CSS、HTML、JavaScript、网络协议收齐原题，代码一块不漏。

一、CSS

calc、supports、media 各自含义及用法？

@supports 检测浏览器是否支持某个 CSS 属性，相当于条件判断：支持写一套样式，不支持再给替补。

calc() 动态计算长度，支持 +、-、*、/。

@media 按不同媒体类型定义样式。

水平、垂直居中至少 4 种？

考查 CSS 基础是否全面，平时要多积累。

水平居中

• 行内元素: text-align: center
• 块级元素: margin: 0 auto
• position:absolute + left:50% + transform:translateX(-50%)
• display:flex + justify-content: center

垂直居中

• 设置 line-height 等于 height
• position：absolute + top:50% + transform:translateY(-50%)
• display:flex + align-items: center
• display:table + display:table-cell + vertical-align: middle;

1rem、1em、1vh、1px 各自含义？

rem

rem 的长度都相对根元素。通常给 html 设字号，其他长度用 rem。

em

• 子元素字体大小的 em 相对父元素字体大小
• 元素的 width/height/padding/margin 用 em，相对该元素自己的 font-size

vw/vh

Viewport Width / Viewport Height，视窗宽高的 1%。处理宽度时 % 更合适，处理高度时 vh 更好。

px

像素（Pixel），相对长度，相对屏幕分辨率。常见如 1920×1024：宽 1920 个像素，高 1024 个像素。

画一条 0.5px 的直线？

考查 CSS3 的 transform。

height: 1px;
transform: scale(0.5);

说一下盒模型？

盒模型是 CSS 必考基础。

由里向外：content、padding、border、margin。

IE 盒子模型里 width 表示 content+padding+border；标准盒子模型里 width 只指 content。

box-sizing 的用法：

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

默认是 content-box。

画一个三角形？

简单 CSS 题：用组件库的同时别忘了原生。

<style> 
.a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
 }
</style>
<div class="a"></div>

清除浮动的几种方式及原理？

清浮动简单，真正要引出的是 BFC。

• ::after /
/ clear: both
• 创建父级 BFC（overflow:hidden）
• 父级设置高度

BFC（块级格式化上下文）是独立渲染区域，内部元素与外部隔离，定位互不影响。

触发条件:

• 根元素
• position: absolute/fixed
• display: inline-block / table
• float 元素
• overflow !== visible

规则:

• 同一 BFC 里两个相邻 Box 垂直排列
• 同一 BFC 里两个相邻 Box 的 margin 会重叠
• BFC 区域不与 float 元素区域重叠
• 算 BFC 高度时，浮动子元素也参与
• 文字层不会被浮动层覆盖，环绕周围

二、HTML

说一下 label 标签的用法

label 主要方便鼠标点击，扩大可点击范围，增强操作体验。

遍历 A 节点的父节点下的所有子节点

考查原生 DOM。长期只用 MVVM，这题容易忘。

<script>
    var b=document.getElementById("a").parentNode.children;
    console.log(b)
</script>

三、JavaScript

用 JS 递归写 1 到 100 求和？

递归常用，Vue 做双向绑定时检验数据也用递归。面试手写时，概念不透会卡。

function add(num1,num2){
	var num = num1+num2;
        if(num2+1>100){
	 return num;
	}else{
	  return add(num,num2+1)
        }
 }
var sum =add(1,2);

页面渲染 HTML 的过程？

不必死记，理解全过程即可。

1. 解析 HTML，创建 DOM 树，并行请求 css/image/js。每个标签、每段文本都有节点，根是 documentElement，对应 html。
2. 解析 CSS，算出最终样式，构建 CSSOM。非法语法直接忽略。优先级：浏览器默认 < 用户设置 < 外链 < 内联 < html 中的 style。
3. DOM Tree + CSSOM → 渲染树。渲染树会忽略 head、display:none 等；大段文本每一行可以是独立节点；节点上存对应 CSS。
4. 根据渲染树绘制到屏幕。

四步不是一次性做完。DOM 或 CSSOM 被改就会重复。CSS 和 JavaScript 往往会多次修改它们。

说一下 CORS？

CORS 是新标准，同源和跨域通信都支持。fetch 是实现 CORS 通信的方式之一。

如何中断 ajax 请求？

一是设超时让它自动断开；二是手动停，核心是调 XMLHttpRequest 的 abort，即 ajax.abort()。

说一下事件代理？

把事件绑到目标父元素，利用冒泡触发。

ulEl.addEventListener('click', function(e){
    var target = event.target || event.srcElement;
    if(!!target && target.nodeName.toUpperCase() === "LI"){
        console.log(target.innerHTML);
    }
}, false);

target、currentTarget 的区别？

currentTarget 是当前绑定事件的元素；target 是当前被点击的元素。

说一下宏任务和微任务？

1. 宏任务：当前调用栈中执行的任务（主代码块、定时器等）。
2. 微任务：本次事件循环宏任务执行完、下一个宏任务开始前要跑的任务（回调、promise.then、process.nextTick 等）。
3. 宏任务事件在 callback queue，由事件触发线程维护；微任务在微任务队列，由 JS 引擎线程维护。

继承的几种方式及优缺点？

说几种经典方式并比较优缺点即可。

1. 借用构造函数继承：用 call 或 apply 把父构造函数绑到子对象上
2. 原型继承：子对象 prototype 指向父对象的一个实例
3. 组合继承

原型链继承的缺点

• 字面量重写原型会中断关系；引用类型的原型，子类型还无法给超类型传参。

借用构造函数（类式继承）

• 解决了上面两点，但没有原型，复用无从谈起。

组合式继承

• 较常用：原型链继承原型上的属性和方法，借用构造函数继承实例属性。原型上定义方法实现复用，又保证实例有自己的属性。

说一下闭包？

实质是函数嵌套形成的作用域链。函数 A 内部有函数 B，B 能访问 A 的变量，B 就是闭包。

export 和 export default 的区别？

export default  xxx
import xxx from './'

export xxx
import {xxx} from './'

自己常用的 ES6 功能？

开放题。别只说 let，说 module、class、promise 等，尽量讲细。

什么是会话 cookie，什么是持久 cookie？

cookie 由服务器返回。指定了 expire time 的是持久 cookie，没指定的是会话 cookie。

数组去重？

看着简单，高分要写出几种方法。

js

var arr=['12','32','89','12','12','78','12','32'];
    // 最简单数组去重法
    function unique1(array){
        var n = []; //一个新的临时数组
        for(var i = 0; i < array.length; i++){ //遍历当前数组
            if (n.indexOf(array[i]) == -1)
                n.push(array[i]);
        }
        return n;
    }
    arr=unique1(arr);
    // 速度最快， 占空间最多（空间换时间）
    function unique2(array){
        var n = {}, r = [], type;
        for (var i = 0; i < array.length; i++) {
            type = typeof array[i];
            if (!n[array[i]]) {
                n[array[i]] = [type];
                r.push(array[i]);
            } else if (n[array[i]].indexOf(type) < 0) {
                n[array[i]].push(type);
                r.push(array[i]);
            }
        }
        return r;
    }
    //数组下标判断法
    function unique3(array){
        var n = [array[0]]; //结果数组
        for(var i = 1; i < array.length; i++) { //从第二项开始遍历
            if (array.indexOf(array[i]) == i) 
                n.push(array[i]);
        }
        return n;
    }

es6

es6方法数组去重
arr=[...new Set(arr)];
es6方法数组去重，第二种方法
function dedupe(array) {
  return Array.from(new Set(array));       //Array.from()能把set结构转换为数组
}

四、GET、POST 与 HTTP 状态码

get、post 的区别

简单，但要答全面。

1. get 用 URL 传参看得见；post 参数在 HTTP 包体里。get 在 URL 后用 ? 连接、& 分割。
2. get 受 URL 长度限制，一般最大 2048 字符；post 没有长度限制。
3. get 后退无影响，post 后退会重新提交。
4. get 可被缓存，post 不可以。
5. get 只 URL 编码，post 支持多种编码。
6. get 会留在历史记录，post 不会。
7. get 只支持 ASCII，post 没有字符类型限制。

你所知道的 HTTP 响应码及含义？

有经验都能说几个，关键是详细且全面。

一句话总结：一面要的是覆盖面：居中和 BFC、渲染流程、事件代理、宏微任务、去重与状态码，每题能展开几种写法，而不是只报一个名词。