浏览器输入url到整个页面显示出来经历的过程 - 简书
下载简书移动应用
写了104724字，被15人关注，获得了27个喜欢
浏览器输入url到整个页面显示出来经历的过程
其实普通web应用，实际上就是对http的应用，http是一种基于TCP协议的网络传输协议，工作在应用层，作为web开发者，我主要从http的角度来看待这个问题：
首先，对于http肯定是有客户端和服务器的，在这个语境中，客户端和服务器本质上也都是一个软件，实现了http协议相关标准的软件。
客户端一般由都是由浏览器充当，也就是说，在浏览器中实现了http客户端的相关功能。
而服务器的实现就多种多样啦，我们可以用java写servlet，c#写ASP.net,还有php，ruby，Python，nodejs等。
实际上我想，http服务在操作系统底层应该有实现，而这些语言只不过是利用操作系统的http服务封装成自己的接口供开发人员编写web服务器程序。
而我们熟悉的IIS，Tomcat，Apache，Web logic，都是能够作为某些web服务器容器的大型服务器平台，它们都会包括很多更为强大的功能。一般来说，我们这里所说的服务器指的是自己用特定语言写的web应用服务器程序。nodejs不需要web容器，本身就有对http的直接应用模块，所以用nodejs创建一个web服务器是很方便的。
有了客户端和服务器，就可以开始通信了，整体上分为3个步骤：
1. 因为http是构建在TCP之上，那么自然是要经过3次握手创建连接。
2. 创建连接后，服务器会根据url请求中的信息进行处理，作出响应，一般来说是找到一个html文件返回给客户端。
3. 客户端即浏览器得到html，进行渲染。
下面详细说下这3个步骤：
这个跟网络关联多一些，我网络学的马马虎虎，只能大体说一下。
对于http的客户端，它的输入就是一个url，
而对于创建连接，它需要的只是url的host（主机）部分，
而主机地址一般是网站的域名，所以第一步肯定是域名解析，也就是要通过DNS服务器进行域名解析得到网站的ip地址，然后向这个ip地址发送一个连接建立的请求，如果服务器接收到请求会返回一个确认，客户端得到确认再次发送确认，连接建立成功。
当然在这个过程中还会涉及到很多细节，这是网络中的知识，在这里不多讲。
服务器处理
建立好连接后，客户端就会发送http请求，请求信息包含一个头部和一个请求体，
一般的web技术都会把请求进行封装然后交给我们的服务器进行处理，比如servlet会把请求封装成httpservletrequest对象，把响应封装成httpsevletresponse对象。nodejs的http模块，当你创建服务器的时候会写一个回调函数，回调的参数用来接受http请求对象和响应对象，然后在回调函数中对请求进行处理。
在请求对象中我们可以得到path（路径），queryString（查询字符串），body（post请求中提交的数据）等。
对请求的处理就可以很复杂，也可以很简单。
我们可以根据path找到客户端想要的文件，读取这个文件，然后通过响应对象把内容返回给客户端，这个过程，不同的技术提供的api可能不同，尤其是用惯了MVC框架的人，可能只是指定一个文件，或者在配置文件中设置一下就好了。
但是最终的实现肯定是符合http响应标准的，也就是要有一个响应头和一个响应体。
我一般接触到的设置响应头就是设置content-type来决定MIME类型，设置Cache-Control，last-modify等缓存内容。
一般来说返回给客户端的内容是一个html字符串，然后content-type设为text/html。
当然也可能客户端请求的是一个image文件，那么就是读取image文件后，content-type可能设为image/png,image/jpg等,然后把内容返回给客户端。
这样一次对请求的处理就结束了。
当然这个过程太单一，而且处理过程也可能很复杂，又有数据的操作，又有页面的构建，又有路径的查找匹配，又有文件的读取等等，于是就出现了MVC框架以及后来演变出的各种MV框架。这里不细讲MVC的内容，因为需要很长的篇幅。
只是概述一下MVC主要做了什么，在我看来最重要的就是解耦和模块化。我认为MVC实现最重要的有两点：
1.路由匹配，http请求的path中就不需要指定到具体的视图位置，而是按照我们制定的规则进行匹配，这样就有了很大的灵活性，可编程性。
2.模板技术，一般来说我们最后返回给客户端的是一个html字符串，而有时候这个字符串往往不是静态单一的，有的时候需要和数据进行结合，需要拼接。这就带来了很大的麻烦，模板技术为解决这个问题带来很大的便利性，同时又能够把视图和数据进行解耦。
客户端渲染
客户端接收到服务器传来的响应对象，从中得到html字符串和MIME，根据MIME知道了要用页面渲染引擎来处理内容即html字符串，于是进入页面渲染阶段，这又是一个很庞杂的体系。我只能大体上说一下：
从浏览器的角度讲，它包含几大组件，网络功能（比如http的实现）算是其中之一，渲染引擎也是其中之一，还有其它的一些比如自己UI界面，javascript解释器，客户端数据存储等等。在这里我们主要关注渲染引擎和javascript解释器，对于web开发者来说，这才是浏览器的核心。
我们能够在浏览器中看到一个页面，那么这个页面是怎么出现的呢？实际上就是调用底层绘图API给画出来的。不同的渲染引擎，它的实现也不同，主流的引擎包括IE的Trident，chrome和safary的webkit，firefox的Gecko，chrome又出了一个Blink，放弃webkit。于是乎才有了让人头疼的各种兼容性问题。
整体上页面渲染的过程大致是这样的：
渲染引擎得到html字符串作为输入，然后对html进行转换，转化成能够被DOM处理的形式，接着转换成一个dom树，在解析html的过程，解析到&link&,&script&,
等一些请求标签时，会发送请求把对应的内容获取到。这时又会同步进行css的解析，构建出css样式规则应用到dom树上，然后进行一定的布局处理，比如标记节点块在浏览器中的坐标等形成最终的渲染树，最后根据这棵渲染树在浏览器窗口中进行绘制。
最终我们就看到了页面的样子。
当然在页面渲染过程中还会同步进行javascript的解析，而且这两者是在同一个线程中的，所以一旦javascript死循环，页面的渲染也就进行不下去了。
以上是我从一个web开发者的角度思考的整个过程。如果从别的角度更细化的去想，还包括许多内容：
比如整个网络通信中协议的封装：
在本机中，把要传输的内容即请求对象在应用层上加上App首部，传递到传输层加上TCP首部，到网络层加上IP首部，数据链路层加上以太网的首部和尾部，然后转换成bit流进入网络环境中。到达主机后在一层层解封装，最后把内容交给服务器程序。
再比如这个过程中的认证，加密，安全，编码等问题都会有一定的处理，不过这些内容我就不是很了解。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：计算机网络（1）
最近接触到了整个网站的开发流程，所以就总结一下网站的运行机制，对网络应用如何工作有一个完整的层次化的认知。
首先，你得在浏览器里输入要网址:
例如百度或者facebook。
浏览器查找域名的IP地址（域名就是指输入的网址）
浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会 有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
浏览器给web服务器发送一个HTTP请求
因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从中读取。
所以，浏览器将把一下请求发送到Facebook所在的服务器：
下面为整个一个请求
GET / HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 ( MSIE 8.0; Windows NT 6.1; WOW64; [...]
DontTrackMeHere: gzip, deflate
Connection: Keep-Alive
Cookie: datr=-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
后续接着补充
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1759次
排名：千里之外
原创：32篇
(2)(2)(1)(3)(12)(15)1M不到的浏览器好用吗？一点浏览器评测
　　1M不到的浏览器你见过没？近来推出了堪称史上最小巧的浏览器，一个只有0.5M大小连1M都不到的浏览器，名为一点浏览器。这个一点浏览器能干吗，实际上好用吗？好吧，想知道这个一点浏览器有什么可取之处的朋友请接着看文章吧。软件名称：一点浏览器软件版本：1.0.0.1118 官方版软件大小：550KB软件授权：免费适用平台：WinXP Vista Win8 Win7下载地址：　　你没看错，一个浏览器的大小只有550K，约0.5M，约0.0005G。当然，在N年前其实已经有很几M大小的马甲浏览器出现，但第一次将浏览器的文件大小压缩到550K，这倒是第一次见。的全貌　　一点浏览器的官网介绍很有意思，一直写实的牛经过N次简化之后，只剩下寥寥几笔（小编不明白的是为什么牛腿之间还要多几笔）。代表目前的浏览器&&臃肿　　一点浏览器的内核是什么？　　0.5M的一点浏览器，内核毫无疑问是IE，至于你的电脑IE是多少，一点浏览器的内核就是多少。如果你手贱将IE卸载了，那么这个一点浏览器就无法运行了。一点有啥特色功能？　　一点浏览器有一个其他浏览器几乎都没有的功能，那就是右键关闭网页功能。　　这个鼠标右键关闭功能有什么好处？好处是，你只需点一下鼠标右键，就能快速关闭当前网页，无需点网页标签上的&X&。　　除了这个特色功能之外，就没有其他亮点功能了。一点浏览器的其他功能　　当然，别以为一点浏览器小巧就没有其他基本功能，相关的基本功能还是挺全面的，例如复制标题和网址、收藏夹、隐私窗口等等功能。的功能之三&&隐私上网模式　　写在最后　　小编忘了说，一点浏览器其实是绿色版的，无需安装即可使用。也就是说，用户可以将这个浏览器放在里随身携带。　　好吧，不喜欢IE不喜欢国产双核浏览器不想等其他浏览器的话，那这个一点浏览器倒是一个不错的选择，简单易用。相关阅读:简单到极致！Nitro浏览器正式版评测&
软件论坛帖子排行
最新资讯离线随时看
聊天吐槽赢奖品
相关软件：
大小：43.66 MB
授权：免费
大小：37.39 MB
授权：免费网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&正文
IIS7配置ASP详细错误信息发送到浏览器显示的方法
客户端浏览器设置：取消“显示友好的HTTP错误信息”
IIS7设置（GUI）：
1. &网站&-ASP-调试属性-将错误发送到浏览器，修改为True&
&2. &网站&-错误页-操作-编辑功能设置，选择“详细错误信息”
&注：如果不设置上面的第二步，错误同样无法发送到客户端的浏览器上。
IE下也要设置下，取消选择这两项
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：