永利402com官方网站重型网址优化技艺

永利402com官方网站 8
永利402com官方网站

调减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的图样占用的是荧屏宽度的八分之四,并非1/2。手提式有线电话机设备这么管理是为了减轻宽容性难题。除了网页,富含手提式有线电话机上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和天猫的手提式有线电话机站上边都有用到此手艺)。

永利402com官方网站 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($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’);
            }
        });
    }
}

 

五、完毕效益

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

 

永利402com官方网站 2

 

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

永利402com官方网站 3

 

页面调用的代码:

永利402com官方网站 4

 

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

永利402com官方网站 5

 

大家比较下用base64编码和毫无base64时所开支的小运:

先看不用的进程

永利402com官方网站 6

再看大家用了base64编码的进度   永利402com官方网站 7

 

假定多少个页面有点不清小Logo,那么这种艺术对网址的质量优化会有大大的进步。近日此种优化方案是用在自己今后的品类中移动端,而上一篇博文讲明的转移背景图的优化方案用在大家项目中的PC端。优化职能是很刚烈的!当然了,base64编码这种情势也能够用在PC端,大家的品种为啥将它用在手提式有线电话机端,本博文开首部分也会有对其做解释。这里测量试验本身就一直在PC端测量检验,手提式有线电话机端测量检验也是一个样的。

此地本人补偿某个:

(1)所生成的base64的js文件是在付出中就更改的了,并不是在客商访谈时才去变通,小编把HTML代码和PHP代码写在三个文书里是谋福,在真实项目中是分别的;

(2)使用此种优化技术有它的优点,当然也可以有它的劣点,独有相符自个儿项指标优化本事才是好工夫;

(3)个中优化技艺建议使用在手提式有线电话机端(能够解决背景图优化措施所不可能一挥而就的难题),而PC端的则用统一小Logo生成背景图的方法(看此文:);

(4)此种优化技巧经常用来小Logo(十几K以下),约等于HTTP响适当时候间远远出乎下载时间的时候,用此办法优化会见到显著的成效;

(5)当然能够相配别的优化技能联合利用,效果更明显,举个例子缓存等。

 

那贰次就享受那么多给大家,代码作者都贴上了,何况多数都标上了讲明,方便大家通晓。

只要此博文中有哪儿讲得让人难以掌握,接待留言沟通,若有解说错的地点应接建议。

假设你以为您能在那博文学到了新知识,请为自身顶三个,如文章中有降解错的地点,招待提议。

  互相学习,协同升高!

2 赞 2 收藏
评论

永利402com官方网站 8

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图