前端面试基础知识整理

一、CSS

1.css盒模型

• w3c盒模型：content + padding + border + margin。元素宽高(css)等于content的宽高。
• IE盒模型：元素的宽高(css)等于content + padding + border的宽度。

2.BFC块级格式化上下文

• 形成条件：根元素；position: absolute/fixed; float；overflow：not visible；display: inline-block / table。
• 应用：清除浮动

3.居中布局

• 水平居中
  行内元素：text-align: center;块级元素：margin：auto;
• 垂直居中
  line-height; absolute; flex;
• 水平垂直居中
  absolute;伪元素形成行内元素居中;flex + justify-content + align-items

4.清除浮动

设置父元素高度；形成bfc；伪元素clear: both;

5.flex常用api

引用： Flex 布局教程：语法篇

容器元素 display: flex ;

容器属性

flex-direction // 决定主轴的方向（即项目的排列方向）。
flex-wrap // 如果一条轴线排不下，如何换行。
flex-flow // 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content // 定义了项目在主轴上的对齐方式。
align-items // 属性定义项目在交叉轴上如何对齐。
align-content // 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

元素属性

order // 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow // 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink // 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis // 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex // flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self // align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

二、JavaScript

1.原型与继承

原型：prototype

函数的对象属性，包含一个constructor属性，指向函数自身：Fun.prototype.constructor === Fun。

原型链

原型链由原型对象构成,是js对象继承的机制。每个对像都有[[prototype]]属性，主流浏览器以 __proto__ 暴露给用户。 __proto__ 指向对象的构造函数的原型属性（prototype）。

prototype的 __proto__ 又指向它的构造函数的原型；通过 __proto__ 属性，形成一个引用链。在访问对象的属性时，如果对象本身不存在，就会沿着这条[[prototype]]链式结构一层层的访问。

构造函数

可以通过new来新建一个对象的函数。

原型与继承

类的继承

B.__proto__ = A.prototype; B.prototype.__proto__ = A.prototype ;

new Fun操作符原理

• Object.create(Fun.prototype);
• 执行Fun，即类似类中的调用constructor()(为什么是执行constructor，因为constructor指向函数本身);
• 如果constructor没有明确返回函数或对象，则返回第一步创建的对象。

2.函数执行相关

堆内存与栈内存

1. 栈内存：由编译器自动分配与释放。我们可以直接操作栈内存中的值。js的基本类型存放在栈内存中，按值引用；
2. 堆内存：链表结构的类型，可以动态分配大小，js引用类型占用内存空间的大小不固定，存储在堆内存中。由于JS不允许直接访问堆内存中的位置，因此我们不能直接操作js的引用类型。而是生成一个指针，并将它放到栈内存中，通过这个指针来操作引用类型。

垃圾回收

类型：标记引用（无法解决循环引用问题）；标记清除（现在主流回收算法）。

标记清除算法的核型概念是：从根部（在JS中就是全局对象）出发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。

内存泄漏

对于不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。

常见内存泄漏：

1. 不合理的计时器（引用过时的外部变量）
2. 被共享的闭包作用域（函数内部的函数共享一个闭包环境）
3. 脱离dom引用（dom中元素被清除，但是变量还保持这对dom元素的引用）
4. 意外的全局变量（未声明或者指向全局的this.xxx）

事件循环

事件循环是指: 执行一个宏任务，然后执行清空微任务列表，循环再执行宏任务，再清微任务列表

microtask(jobs): promise / ajax / Object.observe(该方法已废弃)
macrotask(task): setTimout / script / IO / UI Rendering

每次事件循环：

1. 执行完主执行线程中的任务。
2. 取出micro-task中任务执行直到清空。
3. 取出macro-task中一个任务执行。
4. 取出micro-task中任务执行直到清空。
5. 重复3和4。

执行环境及作用域

执行环境

执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境斗鱼一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。

全局执行环境是最外围的执行环境，在web浏览器中，全局执行环境被认为是window对象，因此所有全局变量和函数都是作为window对象的属性和方法被创建的。某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。（全局执行环境直到应用程序推出时才会被销毁）。

作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链，保证对执行环境有权访问的所有变量和函数的有序访问。

作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象，其在最开始的时候只包含一个变量：arguments。作用域链的下一个变量来自包含环境，而️再下一个变量对象则来自下一个包含环境一直延续到全局执行环境。作用域链在创建的时候就会被生成，保存在内部的[[scope]]属性当中。其本质是一个指向变量对象的指针列表，它指引用但不实际包含变量对象。

[[scope]]

函数创建过程中，会创建一个预先包含外部活动对象的作用域链，并始终包含全局环境的变量对象。这个作用域链被保存在内部的[[scope]]属性中，当函数执行时，会通过复制该属性中的对象构建起执行环境的作用域链。

执行上下文

