简介

有时候需要向新同学科普前端，又不知道如何下手？先把这篇图文分享丢给他吧！

本文改编自魔法哥为 “百姓网暑期实习生训练营” 所作的前端入门讲座。此讲座面向在校大学生，内容比较初级，高手请飘过～

大家好，今天的分享主要分为以下三个部分。

由于目前计算机专业还没有为 Web 前端技术设立专门的课程，每位同学对前端的了解程度也不一样，今天的讲座会以最浅显的方式来为大家介绍 “前端”，帮助大家建立一个基本的概念。

前端是什么？

在回答这个问题之前，我想到了一道面试题：

当我们在浏览器中输入网址并按回车之后，接下来会发生什么？

我们来简单地看一看 “网页展现” 的整个过程。

比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。

有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。

当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。

一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css，它就会去请求这个资源。

HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js，此时浏览器同样会向服务器请求这个资源。

当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。

我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。

我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”；右侧的事情发生在服务器端，称为 “后端”。（“前端” 之所以叫 “前端”，是因为它离用户更近一些。）

大家都学过后端开发的相关课程，对后端这一块应该都比较熟悉了。那问题来了：在上面这个过程中，后端有哪些局限？

• 服务器一旦把资源提供给浏览器之后，便失去对内容的影响。
• 服务器无法得知用户在浏览器里做了什么，无法与用户交互。

这意味着，只有当用户下一次向服务器请求资源时，服务器才有机会再次决定用户看到的内容。那么，用户什么时候再向后端请求资源呢？

第一种情况是 “导航动作”。比如用户刷新页面、点击链接、点击浏览器的前进/后退等等。

第二种情况是用户提交表单。表单是最传统的页面交互方式之一，提交表单时浏览器会向服务器发出新请求——这意味着浏览器会跳转到一个新的地址，服务器会在新页面中显示表单的处理结果。

还有一种特殊情况，就是服务器在给浏览器返回 HTML 资源时，在页面中插入一个特殊的标记，浏览器看到这个标记就会在一定的时间后自动刷新当前页面或跳转到其它页面，相当于服务器强制用户再次发出请求。可想而知，这种非用户意愿驱动的页面跳转行为并不讨人喜欢，因此已经不常用了。

在传统网页中，上述几种用户与服务器之间的交互方式也算够用了。不过随着网页形态的不断演进，用户对网页体验提出了更高的要求，很多时候网页不仅仅是一篇静止的文档，而更像是一个应用程序，用户随时可能与之互动。这个时候，前端的价值就体现出来了。

• 用户从停留在当前页面到发起新请求的这段时间内，前端可以控制页面内容。
• 当用户停留在当前页面时，前端有能力与用户交互。由于前端的 JS 可以监听用户在浏览器中的各种行为（比如鼠标点击、键盘输入、滚动页面等等），前端就可以针对这些行为作出相应的反馈。

在前端与用户的交互过程中，有些事情光靠前端就可以做出响应。比如我们在网页上做了一个计算器的功能，当用户输入算式之后，JS 就可以直接计算出结果并显示给用户。整个过程不需要服务器的参与就可以完成。

但有些事情，光有前端是无法完成的。此时前端就需要交给后端来处理，拿到处理结果之后再交给用户。在这个过程中，前端可以让用户一直停留在当前页面，交互过程具有良好的连续性。

那么，前端如何把任务交给后端并拿到后端处理的结果呢？主要有两种方式：Ajax 和 WebSocket。

Ajax 的核心是 XHR（XMLHttpRequest），是目前最常见的前后端交互方式。它以 “请求→响应” 的方式来完成前后端的信息传递。传统的表单交互需求几乎都可以由 Ajax 改造为 “原地提交并获取反馈” 的交互方式，不需要跳转页面，从而有效提升用户体验。

而对于实时性比较高的场景，WebSocket 就是更好的选择。它的工作方式是前后端建立一个持续的连接，信息可以随时由前端发向后端，或由后端推送到前端。如果我们要建立一个实时对话的应用，通常就会用到 WebSocket。

