猿人进化系列8——来呀，搞懂web开发的那些套路

经过前面几天的学习，相信你已经对上网的姿势和java这门语言有了一些了解，学会了一门面向对象语言的一些基础知识，算得少一只刚刚出生的很萌很可爱的小猿猿了！

 由于文字篇幅有限，讲得不明白的地方，大家关注公主号猿人工厂，或者加入qq群765605694，猿人工厂君，手把手的免费教你！

老是学习基础知识，也确实挺枯燥的，因为学习了也不知道能干什么，今天我换一个有趣一点儿话题——

 

我早就已经更换过上网姿势了，我知道网页是由html、js、css文件组成的,css和js控制着页面的显示，html组织着网页的内容......

那我就要问问了，css,和js,html是什么东西存放的？是文件对吧。那好，这个文件是怎么生成的呢？

 

Web发展到今天，如果真的要讲都要搞哪些事情又一定要用一副图来表达一下意思的话，可能下面这副图就能够表达了——

 

 

是的，这幅图看起来未免也太简单了一点，和世面上的大多数所谓的xxx型站点的架构图不太一样，因为简单得不能再简单了，客户端，服务端。虽然客户端有PC,手机，PAD,访问的终端的形式不一样，但确实是这样一回事情，用户通过什么东西才能访问到你的站点呢？客户端嘛，正常的人类大多数是不懂你的服务端返回的那些鬼画符的。他们需要工具的帮助，才能看明白服务端返回的内容。那么我们可以得出一个结论，我们编写的程序大体分为两类——服务端程序和客户端程序。

 

 

哈哈，记住金林斯的话，然后好好上路吧。我们再回过头来看看已经知道的东西，我们访问了一个有态度的站点，返回了一份html文档，浏览器解析html文档，呈现出了我们看见的内容。但是我们打开调试工具会发现一个有意思的事情——

 

我们仅仅发起了一个www.163.com的请求，为什么浏览器却发起了多达290个请求呢？我们看看html文件的内容：

 

这就是为什么只向服务端索取了一份html文档，却最终发起了290个请求的原因了——html是可以告知浏览器向服务端新数据的！从这样来看职责就明确了——服务端负责返回数据，客户端负责解析数据。客户端在解析数据的时候，可能会多次地向服务端索取数据。那客户端会处理哪些数据呢——理论上讲服务端返回给客户端的一切数据都将被客户端处理。一般情况下这些数据都包括html,css,js,jpg,gif...一切返回的都是需要被客户端处理的。那么服务端的职责就更加清晰起来——返回客户端需要的数据。 

 

我们先看看什么是程序？程序是一组计算机能识别和执行的指令。那么浏览器返回的数据都有哪些呢？Html,css,js,图片,视频.....理论上讲这些被你看到的东西都是程序,包括并不限于你的图片！人类通过计算机能感知到的东西,都是已经在内存中了，内存里只有二进制的东西，二进制可识别，可执行，所以他们都是程序,他们都是客户端执行的程序^_^

我们再看看那个有态度的站点——

 

 

 

我们还是先看看新闻有些什么东西吧？我们还是看看哪些东西是固定的吧？嗯，顶部的功能条，页面上的专题内容，分享按钮...什么是变化的？面包屑，新闻标题，新闻内容...至少看起来是这样哒！那么怎样才能更加容易地提供这些数据呢？嗯，我们先把固定的内容抽取出来形成文件，然后将动态部分的内容到固定的位置就好了呀！那我们要抽取一份什么样的文件呢？

 

 

这样固定的东西，可以抽取成html文件，把需要动态的东西留出来，当需要的时候插入进去就好了！嗯...这种事情嘛，程序最擅长了，交给程序很容易搞定它！那看上去，我们的图可以增加点儿内容了。

 

 

嗯...那种固定的东西，可以给它起一个名字，就叫模板嘛，那这个动态生成html的技术，也就叫动态模板技术啦！先卖个关子，以后你遇到的什么jsp啊，velocity，freemarker，Tapestry...啊什么的，都是动态模板技术，那么重点来了，这些代码是跑在哪里的？服务端！服务端！服务端！

我又在html文件上上发现了这样的东西——

 

 

学了java之后，这样的东西看上去也不是那么鬼画符了，对的，他在名字上和java是有点亲戚关系——他叫javascript.大多数情况下他就是客户端执行的程序。他跑在哪里？自然是跑在用户的机器上了！那好了，新的问题又来了，大家都是可以执行的程序，不就是把数据放到标签里吗？这事儿我也行啊，服务端把模板和动态数据给我给我，我把干就完了！

 是哒，作为一个又态度的站点，自然是这么干了。解决问题的办法是多种多样的，不要把自己的思维固定死了嘛！

      

 

