深入浅出全栈工程师: Web编程基础
从浏览器到服务器
如果你的操作系统带有cURL这个软件(在GNU/Linux、Mac OS都自带这个工具,Windows用户可以从http://curl.haxx.se/download.html下载到),那么我们可以直接用下面的命令来看这看这个过程(-v 参数可以显示一次http通信的整个过程):
curl -v https://www.phodal.com
我们就会看到下面的响应过程:
* Rebuilt URL to: https://www.phodal.com/
* Trying 54.69.23.11...
* Connected to www.phodal.com (54.69.23.11) port 443 (#0)* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384
* Server certificate: www.phodal.com
* Server certificate: COMODO RSA Domain Validation Secure Server CA
* Server certificate: COMODO RSA Certification Authority
* Server certificate: AddTrust External CA Root> GET / HTTP/1.1> Host: www.phodal.com> User-Agent: curl/7.43.0> Accept: */*>< HTTP/1.1 403 Forbidden< Server: phodal/0.19.4< Date: Tue, 13 Oct 2015 05:32:13 GMT< Content-Type: text/html; charset=utf-8< Content-Length: 170< Connection: keep-alive<<html><head><title>403 Forbidden</title></head><body bgcolor="white"><center><h1>403 Forbidden</h1></center><hr><center>phodal/0.19.4</center></body></html>* Connection #0 to host www.phodal.com left intact
我们尝试用cURL去访问我的网站,会根据访问的域名找出其IP,通常这个映射关系是来源于ISP缓存DNS(英语:Domain Name System)服务器[^DNSServer]。
以“*”开始的前8行是一些连接相关的信息,称为响应首部。我们向域名 https://www.phodal.com/发出了请求,接着DNS服务器告诉了我们网站服务器的IP,即54.69.23.11。出于安全考虑,在这里我们的示例,我们是以HTTPS协议为例,所以在这里连接的端口是443。因为使用的是HTTPS协议,所以在这里会试图去获取服务器证书,接着获取到了域名相关的证书信息。
随后以“>”开始的内容,便是向Web服务器发送请求。Host即是我们要访问的主机的域名,GET / 则代表着我们要访问的是根目录,如果我们要访问 https://www.phodal.com/about/页面在这里,便是GET资源文件/about。紧随其后的是HTTP的版本号(HTTP/1.1)。User-Agent通过指向的是使用者行为的软件,通常会加上硬件平台、系统软件、应用软件和用户个人偏好等等的一些信息。Accept则指的是告知服务器发送何种媒体类型。
这个过程,大致如下图所示:
在图中,我们会发现解析DNS的时候,我们需要先本地DNS服务器查询。如果没有的话,再向根域名服务器查询——这个域名由哪个服务器来解析。直至最后拿到真正的服务器IP才能获取页面。
当我们拿到相应的HTML、JS、CSS后,我们就开始渲染这个页面了。
HTTP协议
说到这里,我们不得不说说HTTP协议——超文本传输协议。它也是一个基于文本的传输协议,这就是为什么你在上面看到的都是文本的传输过程。
从HTML到页面显示
而浏览器接收到文本的时候,就要开始着手将HTML变成屏幕。下图是Chrome渲染页面的一个时间线:
及其整个渲染过程如下图所示:
(PS: 需要注意的是这里用的是WebKit内核的渲染过程,即Chrome和Safari等浏览器所使用的内核。)
从上面的两图可以看出来第一步都Parser HTML,而Paser HTML实质上就是将其将解析为DOM Tree。与此同时,CSS解析器会解析CSS会产生CSS规则树。
随后会根据生成的DOM树和CSS规则树来构建Render Tree,接着生成Render Tree的布局,最后就是绘制出Render Tree。
详细的内容还得参见相关的书籍~~。
相关内容:
- 一个例子理解C#位移
- WCF后续之旅(3): WCF Service Mode Layer 的中枢—Dispatcher
- silverlight 2 Random 随机数解决方案
- 开发中巧用Enum枚举类型
- Jquery 事件冒泡
- Vue2的单元测试与调试技术
- silverlight beta 2 将在本周末发布.
- [Silverlight 4 RC]WebBrowser概览
- 英文域名chosen.com超22万元易主
- 简单介绍Docker的架构特性与局限
- .NET4.0下网站应用程序用UrlRewriter.dll重写无后缀路径 (在IIS7.5中的配置方法)
- 微信搜索新发现:iPhone 内存不足看这里!
- 建立可扩展的silverlight 应用框架 step-6
- .NET4.0下网站应用程序用UrlRewriter.dll重写无后缀路径 (在IIS7.5中的配置方法)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法