一起谈.NET技术,构建高性能ASP.NET站点之优化HTTP请求

简介:   本篇就开始细化页面的请求过程并且提出优化的方案.同时,在上篇文章中,不少朋友也提出了一些问题,在本篇中也对这些问题给出了回答!  本篇的议题如下:  HTTP请求的优化  HTTP请求的优化  在一个网页的请求过程中,其实整个页面的html结构(就是页面的那些html骨架)请求的时间是很短的,一般是占整个页面的请求时间的10%-20%.

  本篇就开始细化页面的请求过程并且提出优化的方案.同时,在上篇文章中,不少朋友也提出了一些问题,在本篇中也对这些问题给出了回答!

  本篇的议题如下:

  HTTP请求的优化

  HTTP请求的优化

  在一个网页的请求过程中,其实整个页面的html结构(就是页面的那些html骨架)请求的时间是很短的,一般是占整个页面的请求时间的10%-20%.在页面加载的其余的时间实际上就是在加载页面中的那些flash,图片,脚本的资源. 一直到所有的资源载入之后,整个页面才能完整的展现在我们面前.

  下面,我们就从一个页面开始讲述:

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2    < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3    < head >
 4       < title > 小洋,燕洋天 </ title >
 5 
 6       < script  type ="text/javascript"  src ="../demo.js" >
 7       </ script >
 8 
 9    </ head >
10    < body >
11       < div >
12           < img  src ="../images/1.gif"   />
13           < img  src ="../images/2.gif"   />
14           < img  src ="http://yanyangtian.cnblogs.com/image/3.gif"   />
15           < img  src ="http://yanyangtian.cnblogs.com/image/4.gif"   />
16           < img  src ="http://yanyangtian.cnblogs.com/image/5.gif"   />
17           < img  src ="http://yanyangtian.cnblogs.com/image/6.gif"   />
18           < img  src ="http://yanyangtian.cnblogs.com/image/7.gif"   />
19           < img  src ="http://yanyangtian.cnblogs.com/image/8.gif"   />
20           < img  src ="http://yanyangtian.cnblogs.com/image/7.gif"   />
21           < img  src ="http://yanyangtian.cnblogs.com/image/8.gif"   />
22       </ div >
23    </ body >
24    </ html >
25 

  如果我们向服务器请求这个页面,客户端的浏览器首先请求到的数据就是html骨架,:

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4       < title > 小洋,燕洋天 </ title >
 5 
 6       < script  type ="text/javascript"  src ="../demo.js" >
 7       </ script >
 8 
 9  </ head >
10  < body >
11       < div >
12           < img  src ="../images/1.gif"   />
13           < img  src ="../images/2.gif"   />
14           < img  src ="http://yanyangtian.cnblogs.com/image/3.gif"   />
15           < img  src ="http://yanyangtian.cnblogs.com/image/4.gif"   />
16           < img  src ="http://yanyangtian.cnblogs.com/image/5.gif"   />
17           < img  src ="http://yanyangtian.cnblogs.com/image/6.gif"   />
18           < img  src ="http://yanyangtian.cnblogs.com/image/7.gif"   />
19           < img  src ="http://yanyangtian.cnblogs.com/image/8.gif"   />
20           < img  src ="http://yanyangtian.cnblogs.com/image/7.gif"   />
21           < img  src ="http://yanyangtian.cnblogs.com/image/8.gif"   />
22       </ div >
23  </ body >
24  </ html >
25 

  在此之前,首先来普及一下页面加载的小知识:

当页面的html骨架载入了之后,浏览器就开始解析页面中标签,从上到下开始解析.

首先是head标签的解析,如果发现在head中有要引用的js脚本,那么浏览器此时就开始请求脚本,此时整个页面的解析过程就停了下来,一直到js请求完毕.

