当前位置:千赢国际官网 > 千赢网页手机版登入 > 页面白屏与瀑布流分析方法,动画工具

页面白屏与瀑布流分析方法,动画工具

文章作者:千赢网页手机版登入 上传时间:2019-10-21

11 个 HTML5 动画工具

2015/11/16 · HTML5 · 动画

原文出处: devzum   译文出处:[PHP100

  • Zeroing]()   

如今,在Web开发中最为流行的语言就是HTML5了,它帮助开发者将多样化的内容展现给用户。在过去两三年中,我们共同看到了HTML5的发展,它逐渐在网络的世界中积累了名气和流行度。HTML常常会给我们带来新的技术和特性,使得前端技术不断的发展强大。HTML5受到欢迎的原因也在于它给用户带来的极大便利,当前的大多数浏览器,如Chrome、Firefox、IE等都对它给予支持。

HTML5使得开发者能为你的网站创建出惊人的动画效果。这些很棒的动画效果会为你的网站增添更多吸引力,接着会带来更多的生意。这些用HTML5创建的动画效果很出色,看起来很惊人。但为了做出这种动画效果,你需要经历很多比较麻烦的工作,所以你可以使用一些免费或市面上收费的HTML5动画工具。

本文将会为大家介绍市面上最好的HTML5动画工具。这个清单使我们极为用心列出来的,以为大家呈现出真正有用且专业的HTML5动画工具。所以接着读下去并找到最符合你需求的那个工具吧,以下每个工具都有它独特的地方。

页面白屏与瀑布流分析方法

2015/12/03 · HTML5, JavaScript · 1 评论 · 瀑布流, 白屏

原文出处: 淘宝前端团队(FED)- 妙净   

图片 1

无线页面的开发在我们的日常工作中越来越重要,无线的性能也是我们需要重点关注的,而加载的性能又是无线性能中的一个重要问题。那么,今天我们一起来看下如何去评估、测试无线页面的加载性能。

为了方便分析页面的加载过程,这里将网络设置成最慢的 GPRS,并将加载过程录制下来,通常你可以通过 Chrome 自带的 timeline, 勾选 screenhot,可以得到详尽的过程,如下图:

图片 2

这里为了和请求一一清晰对照,用额外录屏工具( licecap )录制下来。下文以淘宝双 11 男装分会场的预发页面作为测试,录制 结果 gif 如下,录制的 FPS 为 8。

帧分析如下:

第一帧:重新刷新页面,发起 HTML 请求,中间完整页面是刷新前的,请无视之。

图片 3

终于等到第 7 帧,HTML 加载并解析完成,发出页面中的请求,同时 CSS/JS 的地址都收敛在 //g.alicdn.com 同一个域名下, Chrome 下 HTTP 1.1 协议下一个域名下支持 6 个并发。

1 年前,PC 上以前还有多个域名分区(img01-04.tbcdn.cn),PC 上首屏图片多,这样可并发更多,但更多的域名引入,也加大了域名解析的成本,权衡之下淘宝之前图片域名选择了 4 个;后来集团经过轰轰烈烈的 HTTPS 改造,图片推荐收敛到 gw.alicdn.com ;手淘下现在使用 SPDY HTTPS,相比 HTTP 1.1 ,更安全且可以多路复用。

图片 4

到第 20 帧, CSS 下载完,DOM 和 CSSOM 都准备 OK 了,页面则开始渲染了;这是在 Chrome 下面看到的情况,但在 iOS 上并非如此,它需要 JS 加载并执行完才渲染页面。

图片 5

第 21 帧,紧接着,CSS 中的背景图开始相继渲染,可见 CSS 中渲染图片也是有点耗时的。

图片 6

第 23 帧,前面并行下载的 JS 都下载完,也开始执行了,看“疯狂 top 榜”是 JS 抽取出来的。同时 aplus 请求也开始请求,这是个 getScript 的异步请求,可见异步请求真没有阻塞页面的渲染。

图片 7

第 25 帧,JS 还在继续执行,第一张图片是 JS 根据当前 dpr、强弱网络、设备宽度等算出最适合的图片开始加载这张大 banner 了,并且开始发送数据请求了。

图片 8

到 27 帧,终于数据请求回来了,并且把文字和图片渲染到页面上了。

图片 9

然后下一帧 28,开始请求商品图片了。

