100个前端面试题

预计会总结100个（ ^ω^），目前74个，后续会继续更新。

答案大部分来自网络，是我选取的说明的较好的博文。

我的博客了解一下：www.bougieblog.cn

原生js

基本数据类型

String, Object, Number, Symbol, undefined, null

内存泄露

• 4类 JavaScript 内存泄漏及如何避免

变量提高及做用域，做用域链，词法做用域，动态做用域

• JavaScript中做用域和做用域链的简单理解（变量提高）
• 词法做用域和动态做用域

this指向

• JS this用法详解

call, apply, bind

• JavaScript中的call、apply、bind深刻理解

Event Loop及定时器和异步的原理

• JavaScript：完全理解同步、异步和事件循环(Event Loop)
• JavaScript 运行机制详解：再谈Event Loop
• JavaScript定时器原理分析
• Javascript异步编程的4种方法

闭包

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

原型和继承链

• 最详尽的 JS 原型与原型链终极详解，没有「多是」。（一）
• 最详尽的 JS 原型与原型链终极详解，没有「多是」。（二）
• 最详尽的 JS 原型与原型链终极详解，没有「多是」。（三）
• Javascript面向对象编程（二）：构造函数的继承

对象的深拷贝和浅拷贝

• 深刻剖析 JavaScript 的深复制

原生ajax写法

摘自youmightnotneedjquery

// post
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

// get
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error
  }
};
request.onerror = function() {
  // There was a connection error of some sort
};
request.send();

// 稍微封装一下
function ajax({ url, method, headers, data, success, error }) {
    headers = headers || 'application/x-www-form-urlencoded; charset=UTF-8'
    let request = new XMLHttpRequest()
    request.open(method, url, true)
    request.setRequestHeader('Content-type', headers)
    request.onload = function(progressEvent) {
        let response = progressEvent.currentTarget
        let {status, statusText, responseText, responseUrl} = response
        if(status > 199 && status < 400) {
            if(success) success(responseText)
        } else {
            if(error) error(statusText)
        }
    }
    request.onerror = function(error) {
        console.error(error)
    }
    request.send(data)
}
复制代码

严格模式

• 严格模式-MDN

实现一个Event Bus

如下是简单模仿vue js的

class EventBus{
    constructor() {
        this.eventList = new Map()
    }
    $emit(evName, ...args) {
        let fn = this.eventList.get(evName)
        if(!fn) {
            console.error(`'${evName}' is undefined`)
            return
        }
        this.eventList.get(evName).apply(this, args)
    }
    $on(evName, fn) {
        if(this.eventList.get(evName)) {
            console.error(`duplicated event name : '${evName}'`)
            return
        }
        this.eventList.set(evName, fn)
        return {
            remove: () => {
                this.eventList.delete(evName)
            }
        }
    }
}
复制代码

函数柯里化

• JS中的柯里化(currying)

---

ES6/7

这个所有看阮老师的就好了

• ECMAScript 6 入门

Class

Set和Map

generator和async

callback和Promise

Object.defineProperty, Object.defineProperties

Object.setPrototypeOf, Object.getPrototypeOf

Object.getOwnPropertyDescriptors

Proxy和Reflect

Symbol

---

性能

reflow和repaint，如何避免

• 前端工程师须要明白的「浏览器渲染」

前端性能优化

• 2017前端性能优化清单

---

网络和浏览器

跨域请求

• 前端常见跨域解决方案（全）

GET, POST, PUT, DELETE的区别

• GET，POST，PUT，DELETE的区别与研究

请求头和响应头

• HTTP协议的响应头,请求头详解

cookie, session, token

• COOKIE和SESSION有什么区别？
• Token原理以及应用

TCP, TCP/IP, FTP, TELNET

• TCP 协议简介
• 互联网协议入门（一）
• 互联网协议入门（二）

http, https和webSocket

• HTTP与HTTPS的区别
• WebSocket 教程

nginx反向代理与负载均衡

• 使用Nginx实现反向代理
• 【Nginx】实现负载均衡的几种方式

http2.0

• HTTP/2.0 相比1.0有哪些重大改进？

浏览器缓存

• 浏览器缓存和HTTP缓存协商

浏览器渲染页面的过程

• 浏览器渲染原理及流程

