新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

能够在网页中经过url查看图片的不二法门减弱H

缩减HTTP央浼(大型网址优化技巧)

2015/11/26 · HTML5 · HTTP

初稿出处: Kelly   

在网址开辟进程中,对于页面包车型地铁加载成效平日都想尽办法求快。那么,怎么让工夫更加快吧?收缩页面央求 是四个优化页面加载速度很好的法子。上一篇博文我们讲明了 “利用将小Logo合成一张背景图来压缩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,以至也说不定是一九一九*1080。这样64px*64px的Logo在不一样的设施上看起来的深浅就能够间隔拾壹分显眼。

侥幸的是,手提式有线电话机上的浏览器基本对此做了优化,会把器械模拟成更低的分辨率。举个例子在1136*640的IPHONE 5中获得$(window).width(),抽取来的是320实际不是640,这样三个宽度为160px的图形占用的是显示器宽度的二分一,而不是53%。手提式有线电话机配备这么管理是为着解决宽容性难点。除了网页,满含手提式有线电话机上app的分界面,在retina荧屏上和非retina荧屏上的高低是截然一致的,都以因为对分辨率做了管理。

然而,移动设备这么的管理格局并无法一心缓慢解决难点,因为机器的假使性测度在非常多时候是不相宜的,越发是在android设备中。为了越来越好地调控元素呈现的分寸,化解的法子正是用pt替代ps,px是对应显示器的分辨率,而pt是对准人眼睛实在以为的深浅,无论在何种分辨率的配备上,72pt固定是1英寸。

HTML的img标签成分的src属性不只是足以钦点url,也能够钦定图片的二进制数据流。然后经过img成分的机关缩放成效,内定img的轻重,就能够达成在差异分辨率的配备上显得同一的Logo大小。

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

当我们的八个页面中要传播比相当多图形时,特别是某些小Logo,十几K、几K,以至是字节等第大小的小Logo,那个小Logo都会大增HTTP必要,假使多了,就能给服务器带来一点都不小的下压力。举个例子要下载一些一两K大的小Logo,其实哀告时带上的额外新闻有希望比Logo的深浅还要大。所以,在呼吁越多时,在网络传输的数量自然就更多了,传输的数目自然也就变慢了。而那边,我们运用Base64的编码情势将图片直接嵌入到网页中,并不是从外界载入,这样就收缩了HTTP央求。当然了,它有三个小劣点,就是使当前页面包车型大巴尺寸变大了(对于优化来讲,其实那几个可以忽视,影响一丁点儿)。看一下下图,小Logo大小为2.4k,等待响合时间是14ms,而接受多少,也正是下载时间约为0ms;同理可得,在有雅量小Logo下载的时候,那样的主意去优化能大大升高网站的习性(在jquery mobile和天猫商城的手提式有线话机站上面皆有用到此技术)。

图片 1

三、开采思路

将小Logo放在以icon_始发的文件夹里(以分别不用生成base64的图样的文书夹)—>用程序去遍历文件夹图片 —>将每张图片的base64编码放在三个js对象里—>在HTML页面包车型客车img标签里 使用性质 icon-data = ‘图标名(不带后缀)’来展现图片 —> 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($styleSave帕特h, '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); //处理成功的图标文件夹给予提示 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');
            }
        });
    }
}

 

五、完结效果与利益

  那是页面输入效果,小Logo平常展现出来了

 

图片 2

 

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

图片 3

 

页面调用的代码:

图片 4

 

JS对img的icon-data属性调换管理的代码:

图片 5

 

我们相比较下用base64编码和毫无base64时所开支的时间:

先看不用的速度

图片 6

再看我们用了base64编码的速度   图片 7

 

假定一个页面有广大小Logo,那么这种艺术对网址的属性优化会有大大的进步。前段时间此种优化方案是用在本身未来的类型中移动端,而上一篇博文疏解的改造背景图的优化方案用在我们项目中的PC端。优化成效是很显眼的!当然了,base64编码这种艺术也能够用在PC端,我们的花色怎么将它用在手提式有线电话机端,本博文起底部分也会有对其做解释。这里测量试验自身就直接在PC端测验,手提式有线电话机端测验也是三个样的。

那边自个儿补偿有个别:

(1)所生成的base64的js文件是在付出中就成形的了,并不是在顾客访谈时才去变通,小编把HTML代码和PHP代码写在叁个文件里是方便人民群众,在真正项目中是分开的;

(2)使用此种优化手艺有它的帮助和益处,当然也可以有它的短处,唯有符合本人项目标优化技巧才是好本事;

(3)个中优化技巧建议利用在手提式有线话机端(能够化解背景图优化措施所无法解决的标题),而PC端的则用联合小Logo生成背景图的点子(看此文:);

(4)此种优化技能日常用于小图标(十几K之下),也等于HTTP响适那时候间远远超乎下载时间的时候,用此措施优化会看出明明的效应;

(5)当然能够宽容其余优化手艺联合行使,效果更明了,譬如缓存等。

 

那三回就享受那么多给大家,代码小编都贴上了,并且不菲都标上了讲解,方便我们掌握。

一旦此博文中有哪里讲得令人为难精晓,款待留言沟通,若有讲授错的地点招待建议。

如若您感到你能在那博法学到了新知识,请为作者顶一个,如作品中有分解错的地点,应接提出。

  相互学习,共同进步!

2 赞 2 收藏 评论

图片 8

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:能够在网页中经过url查看图片的不二法门减弱H

您可能还会对下面的文章感兴趣: