整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Chrome DevTools小知识之 Timing

Chrome浏览器DevTools(F12)的NetWork页签下,访问某个网站的时候会把所有的请求显示出来,点击某个请求就会出来上图所示的一个面板,本文主要是Timing相关的一些内容。下面是图片显示内容的一些解释及程序开发时可能的优化时间办法。

Queued at 990.27ms:表示该请求加入到请求队列中的时刻。

Started at 1.00s:表示请求开始处理的时刻。


Queueing:表示请求从加入到请求队列中排队花费的时间。原因可能由于该请求被渲染引擎认为是优先级比较低的资源、服务器不可用、 超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6),

优化办法: 1、减少HTTP请求,使用CSS雪碧图、内联图片(不宜使用过大的图片)、合并js文件和css文件表等。 2、异步请求,减少阻塞。

Stalled:请求在可以被发送出去之前的等待时间(阻塞时间),一般是等待可复用的TCP连接释放的时间。浏览器对于单个域名只能同时建立4~6个TCP连接(不同浏览器实现有差异)。

优化办法:可以将一些资源分放到多台主机上,增大并发数。

Proxy Negotiation:浏览器和代理服务器连接的协商时间。

DNS Lookup:域名解析花费的时间。

优化办法:可以缓存DNS。

Initial Connection:建立TCP连接花费的的时间,包括TCP握手/重试和协商SSL(包含SSL时间)。

优化办法:使用长连接,复用已有连接。

SSL:花费在完成SSL上的时间。

Request sent:发送请求花费的时间。时间通常很短,大多数情况不会超过1毫秒(取决于网络带宽等因素),基本不需要优化。

Waiting (TTFB):从发出请求到接收到响应第一个字节经过的时间,包括网络延迟时间。

优化办法:1、可以使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,如果这个时间花费比较长,就应该考虑对网络进行性能优化了。2、如果是ajax请求,重点可能就是代码层面的优化了。

Content Download:从接收响应到响应接收完成花费的时间。

优化办法:1、可以考虑针对部分内容进行压缩,如js文件压缩(jquery.js换成jquery.min.js)、gzip等,减少响应数据大小。2、对于变化不频繁的资源可以采用If-Modified-Since和Last-Modified等,让服务器会返回304,不返回响应数据。

么样制作这么一个简单的(CSS3动画)静态网页动态图呢?

当然如果不限制使用的语言,那实现的方法有很多啦,简单的javaScript语言就可以很容易实现,当然使用框架的话就会更加简单啦。现在让我们用一些更简单单纯的CSS语言来实现。

实现这样的(CSS3动画)静态网页动态图,需要用到哪些东西呢?

1、素材:云层

image:云层1.png 云层2.png 云层3.png 也就是需要几张不同的云层图片。

云层1.png

云层2.png

云层3.png

这看似什么也没有的云层,能作出这样美丽的变化图,也是一种美的艺术。

细看之下的云层

2、文档编辑软件:Sublime Text3

Sublime Text3 是一款非常强大的,且非常好用前端常用开发工具之一。大家可以尝试一下。

界面

快捷方式

3、HTML部分: 放置云层图片

主要实现三张图片的布局,所以用三个div标签即可。

<div class="sky">
	<div class="clouds_one"></div>
	<div class="clouds_two"></div>
	<div class="clouds_three"></div>
</div>

4、CSS部分:

CSS3动画是什么?

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。而且为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

该云彩变换过程:

通过在设定的开始时间和结束时间之间的特定时间段,设置背景的随时间的样式变换来实现。

解决兼容性问题部分:

第一部分:CSS常见兼容性问题解决

html,body{
margin:0;
padding:0;
height:100%;
}

第二部分:CSS中动画标签animation 属性兼容性问题解决:

-webkit-animation:; //代表Safari、Chrome等浏览器的私有属性
 -moz-animation: ; //代表火狐firefox浏览器私有属性
 -o-animation: ; //代表欧朋Opera浏览器私有属性
-ms-animation:; //代表IE浏览器的私有属性
 animation: ;//自身兼容IE10、Firefox 以及 Opera 等浏览器。

还有其他CSS兼容性问题可参考:CSS样式浏览器兼容性问题归纳

