斯诺克图文直播间
目录大全 免费收录各类优秀网站,快速提升网站流量,支持QQ登录,立即快审业务。
友情提示:本站支持 QQ一键登录、积分扫码充值、网站自助快审、文章自助快审。 注:不接受非法网站和文章。
您现在的位置:首页 > 站长咨询 > 网站 > 文章内容 > 大型网站优化技术:减少HTTP请求

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

作者: 发布时间:2015-12-13 22:36 浏览:

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

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

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

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

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

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

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

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

当我们的一个页面中要传入很多图片时,特别是一些小图标,十几K、几K,甚至是字节级别大小的小图标,这些小图标都会增加HTTP请求,假如多了,就会给服务器带来很大的压力。比如要下载一些一两K大的小图标,其实请求时带上的额外信息有可能比图标的大小还要大。所以,在请求越多时,在网络传输的数据自然就越多了,传输的数据自然也就变慢了。而这里,我们采用Base64的编码方式将图片直接?#24230;?#21040;网页中,而不是从外部载入,这样就减少了HTTP请求。?#27604;?#20102;,它有一个小缺点,就是使当前页面的大小变大了(对于优化来说,其实这个可以忽略,影响不大)。看一下下图,小图标大小为2.4k,等待响应时间是14ms,而接受数据,也就是下载时间约为0ms;可想而知,在有大量小图标下载的时候,这样的方式去优化能大大提高网站的性能(在jquery mobile和天猫的手机站上面?#21152;?#29992;到此技术)。

三、开发思路

将小图标放在以icon_开头的文件夹里(以区分不用生成base64的图片的文件夹)—>用程序去遍历文件?#22411;?#29255; —>将每张图片的base64编码放在一个js对象里—>在HTML页面的img标签里 使用属性 icon-data = ‘图标名(不带后缀)’来显示图片 —> JS文件写一个函数对icon-data属性进行转换,转换成src属性,然后值就通过icon-data的属性值获得图标名,然后进行相应的替换得到相应图标的base64编码 —> 显示图片

四、代码实现

<?php

    $pathinfo=pathinfo($_SERVER['SCRIPT_FILENAME']);

    define('ROOT',$pathinfo['dirname']);

 

    functiongenerateIcon_mobile(){

        $imgRoot=ROOT."/img/mobile";

        $iterator=newDirectoryIterator($imgRoot);

        foreach($iteratoras$file){

            if($file->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/ */ \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'<p>'.$iconSaveRelative.' saved</p>';  

    }

 

    /**

    * 确保文件夹存在并可写

    *

    * @param string $dir

    */

    functionensure_writable_dir($dir){

        if(!file_exists($dir)){

            mkdir($dir,0766,true);

            @chmod($dir,0766);

            @chmod($dir,0777);

        }

        elseif(!is_writable($dir)){

            @chmod($dir,0766);

            @chmod($dir,0777);

            if(!@is_writable($dir)){

                thrownewBusinessLogicException("目录不可写",$dir);

            }

        }

    }

    generateIcon_mobile();

?>

 

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<br>

<br>

<br>

 

<div>我们直接引入所生成的js文件,测试一?#29575;?#21542;成功</div>

<br>

<div>直接在img标签里加入 icon-data = '图标文件名'  例如  <\img icon-data="tryit">,查看效果</div>

<br>

<br>

<br>

    <img icon-data="tryit">

    <script src="js/mobile/icon_pink.js"></script>

    <script src="js/mobile/jquery.all.min.js"></script>

    <script src="js/mobile/attrHandle.js"></script>

</body>

</html>

然后这里附上属性转换的JS代码

$(function(){

    setIconData();

});

 

functionsetIconData(){

    if(typeof($iconData!='undefined')){

        $('img[icon-data]').each(function(){

            varself=$(this);

            varname=self.attr('icon-data');

            if(typeof($iconData[name])!='undefined'){

                self.attr('src',$iconData[name]);

                self.removeAttr('icon-data');

            }

        });

    }

}



    (0)

    有用!

    100%
    (0)

    无用!

    100%
    关键词: android,网站优化,浏览器,网站开发,IPHONE

    评论一下

    斯诺克图文直播间
    亿乐彩网址 6169彩票安卓 重庆时时彩龙虎赚钱 万家彩票苹果 湖北25选5开奖结果查询 多乐彩票诈骗视频 六合乾坤 龙猫游戏真能赚钱吗 网上的棋牌是不是假的 十三水玩法技巧