其他教程

其他教程

Products

当前位置:首页 > 其他教程 >

前端性能优化 - 静态资源合并与压缩减少HTTP请求

GG网络技术分享 2025-03-18 16:14 0


大家好,这里是关于[浏览器浏览网页同域名的最大并发数],[前端性能优化 - 静态资源合并与压缩减少HTTP请求]问题的解答,希望对您有所帮助。如果你还想了解更多这方面的信息,请关注本站其他相关内容,共同学习吧!

浏览器浏览网页同域名的最大并发数

教程大全浏览器并发连接数

浏览器浏览网页同域名的最大并发数

当我们在浏览网页的时候,对浏览速度有一个重要的影响因素,就是浏览器的并发数量。并发数量简单通俗的讲就是,当浏览器网页的时候同时工作的进行数量。

如果同时只有2个并发连接数数量,那网页打开的时候只能依赖于这2条线程,前面如果有打开慢的内容,就会直接影响到后面的内容打开。但是如果同时有更多的并发连接数,这样就会大大的提高网页加载速度。详情可查看我们之前发布的文章:并发连接数对浏览器加载速度的测试。浏览器的并发连接数也并非越大越好。

下表概括了基于主机上运行的IE浏览器的版本的最大并发连接数、主机的连接速度和服务器的受支持的协议版本。

1,HTTP客户端一般对同一个服务器的并发连接个数都是有限制的。

实际上,浏览器确实使用并行连接,但它们将并行连接的总数限制为少量(通常为四个)。服务器可以自由地关闭来自特定客户端的过多连接。

2,一些主流浏览器对HTTP 1.1和HTTP 1.0的最大并发连接数目,可以参考如下表格:

假定一个浏览器的并发连接请求数为10,通常同一时间内会有多个用户并发访问网站。又考虑到,一个Http连接请求在同一时间只能被一个线程访问。

所以,IHS服务器的httpd.conf里的maxclients(允许建立的总线程数)要能够处理峰值时刻的浏览器连接请求才行。

同时,考虑不是所有的连接请求都会到was server,有的连接只是为了在web服务器上取静态资源,所以,was上的线程池数目(Thread pools :50 )会远小于IHS server上的maxclients值譬如400)。

浏览器HTTP / 1.1HTTP / 1.0
IE 1166
IE 1066
IE 91010
IE 866
IE 6,724
火狐66
Safari 3,444
Chrome 4+66
歌剧9.63,10.00alpha44
Opera 10.51+8null
iPhone 24null
iPhone 36null
iPhone 44null
iphone 56null
Android2-44null

前端性能优化 - 静态资源合并与压缩减少HTTP请求

对于前端性能优化方法有很多,包括:图片合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩,给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。

在介绍这个项目之前,先问大家一个问题,大家知道一个浏览器同域名请求的最大并发数限制是多少吗?

在早期的浏览器有的是2个、有的是4个,现在市面主流的浏览器一般限制数量是6个,手机一般是4个。虽然每个浏览器限制数量不一样,但我们知道的是,当一个页面同时发起过多的请求,肯定会导致部分请求在等待的

所以,我们压缩和合并静态资源请求数量,对于我们优化性能肯定有好处的。


项目简介

这是一个基于.Net Core开发的,实现压缩Css、Javascript、Html资源的压缩、合并功能的组件。通过这个组件我们就可以实现静态资源的捆绑,实现对js、css、less、scss等静态资源的自动打包捆绑处理。

通过将多个文件合并成了一个文件,减少浏览器的请求从而实现提升网站的访问性能的需求。

特点:

1、Js压缩:进行去掉空格,换行,注释等,格式紧凑,内部方法匿名化,节约存储空间。

2、Css压缩:去掉空格,换行,注释等,格式紧凑,节约存储空间。

3、Html压缩:压缩效果可以实现5-10%的压缩,删除助手、折叠空白、删除可选标记(p、li…)、删除引用的属性、删除特定属性、解码HTML实体、压缩内联样式和脚本;支持Html5。


技术架构

1、平台:基于.Net Core 4.5、Netstandard2.0开发

2、开发工具:Visual Studio 2017


项目结构


使用方法

Js文件压缩

var result = Uglify.Js("var x = 5; var y = 6;");

Console.WriteLine(result.Code);

// prints: var x=5,y=6


Css文件压缩

var result = Uglify.Css("div { color: #FFF; }");

Console.WriteLine(result.Code);

// prints: div{color:#fff}


Html文件压缩

var result = Uglify.Html("<div> <p>This is <em> a text </em></p> </div>");

Console.WriteLine(result.Code);

//prints:<div><p>Thisis<em>atext</em></div>


文本解析Html

var result = Uglify.HtmlToText("<div> <p>This is <em> a text </em></p> </div>");

Console.WriteLine(result.Code);

// prints: This is a text


Js、Css文件合并请求示例

app.UseBundling(bundles =>

{

bundles.LoadFromConfigFile("/bundleconfig.json", _env.ContentRootFileProvider); // 如果你需要对Bundle Minifier的配置也进行处理

bundles.AddCss("/main.css") // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名

.Include("/Content/bootstrap.min.css")

.Include("/fonts/icomoon.min.css")

.Include("/Content/jquery.paging.css")

.Include("/Content/common/reset.css")

.Include("/Content/common/loading.css")

.Include("/Content/common/style.css")

.Include("/Content/common/articlestyle.css")

.Include("/Content/common/leaderboard.css")

.Include("/Content/microtip.min.css")

.Include("/Assets/breadcrumb/style.css")

.Include("/Assets/nav/css/style.css")

.Include("/Assets/tippy/tippy.css");

bundles.AddJs("/main.js") // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名

.Include("/Scripts/bootstrap.min.js")

.Include("/Scripts/bootstrap-suggest.min.js")

.Include("/Scripts/jquery.query.js")

.Include("/Scripts/jquery.paging.js")

.Include("/Scripts/ripplet.js")

.Include("/Scripts/global/scripts.js")

.Include("/Assets/tippy/tippy.js")

.Include("/Assets/newsbox/jquery.bootstrap.newsbox.js")

.Include("/Assets/tagcloud/js/tagcloud.js")

.Include("/Assets/scrolltop/js/scrolltop.js")

.Include("/Assets/nav/js/main.js");

});


最后,对于提升网站性能虽然非常重要,但合并文件如果太大,也是会影响性能的。另外采用合并中间件,对于开发的时候需要编写额外的代码、相对于原生的写法比较不直观,所以在优化性能的同时,我们也要找到一个平衡点,而不是一味的追求性能优化。


源码获取

私信回复:1070

- End -

推荐阅读

  • 推荐一个简单、灵活、好看、强大的 .Net 图表库
  • 推荐基于.NET 6.0开发的开源访客系统
  • 基于Asp.Net Mvc开发的个人博客系统
  • 一个基于.Net Core遵循Clean Architecture原则开源架构
  • .Net开发的跨平台Word模板引擎
  • 一个基于.Net Core跨平台小程序考试系统

标签: 小程序

提交需求或反馈

Demand feedback