前端面试知识点集锦

个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。

本人只是对这些知识进行了一个大概的总结，还有一部分技术还没开始涉及，后期会持续添加。如果需要进行深入了解可以根据知识点查询相关的技术文章。

本文涵盖了以下各个方面的知识:

HTML, CSS, JS基础知识
网站性能优化知识
前端项目自动化构建相关知识
算法相关知识
网络与HTTP协议相关知识
前端的安全相关知识
插件编写相关知识
JS模块化编程相关知识

Github Repo：
https://github.com/Erichain/Front-End-Interview-Points

持续更新中。欢迎fork和star进行完善。

关于前端是什么，以及需要学习什么，移步这里：

Front-End Developer Handbook

HTML部分

docType

混杂模式
标准模式
准标准模式

标签语义化

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

块级标签，行内标签

块级：div, ul, li, ol, table, th, tbody, tfoot, tr, pre, fieldset, form, h1-6, p等
a, abbr, b, br, code, em, img, input, label, select, textarea, strong等

meta标签

如何在不使用JS的情况下刷新页面(http-equiv="refresh", content="time")
设置页面缓存
移动端设置
etc.

HTML代码优化

标签嵌套层级不要太深，标签尽量简洁化.如懒加载后将data属性去除
大量图片的懒加载策略，以及一些元素利用ajax在onload后实行延迟加载
对一些js的异步加载

搜索引擎优化SEO

CSS部分

浮动，清除浮动的方法和原理(4种方法)

使用空标签设置clear: both;
为父级元素设置overflow: hidden;(利用BFC的原理)
使用伪元素，为要清除浮动的元素添加.clearfix类(推荐)
使用min-height: contain-floats;(不推荐，兼容性不好)

CSS块级格式化上下文

触发条件
- position属性不为static或者relative
- float属性不为none
- 非块级的块级元素(inline-block, table-cell)
- overflow不为visible
特性
- 内部的Box会在垂直方向，从顶部开始一个接一个地放置
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- BFC的区域不会与float box叠加
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 计算BFC的高度时，浮动元素也参与计算
用处
- 解决margin边距叠加问题。为元素单独创建一个BFC来防止外边距的折叠
- 布局
- 清除浮动。为包含浮动元素的container创建BFC来清除浮动

盒子模型(IE盒子模型的区别)

总宽度＝ margin＋padding＋border＋content，IE的盒子模型的宽度不计padding和border
css3的box-sizing属性，详见https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
- content-box，border和padding不计算入width之内
- border-box，border和padding计算入width之内

定位

定位和浮动的区别
什么时候使用定位，什么时候使用浮动

样式继承

可继承的样式
- font-size font-family color text-indent

z-index属性

理解 CSS 的 z-index 属性

IE浏览器的hack

条件hack
- 
属性hack
- _ IE6
- *+IE7
- +IE6/7
- .IE8
选择符hack
- *IE7
- _IE6

CSS sprite

减少请求

布局模型

双飞翼布局
圣杯布局

CSS优先级

行内样式 > 内联样式 > 外部样式，ID > Class > Element
设置了!important的样式优先级更高

Flexbox

A Complete Guide to Flexbox

各个单位的区别(px, em, rem, 百分比)

居中

CSS Center Complete

link和@import的区别

link属于XHTML标签，而@import是CSS提供的
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
link方式的样式的权重高于@import的权重

如何将div与图片设置等宽，inline-block元素之间的空隙如何解决

设置父元素font-size为0，再对里面的文字单独设置font-size
全兼容的样式解决方法

.finally-solve {
    letter-spacing: -4px; /*根据不同字体字号或许需要做一定的调整*/
    word-spacing: -4px;
    font-size: 0;
}
.finally-solve li {
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
}

CSS优化

嵌套层级不要太深，一般三层最多
css解析从右向左，所以最右边的应该是相对少一点
html用了base64的img的话，并不会缓存起来，可以将这个base64的图片放在css文件里，css会缓存，图片就缓存起来了
尽量不用后代元素选择器，最右边的一层不要是标签，尤其是像div这种非常常用的标签
多使用css的继承，而不是每一次都书写时都全部重写一遍。写多个css属性时，能连在一起写的就连在一起写

预处理器

Sass

JS部分

严格模式

'use strict'
不能使用eval()
抑制this的行为
不允许读写eval和arguments的值
不允许意外创建全局变量

变量

使用var定义的全局变量不能使用delete删除
无var创建的全局变量可以使用delete删除
隐式类型转换
- 数字与字符串相加，结果为字符串
- 数字与字符串相减，结果为数字
- 比较变量的是否相同时，要采用===，==会发生隐式类型转换
- NaN与任何变量不相等

类型检测

typeof
instanceof
constructor
Object.prototype.toString.apply()

作用域

全局作用域
函数作用域

对象

hasOwnProperty, isPrototypeOf, propertyIsEnumerable
配置属性(configurable, enumerable, writable, value)
特性
- 扩展: isExtensible, preventExtensions(是否可以添加新的属性)
- 密封: isSealed, seal(是否可以删除属性，是否可以配置属性)
- 冻结: isFrozen, freeze(所有属性是否可读可写)
定义属性
- defineProperty, defineProperties

数组

数组的类型检测
数组的方法
- slice()
- map()
- every()
- some()
- filter()

函数

柯里化
- 概念：部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

function currying( fn ) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        return fn.apply(null, newArgs);
    }
}

arguments对象
JS函数不存在重载，后定义的函数会覆盖先定义的函数
函数调用模式
- 方法调用
- 函数调用
- 构造器调用
- apply调用

`new`操作符的原理

使用new关键字来创建实例的时候，原理如下：

首先，在构造函数内部使用Object.create(constructor.prototype)创建一个对象继承自构造函数
然后，将这个对象引用到this上
最后，返回this

闭包

概念
作用
- 创建匿名执行函数
- 缓存变量，防止被垃圾回收
- 实现函数的封装
应用场景
- 内部函数访问外部函数的变量
- 使用闭包代替全局变量
- 封装相关功能
- 回调函数
- 创建私有变量和公有变量
特性
经典例子：列表点击，弹出每一个的index

/* 错误做法 */
var elems = document.getElementById('links').getElementsByTagName('li');

for ( var i = 0; i < elems.length; i++ ) {
    elems[i].addEventListener('click', function ( event ) {
        event.preventDefault();
        alert(i);
    }, false);
}

/* 正确的做法，使用闭包 */
var elems = document.getElementById('links').getElementsByTagName('li');

for ( var i = 0; i < elems.length; i++ ) {
    (function ( index ) {
        elems[i].addEventListener('click', function ( event ) {
            event.preventDefault();
            alert(index);
        }, false);
    
    })( i );
}

this

函数的this的值永远绑定在调用此函数的对象上
可以使用apply，call或者bind改变this值的指向

对象创建的模式和方法及区别

工厂模式

/* 缺点：无法检测对象的类型 */
var createPerson = function ( name, age, job ) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;

    return o;
};

var person1 = createPerson('Erichain', 21, 'Web');

构造函数模式

/* 缺点：每个方法要在每个实例上重新创建一遍 */
var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;
}

var person1 = new Person('Erichain', 21, 'Web');

原型模式

var Person = function () {};

Person.prototype = {
    constructor: Person, // 如果这个属性十分重要的话
    name: 'Erichain',
    age: 21,
    job: 'web'
};
var person1 = new Person();

组合构造函数原型模式
动态原型模式

var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;

    if ( typeof this.sayName !== 'function' ) {
        Person.prototype.sayName = function () {
            alert( this.name );
        }
    }
};

寄生构造函数模式
- 除了使用new来实例化外，与工厂模式没区别
- 不能依赖instanceof来确定对象类型，一般不建议使用
稳妥构造函数模式

原型和继承

原型链
借用构造函数

function Person( name ) {
    this.name = name;
}

function man() {
    // 继承自Person，可以选择是否传入参数
    Person.call(this, 'Erichain');
}

组合继承
原型式继承
寄生式继承
寄生组合式继承
new Object()和Object.create()的区别
- Object.create创建的对象直接从他的第一个参数继承，而new Object所创建的对象是从对象的原型上继承
- 使用Object.create，可以创建一个不继承于任何东西的对象，但是，如果设置someConstructor.prototype = null，那么，这个新创建的对象会继承自Object.prototype

回调函数

变量提升，函数声明提升

函数声明优于变量声明
函数声明会覆盖变量声明，但是不会覆盖变量赋值

IIFE(立即执行函数)

在闭包中保存变量状态
模块化
IIFE和自执行函数的区别
IIFE的几种表示方法

(function () {})();
(function () {}());

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

事件

事件流
- 事件捕获
- 处于目标
- 事件冒泡
事件对象(IE的区别)
跨浏览器事件处理函数

var EventUtil = {
    getEvent: function ( event ) {
        return event ? event : window.event;
    },
    getTarget: function ( event ) {
        return event.target || event.srcElement;
    },
    addHandler: function ( elem, type, handler ) {
        if ( elem.addEventListener ) {
            elem.addEventListener(type, handler, false);
        }
        else if ( elem.attachEvent ) {
            elem.attachEvent('on' + type, handler);
        }
        else {
            elem['on' + type] = handler;
        }
    },
    preventDefault: function ( event ) {
        if ( event.preventDefault ) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    },
    stopPropagation: function ( event ) {
        if ( event.stopPropagation ) {
            event.stopPropagation();
        }
        else {
            event.cancelable = true;
        }
    }
};

事件广播
事件委托

<ul id="links">
    <li id="link1">Link1</li>
    <li id="link2">Link2</li>
    <li id="link3">Link3</li>
</ul>

var links = document.getElementById('links');

// 使用之前定义的跨浏览器事件处理程序
EventUtil.addHandler(links, 'click', function ( event ) {
    var target = EventUtil.getTarget(event);
    event = EventUtil.getEvent(event);

    switch ( target.id ) {
        case 'link1':
            // do something
            break;
        case 'link2':
            // do something
            break;
        case 'link3':
            // do something
            break;
    }
});

事件函数的参数(注意addEventListener()的最后一个参数，如果为false表示在冒泡阶段获取事件，如果为true，表示在事件捕获阶段获取事件)

call, apply, bind(手动实现)

call(obj, args), apply(obj, array)
call与apply支持低版本浏览器，bind只支持高版本浏览器
bind原生代码实现

if ( !Function.prototype.bind ) {
    Function.prototype.bind = function ( oThis ) {
        if ( typeof this !== 'function') {
            throw new Error('What is trying to be bound is not callable');
        }

        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBound = this,
            fNOP = function () {},
            fBound = function () {
                return fToBound.apply(
                    this instanceof fNOP ? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments))
                )
            };

        if ( this.prototype ) {
            fNOP.prototype = this.prototype;
        }

        fBound.prototype = new fNOP();
        return fBound;
    };
}

能力检测

BOM

window对象
location对象
screen对象
navigator对象
- 检测插件navigator.plugins
- 检测用户代理navigator.userAgent
history对象

promise

DOM 操作

查找
- document.getElementById
- document.getElementsByTagName
- document.getElementsByName
- document.getElementsByClassName
- document.querySelector
- document.querySelectAll
节点关系
- element.childNodes
- element.firstChild
- element.lastChild
- element.previousSibling
- element.nextSibling
- element.parentNode
- element.appendChild()
- element.insertBefore()
- element.removeChild()
- element.replaceChild()
属性操作
- element.getAttribute()
- element.setAttribute()
样式操作
- element.style[PROPERTY_NAME]
- element.classList
- element.classList.add
- element.classList.remove
- element.classList.contains
- element.classList.toggle
元素遍历
- childElementCount子元素数量
- firstElementChild第一个子元素: firstChild的元素版
- lastElementChild最后一个子元素: lastChild的元素版
- previousElementSibling->previousSibling的元素版
- nextElementSibling->nextSibling的元素版
- 遍历方法
  - document.createNodeIterator(root, whatToShow, filter)参见https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
  - document.createTreeWalker(root, whatToShow, filter, expandEntityReferences, currentNode)参见https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

性能优化

操作DOM的时候一定要缓存变量，避免发生大量的重排重绘
异步加载Javascript文件
- 使用document.write()
- 动态改变已有script标签的src属性
- 使用DOM方法动态创建script元素
- 使用Ajax获取脚本内容再加载
- 在script标签中使用defer以及async属性
- 按需加载
合并文件
合理使用二进制
CDN加速，原理
图片懒加载
- 懒加载——网页图片的加载技术
- Lazy Load Plugin for jQuery
预加载
- 3 Ways to Preload Images with CSS, JavaScript, or Ajax
- Prefetching, preloading, prebrowsing
prefetch
- HTML5 Prefetch
函数节流
- 浅谈函数节流

垃圾回收

引用计数

/* 出现循环引用的例子 */
function () {
    var objectA = {},
        objectB = {};

    objectA.someOtherObject = objectB;
    objectB.anotherObject = objectA;
}

标记清除

内存泄漏

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
循环引用

优雅降级和渐进增强

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用

JSON

JSON.stringify() json序列化为字符串
JSON.parse() 将类JSON的字符串转化为JSON对象

XMLHttpRequest对象

一段比较完整的使用原生Javascript实现ajax请求方法

function createRequestObject() {
    if ( window.XMLHttpRequest ) {
        return new XMLHttpRequest();
    }

    // 针对IE
    else if ( window.ActiveXObject ) {
        return new ActiveXObject('Microsoft.XMLHTTP');
    }
}

// 请求的回调函数
function requestCallBack() {
    if ( request.readyState === 4 && request.status === 200 ) {
        console.log(request.responseText);
    }
}

var request = createRequestObject();

request.onreadystatechange = requestCallBack;
// open函数的三个参数分别是请求的方法, 请求的地址, 是否异步(true表示异步)
request.open('POST', url, true);
request.send(null);

使用Javascript计算两个日期的时间差

JavaScript: DateDiff & DateMeasure: Calculate days, hours, minutes, seconds between two Dates

性能测试工具

Performance Tools

代码审查工具

JSHint
JSLint
ESLint(针对ECMAScript 2015)

代码压缩

JSMin
YUI Compressor
Gzip

Javascript原生函数使用

You-Dont-Need-jQuery

`Array.prototype.slice.call()`原理

how does Array.prototype.slice.call() work?

RESTful

浏览器部分

各个浏览器内核

IE: Trident
Chrome: Webkit, Blink(now)
Firefox: Gecko
Opera: Presto

sessionStorage，cookie，localStorage

cookie 由服务器生成，可设置失效时间。如果是浏览器端生成的cookie，则在浏览器关闭之后失效；而localStorage除非被清除，否则永久保存，sessionStorage则在关闭浏览器或者页面之后清除
cookie的大小为4k左右，localStorage和sessionStorage的大小一般为5MB
与服务器痛心的时候，cookie每次都会携带在http头中，但是其他两个不参与服务器通信
cookie中最好不要放置任何的明文的东西，其他两个的数据如果提交到服务器一定要校验

浏览器的多个标签页之间如何通信

Javascript communication between browser tabs/windows

关于浏览器缓存

浅谈Web缓存

前端安全

防止XSS(跨站点脚本)攻击
防止CSRF(跨站点伪造请求攻击)
防止跨iframe攻击

自动化

npm与bower的区别

bower与npm的不同点

gulp流与管道的概念

Unix流
管道
- 管道是一个固定大小的缓冲区
- 从管道读数据是一次性操作，数据一旦被读，它就从管道中被抛弃，释放空间以便写更多的数据
- 可以把一个进程的标准输出流与另一个进程的标准输入流连接起来

打包后静态资源路径的修改

gulp和grunt的区别

前端工程的构建工具对比 Gulp vs Grunt

测试工具

Mocha
Karma
Jasmine

网络知识部分

Ajax

同源策略

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性

跨域处理(方法和区别)

JSONP
document.domain
window.name
HTML5的window.postMessage和window.onmessage

HTTP基本知识

前端进阶--让你升级的网络知识
三次握手
- 客户端发起连接试探
- 服务端接收到试探请求，向客户端发送确认消息
- 客户端得到服务端的确认消息之后，再次向服务端发送确认消息
一次完整的http请求是怎么样的
- 域名解析
- TCP三次握手
- 发起http请求
- 服务器端响应http请求，客户端得到html代码
- 浏览器解析html代码，并请求html代码中的资源
- 浏览器对页面进行渲染呈现给用户

框架相关知识

jQuery

jQuery Tips Everyone Should Know
如何组织jQuery项目的代码结构
- Best Practice to Organize Javascript Library & CSS Folder Structure

Bootstrap，插件原理

栅格布局实现原理
.img-responsive实现原理
内联表单实现原理
Bootstrap组件实现原理

AngularJS

双向绑定
- $digest循环
- dirty checking
- $watch
MVC
独立作用域
依赖注入
循环监听
ng-if与ng-hide/show的区别
- ng-if为true的时候节点才会存在于DOM中
- ng-show/hide只是控制节点的显示和隐藏
factory，service与provider的区别和关系
- 使用factory创建的服务，是一个对象，然后，将方法和属性定义在这个对象上，在返回这个对象，就可以供外部controller调用了
- 使用service创建的服务，是使用new进行实例化的，所以，方法和属性要定义在this上，并且这个服务会自动返回this
- 使用provider创建的服务，是唯一可以注入到config()函数的服务，可以用来提供模块化的配置。并且，定义在this上的属性和方法，在config函数里才可以访问，从this.$get()函数里返回的属性和方法，才能被控制器所访问
ng-click是否可以使用原生函数
- 不可以，因为对应的方法不存在于其控制器中，除非在控制器中声明
ng-repeat数组中有相同元素的解决办法
- 可以添加track by $index
$emit，$broadcast和$on
- $emit由子级向父级广播，$broadcast由父级向子级广播
controllerAs与$scope的区别
AngularJS的缺点
- 强约束，学习成本高
- 不利于SEO
- 性能问题
  - 减少监控项
  - 主动设置索引
  - 降低渲染的数据数量
  - 数据扁平化

算法

数组降维

优雅的数组降维——Javascript中apply方法的妙用

数组去重

最简单的方法

function removeDuplicate( arr ) {
    var len = arr.length,
        temp = [];

    for ( var i = 0; i < len; i+=1 ) {
        if ( temp.indexOf(arr[i]) === -1 ) {
            temp.push(arr[i]);
        }
    }
    return temp;
}

对象深度复制

function clone( Obj ) {   
        var buf;   
        if ( Obj instanceof Array ) {   
            buf = [];  //创建一个空的数组 
            var i = Obj.length;   
            while ( i-- ) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }
        else if ( Obj instanceof Object ) {   
            buf = {};  //创建一个空对象 
            for ( var k in Obj ) {  //为这个对象添加新的属性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }
        else {   
            return Obj;   
        }   
    }

各个类型的复制

function clone( obj ) {
    var dest;
    
    switch( typeof obj ) {
        case 'undefined':
            break;
            
        case 'number':
            dest = +obj;
            break;
            
        case 'string':
            dest = obj + '';
            break;
            
        case 'boolean':
            dest = obj;
            break;
        
        case 'object':
            if ( obj instanceof Array ) {
                dest = [];

                for ( var i = 0; i < obj.length; i++ ) {
                    dest[i] = obj[i];
                }
            }
            else {
                dest = {};
                for ( var i in obj ) {
                    dest[i] = obj[i];
                }
            }
        
        default:
            break;
    }

    return dest;
}

排序

快速排序

function quickSort( arr ) {
    var left = [],
        right = [],
        len = arr.length,
        breakPoint = arr[0];

    if ( len === 1 || len === 0 ) {
        return arr;
    }

    for ( var i = 1; i < len; i++ ) {
        if ( arr[i] < breakPoint ) {
            left.push(arr[i]);
        }
        else {
            right.push(arr[i]);
        }
    }

    return quickSort(left).concat(breakPoint, quickSort(right));
}

冒泡排序

function bubbleSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 0; i < len - 1; i ++ ) {
        for ( var j = 0; j < len - 1 - i; j++ ) {
            if ( arr[j] > arr[j+1] ) {
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }

    return arr;
}

插入排序

function insertSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 1; i < len; i++ ) {
        var j;
        temp = arr[i];
        j = i;

        while ( j > 0 && arr[j-1] > temp ) {
            arr[j] = arr[j-1];
            j--;
        }
        arr[j] = temp;
    }
    return arr;
}