async和defer的区别及兼容性

• 脚本引用中的DEFER和ASYNC的用法和区别
• 兼容性请看can I use

IE6, 7, 8, 9, 10的兼容性问题

这个凭经验解释了

兼容IE8浏览器的技术选型

win7自带IE8，在政府及事业单位工做的须要掌握

xss攻击和sql注入

• 对于跨站脚本攻击（XSS攻击）的理解和总结
• sql注入

---

算法与模式

排序算法

这个github仓库，包含了不少算法

• JavaScript 算法与数据结构

virtual dom的diff算法

煊赫一时的东西，必须理解

• 深度剖析：如何实现一个 Virtual DOM 算法

设计模式

• 常见的6种JavaScript设计模式

MVC, NVP, MVVP, MVVM

• 你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解？

POP, OOP, SOA, AOP

• 编程思想的理解（POP,OOP,SOA,AOP）

---

html和css

Doctype及其做用

• DOCTYPE的做用，取值与区别

h5新特性

• H5新特性汇总

data-*属性的做用

自定义属性，能够经过el.getAttribute('data-custom')取值，el.dataSet.custom取值和赋值。

grid和flex布局及兼容性

flex自IE10开始支持，已成为手机网页主流布局方法。grid布局兼容性通常，估计再过一两年才会普及。

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇
• grid栅格布局

自适应和响应式布局

自适应是随着浏览器的大小变化而变化，响应式是响应屏幕尺寸，须要经过CSS来实现。

• 自适应网页设计

px, in, em, rem, vh, vw, vmin, vmax

• CSS 单位

display的全部可能的值

• CSS display 属性

css画三角形

利用border实现

cubic-bezier

• 实用的 CSS — 贝塞尔曲线(cubic-bezier)

transform全部可能的值

• CSS3 transform 属性

requestAnimationFrame

• requestAnimationFrame，Web中写动画的另外一种选择
• 深刻理解定时器系列第二篇——被誉为神器的requestAnimationFrame

css动画和js动画

掌握keyframs, transition。

• 原生JavaScript中动画与特效的实现原理

---

框架

双向绑定，深刻响应式原理，发布订阅模式，观察者模式

• Vue.js双向绑定的实现原理
• 深刻响应式原理
• 发布-订阅者模式和事件监听器模式

单向数据流，状态管理

• 单向数据流 和 Vuex 简介
• Web前端的状态管理（State Management）

路由的history和hash模式

• 前端路由的两种实现原理

Vue和React的区别

• Vue与React两个框架的区别和优点对比

Vuex, Redux和Flux

• Vuex，从入门到入门
• React 技术栈系列教程
• Flux 架构入门教程

Vue的render和React.createElement

React.createClass，React.Component和函数式申明组件的区别

• React.createClass和extends Component的区别
• React中函数式声明组件

Mixin

React需使用createClass建立组件

高阶组件

• 深刻浅出React高阶组件
• 探索Vue高阶组件

循环元素时为何要加key

• React中key的必要性与使用

---

工具

sass和less

多看官方文档

webpack, gulp, grunt, rollup, browersify的区别

• Gulp / Grunt 是前端自动化的工具，旨在提供一个自动化的流程（省去了手动编译less，stylus，sass已经babel的转码，图片的压缩，代码的压缩复制等系列操做），传统的多页面应用很是适合用这个
• browserify / webpack 提供的是一个前端模块化的方案，让咱们能够将commonJS的模块方式应用与浏览器端
• webpack 是 browserify 的增强版，不但实现了browserify模块化思想，还将图片，样式等也归入了模块化中
• rollup 打包代码量小，经常使用来进行类库的打包

babel和babel-polyfill的做用

babel会将ES6语法转化为ES5语法，可是不会转义Promise和Object、Array等上的静态方法，这时候就须要babel-polyfill

ESLint代码风格

• Airbnb JavaScript Style Guide() {

git经常使用命令

• Git经常使用命令清单

前端模块化的原理和意义

• Javascript模块化编程（一）：模块的写法
• 前端模块化开发的价值

CommonJS, AMD, CMD, UMD规范

• 关于 CommonJS AMD CMD UMD 规范的差别总结

karma, jasmine和mocha

js测试框架了解一下