CSS3动画animation标签

该标签由三部分组成:

1、关键帧(keyframes) - 定义动画在不同阶段的状态。

2、动画属性(properties) - 决定动画的播放时长,播放次数,以及用何种函 数式去播放动画等。(可以类比音视频播放器)

3、css属性 - 就是css元素不同关键帧下的状态。

Animation

@Keyframes属性

animation-timing-function

 -webkit-animation: sky_background 50s ease-out infinite;/*动画过程 时间 以慢速结束 无限循环*/
 -webkit-transform: translate3d(0, 0, 0); /*兼容Safari、Chrome等浏览器内核,将其定义为3d转换*/

div盒子模型及布局方式:

div盒子的五大主要属性:height、width、padding、margin、border。

div盒子常用布局属性:position: ; 、overflow: ; 等

大div容器.sky的样式如下:

.sky {
 height: 100%;
 background: #007fd5;
 position: relative; /*相对定位*/
 overflow: hidden; /*超出隐藏*/
 -webkit-animation: sky_background 50s ease-out infinite;/
*动画播放过程:50s(播放时长)以慢速结束(ease-out) 无限循环(infinite)*/
 -moz-animation: sky_background 50s ease-out infinite; 
 -o-animation: sky_background 50s ease-out infinite;
 animation: sky_background 50s ease-out infinite;
 -webkit-transform: translate3d(0, 0, 0); //-webkit- Safari、Chrome等
 -ms-transform: translate3d(0, 0, 0); //-ms- 代表IE浏览器的私有属性
 -o-transform: translate3d(0, 0, 0);//-o- 代表欧朋Opera浏览器私有属性
 transform: translate3d(0, 0, 0);
}

云层1div块的设置如下:

注意:

1、width:300% ; 是为了在播放之时保证能够充分的衔接。

2、position:absolute; 绝对定位。