之后页面接着向下解析,如解析body标签,如果在body中有img标签,那么浏览器就会请求img的src对应的资源,如果有多个img标签,那么浏览器就一个个的解析,解析不会像js那样等待的,如果发现img的url地址是同一个地址,那么浏览器就会充分的利用这个已经打开的tcp连接顺序的去一个个的请求图片,如果发现有的img的url地址不同,那么浏览器就另开tcp连接,发送http请求.

注意之前请求js的区别:请求需要js,浏览器会一直等待,不在解析下面的html标签

但是解析到img的时候,尽管此时需要加载图片,但是页面的解析过程还是会继续下去的,然后决定是否发送新的tcp连接加载资源.

  大家可能觉得这个之前的代码片段一样,确实代码是一样的,但是,在最开始的时候,发送到浏览器中的只是那些html的代码,任何的js脚本和图片还没有发送过来.

  当html代码到了浏览器中,那么浏览器就开始一步步的解析这些代码了,只要遇到了需要加载的资源,浏览器就向服务器发出http请求,请求所需的资源.

  整个页面的加载时间图如下:

  大家从图中可以看出:

  第一条线中分为一半黄色和一半蓝色,其实黄色的部分就代表了打开一个tcp连接花的时间,而后面的蓝色的部分就是请求整个html骨架文档的时间.可以看出,请求html骨架的时间是很短的.其余蓝色的线就表示了图片,脚本资源加载所花的时间.

  很显然,这样页面的整个加载时间就很长了.因为页面的加载几乎是顺序的载入,时间就是所有资源加载时间的总和.

  下面我们把上面的页面代码代为如下:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
    
< title > 小洋,燕洋天 </ title >

    
< script  type ="text/javascript"  src ="../demo.js" >
    
</ script >

</ head >
< body >
    
< div >
        
< img  src ="http://demo1.com/images/1.gif"   />
        
< img  src ="http://demo1.com/images/2.gif"   />
        
< img  src ="http://demo2.com/image/3.gif"   />
        
< img  src ="http://demo2.com/image/4.gif"   />
        
< img  src ="http://demo3.com/image/5.gif"   />
        
< img  src ="http://demo3/image/6.gif"   />
        
< img  src ="http://demo4.com/image/7.gif"   />
        
< img  src ="http://demo4.com/image/8.gif"   />
        
< img  src ="http://yanyangtian.cnblogs.com/image/7.gif"   />
        
< img  src ="http://yanyangtian.cnblogs.com/image/8.gif"   />
    
</ div >
</ body >
</ html >

  我们再来看看页面的加载时间图

  这就是所谓的”并行”载入了.

  比较一下两段代码的不同:其实就在img的src属性上面:

    第一段页面的代码:img的src属性都是指向一个域名的.

    第二段页面的代码:img的src属性指向了不同的域名

  这样做的结果是什么?

  请大家注意比较imgsrc的不同.

  解释之前,首先来看一个小的常识(在上篇文章中也提过):

当页面请求向服务器请求资源的时候,如果浏览器已经在客户端和服务器之前打开了一个tcp连接,而且请求的资源也在开了连接的服务器上,那么以后资源的请求就会充分的利用这个连接去获取资源. 这样也就是第一个时间图的由来.

如果请求的图片分别位于不同的服务器网站,或者那个请求的服务器网站有多个域名,那么因为浏览器就会为每一个域名去开一个tcp连接,发送http请求,这样,结果就是同时开了多tcp连接,这也是第二个时间图的由来.

  虽然说并行加载,确实使得页面的载入快了不少,但是也不是每一个图片或者其他的资源都去搞一个不同的域名,像之前的第二个并行载入图片的例子,也是让两个图片利用一个tcp连接.如果每个图片都去开一个连接,这样浏览器就开了很多个连接,也是很费资源的,而且浏览器还可能会”僵死”.而且有时还会严重的影响性能.

  所以,这是需要权衡的.

  除了上面的优化方式,还有其他的图片优化的加载方式.主要是通过减少http的请求达到优化

  大家都知道网站的一个menu菜单,有些菜单就是用图片作出来的.如

  如果上面的图片一个个载入,势必影响速度,如果开多和请求,有点得不偿失.而且图片也不是很大,那么就一次把整个menu需要的图片作为整个图片,一次加载,然后通过map的方式,控制点击图片的位置来达到导航的效果.

  这样一个问题就是:算出图片的坐标,不能点击了”主页”图片,然后却跳到了”帮助”页面了.

  本篇就讲述到这里,下篇讲述其他的资源文件的优化,希望 多多提出建议,争取把这个系列写好!