图片 10

到 45 帧,6 个图片都在并发请求,同上 gw.alicdn.com 同一个域下并发 6 个请求。但首屏除了大图外只有 4 张图(2 张商家 logo 被底部 bar 挡住了),这里发出了 6 个图片请求,可见这个页面的懒加载的 buffer 值可以设置得更小。

图片 11

从 28 帧到 50 帧,经历了很长的时间,第一张图片终于显示出来了。另外看到 aplus_v2 执行完后,又发起了 spm 等请求,后面 3 个请求( aplus-proxy.html/isproxy.js/m.gif )还是串行的。

图片 12

最后到第 61 帧,终于所有的图片都加载完了,最后看下,最后下载完的是大 banner 图,因为有 46.9k ,这张图的大小可能成为此页面的 load 时间的关键;如果这张图没有这么大,最后下载完的可能是用于埋点的 m.gif。

图片 13

从上面整个请求的瀑布流分析下来,我们来回顾下页面的关键时间点:

减少HTTP请求(大型网站优化技术)

2015/11/26 · HTML5 · HTTP

原文出处: Kelly   

在网站开发过程中,对于页面的加载效率一般都想尽办法求快。那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法。上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”,那么,这一篇博文将讲解  “ 将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片”。

一、为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片的方法减少HTTP请求数?

为什么我会讲解 “将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片” 这一种方式来减少HTTP请求,进而优化页面呢?这里呢,是涉及到移动端的图标使用。上一篇博文所讲的方法能否使用于手机端的网页呢?

但是,它会出现一个问题:背景图 css显示图标时,图标本身无法缩放,比如背景图中64px*64px的图标,显示到界面时必须设置icon的大小也是64*64。在PC网页中这通常不会有什么问题,但在移动端设备上就完全行不通。同样是4英寸的手机屏幕,其分辨率有可能是320*400,也可能是640*800,甚至也可能是1920*1080。这样64px*64px的图标在不同的设备上看起来的大小就会差别非常明显。

幸运的是,手机上的浏览器基本对此做了优化,会把设备模拟成更低的分辨率。比如在1136*640的IPHONE 5中获取$(window).width(),取出来的是320而不是640,这样一个宽度为160px的图片占用的是屏幕宽度的一半,而不是1/4。手机设备这样处理是为了解决兼容性问题。除了网页,包括手机上app的界面,在retina屏幕上和非retina屏幕上的大小是完全一样的,都是因为对分辨率做了处理。

但是,移动设备这样的处理方式并不能完全解决问题,因为机器的假设性猜测在很多时候是不合适的,尤其是在android设备中。为了更好地控制元素显示的大小,解决的办法就是用pt代替ps,px是对应屏幕的分辨率,而pt是针对人眼睛实际感觉的大小,无论在何种分辨率的设备上,72pt固定是1英寸。

HTML的img标签元素的src属性不只是可以指定url,也可以指定图片的二进制数据流。然后通过img元素的自动缩放功能,指定img的大小,就可以实现在不同分辨率的设备上显示一致的图标大小。

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

当我们的一个页面中要传入很多图片时,特别是一些小图标,十几K、几K,甚至是字节级别大小的小图标,这些小图标都会增加HTTP请求,假如多了,就会给服务器带来很大的压力。比如要下载一些一两K大的小图标,其实请求时带上的额外信息有可能比图标的大小还要大。所以,在请求越多时,在网络传输的数据自然就越多了,传输的数据自然也就变慢了。而这里,我们采用Base64的编码方式将图片直接嵌入到网页中,而不是从外部载入,这样就减少了HTTP请求。当然了,它有一个小缺点,就是使当前页面的大小变大了(对于优化来说,其实这个可以忽略,影响不大)。看一下下图,小图标大小为2.4k,等待响应时间是14ms,而接受数据,也就是下载时间约为0ms;可想而知,在有大量小图标下载的时候,这样的方式去优化能大大提高网站的性能(在jquery mobile和天猫的手机站上面都有用到此技术)。

图片 14

三、开发思路

将小图标放在以icon_开头的文件夹里(以区分不用生成base64的图片的文件夹)—>用程序去遍历文件夹图片 —>将每张图片的base64编码放在一个js对象里—>在HTML页面的img标签里 使用属性 icon-data = ‘图标名(不带后缀)’来显示图片 —> JS文件写一个函数对icon-data属性进行转换,转换成src属性,然后值就通过icon-data的属性值获得图标名,然后进行相应的替换得到相应图标的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_开头的文件夹,如果是,则对此文件夹的图标进行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>

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');
            }
        });
    }
}

 

