澳门金莎娱乐网站大型网站优化技术

时间:2019-10-10 02:35来源:网页制作
压缩HTTP哀告(大型网址优化技巧) 2015/11/26 · HTML5 ·HTTP 原稿出处: Kelly    在网址开荒过程中,对于页面包车型的士加载效用平日都想尽办法求快。那么,怎么让技艺更加快啊?收缩页

压缩HTTP哀告(大型网址优化技巧)

2015/11/26 · HTML5 · HTTP

原稿出处: Kelly   

在网址开荒过程中,对于页面包车型的士加载效用平日都想尽办法求快。那么,怎么让技艺更加快啊?收缩页面央浼 是三个优化页面加载速度很好的措施。上一篇博文咱们疏解了 “利用将小Logo合成一张背景图来压缩HTTP须求”,那么,这一篇博文将执教  “ 将图纸转成二进制并生成Base64编码,能够在网页中经过url查看图片”。

一、为何选择将图片转成二进制并生成Base64编码,能够在网页中经过url查看图片的办法降低HTTP伏乞数?

缘何笔者会讲明“将图纸转成二进制并生成Base64编码,能够在网页中经过url查看图片” 这一种艺术来减少HTTP央求,进而优化页面吗?这里呢,是涉嫌到活动端的Logo使用。上一篇博文所讲的措施是还是不是利用于手提式有线电电话机端的网页呢?

唯独,它会晤世一个主题素材:背景图+css突显图标时,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的图形占用的是显示屏宽度的百分之五十,并不是四分之二。手提式有线电话机设备这么管理是为着缓慢解决宽容性难题。除了网页,包罗手提式有线电话机上app的分界面,在retina显示屏上和非retina显示器上的轻重缓急是截然一致的,都以因为对分辨率做了处理。

只是,移动设备这么的管理格局并不能够一心缓和难点,因为机器的假诺性推断在众多时候是不相符的,极度是在android设备中。为了更加好地决定成分呈现的尺寸,化解的措施就是用pt代替ps,px是对应荧屏的分辨率,而pt是指向人眼睛实际上认为的大小,无论在何种分辨率的装置上,72pt固定是1英寸。

HTML的img标签成分的src属性不只是足以钦定url,也足以钦赐图片的二进制数据流。然后经过img成分的机关缩放效率,钦点img的高低,就足以兑将来不一致分辨率的配备上海展览中心示同一的图标大小。

二、使用Base64编码裁减页面央浼数

当大家的三个页面中要传播相当多图形时,极度是一对小图标,十几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 = ‘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');
            }
        });
    }
}

 

五、达成效益

  那是页面输入效果,小图标寻常显示出来了

 

澳门金莎娱乐网站 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)此种优化本事通常用于小Logo(十几K以下),也便是HTTP响合时间远远当先下载时间的时候,用此方法优化拜谒到明明的效果;

(5)当然能够包容别的优化本事协同使用,效果更显眼,举个例子缓存等。

 

那贰次就享受那么多给我们,代码笔者都贴上了,并且不菲都标上了讲明,方便大家清楚。

如果此博文中有哪儿讲得让人为难通晓,款待留言调换,若有解说错的地点迎接提议。

假定您感觉你能在此博法学到了新知识,请为笔者顶二个,如小说中有表达错的地点,招待提出。

  相互学习,共同提高!

2 赞 2 收藏 评论

澳门金莎娱乐网站 8

编辑:网页制作 本文来源:澳门金莎娱乐网站大型网站优化技术

关键词: