整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著前端技術的不斷發展，html5不僅應用于傳統的web頁面開發，而且還能用于移動APP、桌面應用開發，甚至各大互聯網平臺推出的小程序也是借鑒了html5技術。
h5應用相比原生應用來說，用戶體驗上會有一些差異，因此，性能調優非常重要。
對html5的調優可以從以下幾個方面入手:
1.網絡調優
網絡調優又有以下幾種處理方式:
首先，減小請求體積，對代碼進行壓縮處理，啟用服務端的GZIP配置等，能有效減小數據傳輸的體積。
其次，減少請求次數，適當的使用一些緩存技術，將數據緩存到本地，這樣就不需要頻繁向服務端請求數據。增加一些防抖、節流的措施，防止用戶不必要的重復操作，重復請求。
第三，優化網絡鏈路，使用CDN技術，讓客戶端從最近的網絡節點請求資源，減少網絡開銷。
最后，還有分頁加載、延時加載、差量加載等可用于不同場景的優化。
2.架構優化
搭建h5應用，最好采用單頁面應用架構，這樣可以減小瀏覽器切換帶了的額外性能開銷，目前有很多優秀的框架幫我們搭建H5應用，例如:Vue等。另外，Vue等框架的虛擬dom技術，也會大大減少實體dom的操作次數，減小性能開銷。
當然，在具體的開發過程中，數據結構、算法的優化也很重要，這個就跟具體業務場景有關，無法一一列舉。
3.渲染優化
需要對瀏覽器渲染的原理有一定的研究，頁面渲染大致四個過程: dom樹解析、渲染樹解析、寫入顯存、圖形繪制。
dom樹的解析，是對整個文檔的html、css結構進行解析，因此html、css的結構越簡潔，嵌套的層級越少，解析效率就會越高。
渲染樹的解析，是根據html與css解析結果,計算出每個元素的實際顯示效果。而寫入顯存，則是將計算好的渲染樹，寫入到顯示器的內存。這2個過程，需要減少重繪的發生，否則很影響性能。簡單的說一下重繪，改變一個元素的寬高，會影響整個布局重新排版，這就是重繪，如果改變背景色則不會影響其它布局。因此盡量避免重繪操作，例如，給圖片設置固定大小，就不會因為網絡加載過程中，圖片尺寸變化，導致整個頁面布局排版變化。
最后是圖形繪制，顯示器根據刷新頻率，將內存中的圖像，繪制到屏幕的像素點上。這里我們需要盡量避免一些性能消耗較大的顯示效果，如:陰影、圓角，另外如果需要動畫效果的話，則盡量使用css3實現，css3動畫會啟用硬件加速。
SS3的新特性大致分為以下六類
1.CSS3選擇器
2.CSS3邊框與圓角
3.CSS3背景與漸變
4.CSS3過渡
5.CSS3變換
6.CSS3動畫
下面分別說一說以上六類都有哪些內容
CSS3選擇器
1.基本選擇器
基本選擇器又分為
子選擇器
相鄰兄弟選擇器
通用兄弟選擇器
群組選擇器
2.屬性選擇器
1.element[attribute]
為帶有attribute屬性的元素設置樣式
2.element[attribute='value']
為attribute='value'屬性的元素設置樣式
3.element[attribute~='value']
選擇attribute屬性值包含 單詞value的元素 并設置樣式
4.element[attribute*='value']
選擇attribute屬性值包含value的元素設置樣式
5.element[attribute^='value']
選擇attribute屬性值是以value開頭的元素
6.element[attribute$='value']
選擇attribute屬性值是以value結尾的元素
注意比較3和4的區別
3.偽類選擇器
動態偽類
定義：這些偽類并不存在于HTML中，只有當用戶和網站交互的時候才能體現出來。
1.錨點偽類
:link
:visited
2.用戶行為偽類
:hover
:active
:focus
3.目標偽類
:target
當我們點擊錨點鏈接時，對應id的元素會顯示在視口
4.checked狀態偽類
這里我們需要知道checkbox只能設置寬高，不能設置背景和邊框，如果想要設置那么我們需要用appearance:none;來清除input的默認樣式
CSS3結構類：nth選擇器
：first-child/last-child
語法 element:first-child
選擇屬于父元素的首個/最后一個子元素的每個element元素，注意element為子元素。
：nth-child(n)
選擇某元素下的第n個element元素（n是一個簡單的表達式，不能用其他的字母代替），括號里還可以傳odd和even兩個關鍵字
：nth-last-child(n)
匹配屬于某元素下的第n個element子元素，從最后一個子元素開始計數
：nth-of-type(n)
語法 element:nth-of-type(n)
匹配屬于父元素的特定類型的第n個子元素,element為指定類型的子元素
:nth-last-of-type
匹配屬于父元素的特定類型的第n個子元素，從最后一個計數
:first-of-type/:last-of-type
匹配屬于其父元素的特定類型的首個/最后一個子元素的每個元素
：only-child
匹配屬于父元素的唯一子元素的每個元素
：only-of-type
匹配屬于其父元素特定類型的唯一子元素的每個元素
：empty
匹配沒有子元素（包括文本節點）的每個元素
否定選擇器：not
定義：匹配非 元素或者選擇器 的每個元素
語法：父元素：not(子元素或者選擇器)
例：ul:not(span){}
偽元素(也可以使用：)
element::first-line
定義：對元素的第一行文本進行設置，只能用于塊級元素
element::first-letter
定義：用于向文本的首字母設置特殊樣式，只能用于塊級元素
element::before
定義：在元素的內容前面插入新內容，常與content配合使用
element::after
定義：在元素的內容后面插入新內容，常與content配合使用
element::selection
定義：用于設置瀏覽器中選中文本后的背景色與前景色
圖片描述
偽元素與元素的區別:
無法通過JS獲取其DOM
無法通過瀏覽器開發者工具直接查看
偽元素默認是 inline
使用偽元素注意事項：
1.使用偽元素before,after必須設置content
2.使用偽元素before,after顯示背景圖，一定要使用display設置為塊元素
3.使用偽元素before,after設置為display:inline-block,需要再次設置vertical-align:middle
CSS3邊框與圓角
1.CSS3圓角border-radius
定義：可以為元素添加圓角邊框（塊元素，行內塊元素，行內元素）
屬性：
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
復合屬性：border-radius：
屬性值
四個值：左上角 右上角 右下角 左下角
三個值：左上角 右上角和左下角 右下角
兩個值：左上角和右下角 右上角和左下角
一個值：4個角都生效
border-radius中的屬性值由兩個參數值構成: value1 / value2，值之間用/分隔，value1代表圓角的水平半徑，value2代表圓角的垂直半徑。
圖片描述
圓形與橢圓：
一旦使用百分比，參照的是元素本身的高度與寬度
當拿50%時，寬等于高為圓形 寬不等于高為橢圓形
2.盒陰影box-shadow
定義：可以控制一個或多個下拉陰影的框
語法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴展程度 顏色 是否具有內陰影
屬性值的介紹：
偏移量：
把元素左上角（0，0）作為基準點，找水
平方向和垂直方向的偏移量
水平： 正值 --- 右 ，負值 --- 左
垂直： 正值 --- 下 ，負值 --- 上
模糊程度：
邊界模糊，但是邊界線未動
由邊界線向外模糊多少像素
擴展程度：
盒子陰影，上下左右都向外擴展多少像素
是否具有內陰影：
inset(默認沒有，也就是默認是外陰影)
加上inset,盒子的陰影為內陰影
擴展程度可為負值，但是模糊程度不可以
CSS3背景與漸變
1.CSS3背景
background-image
語法：
backgroundimage:url('1.jpg),url('2.jpg')
使用逗號把圖片分開
注意：元素引入多個背景圖片，前面圖片會覆蓋后面的圖片
background-cilp
定義：指定背景的繪制區域（裁剪）
語法：
background-cilp：border-box / padding-box / content-box
屬性介紹：
border-box：背景被裁剪到邊框盒（從邊框開始繪制背景圖片）---默認
padding-box：背景被裁剪到內邊距框（從內邊距開始繪制背景圖片）
content-box：背景被裁剪到內容框
background-origin
定義：設置背景圖像的原始起始位置
語法：
background-origin：border-box / padding-box / content-box(背景圖片坐標原點與這三個有關系)
屬性的介紹：
border-box：相對于邊框來定位
padding-box：相對于內邊距來定位
content-box：相對于內容框來定位
另外有一個需要了解
background-position:定義背景圖片的位置，水平與垂直方向上面的偏移量(參考點)
background-repeat
定義：設置是否及如何重復背景圖像，默認地，背景圖像在水平和垂直方向上重復。
屬性值：
repeat 默認。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置
background-size
定義：指定背景圖像的大小
語法：
background-size：number / % / cover / contain
屬性介紹：
number: 寬度 高度（如果只寫一個數值，第二個數值默認auto）
百分比： 0% - 100% 之間的任何值，此時的百分比參照于元素div的大小
cover：將背景圖片等比縮放以填滿整個容器（最遠邊），如果高度達到一定比例100%，寬度多出的會溢出，但是，具體那部分溢出取決于定位
contain：將背景圖片等比縮放至某一邊緊貼容器邊緣為止（最近邊），如果圖片高度比較小，高度就會有空白區域出現
復合屬性background
定義：可以在一個聲明中設置所有的背景屬性
語法：
background：color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')...
2.CSS3漸變
定義：可以在兩個或者多個指定顏色之間顯示平移的過渡
線性漸變
定義：是沿著一根軸線改變顏色，從起點到終點進行順序漸變（從一邊拉向另一邊）
語法：background:linear-gradient(方向，開始顏色，結束顏色)
方向介紹：
1.方向從上到下（默認）
background: linear-gradient(red,blue);
2.方向從左到右
background: linear-gradient(to right,red,blue);
3.對角
background: linear-gradient(to right bottom,red,blue);
4.角度(單位deg)
background: linear-gradient(角度,red,blue);
角度說明：0deg 將創建一個從下到上的漸變，90deg將創建一個從左到右的漸變
顏色結點：默認每個顏色均勻分布
background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
從0%到10%，為紅色，從10%到20%為紅色到藍色的漸變，從20%到30%為藍色到綠色的漸變，從30%到40%，為綠色到黃色的漸變,從40%到100%為黃色
background: linear-gradient(red 10%,blue);
從0%到10%，為紅色，從10%到100%為紅色到藍色的漸變
最后如果不寫具體數值，默認到100%
background: linear-gradient(red,blue 30%);
從0%到30%，為紅色到藍色的漸變
如果第一個不寫，默認數值是 0%
background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));
由透明色變為不透明色
重復漸變
示例：background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);
注意：把元素的整體寬度看成100%
徑向漸變
定義：從起點到終點，顏色從內向外進行圓形漸變
語法：background:radial-gradient(形狀尺寸，開始顏色，結束顏色)
形狀分類：
circle --- 圓形
ellipse --- 橢圓形
注意：當元素的高和寬一樣時，參數無論設置哪個，都是圓形
尺寸大?。?/p>
closest-side最近邊
background: radial-gradient(closest-side circle,red , blue);
farthest-side 最遠邊
background: radial-gradient(farthest-side circle,red , blue);
closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
farthest-corner最遠角
background: radial-gradient(farthest-corner circle,red , blue);
顏色結點：
例：
background:radial-gradient(circle,red 50% ,blue 70%);
注意：此時的百分比,指的是圓心到元素最遠端的距離（角度）
重復漸變 ：
示例： background: repeating-radial-gradient(red 0%,blue 20%);
background: repeating-radial-gradient(red 0%,blue 10%,red 20%);
CSS3過渡
定義：允許css的屬性值在一定時間區間內平滑的過渡，在鼠標點擊，鼠標滑過或對元素任何改變中觸發，并圓滑地以動畫形式改變css的屬性值。
屬性：
1.transition-property屬性
定義：設置對象中的參與過渡的屬性
語法：transition-property：none | all | property
參數說明：
none： 沒有屬性改變
all : 默認值，所有屬性都改變
property： 元素的屬性名 width,color等
2.transition-duration屬性
定義: 設置對象過渡的持續時間
語法：transition-duration：time
參數說明：
規定完成過渡效果需要花費的時間，以秒或者毫秒計，默認值0
3.transition-timing-function屬性
定義：設置對象中過渡的動畫類型
語法：只能使用一個屬性值
參數說明：
ease:平滑過渡（0--慢--快--慢），默認值
cubic-bezier(0.25,0.1,0.25,1)
linear:線性過渡（勻速） cubic-bezier(0,0,1,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)
貝塞爾曲線 :http://cubic-bezier.com/#.17,...
4.transition-delay屬性
定義：設置對象延遲的過渡時間
語法：transition-delay：time
參數說明：
指定秒或者毫秒數來延遲動畫效果的開始，默認是0
5.transition復合屬性
語法：
transition ： property duration timing-function delay；
參數說明：過渡時間和延遲時間的順序不能亂
CSS3變換
定義：讓一個元素在一個坐標系統中變形，這個屬性包含一系列的變形函數，可以移動，旋轉，縮放元素。
語法：transform：none | <transform-function> 默認值是none
2d變換
1.rotate()旋轉
定義：通過指定一個角度參數，對元素指定一個2D的旋轉
語法：transform：rotate(angle) 單位deg
參數說明：angle指旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉
2.translate()平移
定義：根據X軸和Y軸的位置給定參數，使當前元素位置移動
分類：
translateX() 僅水平方向移動
語法：transform：translateX() 單位px
translateY() 僅垂直方向移動
語法：transform：translateY() 單位px
translate(x,y) 水平方向和垂直方向同時移動
語法：transform：translate( X, Y) 單位px
注意：如果只寫一個參數，第二個默認是0，也就是只設置了水平方向上的位移
3.scale( )縮放
定義：設置元素的縮放程度
分類：
scaleX( ) 僅水平方向縮放
語法：transform：scaleX() 沒有單位
scaleY( ) 僅垂直方向縮放
子主題 語法：transform：scaleY() 沒有單位
scale(x,y) 使元素水平和垂直方向同時縮放
語法：transform：scale(x,y) 沒有單位
4.skew()扭曲/傾斜
定義：設置元素的傾斜狀態
分類：
skewX( ) 僅使元素在水平方向上扭曲變形 單位deg 正值 ----逆時針
skewY( ) 僅使元素在垂直方向上扭曲變形 單位deg 正值 ----順時針
skew( ) 使元素在水平方向和垂直方向上扭曲變形 單位deg
注意：0deg與180deg 效果一樣
5.變換基點
定義：元素變換的基準點
語法： transform-origin：水平方向 垂直方向
參數說明：
left top 左上角 ----四個角均可以
25% top
50px 50px
默認值：
rotate 幾何中心點
skew 幾何中心點
scale 幾何中心點
translate 本身位置
3d變換
1.開啟3d空間transform-style: preserve-3d; 一般給父元素開啟
2.子元素設置3d變換效果
rotate
rotateX()
定義：指對象在X軸上的旋轉角度（變換基點： 50% 50% 0）
rotateY()
定義：指對象在Y軸上的旋轉角度（變換基點： 50% 50% 0）
rotateZ()
定義：指對象在Z軸上的旋轉角度（變換基點： 50% 50% 0）
translate
translateZ()
定義：指對象在Z軸上面的平移（變換基點： 50% 50% 0）
scale
scaleZ()
定義：指定對象的Z軸縮放（變換基點： 50% 50% 0）(無太大意義，開啟3d空間)
3.設置景深：實現近大遠小
父元素子元素都可以設置
父元素：perspective: 300px;
子元素:
transform:perspective(300px) translateZ(-200px);
注意：景深：可選值：大于或等于0,景深值越大，元素看起來越大
默認值: 0 -- 沒有景深 （不能為負值）
4.變換基點
默認值： 50% 50% 0
transform-origin: top; 關鍵字表示 ( 50% 0 0 )
注意：立體3d盒子 Z：只能使用具體的長度，不能使用百分比和關鍵字
5.景深中心點：改變觀察者視角
perspective-origin: top;
perspective-origin: top right;
6.元素背面可見還是不可見
backface-visibility:visible ;（默認值：可見）
backface-visibility: hidden; 不可見
CSS3動畫
定義：使元素從一種樣式逐漸變化到另外一種樣式的效果
@keyframes
定義：keyframes關鍵幀，用來決定動畫變化的關鍵位置
注意：keyframes 控制關鍵位置，并不是所有的位置
語法：@keyframes animationname{
keyframes-selector{
cssStyles;
}
}
animationname：必寫項，定義動畫的名稱
keyframes-selector：必寫項，動畫持續時間的百分比 0% - 100%之間， 或者使用form和to關鍵字也可以設置，form代表0%，to代表100%
示例：
@keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}
animation屬性
1.animation-name屬性
設置對象所應用的動畫名稱
語法：
animation-name：keyframename | none
參數說明：
keyframename：指定要綁定到選擇器的關鍵幀的動畫名稱
2.animation-duration屬性
定義：設置對象動畫的持續時間
語法：animation-duration：time
參數說明：指定對象播放完成需要花費的時間，默認值是0
3.animation-timing-function屬性
定義：設置對象動畫的過渡類型
參數說明：與transition-timing-function屬性的參數一樣
4.animation-delay屬性
定義：設置動畫的延遲時間
語法：animation-delay：time
參數說明：可選值，定義動畫開始前等待的時間，以秒或者毫秒數計數，默認值是0
5.animation-iteration-count屬性
定義：設置對象動畫的循環次數
語法：animation-iteration-count ： infinite | number
參數說明：
number為數字，其默認值是1
infinite：無限循環次數
6.animation-direction屬性
定義：設置對象動畫是否反向運動
語法：
animation-direction：normal , reverse , alternate , alternate-reverse
參數說明：
normal : 正常方向
reverse :反向運動
alternate ： 先正常運動在反向運動，并持續交替運行， 需要配合循環屬性使用
alternate-reverse ： 先反向運動在正常運動，并持續交替運行， 需要配合循環屬性使用
7.animation-play-state屬性
定義：指定對象是否正在運行或已暫停
語法：animation-play-state：paused | running
參數說明：
paused ： 指定暫停動畫
running : 默認值，制定正在運行的動畫
示例：鼠標移動到box上暫停動畫
#box:hover{
animation-play-state: paused;
}
8.animation-fill-mode
設置動畫結束后的狀態
none：默認值。不設置對象動畫之外的狀態，DOM未進行動畫前狀態
forwards：設置對象狀態為動畫結束時的狀態，100%或to時，當設置animation-direcdtion為reverse時動畫結束后顯示為keyframes第一幀
backwards：設置對象狀態為動畫開始時的狀態,（測試顯示DOM未進行動畫前狀態）
both：設置對象狀態為動畫結束或開始的狀態，結束時狀態優先
9.animation復合屬性（不推薦使用 ）
語法：
animation ： name duration timing-function delay interation-count direction play-state
注意：在css3里面，給元素設置圓角、陰影、變換等屬性時，盡管外形位置發生改變，但是元素本身大小和位置不變
SS3的box-shadow屬性可以讓我們輕松實現圖層陰影效果。我們來實戰詳解一下這個屬性。
先來看一個這個屬性的瀏覽器兼容性：
box-shadow有六個可設的值：
img{box-shadow:陰影類型 X軸位移 Y軸位移 陰影大小 陰影擴展 陰影顏色 }
讓我們通過幾個實例來看一個box-shadow的效果，先弄個簡單的HTML供測試：
<html>
<head>
<style type="text/css">CSS部份寫在這里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>請注意：為了省事兒，下面的CSS代碼中只寫了box-shadow，在實際使用中，你應該把-moz-box-shadow和-webkit-shadow也寫上。你需要做的很簡單，復制兩個box-shadow，在它們前面分別加上-moz-和-webkit-。
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}(1). 投影，沒有位移，10px的陰影大小，沒有擴展，顏色#06C
img{box-shadow:0 0 10px #06C;}這里的顏色值是HEX值，我們還可以使用RGBA值，RGBA值的好處是，它多了一個Alpha透明值，你可以控制陰影的透明度。
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}(2). 在上面的基礎上加上20px的擴展
img{box-shadow:0 0 10px 20px #06C;}(3). 內陰影，無位移，10px大小，沒有擴展，顏色#06C
img{box-shadow:inset 0 0 10px #06C;}(4). 多重陰影效果
box-shadow可以同時使用多次，我們來個四色的陰影。
img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue, box-shadow:0 -10px 10px yellow, box-shadow:0 10px 10px green}(5). 使用多個陰影屬性的順序問題
當給同一個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層。比如下面這段代碼，我們先寫一個10px的綠色陰影，再寫一個10px大小但擴展20px的陰影。結果是：綠色陰影層在黃色陰影層之上。
img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}但如果我們把順序調一下，像這樣:
img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}我們將看不到后寫的綠色陰影層，因為它先寫且被半徑比較大的黃色層覆蓋掉了。
IE本身是shadow濾鏡可以實現類似效果的，還有一些js和.htc的hack文件可以幫助你在IE中實現這一效果。我也無法一一都去嘗試，這里只介紹我用過的一個。
ie-css3.htc是一個可以讓IE瀏覽器支持部份CSS3屬性的htc文件，不只是box-shadow，它還可以讓你的IE瀏覽器支持圓角屬性border-radius和文字陰影屬性text-shadow。
它的使用方法是：下載它并放到你的服務器目錄
在你的<head></head>里面寫入下面的代碼：
<!--[if IE]>
<style type="text/css">
img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->藍色部份輸入要使用box-shadow屬性的選擇器，綠色部份輸入ie-css3.htc的絕對路徑，或相對路徑，反正要保證能訪問得到。
然后這樣就OK了。但還是有幾點需要注意的是：
所以說，這個腳本僅僅是讓IE支持了部份的box-shadow值。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