目录
相关文章
|
3天前
|
消息中间件 前端开发 小程序
一个基于.NET Core构建的简单、跨平台、模块化的商城系统
今天大姚给大家分享一个基于.NET Core构建的简单、跨平台、模块化、完全开源免费(MIT License)的商城系统:Module Shop。
|
3天前
|
开发框架 缓存 前端开发
利用Visual Basic构建高效的ASP.NET Web应用
【4月更文挑战第27天】本文探讨使用Visual Basic与ASP.NET创建高效Web应用的策略,包括了解两者基础、项目规划、MVC架构、数据访问与缓存、代码优化、异步编程、安全性、测试及部署维护。通过这些步骤,开发者能构建出快速、可靠且安全的Web应用,适应不断进步的技术环境。
|
3天前
|
存储 网络协议 Go
7天玩转 Golang 标准库之 http/net
7天玩转 Golang 标准库之 http/net
7 2
|
3天前
|
机器学习/深度学习 自然语言处理 安全
【专栏】.NET 开发:构建智能应用的关键
【4月更文挑战第29天】本文探讨了.NET开发在构建智能应用中的关键作用,强调了其强大的框架、工具集、高效性能和跨平台支持。通过实例展示了.NET在人工智能、物联网及企业级应用中的应用。同时,指出了.NET开发面临的挑战,如技术更新的学习成本、性能优化、资源管理和安全隐私保护,并提出了应对策略。随着技术进步,.NET将在智能应用领域发挥更大作用,推动创新与便利。
|
3天前
|
JSON 编解码 Go
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第25天】Go语言`net/http`包提供HTTP客户端和服务器功能,简化高性能网络应用开发。本文探讨如何发起HTTP请求,常见问题及解决策略。示例展示GET和POST请求的实现。注意响应体关闭、错误处理、内容类型设置、超时管理和并发控制。最佳实践包括重用`http.Client`,使用`context.Context`,处理JSON以及记录错误日志。通过实践这些技巧,提升HTTP编程技能。
26 1
|
3天前
|
中间件 Go API
Golang深入浅出之-Go语言标准库net/http:构建Web服务器
【4月更文挑战第25天】Go语言的`net/http`包是构建高性能Web服务器的核心,提供创建服务器和发起请求的功能。本文讨论了使用中的常见问题和解决方案,包括:使用第三方路由库改进路由设计、引入中间件处理通用逻辑、设置合适的超时和连接管理以防止资源泄露。通过基础服务器和中间件的代码示例,展示了如何有效运用`net/http`包。掌握这些最佳实践,有助于开发出高效、易维护的Web服务。
29 1
|
3天前
|
Go 开发者
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第24天】Go语言的`net/http`包在HTTP客户端编程中扮演重要角色,但使用时需注意几个常见问题:1) 检查HTTP状态码以确保请求成功;2) 记得关闭响应体以防止资源泄漏;3) 设置超时限制,避免长时间等待;4) 根据需求处理重定向。理解这些细节能提升HTTP客户端编程的效率和质量。
19 1
|
3天前
|
JavaScript
GET http://192.168.2.198:8080/sockjs-node/info?t=1626862752216 net::ERR_CONNECTION_TIMED_OUT
GET http://192.168.2.198:8080/sockjs-node/info?t=1626862752216 net::ERR_CONNECTION_TIMED_OUT
19 0
|
3天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
48 0
|
3天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
23 0