定义

执行上下文是指当前Javascript代码被解析和执行时所在环境的抽象概念,JavaScript 任何代码的运行都是在执行上下文中。

类型

1. 全局执行上下文
2. 函数执行上下文
3. eval函数执行上下文

如何工作

执行上下文分为两个过程：

1. 创建阶段
2. 执行阶段

创建阶段

主要做了三件事

1. this绑定（这解释了为什么this的值取决于函数的调用方式）
2. 创建词法环境。（创建活动对象，变量和函数声明的位置标记（声明提升过程）；根据[[scope]]创建作用域链）
3. 创建变量环境(变量环境也是词法法环境，用于存储var声明的变量。)

执行阶段

变量赋值，语句执行等。

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。可以通过[[scope]]属性查看。因此，即使外部函数被销毁，但是由于外部环境中定义的变量在闭包的scope中还保持着引用，所以这些变量暂时不会被垃圾回收机制回收，因此依然可以在闭包函数中正常访问。 注意：同一个函数内部的闭包函数共享同一个外部闭包环境。 从下图可以看出，即使返回的闭包里面没有引用c,d变量，但是由于内部函数closure1中引用链，所以即使closure1未调用，闭包作用域中依然保存这些变量的引用。

3.js引用方式

<script>
<script>
<script defer>
<script async>

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

更多分析见下文 浏览器->页面的加载与渲染

4.对象的拷贝

浅拷贝

拷贝一层，内部如果是对象，则只是单纯的复制指针地址。

Object.assign()

深拷贝

1. JSON.parse(JSON.stringify(source)),缺点层次太深会爆栈，无法解决循环引用问题。
2. 参考 深拷贝的终极探索（99%的人都不知道） ,采用循环代替递归实现深层次的拷贝。大致思想如下：

// 保持引用关系
function cloneForce(x) {
    // =============
    const uniqueList = []; // 用来去重
    // =============

    let root = {};

    // 循环数组
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];

    while(loopList.length) {
        // 深度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }
        
        // =============
        // 数据已经存在
        let uniqueData = find(uniqueList, data);
        if (uniqueData) {
            parent[key] = uniqueData.target;
            break; // 中断本次循环
        }

        // 数据不存在
        // 保存源数据，在拷贝数据中对应的引用
        uniqueList.push({
            source: data,
            target: res,
        });
        // =============
    
        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

function find(arr, item) {
    for(let i = 0; i < arr.length; i++) {
        if (arr[i].source === item) {
            return arr[i];
        }
    }

    return null;
}

5.模块化

• es6模块
• commonJS/AMD模块

es6模块与CommonJS模块的差异

1. CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用。
2. CommonJS模块是运行时加载，ES6模块是编译时输出接口。

6.防抖和节流

防抖 (debounce)

将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可

function debounce(fn, wait, immediate) {
    let timer = null;

    return function(...args) {
        if (immediate && !timer) {
            fn.apply(this, args);
        }

        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, wait);
    };
}

节流(throttle)

每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms执行一次即可。

function throttle(fn, wait, immediate) {
    let timer = null;
    let callNow = immediate;

    return function(...args) {
        if (callNow) {
            fn.apply(this, args);
            callNow = false;
        }

        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args)
                timer = null;
            }, wait);
        }
    }
}

7.ES6/ES7

let/const

let和const可以形成块级作用域，并且不存在声明提升。并且在同一个块级作用域内不可重复声明。

解构赋值

比如 let [a, b, c] = [1, 2, 3]; let { foo } = { foo: 'bar' } ;

函数扩展

1. 参数默认值
2. rest参数
3. 箭头函数

数组扩展

1. Array.from() // 将类数组转化为数组
2. Array.of() // 更语义明确的数组构建函数：用于将一组值，转换为数组。
3. entries()，keys() 和 values()
4. 实例方法includes
5. flat(num?)// 数组扁平化
6. 数组空位，es6明确将数组空位转化成undefined

对象扩展

1. 属性简写
2. 属性名表达式

3. 可枚举性

   • for...in循环：只遍历对象自身的和继承的可枚举的属性。
   • Object.keys()：返回对象自身的所有可枚举的属性的键名。
   • JSON.stringify()：只串行化对象自身的可枚举的属性。
   • Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举
4. Object.is()
5. Object.assign()
6. Object.keys()，Object.values()，Object.entries()

Symbol

let s = Symbol();

typeof s
// "symbol"

Symbol.for(), Symbol.keyFor()

Set,Map

Set

结构类似数组，成员唯一。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

操作方法：

• add(value)：添加某个值，返回 Set 结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

WeapSet

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

首先，WeakSet 的成员只能是对象，而不能是其他类型的值。

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

Map

类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

WeakMap

WeakMap与Map的区别有两点。

首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Promise

实现一个简单的Promise

const FULLFILLED = 'FULLFILLED';
const REJECTED = 'REJECTED';
const PENDING = 'PENDING';
const isFn = val => typeof val === 'function';

class Promise {
    constructor(handler) {
        this._state = PENDING;
        this._value = null;
        this.FULLFILLED_CBS = [];
        this.REJECTED_CBS = [];

        try {
            handler(this._resolve.bind(this), this._reject.bind(this));
        } catch (err) {
            this._reject(err);
        }
    }

    _resolve(value) {
        const async = () => {
            if (this._state !== PENDING) {
                return;
            }
            this._state = FULLFILLED;
            
            const fullfilLed = (val) => {
                this._value = val;
                this.FULLFILLED_CBS.forEach(cb => cb(val));
            };
            const rejected = (err) => {
                this._value = err;
                this.REJECTED_CBS.forEach(cb => cb(err));
            };

            if (value instanceof Promise) {
                value.then(fullfilLed, rejected);
            } else {
                fullfilLed(value);
            }
        }

        requestAnimationFrame(async);
    }

    _reject(err) {
        const async = () => {
            if (this._state !== PENDING) {
                return;
            }
            this._state = REJECTED;
            this._value = err;
            this.REJECTED_CBS.forEach(cb => cb(err));
        }
        requestAnimationFrame(async);
    }

    then(onFullfilled, onRejected) {
        return new Promise((resolve, reject) => {
            const handerResolve = (value) => {
                try {
                    if (!isFn(onFullfilled)) {
                        resolve(value);
                    }
                    const res = onFullfilled(value);
    
                    if (res instanceof Promise) {
                        res.then(resolve, reject);
                    } else {
                        resolve(res);
                    }
                } catch (err) {
                    reject(err);
                }
            };
            const handlerReject = (err) => {
                try {
                    if (!isFn(onRejected)) {
                        reject(err);
                    }
                    const res  = onRejected(err);
                    if (res instanceof Promise) {
                        res.then(resolve, reject);
                    } else {
                        reject(res);
                    }
                } catch (err) {
                    reject(err);
                }
            };
            switch(this._state) {
                case PENDING:
                    this.FULLFILLED_CBS.push(handerResolve);
                    this.REJECTED_CBS.push(handlerReject);
                    break;
                case FULLFILLED:
                    handerResolve(this._value);
                    break;
                case REJECTED:
                    handlerReject(this._value);
                    break;
                default: break;
            }
        });
    }

    catch(onRejected) {
        return this.then(undefined, onRejected);
    }

    finally(cb) {
        const P = this.constructor;
        return this.then(
            /** 使用then保证promise的流是正常的，因为promise的下一步总是建立在上一步执行完的基础上 */
            value  => P.resolve(cb()).then(() => value),
            reason => P.resolve(cb()).then(() => { throw reason })
        );
    }

    static all(list) {
        return new Promise(resolve, reject) {
            let count = 0;
            const values = [];
            const P = this.constructor;

            for (let [key, fn] of list) {
                P.resolve(fn).then(res => {
                    values[key] = res;
                    count++;
                    if (count === list.length) {
                        resolve(values);
                    }
                }, err => reject(err));
            }
        }
    }

    static race(list) {
        return new Promise((resolve, reject) => {
            const values = [];
            let count = 0;
            const P = this.constructor;
            for (let fn of list) {
                P.resolve(fn).then(res => {
                    resolve(res);
                }, err => {
                    reject(err);
                })
            }
        })
    }

    static resolve(value) {
        if (value instanceof Promise) {
            return value;
        }

        return new Promise(resolve => resolve(value));
    }

    static reject(value) {
        return new Promise((resolve, reject) => reject(value));
    }
}

async/await

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

async函数返回一个promise对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。

Class

es6的类语法是es5构造函数的语法糖，但是也有一些不同点

1. class的原型属性不可枚举
2. 不使用new操作符，class会报错
3. class新增存取函数
4. 不存在声明提升

Class的继承

抓住两点即可：假设A为父类，B为子类那么

B.__proto__ = A; // 子类的__proto__属性，表示构造函数的继承，总是指向父类。
B.prototype.__proto__ = A.prototype; // 子类prototype属性的__proto__属性，表示方法(实例)的继承，总是指向父类的prototype属性。

Module

• es6模块
• commonJS/AMD模块

es6模块与CommonJS模块的差异

1. CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用。
2. CommonJS模块是运行时加载，ES6模块是编译时输出接口。

8.函数柯里化

在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数，供多次重复调用。

const add = function add(x) {
    return function (y) {
        return x + y
    }
}

const add1 = add(1)

add1(2) === 3
add1(20) === 21

9.正则表达式

3.浏览器

1.页面的加载与渲染

从输入 url 到展示的过程

