22
2020
02

css文件多大不影响到打开网页速度

基本优化方法是:

尽量减少同一域下的HTTP请求数

以及尽量减少每一个资源的体积

浏览器常常限定了对同一域名发起的并发连接数的上限。E6/7和Firefox2的设计规则是,同时只能对一个域名发起两个并发连接。新版浏览器普遍上限设定为4至8个。

把静态资源放在非主域名下,这种做法除了可以增加浏览器并发,还有一个好处是,减少HTTP请求中携带的不必要的cookie数据。cookie是某些 网站为了辨别用户身份而储存在用户浏览器中的数据。cookie的作用域是整个域名,也就是说如果某个cookie存放在www.qiquanji.com域名下,那 么对于www.qiquanji.com域名下的所有HTTP请求头都会带上cookie数据。

如果Google把所有的资源都放在www.qiquanji.com下,那么所有资源的请求都会带上cookie数据。对于静态资源来说,这是毫无必要的,因为这对带宽和链接速度都造成了影响。

前端工程师经常做的优化是合并同一域名下的资源,比如把多个CSS合并为一个CSS,或者将图片组合为CSS贴图,还有一些优化建议是省掉不必要的 HTTP请求,比如内嵌小型CSS、内嵌小型JavaScript、设置缓存,以及减少重定向。这些做法虽然各不相同,但是如果了解HTTP请求的过程, 就知道这些优化方法的最终目的都是最大化利用有限的请求数。

一个基础题目是“常用的图片格式有哪些,它们的使用场景是什么”。对图片的敏感性反映出工程师对带宽和速度的不懈追求。比较大的文本资源,必须开启gzip压缩。

对于一个CSS资源的请求耗时(两个细节):

这个CSS资源请求的体积是36.4KB(这是gzip压缩过的体积),解压缩之后,CSS内容实际上是263KB,可以算出压缩后体积是原来的13.8%。

整个连接的建立花费了30%的时间,发出请求到等待收到第一个字节回复花费了20%的时间,下载CSS资源的内容花费了50%的时间。

原文链接:https://www.qiquanji.com/post/7576.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。