.sky .clouds_one {
 background: url("../images/cloud_one.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;//
 -webkit-animation: cloud_one 50s linear infinite; //linear:匀速
 -moz-animation: cloud_one 50s linear infinite;
 -o-animation: cloud_one 50s linear infinite;
 animation: cloud_one 50s linear infinite;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

云层2div块的设置如下:

注意:

1、width:300% ; 是为了在播放之时保证能够充分的衔接。

2、position:absolute; 绝对定位。

.sky .clouds_two {
 background: url("../images/cloud_two.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 -webkit-animation: cloud_two 75s linear infinite;
 -moz-animation: cloud_two 75s linear infinite;
 -o-animation: cloud_two 75s linear infinite;
 animation: cloud_two 75s linear infinite;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

云层3div块的设置如下:

注意:

1、width:300% ; 是为了在播放之时保证能够充分的衔接。

2、position:absolute; 绝对定位。

.sky .clouds_three {
 background: url("../images/cloud_three.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 -webkit-animation: cloud_three 100s linear infinite;
 -moz-animation: cloud_three 100s linear infinite;
 -o-animation: cloud_three 100s linear infinite;
 animation: cloud_three 100s linear infinite;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

设置动画的关键帧@KeyFrames:

开始-中间-结束按钮 转化为 0%--50%--100%,我们又可叫做进度条。在不同阶段设置不同的背景色,是整个过程 呈现渐变动画状态。

注意:@ :千万不能丢掉

大的div(.sky)关键帧设置:

@-webkit-keyframes sky_background { //可以把其他几个兼容内核按照这个模板罗列
 0% { //-o- 、-ms-、-moz- 和自身兼容
	background: #007fd5; // 起点
	color: #007fd5 ; //起点
 }
 50% {
	background: #000; //转折点
	color: #a3d9ff ; //转折点
 }
 100% {
	background: #007fd5; //起点
	color: #007fd5; //起点
 }
}

云层div块的关键帧设置:

云层设置只用设置开始和结束的位置即可

@-webkit-keyframes cloud_one { //同上
 0% {
	left: 0
 }
 100% {
	left: -200% //保证完美衔接
 }
}
@-webkit-keyframes cloud_two {
 0% {
	left: 0
 }
 100% {
	left: -200%
 }
}
@-webkit-keyframes cloud_three {
 0% {
	left: 0
 }
 100% {
	left: -200%
 }
}

经过这些简单的设置,一个云彩变换的动画就可以展示出来了。 总结一下用到的动画关键属性:

animation:

animation: name duration timing-function delay iteration-count direction;

transform:

transform: none|transform-functions;

keyframes:

@keyframes animationname {keyframes-selector {css-styles;}/*0%{} 50%{} 100%{}*/}

position:

position:absolute /relative;

注意: 一般动画animation 和 @KeyFrames是联合使用的。

点击扩展链接可查看源码。

本文部分内容参考网络,如有错误,感谢指出,如有侵权,请联系修改。

SS3 transition动画

1、transition-property 设置过渡的属性,比如:width height background-color

2、transition-duration 设置过渡的时间,比如:1s 500ms

3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)

4、transition-delay 设置动画的延迟

5、transition: property duration timing-function delay 同时设置四个属性

综合练习:

制作鼠标移入图片时,图片说明滑入的效果

CSS3 transform变换

1、translate(x,y) 设置盒子位移

2、scale(x,y) 设置盒子缩放

3、rotate(deg) 设置盒子旋转

4、skew(x-angle,y-angle) 设置盒子斜切

5、perspective 设置透视距离

6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示

7、translateX、translateY、translateZ 设置三维移动

8、rotateX、rotateY、rotateZ 设置三维旋转

9、scaleX、scaleY、scaleZ 设置三维缩放

10、tranform-origin 设置变形的中心点

11、backface-visibility 设置盒子背面是否可见

举例:(翻面效果)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>翻面</title>
 <style type="text/css">
 .box{
 width:300px;
 height:272px;
 margin:50px auto 0;
 transform-style:preserve-3d;
 position:relative; 
 }
 .box .pic{
 width:300px;
 height:272px;
 position:absolute;
 background-color:cyan;
 left:0;
 top:0;
 transform:perspective(800px) rotateY(0deg);
 backface-visibility:hidden;
 transition:all 500ms ease;
 }
 .box .back_info{
 width:300px;
 height:272px;
 text-align:center;
 line-height:272px;
 background-color:gold;
 position:absolute;
 left:0;
 top:0;
 transform:rotateY(180deg);
 backface-visibility:hidden;
 transition:all 500ms ease; 
 }
 .box:hover .pic{
 transform:perspective(800px) rotateY(180deg);
 }
 .box:hover .back_info{
 transform:perspective(800px) rotateY(0deg);
 }
 </style>
</head>
<body>
 <div class="box"> 
 <div class="pic"><img src="images/location_bg.jpg"></div>
 <div class="back_info">背面文字说明</div>
 </div>
</body>
</html>

CSS3 animation动画

1、@keyframes 定义关键帧动画

2、animation-name 动画名称

3、animation-duration 动画时间

4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

7、animation-direction 动画结束后是否反向还原 normal|alternate

8、animation-play-state 动画状态 paused(停止)|running(运动)

9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

理解练习:

1、风车动画

2、loading动画

3、人物走路动画

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>走路动画</title>
 <style type="text/css"> 
 .box{
 width:120px;
 height:180px;
 border:1px solid #ccc; 
 margin:50px auto 0;
 position:relative;
 overflow:hidden; 
 }
 .box img{
 display:block;
 width:960px;
 height:182px;
 position: absolute;
 left:0;
 top:0;
 animation:walking 1.0s steps(8) infinite; 
 }
 @keyframes walking{
 from{
 left:0px;
 }
 to{
 left:-960px;
 }
 }
 </style>
</head>
<body>
 <div class="box"><img src="images/walking.png"></div>
</body>
</html>

动画中使用的图片如下:

CSS3圆角、rgba

CSS3圆角

设置某一个角的圆角,比如设置左上角的圆角:

border-top-left-radius:30px 60px;

同时分别设置四个角: border-radius:30px 60px 120px 150px;

设置四个圆角相同:

border-radius:50%;

rgba(新的颜色值表示法)

1、盒子透明度表示法:

 .box
 {
 opacity:0.1;
 /* 兼容IE */
 filter:alpha(opacity=10); 
 }

2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度