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) 前三個數值表示顏色，第四個數值表示顏色的透明度

在線咨詢

上一篇：干貨｜SpringBoot集成極光推送完整實現代碼（建議收藏）
下一篇：三款一見傾心的Windows寶藏軟件，好用到舍不得分享

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Chrome DevTools小知識之 Timing

么樣制作這么一個簡單的（CSS3動畫）靜態網頁動態圖呢？

實現這樣的（CSS3動畫）靜態網頁動態圖，需要用到哪些東西呢？

CSS3動畫是什么？

該云彩變換過程：

解決兼容性問題部分：

CSS3動畫animation標簽

div盒子模型及布局方式：

大div容器.sky的樣式如下：

云層1div塊的設置如下：

云層2div塊的設置如下：

云層3div塊的設置如下：

設置動畫的關鍵幀@KeyFrames：

大的div（.sky）關鍵幀設置：

云層div塊的關鍵幀設置：

SS3 transition動畫

CSS3 transform變換

CSS3 animation動畫

CSS3圓角、rgba

您的項目需求