為什么要用css影片替換js影片

導致JavaScript效率低的兩大原因：操作DOM和使用頁面影片，

通常我們會通過頻繁的操作 DOM的CSS來實作視覺上的影片效果，導致js效率低的兩個因素都包括在內了在頻繁的操作DOM和CSS時，瀏覽器會不停的執行重排和重繪，在PC版本的瀏覽器中，因為瀏覽器可用的記憶體比較大，用戶肉眼幾乎看不見頁面影片產生的repaint和reflow，所以工程師幾乎無需過多的考慮影片帶來的性能問題，但在移動設備上可大有不同，移動設備分配給內置瀏覽器的記憶體可沒有PC版本的瀏覽器記憶體可觀，目前對CSS3支持最好的莫過于webkit瀏覽器了，在webkit內核的瀏覽器，一是safari其次是chrome.

用CSS3影片替代JS模擬影片的好處：

不占用JS主執行緒；
可以利用硬體加速；
瀏覽器可對影片做優化（元素不可見時不影片減少對FPS影響）

CSS3影片提供了2D和3D以及常規影片屬性介面，它可以作業在頁面的任何一個元素的任意一個屬性，CSS3的影片是利用C語言撰寫的，它是系統層面的影片，

采用js影片還是css3影片，需要開發者根據不同的需求做出不同的抉擇，但應該遵循一個基本的原則是：如果你需要做2D影片，請勿必使用CSS3的transition或animation

CSS3影片與javascript模擬影片有以下區別：

CSS 3D影片在js中無法實作
CSS3的3D影片是CSS3中非常強大的功能，因為它的作業原理是在一個三維的空間里，因此js是無法模擬出像CSS3那樣的3D影片
CSS 2D矩陣影片效率高于js利用margin和left,top模擬的矩陣影片
CSS3的2D影片是指是2D矩陣Transform變化，js當然是不能做變形影片的，就拿坐標影片來說，使用CSS3的transform做translateXY影片比js中的position left，position right快了近700mm!而且視覺上也比js影片流暢很多，
CSS3其它常規影片屬性的效率均低于js模擬的影片
常規影片屬性在這里是指：height，width,opacity,border-width,color

css3的屬性

2D 轉換
CSS3 轉換可以可以對元素進行移動、縮放、轉動、拉長或拉伸，
transform屬性，適用于2D或3D轉換的元素
transform-origin屬性，設定轉化元素位置

1.translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動，　

div {
　　transform: translate(50px,100px);
　　-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()方法，在一個給定度數順時針旋轉的元素，負值是允許的，這樣是元素逆時針旋轉，

div {
　　transform: rotate(30deg);
　　-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的引數

div {
    -webkit-transform: scale(2,3); /* Safari /
    transform: scale(2,3); / 標準語法 */
}

4.skew( [,])包含兩個引數值，分別表示X軸和Y軸傾斜的角度，如果第二個引數為空，則默認為0，引數為負表示向相反方向傾斜，

div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 /
    -webkit-transform: skew(30deg,20deg); / Safari and Chrome */
}

3D 轉換

translate3d(x,y,z)    定義 3D 轉化，
translateX(x)    定義 3D 轉化，僅使用用于 X 軸的值，
translateY(y)    定義 3D 轉化，僅使用用于 Y 軸的值，
translateZ(z)    定義 3D 轉化，僅使用用于 Z 軸的值，

scale3d(x,y,z)    定義 3D 縮放轉換，
scaleX(x)    定義 3D 縮放轉換，通過給定一個 X 軸的值，
scaleY(y)    定義 3D 縮放轉換，通過給定一個 Y 軸的值，
scaleZ(z)    定義 3D 縮放轉換，通過給定一個 Z 軸的值，

rotate3d(x,y,z,angle)    定義 3D 旋轉，
rotateX(angle)    定義沿 X 軸的 3D 旋轉，
rotateY(angle)    定義沿 Y 軸的 3D 旋轉，
rotateZ(angle)    定義沿 Z 軸的 3D 旋轉，

perspective(n)    定義 3D 轉換元素的透視視圖，

CSS3 過渡

transition    簡寫屬性，用于在一個屬性中設定四個過渡屬性，
transition-property    規定應用過渡的 CSS 屬性的名稱，
transition-duration    定義過渡效果花費的時間，默認是 0，transition-duration: 5s;
transition-timing-function    規定過渡效果的時間曲線，默認是 "ease"，
    linear    規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)），
    ease    規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)），
    ease-in    規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)），
    ease-out    規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)），
    ease-in-out    規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)），
    cubic-bezier(n,n,n,n)　　在 cubic-bezier 函式中定義自己的值，可能的值是 0 至 1 之間的數值，
transition-delay　　規定過渡效果何時開始，默認是 0，transition-delay: 2s;

CSS3 影片

@keyframes    規定影片，    
animation    所有影片屬性的簡寫屬性，除了 animation-play-state 屬性，    
animation-name    規定 @keyframes 影片的名稱，    
animation-duration    規定影片完成一個周期所花費的秒或毫秒，默認是 0，    
animation-timing-function    規定影片的速度曲線，默認是 "ease"，    
animation-fill-mode    規定當影片不播放時（當影片完成時，或當影片有一個延遲未開始播放時），要應用到元素的樣式，    
animation-delay    　　規定影片何時開始，默認是 0，    
animation-iteration-count    規定影片被播放的次數，默認是 1，
animation-direction    規定影片是否在下一周期逆向地播放，默認是 "normal"，
animation-play-state    規定影片是否正在運行或暫停，默認是 "running"，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/120054.html

標籤：Html/Css

上一篇：淺嘗https

下一篇：Vue實體：vue2.0+ElementUI框架開發pc專案

常用到用css3實作的轉換，過渡和影片

為什么要用css影片替換js影片

css3的屬性