您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:重型网址优化技能,请求的方案

新葡亰496net:重型网址优化技能,请求的方案

发布时间:2019-06-18 08:30编辑:新葡亰官网浏览(178)

    减去HTTP请求(大型网址优化技艺)

    2015/11/26 · HTML5 · HTTP

    最初的作品出处: Kelly   

    在网址开辟进度中,对于页面包车型客车加载功用一般都想尽办法求快。那么,怎么让本事更加快吗?减弱页面请求 是一个优化页面加载速度很好的法子。上一篇博文大家讲课了 “利用将小图标合成一张背景图来压缩HTTP请求”,那么,这一篇博文将教授  “ 将图片转成二进制并生成Base64编码,能够在网页中经过url查看图片”。

    一、为什么选拔将图纸转成二进制并生成Base64编码,能够在网页中经过url查看图片的法子裁减HTTP请求数?

    何以作者会批注“将图纸转成二进制并生成Base64编码,能够在网页中通过url查看图片” 这一种情势来压缩HTTP请求,进而优化页面吗?这里呢,是关联到运动端的Logo使用。上一篇博文所讲的方法是不是选拔于手提式有线话机端的网页呢?

    但是,它会冒出叁个标题:背景图 css展现Logo时,Logo本身不可能缩放,比方背景图中64px*64px的Logo,显示到分界面时务必设置icon的分寸也是64*64。在PC网页中这一般不会有何样难点,但在运动端设备上就全盘没用。同样是4英寸的手提式有线电电话机荧屏,其分辨率有望是320*400,也大概是640*800,乃至也说不定是1919*1080。这样64px*64px的Logo在差别的设施上看起来的轻重缓急就能距离十分显眼。

    侥幸的是,手提式有线电话机上的浏览器基本对此做了优化,会把器具模拟成更低的分辨率。举个例子在1136*640的IPHONE 5中拿走$(window).width(),收取来的是320而不是640,那样三个宽度为160px的图形占用的是显示器宽度的八分之四,而不是半数。手提式有线电话机配备这么管理是为了消除包容性难题。除了网页,包涵手提式有线电话机上app的分界面,在retina显示器上和非retina显示屏上的大大小小是截然一致的,都以因为对分辨率做了管理。

    而是,移动设备这么的管理格局并不可能一心减轻难题,因为机器的如果性猜度在大多时候是不确切的,特别是在android设备中。为了更加好地调控元素显示的高低,化解的格局正是用pt取代ps,px是对应荧屏的分辨率,而pt是针对人眼睛实在感觉的轻重缓急,无论在何种分辨率的配备上,72pt固定是1英寸。

    HTML的img标签成分的src属性不只是足以钦点url,也足以钦点图片的二进制数据流。然后通过img成分的全自动缩放作用,钦赐img的大大小小,就足以兑未来不一致分辨率的装置上彰显同一的Logo大小。

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

    当大家的三个页面中要传播许多图形时,特别是有个别小Logo,十几K、几K,乃至是字节品级大小的小Logo,那个小图标都会大增HTTP请求,假若多了,就能够给服务器带来相当的大的下压力。比如要下载一些一两K大的小Logo,其实请求时带上的附加音讯有非常大可能率比Logo的轻重缓急还要大。所以,在央浼越来越多时,在网络传输的数额自然就更加多了,传输的多少自然也就变慢了。而这里,大家选取Base64的编码格局将图纸直接嵌入到网页中,而不是从外部载入,这样就减弱了HTTP请求。当然了,它有多少个小瑕疵,正是使前段时间页面的高低变大了(对于优化来讲,其实这一个可以忽略,影响比异常的小)。看一下下图,小Logo大小为2.4k,等待响应时间是14ms,而接受多少,也正是下载时间约为0ms;同理可得,在有大气小图标下载的时候,这样的方法去优化能大大进步网址的性质(在jquery mobile和天猫商城的手提式有线电电话机站下边都有用到此手艺)。

    新葡亰496net 1

    三、开采思路

    将小Logo放在以icon_开班的公文夹里(以分别不用生成base64的图形的文件夹)—>用程序去遍历文件夹图片 —>将每张图片的base64编码放在三个js对象里—>在HTML页面包车型客车img标签里 使用质量 icon-data = ‘Logo名(不带后缀)’来体现图片 —> JS文件写一个函数对icon-data属性进行改换,转变来src属性,然后值就因此icon-data的属性值获得Logo名,然后开始展览对应的轮换获得相应Logo的base64编码 —> 展现图片

    四、代码完成

    XHTML

    <?php $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']); define('ROOT', $pathinfo['dirname']); function generateIcon_mobile() { $imgRoot = ROOT."/img/mobile"; $iterator = new DirectoryIterator($imgRoot); foreach ($iterator as $file) { if ($file->isDot()) continue; $filename = $file->getFilename(); //识别出是或不是以icon_发轫的文本夹,若是是,则对此文件夹的Logo举行base64编码管理if ($file->isDir() && 0 === strncasecmp('icon_', $filename, 5)) { generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile"); } } } function generateIconMobileCallback($iconDir, $styleSaveDir) { //保存成js的公文名 $saveName = array_pop(explode('/', $iconDir)); //JS文件保留路线 $styleSavePath = $styleSaveDir.'/'.$saveName.'.js'; //将当前目录下的全部文件及MD5组成贰个分辨字符串 $fileMap = array(); $iterator = new DirectoryIterator($iconDir); foreach ($iterator as $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'); //当前小Logo文件夹的相对路线$iconSaveRelative = substr($iconDir, strlen(ROOT)); //写入,开首化保存数据的靶子 fwrite($wirteHandle, "/** icon in dir: $iconSaveRelative/ */ nif(typeof($iconData) == 'undefined') $iconData={};"); foreach ($fileMap as $fileName => $md5) { //当前图片的相对路线 $fullPathName = "$iconDir/$fileName"; //猎取路线消息 $pathInfo = pathinfo($fullPathName); //猎取文件名(未有后缀) $fileNameNoExt = $pathInfo['filename']; //获得图片音信 $imageSize = getimagesize($fullPathName); //取得文件的后缀 switch ($imageSize[2]) { case IMAGETYPE_GIF: $imageType = 'gif'; break; case IMAGETYPE_JPEG: $imageType = 'jpg'; break; case IMAGETYPE_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); //管理成功的Logo文件夹给予提醒 echo '<p>'.$iconSaveRelative. ' saved</p>'; } /** * 确认保障文件夹存在并可写 * * @param string $dir */ function ensure_writable_dir($dir) { if(!file_exists($dir)) { mkdir($dir, 0766, true); @chmod($dir, 0766); @chmod($dir, 0777); } else if(!is_writable($dir)) { @chmod($dir, 0766); @chmod($dir, 0777); if(!@is_writable($dir)) { throw new BusinessLogicException("目录不可写", $dir); } } } generateIcon_mobile(); ?> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <br> <br> <br> <div>大家直接引进所生成的js文件,测试一下是还是不是中标</div> <br> <div>直接在img标签里投入 icon-data = 'Logo文件名' 例如<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>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    <?php
        $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']);
        define('ROOT', $pathinfo['dirname']);
     
        function generateIcon_mobile() {
            $imgRoot = ROOT."/img/mobile";
            $iterator = new DirectoryIterator($imgRoot);
            foreach ($iterator as $file) {
                if ($file->isDot()) continue;
                $filename = $file->getFilename();
     
                //识别出是否以icon_开头的文件夹,如果是,则对此文件夹的图标进行base64编码处理
                if ($file->isDir() && 0 === strncasecmp('icon_', $filename, 5)) {
                    generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile");
                }
            }
     
        }
     
        function generateIconMobileCallback($iconDir, $styleSaveDir) {
            //保存成js的文件名
            $saveName = array_pop(explode('/', $iconDir));
            //JS文件保存路径
            $styleSavePath = $styleSaveDir.'/'.$saveName.'.js';
     
            //将当前目录下的所有文件及MD5组成一个识别字符串
            $fileMap = array();
            $iterator = new DirectoryIterator($iconDir);
            foreach ($iterator as $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 ($fileMap as $fileName => $md5) {
                //当前图片的绝对路径
                $fullPathName = "$iconDir/$fileName";
                //取得路径信息
                $pathInfo = pathinfo($fullPathName);
                //取得文件名(没有后缀)
                $fileNameNoExt = $pathInfo['filename'];
                //取得图片信息
                $imageSize = getimagesize($fullPathName);
     
                //取得文件的后缀
                switch ($imageSize[2]) {
                    case IMAGETYPE_GIF:
                        $imageType = 'gif';
                        break;
                    case IMAGETYPE_JPEG:
                        $imageType = 'jpg';
                        break;
                    case IMAGETYPE_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
        */
        function ensure_writable_dir($dir) {
            if(!file_exists($dir)) {
                mkdir($dir, 0766, true);
                @chmod($dir, 0766);
                @chmod($dir, 0777);
            }
            else if(!is_writable($dir)) {
                @chmod($dir, 0766);
                @chmod($dir, 0777);
                if(!@is_writable($dir)) {
                    throw new BusinessLogicException("目录不可写", $dir);
                }
            }
        }
        generateIcon_mobile();
    ?>
     
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <br>
    <br>
    <br>
     
    <div>我们直接引入所生成的js文件,测试一下是否成功</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代码

    JavaScript

    $(function(){ setIconData(); }); function setIconData() { if (typeof($iconData != 'undefined')) { $('img[icon-data]').each(function() { var self = $(this); var name = self.attr('icon-data'); if (typeof($iconData[name]) != 'undefined') { self.attr('src', $iconData[name]); self.removeAttr('icon-data'); } }); } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $(function(){
        setIconData();
    });
     
    function setIconData() {
        if (typeof($iconData != 'undefined')) {
            $('img[icon-data]').each(function() {
                var self = $(this);
                var name = self.attr('icon-data');
                if (typeof($iconData[name]) != 'undefined') {
                    self.attr('src', $iconData[name]);
                    self.removeAttr('icon-data');
                }
            });
        }
    }

     

    五、实现效益

      那是页面输入效果,小图标正常展现出来了

     

    新葡亰496net 2

     

    这里大家自动生成的JS文件是那样子的格式:

    新葡亰496net 3

     

    页面调用的代码:

    新葡亰496net 4

     

    JS对img的icon-data属性转变管理的代码:

    新葡亰496net 5

     

    大家相比下用base64编码和毫无base64时所消费的时刻:

    先看不用的进程

    新葡亰496net 6

    再看我们用了base64编码的快慢   新葡亰496net 7

     

    借使四个页面有非常多小Logo,那么这种方法对网址的性质优化会有大大的升高。目前此种优化方案是用在自家前些天的门类中移动端,而上一篇博文批注的变化背景图的优化方案用在我们项目中的PC端。优化成效是很显明的!当然了,base64编码这种方法也足以用在PC端,大家的档案的次序怎么将它用在手提式无线电话机端,本博文开端部分也是有对其做解释。这里测试本人就径直在PC端测试,手提式有线电话机端测试也是八个样的。

    此间本人补偿有些:

    (1)所生成的base64的js文件是在开采中就成形的了,而不是在用户访问时才去变通,笔者把HTML代码和PHP代码写在两个文书里是有益,在真正项目中是分开的;

    (2)使用此种优化技能有它的长处,当然也是有它的败笔,只有顺应本人项目标优化技艺才是好技能;

    (3)当中优化技巧建议选用在手提式有线电话机端(能够缓慢解决背景图优化措施所不可能缓慢解决的主题素材),而PC端的则用联合小Logo生成背景图的主意(看此文:);

    (4)此种优化工夫一般用来小Logo(十几K之下),也等于HTTP响应时间远远出乎下载时间的时候,用此方式优化会看到明明的机能;

    (5)当然可以相配其余优化技能联合使用,效果更简明,比方缓存等。

     

    那二回就享受那么多给大家,代码我都贴上了,而且非常多都标上了讲授,方便我们精通。

    假定此博文中有何地讲得令人难以精晓,迎接留言调换,若有疏解错的地点接待提议。

    一旦你以为你能在此博历史学到了新知识,请为自家顶八个,如小说中有分解错的地点,接待提出。

      相互学习,共同升高!

    2 赞 2 收藏 评论

    新葡亰496net 8

    在网址开垦进度中,对于页面包车型地铁加载成效一般都想尽办法求快。那么,怎么让本事越来越快吗?减弱页面请求 是多个优化页面加载速度很好的艺术。上一篇博文

    减少HTTP请求之统一图片详解(大型网址优化技能)

    2015/11/26 · HTML5 · HTTP

    初稿出处: Kelly   

    一、相关知识授课

    看过雅虎的前端优化35条提出,都驾驭优化前端是有多么主要。页面包车型大巴加载速度一直影响到用户的心得。十分九的终点用户响应时间都花在了前端上,在这之中山大学部分时刻都在下载页面上的种种零部件:图片,样式表,脚本,Flash等等。

    调整和减少组件数一定能够减弱页面提交的HTTP请求数。那是让页面更加快的基本点。收缩页面组件数的一种方法是简化页面设计。但有没有一种方法能够在构建复杂的页面同一时候加速响应时间吧?嗯,确实有鱼和熊掌兼得的主意。

    这里我们就拿雅虎的首先条提议:尽量减弱HTTP请求数里的滑坡图片请求数量 举行解说。

    咱们都掌握,八个网址的三个页面大概有过多小Logo,比如有些按键、箭头等等。当加载html文书档案时,只要遭受有图表的,都会自动创立起HTTP请求下载,然后将图片下载到页面上,那么些小图片或然也等于十几K大照旧1K都不到,假若大家的一个页面有九十九个小Logo,我们在加载页面时,将在发送玖十五个HTTP请求,如果您的网址访问量极大并发量也相当高,假设上百万访问量,那发起的伸手就是纯属等级了,服务器是有早晚的下压力的,并且一个用户的贰个页面要发起那么多请求,是很耗时的。

    由此,大家优化的方案就是:将那么些十几K、几K的小Logo合并在一张图纸里,然后用CSS的background-imagebackground-position天性来恒定要来得的一对。

    二、代码完毕

    1、思路:

    将三个文件夹里的Logo,自动生成在一张图片里面,同期自动生成对应的css文件,我们只要在HTML里的竹签中增多相应的属性值就会展现图片了。

    2、落成进度:

    XHTML

    <?php //本人定义八个根目录 define('ROOT', $_SERVER['DOCUMENT_ROOT'].'iconwww'); //那一个是图表的目录 define('RES_BASE_URL', ''); /** * 生成背景图的函数 */ function generateIcon() { //网址根目录 $webRoot = rtrim(ROOT, '/'); //背景图目录 $root = "$webRoot/img/bg"; //Php-SPL库中 的 目录文件遍历器 $iterator = new DirectoryIterator($root); //开端遍历该背景图目录下的目录,大家是把想生成背景图的目录,放在bg目录中以一一模块的目录分类存放 foreach ($iterator as $file) { //碰到目录遍历 if (!$file->isDot() && $file->isDir()) { //取得文件名 $fileName = $file->getFilename(); generateIconCallback("$root/$fileName", "$webRoot/img/$fileName", "$webRoot/css/$fileName.css"); } } } /** * 用户生成合并的背景图和css文件的函数 * @param string $dir 生成背景图的Logo所在的目录路线 * @param string $bgSave帕特h 背景图所保存的路线 * @param string $cssSavePath css保存的路线 */ function generateIconCallback($dir, $bgSavePath, $cssSavePath) { $shortDir = str_replace('\', '/', substr($dir, strlen(ROOT-1))); //重临文件路线音讯 $pathInfo = pathinfo($bgSavePath.'.png'); $bgSaveDir = $pathInfo['dirname']; //确定保障目录可写 ensure_writable_dir($bgSaveDir); //背景图名字 $bgName = $pathInfo['filename']; //调用generateIconCallback_GetFileMap()函数生成每二个Logo所须求的数据结构 $fileMap = array('a' => generateIconCallback_GetFileMap($dir)); $iterator = new DirectoryIterator($dir); foreach ($iterator as $file) { if ($file->isDot()) continue; if ($file->isDir()) { //二级目录也要管理 $fileMap['b-'.$file->getFilename()] = generateIconCallback_GetFileMap($file->getReal帕特h()); } } ksort($fileMap); //分析一边fileMap,总结整个背景图的尺寸和每多少个图标的offset //早先化偏移量和背景图 $offsetX = $offsetY = $bgWidth = 0; //设定每种小Logo之间的偏离 $spaceX =$spaceY = 5; //图片最大开间 $maxWidth = 800; $fileMd5List =array(); //这里供给打字与印刷下$fileMap就精通它的数据结构了 foreach ($fileMap as $k1 => $innerMap) { foreach ($innerMap as $k2 => $itemList) { //行高姐X轴偏移量初阶化 $offsetX = $lineHeight = 0; foreach ($itemList as $k3 => $item) { //变量分别是:Logo的大幅度,中度,类型,文件名,路线,MD5加密字符串 list($imageWidth, $imageHeight, $imageType, $fileName, $filePathname, $fileMd5) = $item; $fileMd5List []= $fileMd5; //假设图片的幅度 偏移量 > 最大开间(800) 那就换行 if ($offsetX !== 0 && $imageWidth $offsetX > $maxWidth) { $offsetY = $spaceY $lineHeight; $offsetX = $lineHeight = 0; } //倘使图片中度 > 当前行高 那就讲图片中度付给行高大家那的 if ($imageHeight > $lineHeight) $lineHeight = $imageHeight; $fileMap[$k1][$k2][$k3] = array($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname); //X轴偏移量的测算 $offsetX = $imageWidth $spaceX; if ($offsetX > $bgWidth) $bgWidth = $offsetX; } //Y轴偏移量的计算 $offsetY = $lineHeight $spaceY; } } //把右下两边多加了的空白距离给干掉 $bgWidth -= $spaceX; $bgHeight = $offsetY - $spaceY; $fileMd5List = implode("n", $fileMd5List); //生成背景图和 css文件 //能源路线 $resBaseUrl = RES_BASE_URL; $suffix = base_convert(abs(crc32($fileMd5List)), 10, 36); $writeHandle = fopen($cssSavePath, 'w'); fwrite($writeHandle, "/** bg in dir: $shortDir/ */n[icon-$bgName]{background:url({$resBaseUrl}/$bgName.png?$suffix) no-repeat;display:inline-block;}"); //做图片,那一个函数具体能够查看PHP手册 $destResource = imagecreatetruecolor($bgWidth, $bgHeight); image阿尔法blending($destResource, false); imagesave阿尔法($destResource, false); $color = imagecolorallocate阿尔法($destResource, 255, 255, 255, 127); imagefill($destResource, 0, 0, $color); //对每一张小图片张开拍卖,生成在大背景图里,并生成css文件 foreach ($fileMap as $innerMap) { foreach ($innerMap as $itemList) { foreach ($itemList as $item) { list($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname) = $item; if ($imageType === IMAGETYPE_PNG) { $srcResource = imagecreatefrompng($filePathname); } else if ($imageType === IMAGETYPE_JPEG) { $srcResource = imagecreatefromjpeg($filePathname); } imagecopy($destResource, $srcResource, $offsetX, $offsetY, 0, 0, $imageWidth, $imageHeight); imagedestroy($srcResource); //写入css $posX = $offsetX === 0 ? 0 : "-{$offsetX}px"; $posY = $offsetY === 0 ? 0 : "-{$offsetY}px"; fwrite($writeHandle, "n[icon-$bgName="$fileName"]{width:{$imageWidth}px;height:{$imageHeight}px;background-position:$posX $posY;}"); } } } //压缩等级 7 imagepng($destResource, "$bgSavePath.png", 7); imagedestroy($destResource); fclose($writeHandle); $shortCssSave帕特h = substr($cssSavePath, strlen(ROOT)); } /** * 将图纸的音信管理成大家想要的数据结构 * @param [type] $dir [description] * @return [type] [description] */ function generateIconCallback_GetFileMap($dir) { $map = $sort = array(); $iterator = new DirectoryIterator($dir); foreach($iterator as $file) { if(!$file->isFile()) continue; $filePathname = str_replace("\", '/', $file->getRealPath()); //那么些函数能够查阅PHP手册 $imageInfo = getimagesize($filePathname); $imageWidth = $imageInfo[0]; $imageHeight = $imageInfo[1]; $imageType = $imageInfo[2]; if(!in_array($imageType, array(IMAGETYPE_JPEG, IMAGETYPE_PNG))) { $fileShortName = substr($filePathname, strlen(ROOT) - 1); echo "<p> $fileShortName 图片被忽视: 因为图片类型不是png|jpg.</p>"; continue; } //那是我们的图片规格,行高分别有 16 32 64 128 256 99999 foreach(array(16, 32, 64, 128, 256, 99999) as $height) { if($imageHeight <= $height) { $mapKey = $height; break; } } if(!isset($map[$mapKey])) $map[$mapKey] = array(); $filePathInfo = pathinfo($filePathname); $map[$mapKey] []= array($imageWidth, $imageHeight, $imageType, $filePathInfo['filename'], $filePathname, md5_file($filePathname)); $sort[$mapKey] []= str_pad($imageHeight, 4, '0', STR_PAD_LEFT) . $filePathInfo['filename']; } foreach($map as $k => $v) array_multisort($map[$k], SORT_ASC, SORT_NUMERIC, $sort[$k]); ksort($map, SORT_NUMERIC); return $map; } /** * 决断目录是不是可写 * @param string $dir 目录路线 */ function ensure_writable_dir($dir) { if(!file_exists($dir)) { mkdir($dir, 0766, true); @chmod($dir, 0766); @chmod($dir, 0777); } else if(!is_writable($dir)) { @chmod($dir, 0766); @chmod($dir, 0777); if(!@is_writable($dir)) { throw new BusinessLogicException("目录不可写", $dir); } } } generateIcon(); ?> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/Pink.css"> <title></title> </head> <body> <div>我们一贯引进所生成的css文件,并测试一下是否成功</div> <br> <div>这里在span标签 增多属性 icon-Pink ,值为About-40,平常显示图片</div> <span icon-Pink="About-40"></span> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    <?php
        //自己定义一个根目录
        define('ROOT', $_SERVER['DOCUMENT_ROOT'].'iconwww');
        //这个是图片的目录
        define('RES_BASE_URL', 'http://localhost:8080/iconwww/img');
     
        /**
         * 生成背景图的函数
         */
        function generateIcon() {
            //网站根目录
            $webRoot = rtrim(ROOT, '/');
            //背景图目录
            $root = "$webRoot/img/bg";
            //Php-SPL库中 的 目录文件遍历器
            $iterator = new DirectoryIterator($root);
            //开始遍历该背景图目录下的目录,我们是把想生成背景图的目录,放在bg目录中以各个模块的目录分类存放
            foreach ($iterator as $file) {
                //遇到目录遍历
                if (!$file->isDot() && $file->isDir()) {
                    //取得文件名
                    $fileName = $file->getFilename();
                    generateIconCallback("$root/$fileName", "$webRoot/img/$fileName", "$webRoot/css/$fileName.css");
                }
            }
        }
     
        /**
         * 用户生成合并的背景图和css文件的函数
         * @param  string $dir         生成背景图的图标所在的目录路径
         * @param  string $bgSavePath  背景图所保存的路径
         * @param  string $cssSavePath css保存的路径
         */
        function generateIconCallback($dir, $bgSavePath, $cssSavePath) {
            $shortDir = str_replace('\', '/', substr($dir, strlen(ROOT-1)));
            //返回文件路径信息
            $pathInfo = pathinfo($bgSavePath.'.png');
     
            $bgSaveDir = $pathInfo['dirname'];
            //确保目录可写
            ensure_writable_dir($bgSaveDir);
            //背景图名字
            $bgName = $pathInfo['filename'];
            //调用generateIconCallback_GetFileMap()函数生成每一个图标所需要的数据结构
            $fileMap = array('a' => generateIconCallback_GetFileMap($dir));
     
            $iterator = new DirectoryIterator($dir);
            foreach ($iterator as $file) {
                if ($file->isDot()) continue;
                if ($file->isDir()) {
                    //二级目录也要处理
                    $fileMap['b-'.$file->getFilename()] = generateIconCallback_GetFileMap($file->getRealPath());
                }
            }
            ksort($fileMap);
     
            //分析一边fileMap,计算整个背景图的大小和每一个图标的offset
            //初始化偏移量和背景图    
            $offsetX = $offsetY = $bgWidth = 0;
            //设定每个小图标之间的距离
            $spaceX =$spaceY = 5;
            //图片最大宽度
            $maxWidth = 800;
            $fileMd5List =array();
            //这里需要打印下$fileMap就知道它的数据结构了
            foreach ($fileMap as $k1 => $innerMap) {
                foreach ($innerMap as $k2 => $itemList) {
                    //行高姐X轴偏移量初始化
                    $offsetX = $lineHeight = 0;
                    foreach ($itemList as $k3 => $item) {
                        //变量分别是:图标的宽度,高度,类型,文件名,路径,MD5加密字符串
                        list($imageWidth, $imageHeight, $imageType, $fileName, $filePathname, $fileMd5) = $item;
                        $fileMd5List []= $fileMd5;
                        //如果图片的宽度 偏移量 > 最大宽度(800) 那就换行
                        if ($offsetX !== 0 && $imageWidth $offsetX > $maxWidth) {
                            $offsetY = $spaceY $lineHeight;
                            $offsetX = $lineHeight = 0;
                        }
                        //如果图片高度 > 当前行高  那就讲图片高度付给行高我们这的
                        if ($imageHeight > $lineHeight) $lineHeight = $imageHeight;
                        $fileMap[$k1][$k2][$k3] = array($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname);
                        //X轴偏移量的计算
                        $offsetX = $imageWidth $spaceX;
                        if ($offsetX > $bgWidth) $bgWidth = $offsetX;
                    }
                    //Y轴偏移量的计算
                    $offsetY =  $lineHeight $spaceY;
                }
            }
            //把右下两边多加了的空白距离给干掉
            $bgWidth -= $spaceX;
            $bgHeight = $offsetY - $spaceY;
            $fileMd5List = implode("n", $fileMd5List);
     
            //生成背景图和 css文件
     
            //资源路径
            $resBaseUrl = RES_BASE_URL;
            $suffix = base_convert(abs(crc32($fileMd5List)), 10, 36);
            $writeHandle = fopen($cssSavePath, 'w');
            fwrite($writeHandle, "/** bg in dir: $shortDir/ */n[icon-$bgName]{background:url({$resBaseUrl}/$bgName.png?$suffix) no-repeat;display:inline-block;}");
     
            //做图片,这些函数具体可以查看PHP手册
            $destResource = imagecreatetruecolor($bgWidth, $bgHeight);
            imagealphablending($destResource, false);
            imagesavealpha($destResource, false);
            $color = imagecolorallocatealpha($destResource, 255, 255, 255, 127);
     
            imagefill($destResource, 0, 0, $color);
     
            //对每一张小图片进行处理,生成在大背景图里,并生成css文件
            foreach ($fileMap as $innerMap) {
                foreach ($innerMap as $itemList) {
                    foreach ($itemList as $item) {
                         list($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname) = $item;
                         if ($imageType === IMAGETYPE_PNG) {
                            $srcResource = imagecreatefrompng($filePathname);
                         } else if ($imageType === IMAGETYPE_JPEG) {
                            $srcResource = imagecreatefromjpeg($filePathname);
                         }
                         imagecopy($destResource, $srcResource, $offsetX, $offsetY, 0, 0, $imageWidth, $imageHeight);
                         imagedestroy($srcResource);
     
                         //写入css
                         $posX = $offsetX === 0 ? 0 : "-{$offsetX}px";
                         $posY = $offsetY === 0 ? 0 : "-{$offsetY}px";
                         fwrite($writeHandle, "n[icon-$bgName="$fileName"]{width:{$imageWidth}px;height:{$imageHeight}px;background-position:$posX $posY;}");
                     }
                }
            }
     
            //压缩级别 7
            imagepng($destResource, "$bgSavePath.png", 7);
            imagedestroy($destResource);
            fclose($writeHandle);
     
            $shortCssSavePath = substr($cssSavePath, strlen(ROOT));
        }
     
        /**
         * 将图片的信息处理成我们想要的数据结构
         * @param  [type] $dir [description]
         * @return [type]      [description]
         */
        function generateIconCallback_GetFileMap($dir) {
            $map = $sort = array();
            $iterator = new DirectoryIterator($dir);
            foreach($iterator as $file) {
                if(!$file->isFile()) continue;
                $filePathname = str_replace("\", '/', $file->getRealPath());
                //这些函数可以查看PHP手册
                $imageInfo = getimagesize($filePathname);
                $imageWidth = $imageInfo[0];
                $imageHeight = $imageInfo[1];
                $imageType = $imageInfo[2];
     
                if(!in_array($imageType, array(IMAGETYPE_JPEG, IMAGETYPE_PNG))) {
                    $fileShortName = substr($filePathname, strlen(ROOT) - 1);
                    echo "<p> $fileShortName 图片被忽略: 因为图片类型不是png|jpg.</p>";
                    continue;
                }
     
                //这是我们的图片规格,行高分别有 16 32 64 128 256 99999
                foreach(array(16, 32, 64, 128, 256, 99999) as $height) {
                    if($imageHeight <= $height) {
                        $mapKey = $height;
                        break;
                    }
                }
                if(!isset($map[$mapKey])) $map[$mapKey] = array();
                $filePathInfo = pathinfo($filePathname);
                $map[$mapKey] []= array($imageWidth, $imageHeight, $imageType, $filePathInfo['filename'], $filePathname, md5_file($filePathname));
                $sort[$mapKey] []= str_pad($imageHeight, 4, '0', STR_PAD_LEFT) . $filePathInfo['filename'];
            }
            foreach($map as $k => $v) array_multisort($map[$k], SORT_ASC, SORT_NUMERIC, $sort[$k]);
            ksort($map, SORT_NUMERIC);
            return $map;
        }
     
        /**
         * 判断目录是否可写
         * @param  string $dir 目录路径
         */
        function ensure_writable_dir($dir) {
            if(!file_exists($dir)) {
                mkdir($dir, 0766, true);
                @chmod($dir, 0766);
                @chmod($dir, 0777);
            }
            else if(!is_writable($dir)) {
                @chmod($dir, 0766);
                @chmod($dir, 0777);
                if(!@is_writable($dir)) {
                    throw new BusinessLogicException("目录不可写", $dir);
                }
            }
        }
     
        generateIcon();
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/Pink.css">
        <title></title>
     
    </head>
    <body>
    <div>我们直接引入所生成的css文件,并测试一下是否成功</div>
    <br>
    <div>这里在span标签 添加属性 icon-Pink ,值为About-40,正常显示图片</div>
    <span icon-Pink="About-40"></span>
    </body>
    </html>

    调用以上代码,大家的浏览器是如此呈现的:

    新葡亰496net 9

    下一场css目录生成了Pink.css文件:

    新葡亰496net 10

    img目录下生成了Pink.png文件:

    新葡亰496net 11

    探望生成的背景图是长啥样子:

    新葡亰496net 12

     

    接下去我们再看一下所生成的图片大小与Pink文件夹里全部小图片总和的尺寸,对它们做个相比较:

    新葡亰496net 13

     

    新葡亰496net 14

    从上海教室能够看到,我们调换的图片的轻重缓急分明低于文件夹全体图片的大大小小,所以在将玖十六个小Logo下载下来的快慢 会显著低于 将背景图下载下来和将CSS下载下来的进程。

    当访问量大时,恐怕小图片的量大时,会起到很备受关注的优化职能!!!

    代码中的每种点都差不离有注释,很方便大家去掌握,只要我们用心去看,明确能将这一网址优化本领用到谐和的品类中。

    此番博文就写到这!!!

    比方此博文中有何地讲得令人难以知晓,招待留言调换,若有解说错的地方接待建议。

    如若你以为你能在此博文学到了新知识,请为小编顶一个,如小说中有分解错的地方,招待提出。

      互相学习,共同进步!

    2 赞 3 收藏 评论

    新葡亰496net 15

    新葡亰496net 16《Higb Performance Web Sites》(中文名:“高性能网址建设指南”)那本书对于前端程序员来讲,相对值得一读。本人有幸从公司借阅了,但不幸的是以为翻译有一些蹊跷。极其是在翻译CSS Sprites的最首要部分,令人出乎意料。幸好原理相比较简单,所以未有形成障碍。^_^

    《Higb Performance Web Sites》(普通话名:“高品质网址建设指南”)那本书对于前端技术员来讲,相对值得一读。自个儿有幸从公司借阅了,但不幸的是以为翻译有一点离奇。尤其是在翻译CSS Coca Colas的重当先六分之三,令人不敢相信 无法相信。还好原理相比简单,所以并未有产生障碍。^_^ 
    本身看书有做笔记、写示例、发牢骚的习贯,所以有了下文。个人备忘也罢,初学者入门也罢,反正赖在这边。所以,拍砖也罢,口水也罢,作者都忍着,呵呵。。。

    咱俩讲授了 “利用将小图标合成一张背景图来减少HTTP请求”,那么,这一篇博文将执教

    自身看书有做速记、写示例、发牢骚的习于旧贯,所以有了下文。个人备忘也罢,初学者入门也罢,反正赖在此间。所以,拍砖也罢,口水也罢,小编都忍着,呵呵。。。

     

    “ 将图纸转成二进制并生成Base64编码,能够在网页中通过url查看图片”。

     

    当贰个页面包车型客车图纸在未曾使用其余方案的情景下,四个图片超链接就只可以动用多少个图标按键。
    代码如下:

    一、为什么选用将图片转成二进制并生成Base64编码,能够在网页中经过url查看图片的艺术收缩HTTP请求数?

    当二个页面包车型客车图纸在一直不运用别的方案的状态下,多少个图片超链接就只可以使用四个Logo开关。
    代码如下:

    新葡亰496net 17

    干什么笔者会疏解“将图片转成二进制并生成Base64编码,能够在网页中经过url查看图片” 这一种办法来减少HTTP请求,进而优化页面吗?这里吧,是事关到活动端的Logo使用。上一篇博文所讲的办法是或不是使用于手提式有线电话机端的网页呢?

    <div style="border: 2px ridge rgb(51, 51, 51); background-color: rgb(244, 245, 235); width: 200px; padding-top: 4px;">
    <center>         <a href="javascript:alert('Home')" title="Home"><img src="http_request_img/home.gif" border="0"></a>
    <a href="javascript:alert('Gift')" title="Gift"><img src="http_request_img/gift.gif" border="0"></a>
    <a href="javascript:alert('Cart')" title="Cart"><img src="http_request_img/cart.gif" border="0"></a>
    <a href="javascript:alert('Settings')" title="Settings"><img src="http_request_img/settings.gif" border="0"></a>
    <a href="javascript:alert('Help')" title="Help"><img src="http_request_img/help.gif" border="0"></a>
    </center>
    </div>

    <div style="border: 2px ridge rgb(51, 51, 51); rgb(244, 245, 235); width: 200px; padding-top: 4px;">
    <center>         <a href="javascript:alert('Home')" title="Home"><img src="http_request_img/home.gif" border="0"></a>
    <a href="javascript:alert('Gift')" title="Gift"><img src="http_request_img/gift.gif" border="0"></a>
    <a href="javascript:alert('Cart')" title="Cart"><img src="http_request_img/cart.gif" border="0"></a>
    <a href="javascript:alert('Settings')" title="Settings"><img src="http_request_img/settings.gif" border="0"></a>
    <a href="javascript:alert('Help')" title="Help"><img src="http_request_img/help.gif" border="0"></a>
    </center>
    </div>

    然则,它会冒出贰个难点:背景图 css彰显Logo时,Logo自个儿无法缩放,举例背景图中64px*64px的Logo,呈现到界面时务必安装icon的大

    效益如下:

    新葡亰496net 18

    小也是64*64。在PC网页中那平日不会有怎么样难点,但在运动端设备上就完全没用。一样是4英寸的无绳电话机显示屏,其分辨率有望是320*400,也可能

    新葡亰496net 19 新葡亰496net 20 新葡亰496net 21 新葡亰496net 22 新葡亰496net 23

    效果如下: 

    是640*800,乃至也可能是一九一七*1080。这样64px*64px的Logo在分化的装置上看起来的尺寸就能够距离非常显明。

    留神:那三个开关分别接纳了五张图纸

    新葡亰496net 24 新葡亰496net 25 新葡亰496net 26 新葡亰496net 27 新葡亰496net 28

    侥幸的是,手提式无线电话机上的浏览器基本对此做了优化,会把器材模拟成更低的分辨率。比方在1136*640的IPHONE

     

    留神:那七个开关分别采纳了五张图纸

    5中得到$(window).width(),抽取来的是320而不是640,那样三个宽度为160px的图片占用的是荧屏宽度的十分之五,而不是四分之二。手

    那么,五张图片就象征你的该页面又多了多个HTTP请求,它将大大下降页面包车型客车显现功效。扩张的HTTP请求是致使页面质量降低的最大刽子手,所以我们相应尽量减弱HTTP请求,而图片是充实HTTP请求的最大大概者,化解它,时不可失!呵呵^_^

     

    机设备那样管理是为着消除包容性难点。除了网页,包含手机上app的分界面,在retina显示器上和非retina荧屏上的高低是全然一致的,都是因为对分

    上边列出了两种减轻方案:

    那么,五张图片就象征你的该页面又多了七个HTTP请求,它将大大下落页面包车型客车显现功能。扩充的HTTP请求是致使页面品质下降的最大刽子手,所以大家相应尽量裁减HTTP请求,而图片是扩大HTTP请求的最大或许者,化解它,速战速决!呵呵^_^

    辨率做了管理。

     

    上面列出了两种缓慢解决方案:

    可是,移动器具这么的管理方式并不可能一心缓慢解决难点,因为机器的假若性估算在繁多时候是不适合的,特别是在android设备中。为了更加好地垄断成分

    方案一:图片地图(图像热门):它将用户的点击映射到贰个操作,而没有供给向后端Web服务器发送任何请求。

     

    显示的尺寸,消除的方法正是用pt替代ps,px是对应荧屏的分辨率,而pt是指向人眼睛实际上以为的轻重,无论在何种分辨率的装置上,72pt固定是1英

    代码如下:

    方案一:图片地图(图像火热):它将用户的点击映射到三个操作,而无需向后端Web服务器发送任何请求。

    寸。

    <div class="panel_div" style="border:2px ridge #333333;background-color:rgb(244, 245, 235);width:180px;padding:4px 0px 0px 2px;">
    新葡亰496net 29     <img usemap="#mymap" src="http_request_img/imagemap.gif" border="0" />
    新葡亰496net 30     <map name="mymap"> <!-- img使用的map -->
    新葡亰496net 31         <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home');"/>
    新葡亰496net 32         <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts');"/>
    新葡亰496net 33         <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')"/>
    新葡亰496net 34         <area shape="rect" coords="106,0,136,31" href="javascript:alert('Set')"/>
    新葡亰496net 35         <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')"/>
    新葡亰496net 36     </map>
    </div>

    代码如下:

    HTML的img标签成分的src属性不只是能够钦命url,也得以钦命图片的二进制数据流。然后经过img成分的活动缩放作用,钦赐img的高低,就能够兑以往不相同分辨率的器材上显得同一的Logo大小。

    效果如下:

    新葡亰496net 37

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

    新葡亰496net 38

    <div class="panel_div" style="border:2px ridge #333333;245, 235);width:180px;padding:4px 0px 0px 2px;">
    新葡亰496net 39     <img usemap="#mymap" src="http_request_img/imagemap.gif" border="0" />
    新葡亰496net 40     <map name="mymap"> <!-- img使用的map -->
    新葡亰496net 41         <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home');"/>
    新葡亰496net 42         <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts');"/>
    新葡亰496net 43         <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')"/>
    新葡亰496net 44         <area shape="rect" coords="106,0,136,31" href="javascript:alert('Set')"/>
    新葡亰496net 45         <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')"/>
    新葡亰496net 46     </map>
    </div>

    当我们的二个页面中要传播多数图片时,非常是有的小Logo,十几K、几K,乃至是字节等第大小的小Logo,这一个小图标都会扩大HTTP请求,假如多了,

    瞩目:那七个按键其实是在一张图片中

    新葡亰496net 47

    就能给服务器带来相当的大的下压力。比如要下载一些一两K大的小Logo,其实请求时带上的附加消息有相当大希望比Logo的高低还要大。所以,在恳求更加的多时,在网络传输的数

     

    成效如下: 

    新葡亰496net:重型网址优化技能,请求的方案。据自然就越来越多了,传输的多寡自然也就变慢了。而这里,大家采纳Base64的编码方式将图纸直接嵌入到网页中,而不是从外部载入,那样就收缩了HTTP请

    方案二:CSS Sprites:使用这种方法也得以将五张图片合并为一张图纸,并且更为灵活。

    新葡亰496net 48

    求。当然了,它有八个小缺陷,就是使近年来页面包车型客车分寸变大了(对于优化来讲,其实这几个能够忽略,影响微乎其微)。看一下下图,小Logo大小为2.4k,等待响应时

    代码如下:

    只顾:那八个按键其实是在一张图片中

    间是14ms,而接受多少,也便是下载时间约为0ms;总来讲之,在有大气小Logo下载的时候,这样的方法去优化能大大升高网址的习性(在jquery

    <style>
    /* 对div中具备span的样式设置 */
    #navbar span {
      /* 定义<span>标签将截取的图样宽度和惊人 */
      width:30px; height:31px;
      /* 增加包罗了有着Logo的图纸 */
      background-image:url(http_request_img/imagemap.gif);
      display:inline; float:left;
    }
     /* background-position:钦赐图标在CSS Sprites图片的偏移量
        margin-left 和 margin-right 则用来定位Logo地方
     */
    .home     { background-position:0 0; margin-left:2px;}
    .gifts    { background-position:-35px 0; margin-left:50px;}
    .cart     { background-position:-70px 0; margin-left:120px;}
    </style>

     

    mobile和天猫市肆的手提式有线电话机站下边都有用到此工夫)。

    <div id="navbar" style="border: 2px ridge rgb(51, 51, 51); padding: 4px 0pt; background-color:#ff0; width: 300px; height: 32px;">

    方案二:CSS Sprites:使用这种方法也足以将五张图片合并为一张图纸,并且越来越灵活。

      <a href="javascript:alert('Home')" title="Home">
         <span class="home"></span></a> <!-- 注意:该span标签用来加载图片 -->

    代码如下:

    新葡亰496net 49

      <a href="javascript:alert('Gifts')" title="Gifts">
        <span class="gifts"></span></a> <!-- 注意:该span标签用来加载图片 -->

    新葡亰496net 50

    三、开拓思路

      <a href="javascript:alert('Cart')" title="Cart">
        <span class="cart"></span></a>  <!-- 注意:该span标签用来加载图片 -->
    </div>

    <style>
    /* 对div中具备span的体制设置 */
    #navbar span {
      /* 定义<span>标签将截取的图形宽度和惊人 */
      width:30px; height:31px;
      /* 增多蕴含了具有Logo的图纸 */
      background-image:url(http_request_img/imagemap.gif);
      display:inline; float:left;
    }
     /* background-position:钦定Logo在CSS Coca Colas图片的偏移量
        margin-left 和 margin-right 则用来稳固Logo地点
     */
    .home     { background-position:0 0; margin-left:2px;}
    .gifts    { background-position:-35px 0; margin-left:50px;}
    .cart     { background-position:-70px 0; margin-left:120px;}
    </style>

    将小Logo放在以icon_开首的文书夹里(以界别不用生成base64的图样的文书夹)—>用程序去遍历文件夹图片

    效率如下:

    <div id="navbar" style="border: 2px ridge rgb(51, 51, 51); padding: 4px 0pt;  width: 300px; height: 32px;">

    —>将每张图纸的base64编码放在一个js对象里—>在HTML页面包车型大巴img标签里 使用质量 icon-data =

    ) ) )

      <a href="javascript:alert('Home')" title="Home">
         <span class="home"></span></a> <!-- 注意:该span标签用来加载图片 -->

    ‘Logo名(不带后缀)’来体现图片 —>

    在意:在那几个“CSS Pepsi-Colas”中用到的图纸正是“图片地图”中的同一张图片。(并特别只展现中间的多少个Logo)

      <a href="javascript:alert('Gifts')" title="Gifts">
        <span class="gifts"></span></a> <!-- 注意:该span标签用来加载图片 -->

    JS文件写一个函数对icon-data属性举行退换,调换到src属性,然后值就经过icon-data的属性值得到Logo名,然后开始展览相应的交替获得相

     

      <a href="javascript:alert('Cart')" title="Cart">
        <span class="cart"></span></a>  <!-- 注意:该span标签用来加载图片 -->
    </div>

    应Logo的base64编码 —> 显示图片

    CSS Pepsi-Colas的法则:只是定位到图片个中的一块区域,并出示在有些地方而已。

    新葡亰496net 51

    四、代码达成

    CSS Sprites的优点:通过只行使一个图纸减弱了HTTP请求,并且比“图片地图”更加灵活。

    效益如下:

    $pathinfo=pathinfo($_SERVER['SCRIPT_新葡亰496net:重型网址优化技能,请求的方案。FILENAME']);

    成都百货上千人会误感到:合并的图形要比分别的图形的总量要大,因为联合的图样中隐含有增大的空白区域。
    实则,合并的图片要比分别的图片的总额要小,那是因为它下跌了图片本身的付出(颜色表、格式音信,等等)。

     

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

     

    注意:在那几个“CSS Pepsi-Colas”中用到的图形正是“图片地图”中的同一张图纸。(并特意只呈现在那之中的多个Logo)

    functiongenerateIcon_mobile(){

    方案三:内联图片:通过使用data: U奥德赛L格局在Web页面中包括图表,且无需任何附加的HTTP请求。(IE近些日子不支持)

     

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

          1、内联图片的法则:允许将小块数据内联为‘马上数(immediate data)’,数据就带有在其U大切诺基L本人内部。

    CSS 百事可乐s的原理:只是一向到图片个中的一块区域,并展现在某些地点而已。

    $iterator=newDirectoryIterator($imgRoot);

          2、内联图片的格式:data:[<mediatype>][;base64],<data>

    CSS Pepsi-Colas的长处:通过只使用一个图形减弱了HTTP请求,并且比“图片地图”更加灵敏。

    foreach($iteratoras$file){

    譬如来讲:叁个内联图片能够定义为
    <img src="data:image/gif;base64,asdfghjklaasdvdddddddaaaaaddddd ddd======ssswdvdv33" >

    洋西班牙人会误感觉:合并的图纸要比分别的图纸的总和要大,因为联合的图形中包涵有增大的空域区域。
    其实,合并的图样要比分别的图样的总和要小,那是因为它降低了图片本身的支付(颜色表、格式新闻,等等)。

    if($file->isDot())continue;

    其间“asdfghjklaasdvdddddddaaaaaddddd ddd======ssswdvdv33”正是该图形的数码。

     

    $filename=$file->getFilename();

    data: UTiguanL形式-> 基本用于内联图片,能够用在其余索要钦点U福特ExplorerL的地点,如:script和a标签中。

    方案三:内联图片:通过应用data: U逍客L情势在Web页面中带有图表,且不供给任何额外的HTTP请求。(IE如今不帮助)

    //识别出是还是不是以icon_开班的文件夹,若是是,则对此文件夹的Logo实行base64编码管理

     

          1、内联图片的原理:允许将小块数据内联为‘立时数(immediate data)’,数据就包含在其UKugaL自个儿内部。 

    if($file->isDir()&&0===strncasecmp('icon_',$filename,5)){

          3、内联图片的瑕疵

          2、内联图片的格式:data:[<mediatype>][;base64],<data>

    generateIconMobileCallback("$imgRoot/$filename",ROOT."/js/mobile");

                a> 不受IE的支持(IE7也如此);

    举个例子:贰个内联图片能够定义为
    <img src="data:image/gif;base64,asdfghjklaasdvdddddddaaaaaddddd ddd======ssswdvdv33" >

    }

                b> 保存数据的轻重上受限制(Firefox 1.5支撑高达100KB的多寡);

    在那之中“asdfghjklaasdvdddddddaaaaaddddd ddd======ssswdvdv33”就是该图片的数目。

    }

                c> Base64编码会追加其图片的深浅;

    data: U宝马X5L形式-> 基本用于内联图片,能够用在此外索要钦赐UPRADOL的地方,如:script和a标签中。

    }

                d> 在超越分化页面时不会被缓存

     

    functiongenerateIconMobileCallback($iconDir,$styleSaveDir){

                  (可以将内联图片作为背景图片保存在外部CSS样式表中来缓和此主题素材,但会增添八个HTTP请求以换得多少被缓存的结果。);

          3、内联图片的老毛病

    //保存成js的文本名

     

                a> 不受IE的支持(IE7也如此);

    $saveName=array_pop(explode('/',$iconDir));

    在PHP技能中,使用函数file_get_contents从磁盘读取图片并插入到页面中来创建内联图片:

                b> 保存数据的大大小小上受限制(Firefox 1.5帮衬高达100KB的数据);

    //JS文件保留路线

    在其HTML中,使用style标签的href属性钦点外部样式表文件时,直接钦命到了多个PHP模版的.php文件(注意:不是.css文件),该PHP模版使用file_get_contents函数生成其样式表:

                c> Base64编码会追加其图片的轻重缓急;

    $styleSavePath=$styleSaveDir.'/'.$saveName.'.js';

    .home{ background-image:url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("../img/home.gif")) ?>);}

                d> 在超越分裂页面时不会被缓存

    //将当前目录下的装有文件及MD5组成一个鉴定识别字符串

    其最后数额将是base64编码格式的图片data数据。

                  (可以将内联图片作为背景图片保存在外表CSS样式表中来消除此难点,但会大增八个HTTP请求以换得数目被缓存的结果。);

    $fileMap=array();

    当然,使用ASP.NET本事生成其base64编码格式的图样data数据也不会很难。大家能够自行实验。

     

    $iterator=newDirectoryIterator($iconDir);

     

     

    foreach($iteratoras$file){

    自己推荐:依据具体意况,使用方案一:图片地图(图像火爆)方案二:CSS Sprites

    在PHP手艺中,使用函数file_get_contents从磁盘读取图片并插入到页面中来成立内联图片:

    if($file->isDot())continue;

     

    在其HTML中,使用style标签的href属性钦定外部样式表文件时,直接钦定到了四个PHP模版的.php文件(注意:不是.css文件),该PHP模版使用file_get_contents函数生成其样式表: 

    $fileName=$file->getFilename();

    外加文化:U讴歌MDXL中的相关心下一代组织商:http:、data:、file:、ftp:、mailto:、smtp:、pop:、dns:、whois:、finger:、daytime:、news:、urn: 等。那一个中有部分是法定注册的,还恐怕有局地是出于广大利用而被接受。

    .home{ background-image:url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("../img/home.gif")) ?>);}

    if($file->isDir()){

     

    其最后数额将是base64编码格式的图形data数据。

    generateIconMobileCallback($iconDir.'/'.$fileName,$styleSaveDir.'/'.$fileName);

    2010.8.27 补记:

    本来,使用ASP.NET才能生成其base64编码格式的图纸data数据也不会很难。大家能够活动实验。

    }else{


     

    $fileMap[$fileName]=md5_file($file->getRealPath());

    【推荐】重典博客中的这篇小说:

    自个儿推荐:遵照具体情状,使用方案一:图片地图(图像抢手)方案二:CSS Sprites

    }

     

     

    }

    在ASP.NET中自行合并小图片并采用CSS Coca Cola显示出来 

    叠合文化:UOdysseyL中的相关磋商:http:、data:、file:、ftp:、mailto:、smtp:、pop:、dns:、whois:、finger:、daytime:、news:、urn: 等。那其间有一部分是官方注册的,还大概有一对是出于广大采取而被接受。

    ksort($fileMap);

     

     

    $fileMapStr=json_encode($fileMap);

    //确定保障目录可写

    ensure_writable_dir($styleSaveDir);

    //js文件句柄

    $wirteHandle=fopen($styleSavePath,'w');

    //当前小Logo文件夹的相对路线

    $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);

    //管理成功的Logo文件夹给予提醒

    echo'

    '.$iconSaveRelative.' saved

    ';

    }

    /**

    * 确认保证文件夹存在并可写

    *

    * @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();

    ?>

    小编们直接引进所生成的js文件,测试一下是或不是中标

    直接在img标签里进入 icon-data = 'Logo文件名'  例如<imgicon-data="tryit">,查看效果

    下一场这里附上属性转换的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');

    }

    });

    }

    }

    未完,全文:

    亲生小说:

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:重型网址优化技能,请求的方案

    关键词: