构建高性能ASP.NET站点之一 剖析页面的处理过程（前端）
发表于 00:51|
来源博客园|
作者燕洋天
摘要：导读： 作者燕洋天 写了一系列关于ASP.NET的文章。 在对 ASP.NET 网站进行优化的时候，往往不是只是懂得 ASP.NET 就足够了的。 在优化的过程中，一般先是找出问题可能存在的地方，然后证明找出
导读：作者燕洋天写了一系列关于ASP.NET的文章。在对ASP.NET网站进行优化的时候，往往不是只是懂得ASP.NET就足够了的。在优化的过程中，一般先是找出问题可能存在的地方，然后证明找出的问题就是要解决的问题，确认之后，在进行一些措施。系列文章在结构上的安排是这样的：先讲述前端的调优，我会在文章的标题后面标上&前端&，如果是后台代码的调优，我会在标题上标上&后端&，如果是数据库设计的调优，我会在标题上标上&数据库&，希望大家多多提建议。
剖析页面的解析过程
页面的解析过程，这里说的过程不是我们常说的ASP.NET页面的生命周期的过程，而且浏览器请求一个页面，然后浏览器呈现页面的过程。
在本篇的文章中，我会先阐述页面的解析过程，显示从整体上阐述，然后在每一个点上提出优化的方法。先整体，后局部。
当浏览器在请求一个Web页面是从URL开始的。下面就是过程描述：
1．&输入URL地址或者点击URL的一个链接。
2．&浏览器根据URL地址，结合DNS，解析出URL对应的IP地址。
3．&发送HTTP请求。
4．&开始连接请求的服务器并且请求相关的内容（至于请求时怎么被处理的，我们这里暂时不讨论，只是后面的文章要讨论的问题）。
5．&浏览器解析从服务器端返回的内容，并且把页面显现出来，同时也继续进行其他的请求。
上面基本上就是一个页面被请求到现实的过程。下面我们就开始剖析这个过程。
当输入URL之后，浏览器就要知道这个URL对应的IP是什么，只有知道了IP地址，浏览器才能准备的把请求发送到指定的服务器的具体IP和端口号上面。
浏览器的DNS解析器负责把URL解析为正确的IP地址。这个解析的工作是要花时间的，而且这个解析的时间段内，浏览器不是能从服务器那里下载到任何的东西的。但是这个解析的过程是可以优化的。试想，如果每次浏览器每次请求一个URL都需要解析，那么每次的请求都有一点的时间消耗，可能这个时间消耗很短，但是性能的提升就是一点点的&调&出来的。如果把对应URL和IP地址缓存起来，那么当再次请求相同的URL时，浏览器就不用去解析，而是直接读取缓存，这样势必会快一点。
其实浏览器和操纵系统是提供了这样的支持的。
当获得了IP地址之后，那么浏览器就向服务器发送HTTP的请求，下面我们就稍微看下这个发送请求是怎么样被发送的：
1．浏览器通过发送一个TCP的包，要求服务器打开连接。
2．服务器也通过发送一个包来应答客户端的浏览器，告诉浏览器连接开了。
3．浏览器发送一个HTTP的GET请求，这个请求包含了很多的东西了，例如我们常见的cookie和其他的head头信息。
这样，一个请求就算是发过去了。
请求发送去之后，之后就是服务器的事情了，服务器端的程序，例如，浏览器清楚的文件是一个ASP.NET的页面，那么服务器端就把请求通过IIS交给ASP.NET 运行时，最后进行一系列的活动之后，把最后的结果，当然，一般是以是以html的形式发送到客户端。
其实首先到达浏览器的就是html的那些文档，所谓的html的文档，就是纯粹的html代码，不包含什么图片，脚本，css等的。也就是页面的html结构。因为此时返回的只是页面的html结构。这个html文档的发送到浏览器的时间是很短的，一般是占整个响应时间的10%左右。
这样之后，那么页面的基本的骨架就在浏览器中了，下一步就是浏览器解析页面的过程，也就是一步步从上到下的解析html的骨架了。
如果此时在html文档中，遇到了img标签，那么浏览器就会发送HTTP请求到这个img响应的URL地址去获取图片，然后呈现出来。如果在html文档中有很多的图片，flash，那么浏览器就会一个个的请求，然后呈现。
到这里，大家也许感觉到这种方式有点慢了。确实这个图片等资源文件的请求的部分也是可以优化的。暂不说别的，如果每个图片都要请求，那么就要进行之前说的那些步骤：解析url，打开tcp连接等等。开连接也是要消耗资源的，就像我们在进行数据库访问一样，我们也是尽可能的少开数据库连接，多用连接池中的连接。道理一样，tcp连接也是可以重用的。但是重用也有问题：如果两个图片它们的url地址如下：
&img&src=&q1.gif&&height=&16&&width=&16&&/&
&img&src=&q2.gif&&height=&16&&width=&16&&/&
&img&src=&q3.gif&&height=&16&&width=&16&&/&
&img&src=&q4.gif&&height=&16&&width=&16&&/&
&img&src=&q5.gif&&height=&16&&width=&16&&/&
&img&src=&q6.gif&&height=&16&&width=&16&&/&
&img&src=&q7.gif&&height=&16&&width=&16&&/&
&img&src=&q8.gif&&height=&16&&width=&16&&/&
&img&src=&q9.gif&&height=&16&&width=&16&&/&
&img&src=&q10.gif&&height=&16&&width=&16&&/&
请求这些图片的时间消耗如下图：
大家首先看到最上面的黄线的部分，这个黄线就代表了浏览器打开连接，黄线的后半部分为蓝色，就表示浏览器请求到了html的文档。
最上面的第二条蓝线就表示第一个图片已经请求到了，此时请求这个图片使用还是之前的一个tcp的连接。
大家在看到第三条线，前部分是黄色的，表示请求第二个图片的时候又开了一个tcp的连接，这条线的后半部分为蓝色，表示图片已经请求到了。
剩下的要请求的一些图片都使用上一个tcp连接。
确实，tcp的连接时充分的被使用了，但是图片下载的速度确实慢了，从图中看出，图片是一个个的顺序的下载下来的。整个页面的响应时间可想而知。
如果采用下一种方式，如：
可以看出连接时多了，但是图片的几乎都是并行下载下来的，相比而言就快多了。
其实这就是一个权衡的问题了。
实际上浏览器也是内置了以一些优化方式的，例如缓存图片，脚本等。或者采用并行下载图片的方式，谈到并行下载，就如上图所看到的，势必会消耗更多的连接资源。
原文链接：
推荐阅读相关主题：
网友评论有（0）
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章后使用快捷导航没有帐号？
只需一步，快速开始
查看: 42230|回复: 68
做前端与做后台有什么不同？
UID658003在线时间 小时积分2715帖子离线17169 天注册时间
银牌会员, 积分 2715, 距离下一级还需 285 积分
做前端更有成就感么？
这里有人同时做前端和后台，但是以后台为主的么？
逛这论坛的大部分是爪哇码农吧
UID60在线时间 小时积分9301帖子离线17169 天注册时间
其实以现在前端的要求，基本上同后端没有多大区别
从招人的角度上，我可能会对前端要求对设计有一定的理解，但前端不是设计！
前端现在就是标准的程序员， 可能所使用的语言主要是javascript, 但目前的趋势， java/objective c/c#也是部分前端所要求的（因为ios和android/wp)。 而且光javascript知识现在跨度很大，所以说一个合格的前端，同后端程序员素养没有什么不同，可能更好
facebook的访谈主要有两点： 1. 前端消费后端的api， 你可以用来区别目前两者的工作范围 2. 前端是程序员
其实既然是程序员，哪有什么后端能做前端就不能做了的呢
UID160050在线时间 小时积分2170帖子离线17169 天注册时间
银牌会员, 积分 2170, 距离下一级还需 830 积分
有什么好争的，跟你们单位的后台比比工资就知道那里不同了。技术上的都是小事，钱才是关键
UID34190在线时间 小时积分1383帖子离线17169 天注册时间
银牌会员, 积分 1383, 距离下一级还需 1617 积分
本帖最后由 重坦 于
16:28 编辑
自从有了nodejs，两者越来越模糊了， 前端也变成了厉害的角色了，因为异步,defer等概念要理顺也是需要一定 ...
你也回帖不看帖？看标题，不同点，不是要指出相同点。
社会分工越来越细的初衷不是让综合能力强的人才能做事，而是只要能做好某一方面的人也能高效率的做事。
具备各种能力的人应该是做技术部经理的料，而不应该是个前端。一个小兵有一个小兵该做的事，一个小兵要是比将军都厉害那说明了什么问题？
ASP和asp.net编程环境下可以使用javascript语言，客户端也可以使用javascript语言，这是早就有的事，有交叉部分并不影响前端的大致范围划分。
从个人能力上讲方面方面都强的人毕竟是少数，如果要按方面方面都强才能工作只有极少数人才能胜任工作。西方世界经济发达是因为分工，只要具备某一部分专长就可以参加工作流中一个环节。又不是武侠世界各英雄单枪匹马混江湖
UID581572在线时间 小时积分1081帖子离线17169 天注册时间
银牌会员, 积分 1081, 距离下一级还需 1919 积分
本帖最后由 tangbao510 于
01:12 编辑
笑死我了 ，还‘前端’；那叫‘页面仔’、‘切图工’ 知道不；
我为什么现在还在回复你，因为 我是页面仔&&在切页面中
UID658003在线时间 小时积分2715帖子离线17169 天注册时间
银牌会员, 积分 2715, 距离下一级还需 285 积分
笑死我了 ，还‘前端’；那叫‘页面仔’、‘切图工’ 知道不；
我为什么现在还在回复你，因为 我是页面仔&&...
PS切图么？
UID535590在线时间 小时积分4592帖子离线17169 天注册时间
金牌会员, 积分 4592, 距离下一级还需 408 积分
做前端要考虑浏览器兼容，要同时伺候多个浏览器，繁杂而劳累。
我个人觉得，后台的用处更大，一张动态页面可以出来N张前台分类信息显示页面，高效实用，不华而实。
UID419809在线时间 小时积分2304帖子离线17169 天注册时间
银牌会员, 积分 2304, 距离下一级还需 696 积分
有毛可比性啊
UID278928在线时间 小时积分1049帖子离线17169 天注册时间
银牌会员, 积分 1049, 距离下一级还需 1951 积分
两个不同东西， 页面前端的水有多深？可以看看
UID369979在线时间 小时积分1103帖子离线17169 天注册时间
银牌会员, 积分 1103, 距离下一级还需 1897 积分
没什么不同，都是打工仔~~都会被老板或产品经理等指来指去的
UID160032在线时间 小时积分4016帖子离线17169 天注册时间
金牌会员, 积分 4016, 距离下一级还需 984 积分
叫我全端攻城师
UID604224在线时间 小时积分1327帖子离线17169 天注册时间
银牌会员, 积分 1327, 距离下一级还需 1673 积分
做前端的学习成本更大些
UID198086在线时间 小时积分7484帖子离线17169 天注册时间
本帖最后由 Evance 于
09:51 编辑
笑死我了 ，还‘前端’；那叫‘页面仔’、‘切图工’ 知道不；
我为什么现在还在回复你，因为 我是页面仔&&...
笑死我了。。
页面仔那叫农民好不？
前端是工程师，要负责性能优化、使工程模块化、用工具集实现工业化，实现游戏，实现WebApp，通过网页端语言做Hybrid App， 现在越来越多的前端工程师用Node杀到后端、服务器端写代码了。。
有些喷子工程师在切页面的时候吐槽前端没前途，就像没见过世面的农夫认为有钱人和他的区别仅仅是人家的锄头是纯黄金的一样。。
UID522151在线时间 小时积分2059帖子离线17169 天注册时间
银牌会员, 积分 2059, 距离下一级还需 941 积分
ls的童鞋们好认真。
话说楼主，你给我的感觉就像还没进门儿就各种问啊。
明显就是刷帖的。
UID227818在线时间 小时积分3660帖子离线17169 天注册时间
金牌会员, 积分 3660, 距离下一级还需 1340 积分
笑死我了。。
页面仔那叫农民好不？
前端是工程师，要负责性能优化、使工程模块化、用工具集实现工业化，用脚本脚本实现游戏，通过网页端语言实现Native App， 现在更多的前端工程师用Node跑到后端、服务器端写代码了。。
我要把这段记录到笔记里，以后论文用得着。领导和客户看了会觉得很高深很厉害的样子。
UID500900在线时间 小时积分4882帖子离线17169 天注册时间
金牌会员, 积分 4882, 距离下一级还需 118 积分
前端是工程师，要负责性能优化、使工程模块化、用工具集实现工业化，用脚本脚本实现游戏，通过网页端语言 ...
UID581572在线时间 小时积分1081帖子离线17169 天注册时间
银牌会员, 积分 1081, 距离下一级还需 1919 积分
本帖最后由 tangbao510 于
22:12 编辑
笑死我了。。
页面仔那叫农民好不？
后面一段话，恰好证实了，有钱人也同样认为，农民只认为有钱人的锄头是黄金的一样。
‘请带着智商说话’
而且你这个有钱人向我这个农民展示的是有钱人 只是个有钱人，由此看来 我还是情愿做一个农民。我可不想整天板着脸 到处告诉别人，‘我们有钱人不光是锄头是黄金的，我们的大脑也是黄金’
UID198086在线时间 小时积分7484帖子离线17169 天注册时间
后面一段话，恰好证实了，有钱人也同样认为，农民只认为有钱人的锄头是黄金的一样。
‘请带着智商说话 ...
我从来不和低级喷子辩论。。。
UID34190在线时间 小时积分1383帖子离线17169 天注册时间
银牌会员, 积分 1383, 距离下一级还需 1617 积分
前端对应的工作是编码:html,css,javascript
后台对应的是web应用程序:asp.net,php,对应的数据库sql server,my sql等。
另外，完全否定Evance认为前端包罗万象的说法，一个学科的范围是有限的，能在阿里巴巴不能说明你的话就正确。那仅仅只能代表你的看法。
UID581572在线时间 小时积分1081帖子离线17169 天注册时间
银牌会员, 积分 1081, 距离下一级还需 1919 积分
本帖最后由 tangbao510 于
01:19 编辑
我从来不和低级喷子辩论。。。
带着智商说话，
我根本就没喷过，我想明白人都能看懂 我二楼是什么意思。来给我说说我哪里低级了。
美国农民用飞机喷洒农药，归根结底还是农民。前端工具再先进，再牛B，还是前端，还是‘页面仔’；
自己理解不了别人的意思，就开喷，回过头来，潇洒的一句 ‘我从来不和低级喷子辩论。。。’深藏功与名。
如果这算‘高级’；我确实低级。可高级并不一定比低级高级，恐怕你这句话都看不懂吧。
看了LS的回复，原来是阿里巴巴的，呵呵。
UID400806在线时间 小时积分426帖子离线17169 天注册时间
中级会员, 积分 426, 距离下一级还需 74 积分
很明显，tangbao510在二楼说的内容无所谓对错，可是他在17楼所说的就不对了，会误导新人，你说的那种根本算不上前端，也就算是个你所谓的页面仔，，，，而显然10楼Evance则是站在更高的视野上基本描绘了真正的前端要做什么，而且具体些说比如要掌握些数学物理公式，一些算法，会OOP等等，绝不是页面仔能想象和了解的
UID604224在线时间 小时积分1327帖子离线17169 天注册时间
银牌会员, 积分 1327, 距离下一级还需 1673 积分
不明真相的前端攻城狮前来围观，14楼怎么弄的这么像辩论
后面一段话，恰好证实了，有钱人也同样认为，农民只认为有钱人的锄头是黄金的一样。
UID60在线时间 小时积分9301帖子离线17169 天注册时间
自从有了nodejs，两者越来越模糊了， 前端也变成了厉害的角色了，因为异步,defer等概念要理顺也是需要一定素质的
UID369611在线时间 小时积分1215帖子离线17169 天注册时间
银牌会员, 积分 1215, 距离下一级还需 1785 积分
一样，都是模板语言
UID230126在线时间 小时积分2290帖子离线17169 天注册时间
银牌会员, 积分 2290, 距离下一级还需 710 积分
前端对应的工作是编码:html,css,javascript
后台对应的是web应用程序:asp.net,php,对应的数据库sql server ...
这话5年前说说还可以。柏林墙都倒了，别给自己树那么多壁垒。眼见开阔点！
UID34190在线时间 小时积分1383帖子离线17169 天注册时间
银牌会员, 积分 1383, 距离下一级还需 1617 积分
本帖最后由 重坦 于
16:36 编辑
这话5年前说说还可以。柏林墙都倒了，别给自己树那么多壁垒。眼见开阔点！
过犹不及。
分工离不开社会背景，经济因素，高射炮打蚊子就不看成本了？
一个优秀的做技术的领导不只是要技术好，还要懂得经济上的算账。不是所有的地方都能高薪让牛人进去做小事的。
UID198086在线时间 小时积分7484帖子离线17169 天注册时间
既然楼上的人开始讲道理了，那我就回应一下。
我喷的是这句话：
笑死我了 ，还‘前端’；那叫‘页面仔’、‘切图工’ 知道不；
前端工程师是工程师，页面仔是里面最低级的工种。
拿我所在的团队来说，前端工程师在做的事情包括不限于：
1. 写C扩展Nginx
2. 写Node扩展打包、编译工具
3. 写PHP实现静态模板；
4. 写NodeJS实现静态资源代理
从页面级别来讲，除了切页面以外，我们的前端还做：
1. 框架核心
4. 规范型的校验工具、业务级的校验工具；
当然，以上都不是由一个前端做的，但是做这些事情的都是前端，要问为什么？ 就是有需求。
倒是很多人认为的重复不停地切页面，写写效果的前端，大多由外包完成。
再说说你所说的西方世界
前一段时间Facebook的工程师过来交流，直到去年他们才开始有正式的前端工程师，在之前他们都是通杀。
到现在，像Google、Facebook大多数和工程师仍然是全端。
O了，我态度很明确：还在入门阶段的前端，刚踩在门槛上，甚至还没有向内张望一下，向地下吐了一口唾沫，恨恨地一句：“什么狗屁前端，都tmd天天在切页面”。
这种人，我除了骂一句傻逼，还能有辩论的兴趣？
UID34190在线时间 小时积分1383帖子离线17169 天注册时间
银牌会员, 积分 1383, 距离下一级还需 1617 积分
本帖最后由 重坦 于
17:05 编辑
既然楼上的人开始讲道理了，那我就回应一下。
我喷的是这句话：
眼光太狭小，你在很多行业中的人眼中算是什么呢？
卖菜的大叔也能年薪过百万，农民坐拥房子身家也能千万。你又算个什么东西呢？小人得志就发颠，就会在这里装逼了？
有你发颠的份吗？
UID227818在线时间 小时积分3660帖子离线17169 天注册时间
金牌会员, 积分 3660, 距离下一级还需 1340 积分
既然楼上的人开始讲道理了，那我就回应一下。
我喷的是这句话：
正在写年终总结。又多了些文字。感谢。
UID34190在线时间 小时积分1383帖子离线17169 天注册时间
银牌会员, 积分 1383, 距离下一级还需 1617 积分
既然楼上的人开始讲道理了，那我就回应一下。
我喷的是这句话：
我并不赞同前端是切片的页面仔，范围没这么小。
也没你说的那么大。
你觉得你回帖有没有看帖？你的智商表现在哪里？
搞了半天你说什么全端不是说的前端，你通过什么辩论？你不只是SB还是瞎子吧
UID410430在线时间 小时积分3412帖子离线17169 天注册时间
金牌会员, 积分 3412, 距离下一级还需 1588 积分
楼上的，其实剑侠想说明的是不要用入门的眼光去看所谓的某一个岗位，其实走到后面都需要很多的知识，都很有发展的，还有不同企业需求也不一样，只要好好干都有前途的。
Powered byASP的网站开发环境怎么样，建站的原理又是什么样的？---任务易