小白前端入门指南

基础类

学习前端首先要掌握网络相关的东西，这是所有网站运行的基础，这些要理解。

• HTTP
• 浏览器

前端基础类

前端基础类的就是前端入门的最最重要的东西。下面列出的三个分别对应一个网页的框架，样式和逻辑，三者在开发中都缺一不可。

HTML&HTML5都要学习。需要了解常用的标签以及标准。

CSS要学习CSS和CSS3。CSS可能很多人不太重视，一些工作多年的人对CSS也一知半解。CSS的东西比较杂，属性间可以相互影响，而且同一种效果有很多实现方式，可谓真正的入门容易精通难，开始学会觉得CSS东西很好，然后学的越深会发现内容越多。建议是如果你是想从事前端这门工作的，开始就把CSS基础打牢，这将会一直是你宝贵的财富。

最后的Javascript就是最重要的啦，这将会在你以后的工作中占据你大部分的时间，js相关的基础概念如闭包等，基础API都要有一定的掌握，新的API也要有一些了解，最少ES6相关的语法都需要掌握。

这些学完你就可以开发网页了，你已经正式打开前端的大门。

• HTML(HTML5)
• CSS(CSS3)
• Javascript基础
• ES6

前面有的内容比较浅，想要更深的掌握还是需要阅读更多，推荐几本读过的书，经典不过时

• CSS世界
• Javascript权威指南

框架类

目前比较成熟的前端开发都会使用框架进行开发，前端承载了很多的业务逻辑，现代网站体量也比较大，原始的开发方式已经支撑不了大规模的网站开发，所以都会选用前端框架。框架部分比较流行的有React或者Vue，可以二选一，掌握一个就可以，可以根据实际业务和个人喜好选择。

• React
• Vue(二选一)

当你用起了框架，你就打开了新世界的大门，React全家桶和Vue全家桶迎面砸来，刚入门的同学可能会眼花缭乱。不过莫慌，所有的东西都是为了解决问题，当我们知道这些库或者工具的目标的时候，就可以梳理清楚了，让我们慢慢来。

由于我用React较多，下面就从React的视角来说，如果用的Vue都可以找到对标的库或者工具，因为不论哪种框架要解决的问题都是类似的。下面这些问题都是用框架的时候会遇到的问题，我们从问题的角度来引出相关的库和工具。

如何解决单页面路由问题

现代网站常见的都是SPA（即单页面应用），服务端返回的只有HTML，页面路由都由前端来控制，每个路由挂载不同的组件，根据路由来切换组件达到多页面的效果。下面就是React的解决方案

• React-Router

如何解决应用状态同步的问题

对一个网站应用来说，我们有很多数据或状态需要处理，单组件的数据处理我们可以用框架提供的方式来处理。但如果是全局数据，比如登录数据等，我们要如何共享，如何修改，如何通知，如何追踪，就有很多问题都需要解决。目前数据处理方案有很多，如Redux，Mobx等等。入门的话推荐先学习Redux，因为思路比较巧，源码极少，很方便我们新手学习和掌握。

• Redux

工具类

现在我们使用了框架，有了很多代码和很多页面，我们要如何将这些代码组织在一起，如何处理各种类型的文件如图片，如何分包优化按需加载。这个时候就需要用到打包工具了。这里只说一种Webpack，还有一些其他的打包工具Rollup，Parcel等都各有优劣有各自的场景，由于Webpack功能最全面稳定，所以这里给出Webpack。

• Webpack

Typescript

由于现在Typescript越来越流行，而且确实在前端的稳定性已经代码可维护性方面有着突出表现，所以单独把Typescript也拎了出来，Typescript是Javascript的超集，为JS带来了类型。感兴趣可以学习下

• Typescript

题目类

简单列了些问题，如果能回答好下面的问题说明你是一个合格成熟的前端啦，把脑子里第一时间想到的问题先列在这里，以后想到慢慢补充，有时间也补充下答案，大家可以先自己搜，网上很多

• HTTP、TCP是什么，TCP的通信过程是怎样的
• HTTP2、HTTP3分别带来的什么新特性
• HTTPS是什么，解决什么问题，如果保证安全，怎么做的
• HTTP方法GET,POST使用场景，为什么
• 浏览器有哪几部分，浏览器解析HTML渲染页面的过程
• 什么是进程，什么是线程，有什么区别
• JS中闭包是什么、原型链是什么
• JS中的this指向是什么，在箭头函数中有何区别，函数与apply和bind结合this是如何表现
• 盒模型是什么，有哪几种
• CSS各种布局方式的掌握
• 用尽可能多的方式用CSS实现子元素在父元素中实现水平居中垂直居中
• 浮动相关问题，如何清除
• BFC是什么，什么应用
• 什么是事件捕获和事件冒泡，应用是什么
• 浏览器的EventLoop（事件循环）过程
• 重绘和回流是什么，有什么后果，如何避免
• 前端模块化IIFE，AMD，CJS，ES6 Module分别是什么，有什么区别，应用场景是什么
• Promise是什么，解决什么问题。Promise如何进行错误处理，Promise.resolve、Promise.all怎么使用
• 如果要进行网站性能优化要优化哪些点，措施是什么
• 网站安全方面要注意哪些问题，如何解决这些问题
• 如何做跨域，有哪些方案，这些方案的技术细节和原理是什么
• 防抖和节流是什么，如何应用，如何实现
• 浏览器存储分别有哪些，应用场景有什么
• 浏览器缓存怎么做
• 移动端网页适配方案是什么
• 单页面路由实现原理
• V8引擎垃圾回收过程
• React生命周期有哪些，写高性能的React要注意什么
• React原理，虚拟DOM，Diff，Fiber都是什么，过程是什么
• Redux思路以及实现原理
• 打包工具如何组织文件，过程是什么
• 简单的模板引擎如何实现
• 常用正则表达式编写能力，不依赖搜索
• 常见的设计模式

源码实现系列

最近在写一个源码实现系列，帮助自己和大家能更深入的了解我们平时用的一些东西，如果你也感兴趣可以关注下，会一直更新，有问题或想法欢迎在讨论区讨论