前端需要用到哪些技术？

说到前端技术，我们通常都会说到 “三大块”：

• HTML
• CSS
• JS

这是前端最核心的三项技术。

接下来，我们就会说到 “前端的分层架构”。这个架构的原则就是 “让合适的技术去做合适的事情”。一个网页从逻辑上可以视为这三层的有机结合体：

• 结构层：这一层的作用是表述一个页面中有哪些信息，以及这些信息之间的关系是什么。这一层在技术上是由 HTML 来实现的。
• 表现层：这一层决定了页面中的信息会以什么样的外观呈现出来。这一层由 CSS 来实现。
• 行为层：这一层控制了页面如何与用户进行交互。在传统的展示型网页中，可能只需要 “结构层” 和 “表现层” 就足以提供完整的功能；而现代网页承载了越来越多的交互，这就推动 “行为层” 的能力不断增强。这一层由 JS 来实现。

我们通过一个实例来理解这个分层架构。

比如我是一个百姓网的用户，我打开了 “用户中心” 中的 “我发布的信息” 这个页面。

这个页面的 HTML 描述了信息以及信息的结构。即使没有 CSS 和 JS 的辅助，这个页面仍然可以呈现出可理解的内容（参见上图）。页面顶部是一些导航元素，接下来的 “显示中的信息” 是一个标题，它又引出了一个列表。这个列表自然就是我在百姓网发布的所有信息了。（除了 “显示中的信息” 以外，页面后半段还有 “已删除的信息”，这里不再赘述。）

接下来，我们会在表现层下功夫，通过 CSS 来为页面中的各个元素设定外观。经过这一层的修饰之后，页面中的内容更加美观了；更重要的是，各元素的功能职责也更加直观易懂了（参见上图）。

这已经是一个挺不错的网页了，但接下来，我们还会通过 JS 来丰富它的功能，提升用户的使用效率。

作为信息的发布者，我可能需要修改某条信息的内容，或对它进行 “刷新” 之类的操作。在传统的交互中，我需要在这个列表中点击需要操作的信息，然后在信息的详情页选择合适的操作。

我们可以把这个流程简化一下：我们在这个列表中为每条信息添加一个操作按钮，当用户点击某条信息的操作按钮时，我们就在页面中弹出一个操作面板，用户可以直接选择想要的操作，减少了中间环节（参见上图）。

由此可见，结构层、表现层、行为层这三者各有所长，共同构造了一个功能完备、体验良好的网页出来。

除了基本的 “三大块” 之外，作为前端工程师，我们还需要掌握以下知识和技能：

• HTTP 相关：由于前端资源都是浏览器通过网络下载的，因此我们有必要了解相关的网络协议。
• 浏览器相关：前端代码运行在浏览器中，我们需要了解浏览器的各种特性，以及浏览器向我们提供的各种接口。
• 前端性能优化：让网页更快，减少用户的等待，这也是前端工程师面临的重要课题。优化网页的前端性能，需要我们具备上面两项知识，并且掌握性能优化相关的工具和方法。
• 图形图像：网页信息不仅包含文字，还包含图片、视频等多媒体信息。图片作为最常用媒体资源，需要我们掌握与其相关的技能。比如了解各种图片格式适用的场景、基本的图片处理方法等等。

（在讲座中设立了一个 demo 环节，我会现场演示如何从零开始创建一个简单的网页，并实践 “前端的分层架构” 这一指导思想。）

前端的开发方式是怎样的？

前面我们已经介绍了前端技术 “三大块”，然而在如今，当我们在编写这三块的代码时，已经不再 “裸写” 了。这意味着我们在开发阶段编写的代码与实际在浏览器环境中运行的代码已经不一样了，详细来说：

• 我们通过模板语言来生成 HTML。
• 通过 CSS 预处理器来生成 CSS 代码。
• 通过 ES6+ 的语法和特性来编写 JS 代码。

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：
https://github.com/cssmagic/blog/issues/76