asp.net打包多CSS或JS文件以加快页面加载速度

使用许多小得JS、CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好的实践。但这样做反过来却损失了网站的性能。虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求。每一个HTTP请求将导致从你的浏览器到服务器上的一次“往返”,从响应服务器到客户端浏览器之间的等待时间称之为“延时”。因此,如果你有四个JS文件以及三个CSS文件需要被页面加载,你将要等待七次网络上的“往返”。在本国内,延时平均为70ms。所以总延时为490ms,大概半秒钟。而来自国外的访问,平均延时大概在200ms左右。因此,那意味着1400ms的时间浪费。而直到CSS与JS文件被完全加载,页面才会被完全地显示出来。所以,越长时间的延时,页面加载地越慢。

延时有多糟糕

这里有一张图片显示了,每一个请求怎样产生了“延时”,这些“延时”累加起来显著地影响了页面的加载:

asp.net打包多CSS或JS文件以加快页面加载速度_第1张图片

你可以通过使用CDN(Content Delivery Network)来减少等待时间。然而,一个更好的解决方案是使用HttpHandler提供多个文件的一次请求,该HttpHandler整合了数个文件并且提供了一次输出。所以,代之以许多的或者标签,你只需要写一个以及标签,并将它们标记在HttpHandler中。由你来告诉handler哪些文件需要被整合,并且它提供了哪些文件的一次输出。这省去了从浏览器发出许多请求产生的延时。

asp.net打包多CSS或JS文件以加快页面加载速度_第2张图片


这里你能看到如果你把多个JS文件以及CSS文件整合到一个输出里,有怎样的性能提升。

在通常的网页中,你将看到很多的JS引用:

asp.net打包多CSS或JS文件以加快页面加载速度_第3张图片


而我们可以仅用一个

你可能感兴趣的:(asp.net打包多CSS或JS文件以加快页面加载速度)