1. DNS查找相应的ip地址
   浏览器DNS缓存->电脑本地host文件查找->运营商DNS的解析

2. 三次握手

   • 客户端发送 syn(同步序列编号) 请求，进入 syn_send 状态，等待确认
   • 服务端接收并确认 syn 包后发送 syn+ack 包，进入 syn_recv 状态
   • 客户端接收 syn+ack 包后，发送 ack 包，双方进入 established 状态
3. 发送请求，分析 url，设置请求报文(头，主体)
4. 服务器返回请求的文件 (html)

5. 浏览器渲染

   • HTML parser --> DOM Tree
   • CSS parser --> Style Tree
   • attachment --> Render Tree
   • layout: 布局

浏览器加载与渲染

浏览器下载html文件并进行编译，转化成类似下面的结构

图片来源 再谈 load 与 DOMContentLoaded 浏览器会对转化后的数据结构自上而下进行分析：首先开启下载线程，对所有的资源进行优先级 排序 下载（注意，这里仅仅是下载,区别于解析过程，解析过程可能被阻塞）。同时主线程会对文档进行解析

css文件的解析

• header中的css的下载不会阻塞html的解析,当css文件下载完成，将阻塞html解析，优先解析css，会阻碍渲染。
• body中的css下载和解析都不会阻碍html的解析，会阻碍渲染。（存在特殊情况，见下文）

js文件的解析

1. 普通的script：

遇到 script 标签时，首先阻塞后续内容的解析（但是不会阻塞下载，chrome对同一个域名支持6个http同时下载），当下载完成后，便执行js文件中的同步代码。然后接着解析html

2. defer和async

如果script标签设置了async或者defer标签，下载过程不会阻塞文档解析。defer执行将会放到html解析完成之后，dcl事件之前。async则是下载完就执行，并且阻塞解析。

body中的首个script/link

在 body 中第一个 script 资源下载完成之前，浏览器会进行首次渲染。将该 script 标签前面的 DOM 树和 CSSOM 合并成一棵 Render 树，渲染到页面中。这是页面从白屏到首次渲染的时间节点，比较关键。如果是第一个标签是link，表现有点奇怪，下载和解析会阻塞html的解析，并有可能进行首次渲染，也可能不渲染。

渲染过程大致为：计算样式 Recalculate style ->布局:layout->更新布局树update layer tree -> 绘制paint

3.相关概念

dom构建

DOM 构建的意思是，将文档中的所有 DOM 元素构建成一个树型结构。

css构建

将文档中的所有 css 资源合并。生成css rule tree

render 树

将 DOM 树和 CSS 合并成一棵渲染树，render 树在合适的时机会被渲染到页面中。（比如遇到 script 时, 该 script 还没有下载到本地时）。

4.总结

如下图：

1. 浏览器首先下载该地址所对应的 html 页面。（如果html很大，浏览器并不会等待html完全下载完，而是采用分段下载，分段解析）
2. 浏览器解析 html 页面的 DOM 结构。
3. 开启下载线程对文档中的所有资源按优先级排序下载。

4. 主线程继续解析文档，到达 head 节点 ，head 里的外部资源无非是外链样式表和外链 js。

   • 发现有外链 css 或者外链 js，如果是外链 js ，则停止解析后续内容，等待该资源下载，下载完后立刻执行。如果是外链 css，继续解析后续内容。
5. 解析到 body

在 body 中第一个 script 资源下载完成之前，浏览器会进行首次渲染。将该 script 标签前面的 DOM 树和 CSSOM 合并成一棵 Render 树，渲染到页面中。这是页面从白屏到首次渲染的时间节点，比较关键。如果是第一个标签是link，表现有点奇怪，下载和解析会阻塞html的解析，并有可能进行首次渲染，也可能不渲染。随后js的下载和执行依然会阻塞解析，但是css的下载和解析则不会阻塞html的解析。

1. 文档解析完毕，页面重新渲染。当页面引用的所有 js 同步代码执行完毕，触发 DOMContentLoaded 事件。然后执行布局:layout->更新布局树update layer tree -> 绘制paint
2. html 文档中的图片资源，js 代码中有异步加载的 css、js 、图片资源都加载完毕之后，load 事件触发(与DOMContentLoaded没有必然的先后顺序关系)。

2.跨域解决方案

4.计算机网络基础

5.前端工程化

6.Vue源码相关

7.React源码相关

8.算法相关

引用参考

• ECMAScript 6 入门
• 中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)
• JS事件循环
• Flex 布局教程：语法篇
• 前端笔记--JS执行上下文
• script标签中defer和async属性的区别
• [译]页面生命周期：DOMContentLoaded, load, beforeunload, unload解析
• 再谈 load 与 DOMContentLoaded
• 面试带你飞：这是一份全面的 计算机网络基础 总结攻略
• 深拷贝的终极探索（99%的人都不知道）