迈克·鲍威尔:减少HTTP请求对百度排名影响

  迈克·鲍威尔:减少HTTP请求对baidu排名有甚么影响?在网站开发过程当中,关于页面的加载效力一般都想尽方法求快。那末,怎样让才能更快呢?减少页面请求是一个优化页面加载速度很好的办法。

  减少HTTP请求对baidu排名有甚么影响?在网站开发过程当中,关于页面的加载效力一般都想尽方法求快。那末,怎样让才能更快呢?减少页面请求是一个优化页面加载速度很好的办法。上一篇博文我们解说了 “应用将小图标分解一张背景图来减少HTTP请求”,那末,这一篇博文将解说 “将图片转成二进制并生成Base64编码,可以在网页中经过url检查图片”。

  1、为什么选择将图片转成二进制并生成Base64编码,可以在网页中经过url检查图片的办法减少HTTP请求数?

  为何我会解说 “将图片转成二进制并生成Base64编码,可以在网页中经过url检查图片” 这一种方法来减少HTTP请求,进而优化页面呢?这里呢,是触及到Mobile真个图标运用。上一篇博文所讲的办法可否运用于手机真个网页呢?

  可是,它会出现一个问题:背景图+css显示图标时,图标自身没法缩放,比方背景图中64px*64px的图标,显示到界面时必需设置icon的大小也是64*64。在PC网页中这大部分不会有甚么问题,但在Mobile端装备上就完整行欠亨。异样是4英寸的手机屏幕,其辨别率有多是320*400,也多是640*800,乃至也多是1920*1080。这样64px*64px的图标在不一样的装备上看起来的大小就会差异十分分明。

  幸运的是,手机上的阅读器根本对此做了优化,会把装备模仿成更低的辨别率。比方在1136*640的IPHONE 5中获得$(window).width(),掏出来的是320而不是640,这样一个宽度为160px的图片占用的是屏幕宽度的一半,而不是1/4。手机装备这样处置是为了处理兼容性问题。除网页,包含手机上app的界面,在retina屏幕上和非retina屏幕上的大小是完整一样的,都是由于对辨别率做了处置。

  可是,Mobile装备这样的处置方法其实不能完整处理问题,由于机械的假定性猜想在非常多时候是分歧适的,特别是在android装备中。为了更好地把持元素显示的大小,处理的方法就是用pt替代ps,px是对应屏幕的辨别率,而pt是针对人眼睛实践感觉的大小,不管在何种辨别率的装备上,72pt固定是1英寸。

  HTML的img标签元素的src属性不只是可以指定url,也能够指定图片的二进制data流。然后经过img元素的主动缩放功能,指定img的大小,就能够完成在不一样辨别率的装备上显示一致的图标大小。

  2、运用Base64编码减少页面请求数

  当我们的一个页面中要传入非常多图片时,特殊是一些小图标,十几K、几K,乃至是字节级别大小的小图标,这些小图标都会增加HTTP请求,假设多了,就会给Server带来很大的压力。比方要下载一些一两K大的小图标,实在请求时带上的额定信息有可能比图标的大小还要大。所以,在请求越多时,在网络传输的data天然就越多了,传输的data天然也就变慢了。而这里,我们采取Base64的Coding方式将图片直接嵌入到网页中,而不是从外部载入,这样就减少了HTTP请求。固然了,它有一个小缺陷,就是使以后页面的大小变大了(关于优化来讲,实在这个可以疏忽,影响不大)。看一下下图,小图标大小为2.4k,等候呼应时间是14ms,而承受data,也就是下载时间约为0ms;可想而知,在有大量小图标下载的时候,这样的方法去优化能大大提升网站的功能(在jquery mobile和天猫的手机站上面都有效到此技术)。

  3、开发思绪

  将小图标放在以icon_扫尾的文件夹里(以辨别不必生成base64的图片的文件夹)—>用程序去遍历文件夹图片 —>将每张图片的base64编码放在一个js工具里—>在HTML页面的img标签里 运用属性 icon-data = ‘图标名(不带后缀)’来显示图片 —> JS文件写一个函数对icon-data属性实行转换,转换成src属性,然后值就经过icon-data的属性值取得图标名,然落后行相应的交换获得相应图标的base64编码 —> 显示图片

  4、代码完成

  isDot())continue;$filename=$file->getFilename();//辨认出是不是以icon_扫尾的文件夹,假如是,则对此文件夹的图标实行base64编码处置if($file->isDir()&&0===strncasecmp(‘icon_’,$filename,5)){generateIconMobileCallback(“$imgRoot/$filename”,ROOT.”/js/mobile”);}}}functiongenerateIconMobileCallback($iconDir,$styleSaveDir){//保管成js的文件名$saveName=array_pop(explode(‘/’,$iconDir));//JS文件保管途径$styleSavePath=$styleSaveDir.’/’.$saveName.’.js’;//将以后目次下的一切文件及MD5构成一个辨认字符串$fileMap=array();$iterator=newDirectoryIterator($iconDir);foreach($iteratoras$file){if($file->isDot())continue;$fileName=$file->getFilename();if($file->isDir()){generateIconMobileCallback($iconDir.’/’.$fileName,$styleSaveDir.’/’.$fileName);}else{$fileMap[$fileName]=md5_file($file->getRealPath());}}ksort($fileMap);$fileMapStr=json_encode($fileMap);//确保目次可写ensure_writable_dir($styleSaveDir);//js文件句柄$wirteHandle=fopen($styleSavePath,’w’);//以后小图标文件夹的绝对途径$iconSaveRelative=substr($iconDir,strlen(ROOT));//写入,初始化保管data的工具fwrite($wirteHandle,”/** icon in dir: $iconSaveRelative/ */ \nif(typeof(\$iconData) == ‘undefined’) \$iconData={};”);foreach($fileMapas$fileName=>$md5){//以后图片的绝对途径$fullPathName=”$iconDir/$fileName”;//获得途径信息$pathInfo=pathinfo($fullPathName);//获得文件名(没有后缀)$fileNameNoExt=$pathInfo[‘filename’];//获得图片信息$imageSize=getimagesize($fullPathName);//获得文件的后缀switch($imageSize[2]){caseIMAGETYPE_GIF:$imageType=’gif’;break;caseIMAGETYPE_JPEG:$imageType=’jpg’;break;caseIMAGETYPE_PNG:$imageType=’png’;break;default:$imageType=’jpg’;break;}//获得图片资本$readHandle=fopen($fullPathName,’r’);//将图片转成二进制并生成Base64编码$base64=base64_encode(fread($readHandle,filesize($fullPathName)));//封闭资本fclose($readHandle);//将Base64编码写入js文件中fwrite($wirteHandle,”\n\$iconData.$fileNameNoExt=\”data:image/$imageType;base64,$base64\”;”);}//后换个行fwrite($wirteHandle,”\n”);//封闭资本fclose($wirteHandle);//处置成功的图标文件夹赐与提醒echo’

  ’.$iconSaveRelative.’ saved

未经允许不得转载:SEO教程网 » 迈克·鲍威尔:减少HTTP请求对百度排名影响

评论 0

评论前必须登录!

登陆 注册