五、实现效果

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

 

图片 15

 

这里我们自动生成的JS文件是这样子的格式:

图片 16

 

页面调用的代码:

图片 17

 

JS对img的icon-data属性转换处理的代码:

图片 18

 

我们对比下用base64编码和不用base64时所花费的时间:

先看不用的速度

图片 19

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

 

假如一个页面有很多小图标,那么这种方式对网站的性能优化会有大大的提升。如今此种优化方案是用在我现在的项目中移动端,而上一篇博文讲解的生成背景图的优化方案用在我们项目中的PC端。优化效果是很明显的!当然了,base64编码这种方法也可以用在PC端,我们的项目为啥将它用在手机端,本博文开头部分也有对其做解释。这里测试我就直接在PC端测试,手机端测试也是一个样的。

这里我补充一点:

(1)所生成的base64的js文件是在开发中就生成的了,而不是在用户访问时才去生成,我把HTML代码和PHP代码写在一个文件里是方便,在真实项目中是分开的;

(2)使用此种优化技术有它的优点,当然也会有它的缺点,只有适合自己项目的优化技术才是好技术;

(3)此中优化技术建议使用在手机端(可以解决背景图优化方式所不能解决的问题),而PC端的则用合并小图标生成背景图的方式(看此文:);

(4)此种优化技术一般用于小图标(十几K以下),也就是HTTP响应时间远远大于下载时间的时候,用此方法优化会看到明显的效果;

(5)当然可以配合其他优化技术一起使用,效果更明显,比如缓存等。

 

这一次就分享那么多给大家,代码我都贴上了,而且很多都标上了注释,方便大家理解。

如果此博文中有哪里讲得让人难以理解,欢迎留言交流,若有讲解错的地方欢迎指出。

如果您觉得您能在此博文学到了新知识,请为我顶一个,如文章中有解释错的地方,欢迎指出。

  互相学习,共同进步!

2 赞 2 收藏 评论

图片 21

1. Mixeek

这是一款用来设计和运行Web动画和交互的免费应用工具。它基于JavaScript,CSS3和HTML5,它有着轻量级、已使用的特点。

页面可见时间

在第 20 帧页面可见,CSS 完成之后,当然前提是这里没有外链 JS 在页面中间因为网络请求严重阻塞页面。这里分析的仅仅是 Chrome 浏览器,不是真机,在 iOS 上,就算 JS 在底部,直接 <script src="xx"> 也是会阻塞页面。可以通过加 async 属性,通知渲染引擎这是不影响页面渲染的 JS,可以异步加载,iOS 下添加此属性可实现和 Android 或 PC Chrome 一样的效果。

2. Animatron

它主要用来设计和发布动画/交互的内容,包括在PC端和手机端两个地方。

重要内容可见时间

重要内容可见,这里可以认为是商品数据,商品数据可见要等 JS 执行完并且异步请求发送出去回来后才可见。

TMS[1] 的异步请求大多走招商数据平台(TCE[2])的接口,测试其单个请求在真机的耗时约为 110ms(样本较少,未大量测试)。

3. Tumult Hype

设计师们可以用它创造出漂亮的Web内容,而且几乎不用任何的Coding,可以运行在桌面、手机和Pad上。

白屏时间和补救方法

在 Wi-Fi 下,这 60 多帧的过程一眨眼就过去了,但在弱网络下,如这里最极端的网络 GPRS 下,整个首屏含图片全部加载完成需要 41.25s。当然这 40 多秒过程能尽早出现内容,并渐进和谐地呈现出来是比较好的。

男装频道是修改过后的,对比之前的未处理的猜你喜欢页面,出现长时间的白屏,如下:

图片 22

以下为本地生活修复后的效果:

图片 23

白屏处理只要稍微注意下就可以,修复的方便也简单,尽量同步输出,异步输出请尽量 mock 出现在首屏的模板。如果是基于 Cake[3] 工具开发的,也可以直接用首屏填充伪标签。

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:页面白屏与瀑布流分析方法,动画工具

关键词: 千赢国际官网 千亿国际qy8