来自微信公众号：前端八点半）

大二的时候写过一篇文章叫做如何被称为一名前端工程师，由于当时技术认知和眼界有限，只是一味的摘抄别人的回答和百科上定义，希望自己能够通过努力达到那种定义上的前端工程师，文章结尾也写道“那些我不懂的专业名词，我全部百度了一遍。这一年，我大二，我什么都没有。”现在想来着实是有些年轻人的热血和矫情。

基础知识

现在前端框架和库层出不穷，让人眼花缭乱，对于前端开发者，尤其是刚入门的前端开发者，我们更应该做好的是打好基础知识，无论是前端基础知识还是计算机基础知识，都是我们需要掌握的重点，开发过程中我们遇到问题首先也是通过基础知识去解决，其次才是调用别人写好的库。本文先讲解前端应该掌握的基础知识，前端基础知识包括三个大项：JavaScript、HTML、CSS。以后如果有时间再将计算机基础知识。

I.JavaScript

1.基本数据类型和基本类型的常用方法

js定义了7种数据类型:Boolean、Null、Undefined、Number、String、Symbol (ECMAScript 6 新定义)和 Object。

知道类型转换以及类型判断，以及null和undefined类型的区别，基本数据有哪些常用方法，以及这些方法的使用

例：字符串Strin常用方法有indexOf、lastIndexOf、charAt、substring、substr、search、trim。

JavaScript 不区分整数值和浮点数值造成的0.1+0.2=0.30000000000000004问题如何解决。

2.引用数据类型以及内置对象

知道js有哪些内置对象，引用数据类型和基本数据类型有哪些不同，如何判断一些常用的内置对象。

例：如何判断数组、对象。

JavaScript中arguments和caller callee都是什么？

3.表达式和运算符以及函数

js表达式很灵活，需要掌握很多种不同的方式定义的表达式以及这些表达式之间的异同。js有哪些运算符。js函数如何定义以及函数的定义有哪几种方法以及异同。

js如何循环对象，如何循环数组，以及不同循环方式的异同

例：数组循环for循环、forEach、map

对象循环map、for in、for of

call和apply的区别

4.原型链和内置方法以及原型方法

正确理解原型链以及使用，js常用内置对象有哪些原型方法，有哪些内置方法。

例：数组Array常用原型方法有concat，filter，find，indexof，join，pop，push，keys，map，unshift，shift，slice，splice，reduce，sort，reverse。数组常用内置方法有Array.from(),Array.isArray()，对象常用原型方法有hasOwnProperty()、isPrototypeOf()、valueOf()。对象常用内置方法有Object.assign()、Object.create()、Object.defineProperty()、Object.getOwnPropertyNames()、Object.is()、Object.keys()。

5.类的写法以及模块的定义

理解面向对象的js的写法，js如何定义一个类，如何继承，如何写构造函数，理解js原型和js原型链，以及ES6中如何顶定义一个类，class、super、static关键字的作用。

6.ES6新增的关键字的使用以及扩展属性和方法

ES6和ES6有哪些不同，增加了哪些关键字，这些关键字怎么使用，例：let 和 const ，变量的解构赋值，字符串、正则、函数、数值还有对象都有哪些扩展，理解promise，为什么要使用promise，generator函数的使用，async函数的使用，ES6类和模块模块如何定义和使用。

7.JavaScript作用域、闭包和IIFE（立即执行函数）

8.JavaScript中this关键字的理解以及this的指向性

9.js严格模式和js宽松模式的区别

10.JavaScript在浏览器中的使用

10-1.js如何操作DOM，js中BOM对象的使用，如何跨域

例：DOM节点的增删改查，如何获取子节点、父节点、兄弟节点，如何选取select中的值、如何获取checkbox选中的值。

BOM对象有哪些常用对象，有哪些常用方法？

10-2.js事件处理，事件冒泡和事件捕获的区别以及使用

10-3.js如何发送请求，ajax原生写法以及ajax发送的HTTP头部，以及返回的HTTP头部信息，如何修改这些信息

10-4.js如何处理缓存

10-5.web性能优化上js的使用

11-6.常见的攻击方式以及如何预防

11.JavaScript在服务器端的使用（nodejs）

11-1.nodejs特点以及优缺点

11-2.nodejs有哪些全局对象，process、util（工具类）有哪些常用方法。

11-3.nodejs事件监听和事件发射器，如何用nodejs写一个服务器监听8080端口

11-4.nodejs stream是什么以及如何使用

11-5.nodejs中buffer是什么以及如何使用

11-6.服务器推与长连接与持久化连接

II.HTML

1.HTML标签有哪些，哪些是块级元素哪些是行级元素，什么是空元素。

2.HTML5添加了哪些新标签，移除了哪些标签，HTML有哪些新特性。

3.HTML如何保证兼容性，如何理解渐进增强和优雅降级

4.前端性能优化

III.CSS

1.css选择器，以及选择器之间的优先级，伪类和伪元素的运用

2.css的布局，什么是flex布局，如何使用响应式布局，margin和padding的区别，什么是浮动，如何清除浮动。position有哪些值，各种定位的区别。

例：如何垂直水平居中，css如何使高度或者宽度自动填充

3.什么是css盒模型，如何改变盒模型，height、line-height、max-height、max-width、min-height、min-width、width的属性和使用，什么是BFC规范，有哪些使用范围？

4.如何保证css的兼容性，css hack的技巧有哪些？

5.css3有哪些新特性？

例：css3如何实现动画以及2D/3D 转换，css3的框模型，css3伪类选择器有哪些以及如何运用。

6.移动端CSS有哪些技巧以及兼容性问题？

例：position:fixed;在android下无效怎么处理？移动端meta如何设置？

进阶知识

对于一个合格的程序员来说，这些计算机基础知识都是需要掌握的，其中包括计算机网络、算法和数据结构、操作系统、数据库，对于前端工程师来说，其中需要着重掌握的是计算机网络中的HTTP协议，所以把HTTP单独拎出来。

I.HTTP

1.HTTP状态码有哪些？

2.HTTP请求和响应报文的组成部分，都有哪些头部字段以及其具体含义，实现缓存的头部有哪些？各自有什么不同。

3.HTTP methods都有哪些，get和post请求的区别以及优缺点。

4.一次完成的网络请求，分别经历了哪些过程，具体描述，而HTTP跨域请求的完整过程又是怎样的？

5.HTTP如何持久化连接，什么是长连接和短连接。如何进行会话跟踪。

6.HTTPS是什么，它是如何保证安全性的。

7.HTTP 2.0有哪些新的改进？

II.计算机网络

1.网络分为几层协议，以及每层协议的作用？

2.IP地址的分类，IP地址和子网掩码以及网络号之间的联系。什么是回环地址有什么作用，什么是多播和广播？

3.什么是ARP协议，简述其工作原理，描述一下RARP协议。

4.TCP、UDP报文首部格式，TCP和UDP协议的区别，哪些协议是基于TCP，哪些是基于UDP，描述TCP的三次握手和四次挥手，以及为什么要三次握手和四次挥手。

5.了解交换机、路由器、网关的概念，并知道各自的用途。

6.什么是滑动窗口协议，什么是拥塞避免和慢启动。

III.算法和数据结构

1.一般数据结构都有哪些？数组和链表的异同和优缺点，什么是堆，什么是栈，以及在系统中的使用，什么是线性结构，什么是非线性结构。

2.什么是树结构，树结构的一般分类：满二叉树和完全二叉树，哈夫曼树，二叉排序树和平衡二叉树，B-树和Trie树，红黑树。知道树的操作算法，广度优先遍历（BFS）和深度优先遍历（DFS，包括前序遍历，中序遍历，后续遍历）

3.什么是数组，什么是链表，数组和链表的异同和优缺点，什么是双向链表，有什么使用场景。

4.什么是堆、栈、队列。

5.什么是图结构，图在内存中怎么存储（实现图的数据结构），存储方式各自有什么优缺点，图的算法：最短路径（贪心算法，Dijkstra算法）、最小生成树。

6.排序算法都有哪些以及实现？算法的时间复杂度，空间复杂度，什么是排序算法的稳定性，哪些是稳定的，哪些是不稳定的？

7.哈希表（散列表）如何实现，如何解决冲突问题，什么是分布式哈希，以及分布式哈希表的运用，怎么解决分布式系统雪崩问题，提高系统可扩展性和可用性。一致性哈希：可扩展性强，数据迁移小，环形结构。一致性hash的虚拟节点映射。

8.其他：实现二分查找、按位运算、动态规划（找零问题）、递归（尾递归优化）。

IV.操作系统

1.进程和线程的区别和联系，进程调度的方式，进程同步与进程间如何通信，什么是线程池，有什么作用。

2.什么数据分配在堆上，什么数据分配在栈上，页面置换算法有哪些？

3.内存对齐是什么，为什么需要内存对齐。

4.什么是大端，什么是小端，以及主要运用。

5.IO多路复用，常见的IO多路复用的实现。

6.数据编码的方式。

7.什么是流水线技术，有哪些运用。

V.数据库

1.数据库增删改查，连接查询，数据库语句的执行顺序。

2.数据库范式 - 1NF, 2NF, 3NF 和 4NF

2.数据库事务的特性（ACID），事务的隔离级别，脏读、不可重复读、幻读。

2.数据库如何建立索引，索引失效的情况。

3.数据库优化，垂直分割、水平分割、读写分离，分布式。

4.缓存数据库，redis的原理的特点，以及和memcached的区别，redis的优势

前端框架和库

这部分是前端常用的框架和库，一般我们项目中会使用到的，也是需要我们掌握的，其中包括jQuery、React、Vue和Bootstrap。

I.jQuery

1.jQuery选择器，如何选择子节点、父节点、兄弟节点

例：基本过滤器： ":first"、":last"

子元素过滤器：":nth-child(index/even/odd)"、":first-child"、":last-child"、":only-child"

如何遍历父节点，子节点，同级节点？

父节点：parents()、parents()、parentsUntil()

子节点：children()、find()

同级节点：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

2.jQuery增删改查

增加：

- append() - 在被选元素的结尾插入内容

- prepend() - 在被选元素的开头插入内容

- after() - 在被选元素之后插入内容

- before() - 在被选元素之前插入内容

- appendTo() - 把所有匹配的元素追加到指定的元素元素集合中，例如：$("Hello World!").appendTo("p");

删除：

- remove() - 删除被选元素（及其子元素），例如：（过滤被删除的元素）$("p").remove(".italic");

- empty() - 从被选元素中删除子元素，例如：$("#div1").empty();

获取：

获得内容- text()、html() 以及 val()

- text() - 设置或返回所选元素的文本内容

- html() - 设置或返回所选元素的内容（包括 HTML 标记）

- val() - 设置或返回表单字段的值

获取属性- attr()

jQuery attr() 方法用于获取属性值$("#w3s").attr("href")

设置：

设置内容- text()、html() 以及 val()

- text() - 设置或返回所选元素的文本内容：$("#test1").text("Hello world!");

- html() - 设置或返回所选元素的内容（包括 HTML 标记）：$("#test2").html("Hello world!");

- val() - 设置或返回表单字段的值：$("#test3").val("Dolly Duck");

设置属性- attr()

jQuery attr() 方法也用于设置/改变属性值。

attr设置多个值

$("#w3s").attr({

"href" : "http://www.w3school.com.cn/jquery",

"title" : "W3School jQuery Tutorial"

});

3.jQuery事件，其核心机制和原理是什么，on()、bind(), live(), delegate()的区别。

4.jQuery中.extend(obj)和.fn.extend(obj)方法分别是什么意思？如何解决名称冲突？body中的window.onload=function(){}函数和jQuery中的$(document).ready(function(){})有什么区别？


5.如何实现jQuery的免new实例化对象（即$(selector)），链式写法（Chaining）

6.jQuery有哪些动画函数，各有什么效果？

7.jQuery如何发送AJAX，如何切换同步和异步？

II.React

1.react有哪些特点，工作原理是什么，他的虚拟DOM解决了什么问题？

2.react组件的周期函数，使用场景都有哪些？

例：ajax请求写在哪个周期函数中？

3.react组件如何使用JSX，它的里面的写法有哪些特点？

例：如何在JSX中插入HTML标签，和HTML普通写法有哪些差异？

4.组件之间如何通信，父子组件间如何通信？refs属性有什么作用，一般使用场景是什么？

5.react事件处理，react支持哪些事件？

6.如何在react中使用redux，为什么要使用redux？

III.Vue

1.vue有哪些语法，条件和循环语法，计算属性，模板语法，事件处理，vue有哪些指令，v-model和v-bind指令的使用。

1.vue组件生命周期，如何使用vue的生命周期函数？

2.vue有哪些特点？vue和react有哪些异同？

3.vue原理以及vue是如何实现双向绑定的？

IV.Bootstrap
1.了解其响应式布局，流式布局

2.了解其基本的CSS样式使用，bootstrap的一套响应式、移动设备优先的流式栅格系统

前端行业最新消息获取

I.国内博客

1.腾讯Alloy Team

2.淘宝前端团队（FED）

3.360前端团队-奇舞团

4.百度前端FEX

5.携程设计委员会

6.阿里巴巴团队UED

7.京东前端团队-凹凸实验室

8.网易用户体验中心（UEDC）

9.腾讯社交用户体验设计（ISUX）

10.微信公众号：前端早读课

11.阮一峰博客

12.张鑫旭博客

13.大前端

14.W3cplus

II.国外博客资源

1.JSFeeds

2.Echo JS

3.Daily JS

4.Net Magazine

5.QuirksBlog

6.CSS Wizardry

7.CSS-TRICKS

8.Smashing Magazine

9.Treehouse Blog

10.A List Apart

11.Shop Talk

12.Hansel Minutes Podcast

13.JSJ Episodes

14.FiveJS

15.Response Web Design(RWD)

（end）

来自微信公众号：前端八点半