阿嬷都看得懂的前端与後端怎麽分

首先，准备一个阿嬷 －民明书房《阿嬷的古早味卤肉饭怎麽煮》

阿嬷的乖孙中秋节要回来吃饭了，阿嬷想要煮个古早味卤肉饭给乖孙吃，所以阿嬷想上网看看其他人都怎麽煮。这时候，阿嬷会怎麽做呢？

阿嬷拿出手机和老花眼镜，点下手机上的 Chrome，然後在上面输入「古早味卤肉饭 食谱」，再点「搜寻」，古早味卤肉饭的资料就全都跑出来了。这些资料可能是食谱的文字，可能是展示步骤的照片，也可能是实际上示范烹饪过程的影片。

像 Chrome 这种用来看网页的 APP 或程序，我们就叫做「浏览器」。浏览就是随便看看的意思，所以「浏览器」就是个用来随便看看网页的小工具。

到这边，我想问各位阿嬷一个问题：这些我们查到的食谱资料，是原本就存在我们手机里的吗？当然不是，否则，难道我明天查股票涨跌，这些资料也是原本就存在我们的手机里吗？那我就不用当工程师啦！ 换句话说，这些资料是从其他地方拿回来的。这些地方，既然可以存放这些食谱资料，应该也会是台电脑。这台电脑就等在那让我们拿资料，伺机而动服务我们，所以也叫作「服务器」。

简单说，当我们想浏览某些资料的时候，我们就点开浏览器，而浏览器呢，就会向服务器索取这些资料，然後服务器再把这些资料，传回来给浏览器。

可是，这个世界上这麽多种不同的资料，都存在不同的服务器当中，浏览器怎麽知道要去找哪台服务器索取什麽资料呢？

为了回答这个问题，我们必须先回头看看浏览器长怎样。除了「上一页」、「下一页」、「重新整理」这些按钮以外，最重要的应该就是刚刚输入文字的框框。假使没有这个框框，我们应该什麽资料都找不到。不过，在刚刚输入「卤肉饭」，并且按下搜寻以後，这个框框里面的文字突然变得超复杂：

https://www.google.com/search?q=卤肉饭

我们从头到尾只对浏览器做了一件事情，就是在框框中输入「卤肉饭」，然後浏览器帮我们把「卤肉饭」三个字变成上面那串复杂的文字。结果，浏览器就从服务器那边，得到我们想要的资料了！所以说，那串复杂文字，应该就是浏览器找到服务器的关键。

没错，那串复杂文字，可以帮助我们找到服务器，就好像是服务器他家的地址。因此，那串文字就被我们称作「网址」，意思就是服务器在网路上的地址。当我们在浏览器中输入网址，浏览器就会帮我们找到对应的服务器，并且取回对应的资料。

那麽，我们从服务器只能取得资料吗？

各位阿嬷是否都在脸书上，看过可爱乖孙的照片呢？按照上面的讨论，这些照片是我们从脸书的服务器中拿回来的。不过，这些照片，应该不是乖孙直接用随身碟放进脸书的服务器中吧？这些照片，应该是乖孙在网页中上传的。这些照片上传过去的地方，应该就要是脸书的服务器，不然我们也不可能在脸书上，看到这些照片。

也就是说，我们不只能从服务器取得资料，还能把资料传进服务器喔。乖孙从他的电脑中的浏览器，把照片送给脸书的服务器，让服务器存起来，然後阿嬷从她手机的浏览器，向脸书的服务器要乖孙的照片，服务器就把照片传给阿嬷的浏览器。

这样听来，浏览器是个很神奇的东西，可以跟服务器要资料，还可以把这些资料变成我们看到的网页。

那麽，浏览器是和服务器要了什麽资料，来组成我们看见的网页呢？整张网页看起来像是一张很长的海报卷轴，所以，应该是图片档吗？不过，有时候网页中会有些动画，难道整个是影片档吗？

我们可能有这样的经验：在网路比较慢的时候，脸书会先显示一些框框，还有一些文字，最後图片和影片才慢慢显示出来。假使整个网页是个很长的图片，甚至是个完整的影片，在网路慢的时候，既然整个图片或影片还没完整取得回来，就应该所有内容都无法呈现才对。

另外，在网路慢的状况下，图片和影片会比较慢才显示出来，就是因为图片和影片的档案尺寸通常很大，所以资料从服务器传回来的时间比较长。假使整个网页是用图片传输，那势必会大幅延後网页呈现的时间。

是的，其实我们的整个网页骨架和外观，都是以纯文字的方式传输的。网页工程师用文字描述的方式告诉浏览器，整个网页有哪些区块，这些区块又长怎样。然後浏览器就按照网页工程师的指示，把整个网页画出来。这个浏览器阅读网页工程师写的指令，并且画出整个网页的过程，我们称作「渲染」。

因此，我们在 google 卤肉饭食谱的时候，整个过程大致上是这样的：

• 我们的浏览器呼叫某串网址，让 Google 的服务器知道我们要求什麽资料。这个动作，我们叫作「浏览器向服务器发出了一个请求 (request)」。
• Google 的服务器找到我们需要的资料以後，把这个纪录资料的网页的文字指示回传给我们的浏览器。这个动作，我们叫作「浏览器向服务器发出了一个回应 (response)」。
• 我们的浏览器按照文字指示，渲染出我们看见的网页。

在这个过程中，2 个关键任务被完成了：

1. 服务器接收我们的请求，并且回传我们所需的资料。不过，前面的讨论也有提到，我们不只能够向服务器取得资料，甚至可以在服务器新增资料，例如乖孙新增照片。许多时候，我们也可以修改服务器的资料，例如我们可以修改密码。
2. 浏览器发出适当的资料请求，并且在接收回应後，渲染出我们看见的画面。
   这 2 项任务，当然都是电脑按照网页工程师写出的指示完成的。服务器必须按照网页工程师给出的指示，找出适当的资料。同样地，浏览器必须按照网页工程师给出的指示，才有办法给出适当的请求，或将接收到的资料渲染出来。

其中，专注在给予服务器指示，接收使用者请求，找出适当资料，并且回传的工程师，我们称作「後端工程师」；相对地，专注在给予浏览器指示，渲染出画面的工程师，我们称作「前端工程师」。既然浏览器和服务器都是帮助我们获得与看见适当的资料，前端工程师和後端工程师当然也就必须在分工明确的前提下紧密合作。

总结地说，

• 前端工程师负责给予浏览器指示，让浏览器发出适当请求，也让浏览器适当渲染出请求回的资料。
• 後端工程师负责给予服务器指示，让服务器在接收请求後，知道应该怎麽取回、新增、或修改资料，并且给予浏览器适当的回应。