一些简单通俗的前端领域相关名词解释，帮助各位想学前端的同学尽快入门。

什么是前端？

什么是前端？端是一个什么概念？前端和前台有什么区别，下面就给你一一道来。

既然有前端这个名词，那么先来了解一下什么是端。再来区别什么是前端什么是后端。端在这里可以认为是终端，面向普通用户用的东西就是客户端 (client)，举例来说你所用的微信、支付宝、浏览器都可以称之为客户端(Client)。大概率情况下客户端是由前端开发工程师开发出的。而后端中的端，则指的是服务器端 (server)。通常后端开发工程师负责对服务器端的开发。

所以既然想要了解前端、后端的区别，本质上还是需要了解客户端和服务器端的区别。我们将以微信朋友圈为例来做一些举例：

这是一张你熟悉的不能再熟悉的微信朋友圈界面，你可以在朋友圈里做大概这么几件事情：

1. 发自拍带一张图或者不带。

2. 刷朋友圈，不断地刷下去，遇到感兴趣的就点赞或者评论。

3. 初次之外你还可以点开图片查看大图，或是点击某个人的头像去这个人的主页看看。

那么请思考以下几个问题：

1. 你发的图片假设是 2M 一张，这张图片上传到哪里去了？为什么你的朋友们都可以看到这张图片？

2. 你的朋友圈和别人的朋友圈显然是不一样的对吧，为什么是不一样的？

3. 为什么图片上就可以点击查看大图，文字上不能点击查看大文字呢？页面中哪些部分是可以点击的？（其他人的头像、名字、地址、图片）点击之后会发生什么？（点击评论按钮为什么会弹出一个框可以显示赞和评论？）

思考几分钟上面的这三个问题，然后继续往下看。

一分钟

两分钟

三分钟

…

是时候揭晓答案了。

第一个问题，你的图片上传到哪里去了？别人为什么能看到这个图片

你的图片被上传到了下面的这种地方，我们称之为服务器上（现在也流行叫云端）

这地方看着很酷炫，很像电影中的场景对吧。其实生活中我们已经离不开这样的地方了，这就是服务器机房。而服务器是什么东西呢？就是提供某种服务的电脑。从宏观上来说上图的服务器和我们自己用的个人电脑没太大差别，都是有 CPU、内存条硬盘之类的东西组成的。但微观上来说因为服务器的领域专用性质设计上和我们的家庭电脑区别也很大。服务器效率更高，省去了我们所用不到的比如听歌玩游戏这样的功能。那么我们自己的电脑能做服务器吗？是可以的，只要你也提供某种服务即可。这里的服务可以是：提供数据库服务、提供文件存放服务、或是计算服务等等。

那么别人为什么能看到你的图片呢？这里就牵扯到一个账户的概念了。

我相信每个人都去过银行，存过钱。当你去银行办了一张银行卡的时候，银行会用你提供的身份证信息办理一张属于你自己的卡，并且让你设置一个密码。而你所提交的这些个人信息、密码等都被存储了起来。我们称这些个人信息（名字、出生年月、密码）等为数据，这些数据怎么放呢？记到本本上吗？那一场大火所有人账户没了也不知道钱是谁的了。所以这些数据存放的地方我们称之为数据库(data base)。

数据库这种东西其实也没有什么神秘的地方，就是存放数据的仓库而已。我相信大多数人都接触过 Excel 表格，实际上 Excel 表格也可以称之为一种数据库，它可以存放大量的数据并且你可以写一些自动计算的功能。所以说数据库和你用到的 Excel 是很相似的。

Excel 我们也称之为表格，上图的表格中有两个概念一个是行(row)一个是列(column)。左边是数字的，水平方向上的一栏就是行，行是以数字(1, 2, 3, 4)来标记的。而列是垂直方向上的一栏，以字母为标识的(A, B, C, D)。我们的第一行称之为表头，第一行的第一列（A1）的位置写着字母 (EMP NO)，意思是说这一列记录的是关于 EMP NO 的信息，虽然我也不知道 EMP NO 代表了什么。但是第二列我们知道是用来存储姓名的。第三列是用来存储年薪的。而第四列是用来存储奖金的。这样的设计能够让我们清晰直观的看到我们的数据并对之进行管理。而数据库也正是类似于这样的东西，区别是 Excel 更加简单直观，而数据库更加专业化当然功能也更多。

所以你的朋友为什么能看到你的照片？

当你选择了手机里的一张图片上传到朋友圈的时候，你可以想象微信会在自己的数据库中插入一行新的信息，就像上面的截图一样。为了说明问题这里只是做一些假设，我们来看一下这张表格都有哪些列，或者更专业一点都有哪些字段（field）。第一列是 id，大家上传到微信的图片太多了，所以需要用一个数字来表示一下。我相信理解这个应该是没有什么问题的。你上传在数字世界的每张图片、每句话都会有一个对应的 id 来区分。而第二行记录的图片的地址，方便别人去直接看到这个图片。第三列显示了图片的上传时间，这些数字是一种表示时间的方法，我们称之为时间戳(unix timestamp)。而第四列存放着一个用户 id，表明这是哪个用户上传的图片。最后一列则是这张图片你所配的文字。有了上面的信息之后，当别人再刷新朋友圈的时候会根据下面的方法来显示新的图片。

下拉屏幕刷新朋友圈 -> 微信到服务器去查询最新的信息 -> 找到所有的朋友列表 (567556756就是你) -> 找到所有朋友新发的图片 -> 可能有几张新的图片 -> 按照时间排序返回数据 -> 微信软件根据返回的数据显示新的朋友圈。（这只是一个举例，实际情况可能相差非常多）

而返回的数据可能长这个样子：

看到了吗，是不是和我们在 Excel 中记录的数据一样只是表达数据的方式从一个软件里变成了一些文字？对于你的数据应该有哪些列，它们分别表达着什么意思以及互相之间的联系我们称之为数据结构。如果你要开发一个软件那么你需要去考虑你的软件中有哪些数据，是否要使用数据库，数据的字段是怎样的，有几个数据表。

相信到此为止你已经能理解什么是数据、什么是数据库、数据库存放的地方就是微信的服务器。在这个例子中服务器给我们提供的功能有上传图片以及数据库的功能。

没有数据库，你的微信将不知道你有哪些朋友，以及你的朋友什么时候上传了图片，你的朋友圈也将不复存在。

如果上面理解的差不多了，那我们再来看看第二个问题：

你的朋友圈和别人的朋友圈显然是不一样的对吧，为什么是不一样的？

简单来说在数据库中，你和你朋友的 user_id 是不一样的，所以微信在查询这个人的所有朋友时，这些朋友列表是不一样的。再进一步查询朋友们上传的图片时，当然结果也是不一样的。这一切都要归功于数据库这样一个神奇负责的东西。

来回到第三个问题：

为什么图片上就可以点击查看大图，文字上不能点击查看大文字呢？页面中哪些部分是可以点击的？（其他人的头像、名字、地址、图片）点击之后会发生什么？（点击评论按钮为什么会弹出一个框可以显示赞和评论？）

一个软件是有不同的很多功能的，而这些功能用户需要怎么使用其实是一个人和软件、机器打交道的一个问题。专业名词称之为交互设计(interaction design)。交互设计就是有这么一群有人性的设计师，帮你设计出简单、易用的交互流程。让你在使用软件的时候更舒服（或是让你看到的广告更多，公司赚的钱更多）。所以总结来说流程如下：

上传图片这样一个功能需求 -> 交互设计师初步设计流程（点击右上角开始选择图片，选好了开始上传然后让用户输入一段文字）-> 软件界面设计师（UI）来决定这个界面具体长什么样子，图标应该是什么样子最终的产出是一张用户界面的图片 -> 前端工程师/客户端开发工程师（收到图片，负责把图片用代码的形式描述出来，最终生成用户可以点击的软件）

看起来经过前端工程师的手之后你的软件就已经实现了，但其实不然。这个软件的功能、用户怎么上传图片这样的交互完成之后还有一个非常重要的步骤就是我们需要把数据发送回服务器。同样我们需要处理当用户下拉屏幕去服务器主动获取数据这样的操作。一个有功能的界面加上和服务器的交互之后，一个活的软件才诞生了。相信你已经明白前端工程师是做什么的了，但是后端工程师做什么呢？通常来说数据库应该怎样设计，前端工程师要发送到服务器的什么位置才能正确的更新数据这些都是后端工程师所需要考虑的。简单来说前端工程师之所以叫前端是因为离用户更近，负责给用户提供界面交互。而后端相对来说用户不容易感知，甚至很多人不能理解数据的存在，数据这种东西就像水和空气一样自然而然的存在于软件之中。所以这也是后字的来源。

现在你可能已经略微有了一些概念了，这些概念分别是

data 数据：软件交互所产生的需要被记录的信息

field 字段：数据的名称

database 数据库：存放数据的一种软件（数据库自己也是一种软件）

server 服务器：提供某种服务的专业电脑，当然个人电脑也是可以做为临时服务器用的

interaction design 交互设计：用户和软件直接应该怎样沟通？点击按钮还是滑动屏幕？点击哪里？出错了怎么处理？

user interface 用户界面：基于交互设计之后的真实软件界面设计图，基本上和你用的软件高度相似了。

Front-End 前端：在用户界面设计图确定之后，根据不同的目标环境（Android/IOS/浏览器/windows/Mac OS）进行对应的软件实现。而通常我们所说的前端开发是指开发工作在浏览器上的网页，而对应的移动开发工程师则是开发工作在手机上的软件。这两者都是编写面向用户的软件的，所学习的只是以及工作流程也是非常相似的，因此我们可以统称为客户端开发工程师。

Client Side 客户端：简单来说是用户手中的软件，严谨地说是消费服务器提供的服务的软件。

Back-End 后端：负责提供数据的接口，以及设计数据结构，当然也负责实现一部分业务逻辑。比如你再支付宝里集齐五福就能开奖，那前端只负责给你显示你集齐了哪几个福，这些福字能不能开奖还是后端决定的。又或者说支付宝里的余额，这是一种数据，前端只关心余额应该以什么字体、多大、颜色是什么、怎么对齐。而具体是多少数字这些是由后端工程师帮你查询计算得出的。

unix timestamp：时间戳 一种记录时间的方式。具体来说是指从 +0 时区(格林尼治时间) 的1970年1月1日0时0分0秒起至现在的总秒数，timestamp 60 则表示了1970年1月1日0时1分0秒这个地球上唯一的时间。（时间这种东西究竟是不是唯一的请参考霍金的时间简史）

了解了概念之后，下一步可以继续向下一个领域了解，就像打怪升级一样。如果你想了解前端工程师具体所需要做的事情，下面给上一个学习路线图仅供参考。

https://github.com/qiu-deqing/FE-learning

最后，附上一个你看了可能会懵逼其实我也懵逼的可能已经过时的一张图。要学习的东西还有很多，加油。

文章更新（自己总结了一个版本的前端学什么知识图谱）： https://miro.com/app/board/o9J_kyTT9w8=/