8.10 前端001

没想到任务竟然是做笔记，不过这种方式真的避免了我偷懒。

今天的任务有三点：

1. 是再一次了解前端，知道通过web上网的整个流程，并能够用自己的语言通俗化讲出来，最好的范本可以看这里；
2. 是给后面的学习列出备忘录，看看还有哪些知识点需要深入研究；
3. 是记录今天在学习过程中的疑惑，并且树立一个flag，即好好学习啊！

Ok，现在开始步入正题。

• 再一次了解前端并做生动总结

web访问过程中的各种名词解析：

以知乎为例解释web访问过程

网站访问的过程：

首先我会在地址栏输入一个网址，如www.baidu.com，浏览器和服务器交流，服务器和数据库交流。当电脑被返回一个HTML之后，会对它进行解析渲染。如果没有CSS（层叠样式表），那么网站展示出的样子只能是大概的HTML框架，这一点在网络状态很差的情况下很容易发生，看到的页面效果极差。

HTML是一种标记语言，不是一种编程语言，学习周期很短。

CSS代码格式是： 属性：值

---

HTML的发展和HTML5、XHTML，交互使用的JavaScript，留给后续笔记。

---

后端过程

此部分为此次学习的重点，在平时看书的时候较少关注。

浏览器给服务器传递一个请求，该请求基于一定的协议规范，常用的是HTTP协议。如前面的那张图，服务器的响应写了一个状态码 200 OK ，是 HTTP 协议里约定俗成的一个东西，服务器写 200 OK 在响应里，表示“你请求的这个东西我有”，如果是404 Not Found，就是“你请求的这个东西我这里没有”。

HTTP响应里面包含很多内容，比如 Content-type 表示服务器发过来的文件类型是什么（文本？动画？图片？音频？），这样发过去了人家浏览器好知道怎么展示给用户看。那么怎么确定按照协议把内容写进去呢？这就是Web服务器的任务。

HTTP构成

上图是HTTP的结构。也就是我们熟悉的HTML加上一个协议头HTTP，有些类似于计算机通信网络中加上报头ACK。

后端还有很多不明白的地方，没关系，以后慢慢学。

总结

一个普通网站访问的过程简单概括一下，对于我们普通的网站访问，涉及到的技术就是：

1. 用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；
2. 服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；
3. 服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
4. Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
5. 客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；
6. 解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
7. 浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
8. 用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
9. 交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。