去除首尾空格

function removePlace( str ) {
    var reg = /(^s*)|(s*)$/;

    if ( str && typeof str === 'string' ) {
        return str.replace(reg, '');
    }
}

统计字符数量

function charCount( str ) {
    var obj = {},
        len = str.length,
        i = 0;

    for ( ; i < len; i++ ) {
        var val = str.charAt(i);

        if ( obj[val] && obj[val].value === val ) {
            obj[val].count++;
        }
        else {
            obj[val] = {};
            obj[val].count = 1;
            obj[val].value = val;
        }
    }

    for ( var key in obj ) {
        console.log( key + ' is ' + obj[key].count );
    }

    return obj;
}

插件编写

关于插件编写，可参考：jQuery插件库

焦点轮播图

弹窗效果

多级菜单

tab切换

Lightbox

Javascript模块化

CommonJS

同步的方式加载模块，服务器优先
使用require加载模块，使用module.exports定义模块

AMD

浏览器优先的方式，通过异步加载的方式完成任务
使用define(['module'], function ( module ) {})加载模块
不兼容 io、文件系统（filesystem）和其它通过 CommonJS 实现的面向服务器的功能
推崇依赖前置
对于依赖的模块提前执行

前端面试知识点集锦

关于前端是什么，以及需要学习什么，移步这里：

HTML部分

docType

标签语义化

块级标签，行内标签

meta标签

HTML代码优化

搜索引擎优化SEO

CSS部分

浮动，清除浮动的方法和原理(4种方法)

CSS块级格式化上下文

盒子模型(IE盒子模型的区别)

定位

样式继承

z-index属性

IE浏览器的hack

CSS sprite

布局模型

CSS优先级

Flexbox

各个单位的区别(px, em, rem, 百分比)

居中

link和@import的区别

如何将div与图片设置等宽，inline-block元素之间的空隙如何解决

CSS优化

预处理器

JS部分

严格模式

变量

类型检测

作用域

对象

数组

函数

new操作符的原理

闭包

this

对象创建的模式和方法及区别

原型和继承

回调函数

变量提升，函数声明提升

IIFE(立即执行函数)

事件

call, apply, bind(手动实现)

能力检测

BOM

promise

DOM 操作

性能优化

垃圾回收

内存泄漏

优雅降级和渐进增强

JSON

XMLHttpRequest对象

使用Javascript计算两个日期的时间差

性能测试工具

代码审查工具

代码压缩

Javascript原生函数使用

Array.prototype.slice.call()原理

RESTful

浏览器部分

各个浏览器内核

sessionStorage，cookie，localStorage

浏览器的多个标签页之间如何通信

关于浏览器缓存

前端安全

自动化

npm与bower的区别

gulp流与管道的概念

打包后静态资源路径的修改

gulp和grunt的区别

测试工具

网络知识部分

Ajax

同源策略

跨域处理(方法和区别)

HTTP基本知识

框架相关知识

`new`操作符的原理

`Array.prototype.slice.call()`原理