第一，用服务端去动态填充，代码跑在服务端，用的是自己的服务器，用的是自己的电费，用客户端去填充动态内容，代码跑在客户端，用的是别人家的机器，用的是别人家的电费。

第二，服务端的程序相对而言考虑的情况要少很多，因为只考虑自己的机器环境就好了，客户端嘛，虽然花的是别人的电费，但是你要求不了每个人的机器都一样，所以程序要考虑的情况要多一些，比如各种浏览器版本。

第三，放在服务端的程序和数据，轻易改不了，客户端的程序和数据，客户分分钟可以修改，所以太敏感的，还是自己藏好放在服务端吧。

第四，客户端如果搞的东西太多了，容易给人搞死，比如搞得不好机器给人卡死了，你看下次别人还来你这儿不？你又不是1024！

第五，其实现在用户的机器越来越好，看起来可以在客户端多搞点儿事情...只要不是 太明显，他也不知道。

第六，如果服务端完成数据填充，相对容易一些，后端猿类一个人就干了，为毛还要前端猿类啊，一份工给两份工钱。

.......

这样的问题简直还有好多好多，归根结底，解决问题的办法就俩字——取舍。学会取舍也是你作为猿类的生存之道，不仅仅于代码噢。

 

我们就从那个有态度的东西说起吧，再次访问www.163.com,打开开发者工具——

       

 

又发现了新的东西，有好多东西，都被标注了已缓存。这个缓存是什么东西呢？缓存其实就是一个计算结果，举个简单的例子，从1加到100的值是怎么得来的？我们写了一个循环，然后计算出来了5050这个数字，对吧。那计算这个5050计算机需要一个一个的累加计算吧？这样很蛮烦，假设我用一个变量存储5050，你再问我1加到100的值是多少，直接告诉你是5050就好了，这样是不是快多了呀！数字可以缓存，文件一样也可以！像这样的东西，还可以更准确的叫做，浏览器缓存，不强制刷新浏览器，不会更新——用别人家的电费就是爽！

我只访问了一个www.163.com为什么会有那么多域名鸭？哈哈，这个嘛，人多力量大啦，也许你看到的每一个域名后面其实都是很多服务器噢。有人还给这中一堆服务器去干某件特定的事情的搞法取了一个名字——集群。

细心的你，可能还看到了一个叫做server的东西——nginx。这是什么鬼？百度百科一下Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器....Nginx代码完全用C语言从头写起...明白了吧，返回静态页面这种事儿，这事儿和java的IO还真没啥关系......谁更擅长做某些方面的事情，就用谁啦。

我们回过头来看看，新闻列表的内容，一条一条的，几乎过段时间就会发生变化，这总该是动态的了吧？嗯，我们学了容器，用List就能存放它了，每个列表的内容不同，我们用我们给每个列表起个名字，放到Map里就可以了，过一段时间更新它就好了鸭^_^,嗯，这种放在服务端内存中的东西，我们就叫服务端缓存吧。

慢慢的，你会发现，要缓存的东西太多，自己已经存不下来了，于是专门用了很多服务器来存放缓存数据，还让很多服务器去共享这些数据，然后给这种服务器取了个名字——分布式缓存服务器。嗯，你经常听到的是很redis,memcached什么的就是它啦。那没放在缓存服务器上的缓存数据叫什么呢——本地缓存！

嗯，再回头想想，我们怎么连接上www.163.com的？先告诉你个命令——

 

哈哈，好像要经历30多个跳跃，虽然在网线里的传输速度是光速，但是经过这些邪恶的路由就不好说了，于是吧，还可以把数据放到离路由近一点儿的地方，比如就在你家隔壁的数据中心——这种东西呢，就是cdn啦，不过一般存放的是相对“静态”的东西啦。

总而言之，为了减少重复的计算，互联网的套路嘛，基本上就是缓存嘛。而且这个计算嘛，最好是用别人家的电费，比如用户的电脑^_^

好像又发现一个有意思的事情，我们把数据和代码都给到了客户端，让客户端去计算，把数据留在客户端，每次把javascript移动过去，用别人的机器计算，我有亿级的用户，哈哈——小样的hadoop，谁抄谁还不知道呢！

一步小心又聊了好多，有点天南地北，和某一门具体的语言也没啥关系，其实在猿人的路上，解决问题才是最重要的，猿和人最大的区别在于是否会使用工具，那么猿人和猿人的一些差距，就在于如何使用适合的工具去解决特定的问题。用啥套路不重要，解决最重要，解决什么最重要，思考最重要，web开发其实最大的套路只有一个——思考！