上海网站建设
上海网站建设 网启科技手机版 网启科技腾讯微博 网启科技新浪微博
 
                   
上海做网站
建站常识 建站知识    SEO优化常识    常见问题    行业动态  

大型网站优化技术:减少HTTP请求

发布日期:2015-12-08    【打印】    【返回
在网站开发过程中,对于页面的加载效率一般都想尽办法求快。那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法。上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”,那么,这一篇博文将讲解  “ 将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片”。

一、为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片的方法减少HTTP请求数?

为什么我会讲解 “将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片” 这一种方式来减少HTTP请求,进而优化页面呢?这里呢,是涉及到移动端的图标使用。上一篇博文所讲的方法能否使用于手机端的网页呢?

但是,它会出现一个问题:背景图+css显示图标时,图标本身无法缩放,比如背景图中64px*64px的图标,显示到界面时必须设置icon的大小也是64*64。在PC网页中这通常不会有什么问题,但在移动端设备上就完全行不通。同样是4英寸的手机屏幕,其分辨率有可能是320*400,也可能是640*800,甚至也可能是1920*1080。这样64px*64px的图标在不同的设备上看起来的大小就会差别非常明显。

幸运的是,手机上的浏览器基本对此做了优化,会把设备模拟成更低的分辨率。比如在1136*640的IPHONE 5中获取$(window).width(),取出来的是320而不是640,这样一个宽度为160px的图片占用的是屏幕宽度的一半,而不是1/4。手机设备这样处理是为了解决兼容性问题。除了网页,包括手机上app的界面,在retina屏幕上和非retina屏幕上的大小是完全一样的,都是因为对分辨率做了处理。

但是,移动设备这样的处理方式并不能完全解决问题,因为机器的假设性猜测在很多时候是不合适的,尤其是在android设备中。为了更好地控制元素显示的大小,解决的办法就是用pt代替ps,px是对应屏幕的分辨率,而pt是针对人眼睛实际感觉的大小,无论在何种分辨率的设备上,72pt固定是1英寸。

HTML的img标签元素的src属性不只是可以指定url,也可以指定图片的二进制数据流。然后通过img元素的自动缩放功能,指定img的大小,就可以实现在不同分辨率的设备上显示一致的图标大小。

二、使用Base64编码减少页面请求数

当我们的一个页面中要传入很多图片时,特别是一些小图标,十几K、几K,甚至是字节级别大小的小图标,这些小图标都会增加HTTP请求,假如多了,就会给服务器带来很大的压力。比如要下载一些一两K大的小图标,其实请求时带上的额外信息有可能比图标的大小还要大。所以,在请求越多时,在网络传输的数据自然就越多了,传输的数据自然也就变慢了。而这里,我们采用Base64的编码方式将图片直接嵌入到网页中,而不是从外部载入,这样就减少了HTTP请求。当然了,它有一个小缺点,就是使当前页面的大小变大了(对于优化来说,其实这个可以忽略,影响不大)。看一下下图,小图标大小为2.4k,等待响应时间是14ms,而接受数据,也就是下载时间约为0ms;可想而知,在有大量小图标下载的时候,这样的方式去优化能大大提高网站的性能(在jquery mobile和天猫的手机站上面都有用到此技术)。
网启新闻 更多>>
关于开展2015年度第二次备案信息抽...
近期有不法人员冒充我公司人员进行...
关于近期收到网站备案信息不真实,...
关于收到中文域名续费通知的谨防诈...
关于已备案信息核查的紧急通知
关于网上亮照相关事宜
关于做好网站公安备案的通知
联系我们
上海网站建设
上海网启网络科技有限公司
地址:上海市曹安公路2698号
        (沪宁汽配城4楼)
电话:021-39519306
业务:孙先生  13774420506
         姬先生  13671787304
业务咨询: 点击这里给我发消息 点击这里给我发消息
技术支持: 点击这里给我发消息 点击这里给我发消息
关于我们 网站建设 技术交流 空间域名 企业邮箱 联系我们
公司简介
网启新闻
公司文化
经济型
专业型
品牌型
门户商城
建站知识
SEO优化
常见问题
行业动态
空间购买
域名购买
备案材料
M 邮箱
G 邮箱
集团邮
海外邮
联系方式
付款方式
帮助中心
给我留言
Copyright 2010-2020 © 上海网启网络科技有限公司 All Rights Reserved
电话:021-39519306  
地址:上海市曹安公路2698号沪宁汽配城4楼
邮箱:kf01#57keji.com  kf02#57keji.com  请将#替换为@
建议您浏览本网站时使用IE8.0及以上、webkit核心浏览器,分辨率为1024*768及以上