当前位置: 58彩票app下载 > 前端应用 > 正文

大型网站优化技术

时间:2019-11-13 14:55来源:前端应用
收缩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时,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诉求。当然了,它有叁个小劣点,正是使当前页面包车型地铁尺寸变大了(对于优化来讲,其实这么些能够忽视,影响相当小卡塔尔。看一下下图,小图标大小为2.4k,等待响适当时候间是14ms,而选取多少,相当于下载时间约为0ms;总之,在有雅量小图标下载的时候,那样的措施去优化能大大进步网址的属性(在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($full帕特hName); //获得文件名(未有后缀卡塔尔 $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($full帕特hName, '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平常展现出来了

 

图片 2

 

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

图片 3

 

页面调用的代码:

图片 4

 

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

图片 5

 

咱俩相比较下用base64编码和毫无base64时所花费的年月:

先看不用的速度

图片 6

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

 

即使三个页面有成千上万小图标,那么这种方式对网址的性质优化会有大大的升高。方今此种优化方案是用在自己今日的品种中移动端,而上一篇博文讲授的转移背景图的优化方案用在我们项目中的PC端。优化效率是很刚烈的!当然了,base64编码这种情势也得以用在PC端,我们的体系怎么将它用在手提式无线电话机端,本博文起尾部分也可能有对其做解释。这里测量试验自身就直接在PC端测试,手提式无线话机端测验也是八个样的。

此处自身补偿有些:

(1卡塔 尔(阿拉伯语:قطر‎所生成的base64的js文件是在支付中就转换的了,并非在顾客访谈时才去变通,笔者把HTML代码和PHP代码写在贰个文本里是有利,在真实项目中是分别的;

(2卡塔尔使用此种优化技能有它的独到之处,当然也许有它的弱项,独有契合自身项目标优化技能才是好技巧;

(3卡塔尔当中优化技能建议使用在手提式有线电话机端(可以消除背景图优化措施所不能消除的难点卡塔尔国,而PC端的则用统一小Logo生成背景图的点子(看此文:);

(4卡塔尔国此种优化技巧常常用于小Logo(十几K之下卡塔 尔(阿拉伯语:قطر‎,也正是HTTP响合时间远远大于下载时间的时候,用此措施优化会见到明明的效应;

(5卡塔 尔(阿拉伯语:قطر‎当然能够匹配其余优化技巧合作利用,效果更醒目,比如缓存等。

 

这一回就享受那么多给我们,代码小编都贴上了,况且大多都标上了批注,方便我们知晓。

假若此博文中有何地讲得令人难以知晓,接待留言调换,若有讲明错的地点款待提出。

假诺你以为你能在这里博文学到了新知识,请为自己顶叁个,如小说中有分解错的地点,招待提出。

  相互学习,协同提升!

2 赞 2 收藏 评论

图片 8

编辑:前端应用 本文来源:大型网站优化技术

关键词: