德州业务推广淘汰HTTP请求对百度排名有什么影响

幸运的是，手机上的欣赏器根基对此做了优化，会把设备模仿成更低的判别率。好比在1136*640的IPHONE 5中获取$(window).width(),取出来的是320而不是640，这样一个宽度为160px的图片占用的是屏幕宽度的一半，而不是1/4。手机设备这样处理惩罚是为了办理兼容性问题。除了网页，包罗手机上app的界面，在retina屏幕上和非retina屏幕上的巨细是完全一样的，都是因为对判别率做了处理惩罚。

可是，它会呈现一个问题：配景图+css显示图标时，图标自己无法缩放，好比配景图中64px*64px的图标，显示到界面时必需配置icon的巨细也是64*64。在PC网页中这凡是不会有什么问题，但在移动端设备上就完全行不通。同样是4英寸的手机屏幕，济南百度快照推广，其判别率有大概是320*400，也大概是640*800，甚至也大概是1920*1080。这样64px*64px的图标在差异的设备上看起来的巨细就会不同很是明明。

'.$iconSaveRelative.' saved

当我们的一个页面中要传入许多图片时，出格是一些小图标，十几K、几K，甚至是字节级别巨细的小图标，这些小图标城市增加HTTP请求，如果多了，就会给处事器带来很大的压力。好比要下载一些一两K大的小图标，其实请求时带上的特别信息有大概比图标的巨细还要大。所以，在请求越多时，在网络传输的数据自然就越多了，传输的数据自然也就变慢了。而这里，我们回收Base64的编码方法将图片直接嵌入到网页中，而不是从外部载入，这样就淘汰了HTTP请求。虽然了，它有一个小缺点，就是使当前页面的巨细变大了(对付优化来说，其实这个可以忽略，影响不大)。看一下下图，小图标巨细为2.4k，期待响应时间是14ms，而接管数据，也就是下载时间约为0ms;可想而知，在有大量小图标下载的时候，这样的方法去优化能大大提高网站的机能(在jquery mobile和天猫的手机站上面都有用到此技能)。

可是，移动设备这样的处理惩罚方法并不能完全办理问题，因为呆板的假设性揣摩在许多时候是不符合的，尤其是在android设备中。为了更好地节制元素显示的巨细，办理的步伐就是用pt取代ps，px是对应屏幕的判别率，而pt是针对人眼睛实际感受的巨细，无论在何种判别率的设备上，72pt牢靠是1英寸。

HTML的img标签元素的src属性不可是可以指定url，也可以指定图片的二进制数据流。然后通过img元素的自动缩放成果，指定img的巨细，就可以实此刻差异判别率的设备上显示一致的图标巨细。

将小图标放在以icon_开头的文件夹里(以区分不消生成base64的图片的文件夹)—>用措施去遍历文件夹图片 —>将每张图片的base64编码放在一个js工具里—>在HTML页面的img标签里 利用属性 icon-data = ‘图标名(不带后缀)’来显示图片 —> JS文件写一个函数对icon-data属性举办转换，转换成src属性，然后值就通过icon-data的属性值得到图标名，然后举办相应的替换获得相应图标的base64编码 —> 显示图片

淘汰HTTP请求对百度排名有什么影响？在网站开拓进程中，对付页面的加载效率一般都想尽步伐求快。那么，怎么让才气更快呢?淘汰页面请求是一个优化页面加载速度很好的要领。上一篇博文我们讲授了 “操作将小图标合成一张配景图来淘汰HTTP请求”，那么，这一篇博文将讲授 “将图片转成二进制并生成Base64编码,可以在网页中通过url查察图片”。

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));//写入，初始化生存数据的工具fwrite($wirteHandle,"/** icon in dir: $iconSaveRelative/ */ if(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," $iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";");}//后换个行fwrite($wirteHandle," ");//封锁资源fclose($wirteHandle);//处理惩罚乐成的图标文件夹给以提示echo'

四、代码实现

三、开拓思路

一、为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查察图片的要领淘汰HTTP请求数?

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

文章名称：德州业务推广淘汰HTTP请求对百度排名有什么影响
本文URL：/news31/234681.html

成都网站建设公司_创新互联，为您提供软件开发、App开发、网站设计、用户体验、电子商务、外贸建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联