整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端優化的步驟

          前端優化的步驟

          端優化的步驟

          首先要設定優化目標,測試當前性能,找出問題,提出解決方案。

          優化的方向

          一般來說,網站優化的需要考慮的方面有:

          1.網絡請求與下載

          減少HTTP請求次數是縮短響應時間的關鍵

          • 開啟一個鏈接(tcp/ip的三次握手過程)-> 發送請求 -> 等待(網絡延遲跟服務器的處理時間)-> 下載數據。
          • 一個http請求絕大多數的時間消耗在了建立連接跟等待的時間,優化的方法是減少http請求。

          減小加載文件的大小

          • 頁面上部分文件加載了,但在頁面中卻沒有使用。
          • 文件中含有沒有使用的代碼部分。

          減少請求,減小文件

          減少圖片

          • css sprites將多張圖片合并成一幅單獨的圖片,使用css的background-position屬性,將html元素的背景圖片放到sprites 圖片中的期望位置上。使用這項技術的附加優點是他降低了下載量,合并后的圖片比分離的圖片和更小,因為它降低了圖片自身的開銷(顏色表、格式信息等等)。實際項目中css sprites是一項體力活,因為開發過程中需要對這張大圖進行維護(添加、減少圖片)。
          • 內聯圖片
          • 通過使用data:URL模式可以在頁面中包含圖片而無需任何額外的請求。
          • 對于較小的圖片來說可以直接內聯到web頁面中,但對于大圖片內聯到頁面里會導致頁面變大,聰明的做法是使用css,將內聯的圖片作為背景使用,并放到外部樣式表中,這意味著數據可以緩存在樣式表內部。使用外部樣式表雖然增加了一個http請求,但樣式可以被瀏覽器緩存,得到額外的收獲。
          • IE8以下的瀏覽器不支持這種方式,而IE8在數據大小上有限制,只能支持23kb以內的數據。
          • IconFont圖標字體,這是近年來新流行的一種以字體代替圖片的技術。它可以適應任何分辨率而不會出現圖片模糊問題,與圖片相比它具有更小的容量,更高的靈活性(像字體一樣可以設置圖標大小、顏色、透明度、hover狀態、反轉等)。IE8以上的瀏覽器都支持該技術。

          減少腳本和樣式表

          • 減少腳本與樣式表的請求主要原則就是合并。
          • 在實際開發中我們遵循模塊化的原則將代碼分散到許多小文件中。但對于線上頁面,將這些小文件合并到一個文件中。

          減少DNS查詢次數

          DNS查詢也消耗響應時間,如果我們的網頁內容來自各個不同的domain (比如嵌入了開放廣告,引用了外部圖片或腳本),那么客戶端首次解析這些domain也需要消耗一定的時間。DNS查詢結果緩存在本地系統和瀏覽器中一段時間,所以DNS查詢一般是對首次訪問響應速度有所影響

          控制Cookie大小和污染

          • Cookie是本地的磁盤文件,每次瀏覽器都會去讀取相應的Cookie,所以建議去除不必要的Coockie,使Coockie體積盡量小以減少對用戶響應的影響。
          • 使用Cookie跨域操作時注意在適應級別的域名上設置coockie以便使子域名不受其影響。
          • Cookie是有生命周期的,所以請注意設置合理的過期時間,合理的Expire時間和不要過早去清除coockie,都會改善用戶的響應時間。

          避免頁面跳轉,重定向

          將一個URL重新路由到另一個URL。重定向功能是通過301和302這兩個HTTP狀態碼完成的,如: 瀏覽器自動重定向請求到Location指定的URL上,重定向的主要問題是降低了用戶體驗。 種最耗費資源、經常發生而很容易被忽視的重定向是URL的最后缺少/,導致自動產生結尾斜線的原因是,瀏覽器在進行get請求時必須指定一些路徑;如果沒有路徑它就會簡單的使用文檔根。缺少結尾斜線發生重定向是很多web服務器的默認行為。需要在服務器端設置方可消除。

          2.緩存

          減小Cookie

          Cookie被用來做認證或個性化設置,其信息被包含在http報文頭中,對于cookie我們要注意以下幾點,來提高請求的響應速度,

          • 去除沒有必要的cookie,如果網頁不需要cookie就完全禁掉
          • 將cookie的大小減到最小
          • 注意cookie設置的domain級別,沒有必要情況下不要影響到sub-domain
          • 設置合適的過期時間,比較長的過期時間可以提高響應速度。

          頁面內容使用無cookie域名

          大多數網站的靜態資源都沒必要cookie,我們可以采用不同的domain來單獨存放這些靜態文件,這樣做不僅可以減少cookie大小從而提高響應速度,還有一個好處是有些proxy拒絕緩存帶有cookie的內容,如果能將這些靜態資源cookie去除,那就可以得到這些proxy的緩存支持。


          • 常見的劃分domain的方式是將靜態文件放在static.example.com,動態內容放在www.example.com
          • 也有一些網站需要在二級域名上應用cookie,所有的子域都會繼承,這種情況下一般會再購買一個專門的域名來存放cookie-free的靜態資源。

          使用小且可緩存的favicon.ico

          網站圖標文件favicon.ico,不管你服務器有還是沒有,瀏覽器都會去嘗試請求這個圖標。所以我們要確保這個圖標

          • 存在
          • 文件盡量小,最好小于1k
          • 設置一個長的過期時間

          3.頁面內部大小性能優化與顯示



          優化圖像

          當美工完成了網站的圖片設計后,我們可以在上傳圖片之前對其做以下優化

          • 檢查GIF圖片中圖像顏色的數量是否和調色板規格一致。如果你發現圖片中只用到了4種顏色,而在調色板的中顯示的256色的顏色槽,那么這張圖片就還有壓縮的空間。可以使用imagemagick檢查: identify -verbose image.gif
          • 嘗試把GIF格式轉換成PNG格式,看看是否節省空間。大多數情況下是可以壓縮的。下面這條簡單的命令可以安全地把GIF格式轉換為PNG格式: convert image.gif image.png
          • 在所有的PNG圖片上運行pngcrush(或者其它PNG優化工具)。例如: pngcrush image.png -rem alla -reduce -brute result.png
          • 在所有的JPEG圖片上運行jpegtran。這個工具可以對圖片中的出現的鋸齒等做無損操作,同時它還可以用于優化和清除圖片中的注釋以及其它無用信息 jpegtran -copy none -optimize -perfect src.jpg dest.jpg

          減小腳本和樣式表

          • 在合并腳本和樣式表時,還需要使用工具,精簡:移除不必要的字符以減小文件大小縮減下載時間混淆:改寫源代碼,比如函數和變量名使用更短的標量名
          • 對于采用AMD或CMD進行模塊化開發的,在合并過程中通常會將依賴的其他模塊打包到一個文件中,而模板html通常以字符串的方式內聯到Javascript文件中。
          • 移除重復腳本:這條說的主要是避免在頁面中多次加入同一份Javascript代碼,如果我們的開發中有依賴管理的方式比如AMD、CMD,基本不會出現這種情況。
          • 常用構建工具:gulp,webpack,fis

          樣式表放頂部

          • 將樣式表放在底部會導致瀏覽器阻止內容逐步呈現。為避免當頁面變化時重繪頁面元素,瀏覽器會阻塞頁面呈現,直到樣式表解析完畢
          • 將樣式表放在頂部并不會減少資源的加載時間,它減少的是頁面的呈現時間。

          腳本放底部

          script文件放在頁面頂部會阻塞頁面的逐步呈現。script元素會阻塞后續內容的解析(不論JavaScript是內嵌的還是外鏈的),瀏覽器在執行JavaScript代碼時,不能同時做其它事情,即每次出現都會讓頁面等待腳本的解析和執行,JavaScript代碼執行完成后,才繼續渲染頁面。這個也就是JavaScript的阻塞特性。解決的辦法就是將script標簽放在頁面底部。這樣既可以讓內容逐步呈現,提高下載的并行度,有效的防止JavaScript的阻塞,又能使得頁面的HTML結構能更快的釋放。

          避免CSS表達式

          • 表達式的問題就在于它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時,就是在頁面滾動、乃至移動鼠標時都會要重新計算一次。
          • 使用事件句柄來代替CSS表達式是一個可行辦法。

          使用外部腳本和樣式表

          使用外部Javascript和CSS文件可以使這些文件被瀏覽器緩存,從而在不同的請求內容之間重用。 同時將Javascript和CSS從inline變為external也減小了網頁內容的大小。

          使用外部Javascript和CSS文件的決定因素在于這些外部文件的重用率,如果用戶在瀏覽我們的頁面時會訪問多次相同頁面或者可以重用腳本的不同頁面,那么外部文件形式可以給你帶來很大的好處。但對于用戶通常只會訪問一次的頁面,例如microsoft.com首頁,那inline的javascript和css相對來說可以提供更高的效率。

          延遲加載

          延遲加載需要我們知道我們的網頁最初加載需要的最小內容集是什么。剩下的內容就可以推到延遲加載的集合中。 Javascript是典型的可以延遲加載內容。一個比較激進的做法是開發網頁時先確保網頁在沒有Javascript的時候也可以基本工作,然后通過延遲加載腳本來完成一些高級的功能。

          提前加載

          與延遲加載目的相反,提前加載的是為了提前加載接下來網頁中訪問的資源,下面是提前加載的類型

          • **無條件提前加載:**當前網頁加載完成后,馬上去下載一些其他的內容。例如google會在頁面加載成功之后馬上去下載一個所有結果中會用到的image sprite。
          • **有條件加載:**根據用戶的輸入推斷需要加載的內容
          • **有預期的的加載:**這種情況一般發生在網頁重新設計時,由于用戶經常訪問舊網頁,本地對舊的網頁內容緩存充分從而顯得舊網頁速度很快,而新的網頁內容卻沒有緩存,設計者可以在舊網頁的內容中預先加載一些新網頁中可能用到的內容,這樣新的網頁就會生下來一些需要下載的資源。

          減少Dom元素的數量

          網頁中元素過多對網頁的加載和腳本的執行都是沉重的負擔,500個元素和5000個元素在加載速度上會有很大差別。 想知道你的網頁中有多少元素,通過在瀏覽器中的一條簡單命令就可以算出document.getElementsByTagName('*').length

          減少DOM訪問,減少Repaint 和 Reflow

          通過Javascript訪問DOM元素沒有我們想象中快,元素多的網頁尤其慢,對于Javascript對DOM的訪問我們要注意

          • 緩存已經訪問過的元素
          • Offline更新節點然后再加回DOM Tree
          • 避免通過Javascript修復layout

          根據域名劃分內容

          • 瀏覽器一般對同一個域的下載連接數有所限制,按照域名劃分下載內容可以瀏覽器增大并行下載連接,但是注意控制域名使用在2-4個之間,不然dns查詢也是個問題。
          • 一般網站規劃會將靜態資源放在類似于static.example.com,動態內容放在www.example.com上。這樣做還有一個好處是可以在靜態的域名上避免使用cookie。

          減少iframe數量

          使用iframe要注意理解iframe的優缺點

          • 優點可以用來加載速度較慢的內容,例如廣告。安全沙箱保護。瀏覽器會對iframe中的內容進行安全控制。腳本可以并行下載
          • 缺點即使iframe內容為空也消耗加載時間會阻止頁面加載標簽沒有語義

          避免404

          404我們都不陌生,代表服務器沒有找到資源,我們要特別要注意404的情況不要在我們提供的網頁資源上,客戶端發送一個請求但是服務器卻返回一個無用的結果,時間浪費掉了。

          更糟糕的是我們網頁中需要加載一個外部腳本,結果返回一個404,不僅阻塞了其他腳本下載,下載回來的內容(404)客戶端還會將其當成Javascript去解析。

          使用GET Ajax請求

          瀏覽器在實現XMLHttpRequest POST的時候分成兩步,先發header,然后發送數據。而GET卻可以用一個TCP報文完成請求。另外GET從語義上來講是去服務器取數據,而POST則是向服務器發送數據,所以我們使用Ajax請求數據的時候盡量通過GET來完成。

          避免空的圖片src

          空的圖片src仍然會使瀏覽器發送請求到服務器,這樣完全是浪費時間,而且浪費服務器的資源。尤其是你的網站每天被很多人訪問的時候,這種空請求造成的傷害不容忽略。

          瀏覽器如此實現也是根據RFC 3986 - Uniform Resource Identifiers標準,空的src被定義為當前頁面。

          所以注意我們的網頁中是否存在這樣的代碼

          <!--straight HTML-->
          <img src="">
          
          //JavaScript
          var img=new Image();
          img.src="";
          

          不要在HTML中縮放圖片

          不要通過圖片縮放來適應頁面,如果你需要小圖片,就直接使用小圖片吧。

          智能的事件處理

          這里說智能的事件處理需要開發者對事件處理有更深入的了解,通過不同的方式盡量少去觸發事件,如果必要就盡早的去處理事件。

          比如一個div中10個按鈕都需要事件句柄,那么我們可以將事件放在div上,在事件冒泡過程中捕獲該事件然后判斷事件來源。

          4.網絡與服務器

          使用CDN加速

          • 其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。通過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡,CDN系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。
          • 實時性不太好是CDN的致命缺陷。隨著對CDN需求的逐漸升溫,這一缺陷將得到改進,使來自于遠程服務器的網絡內容網頁與復本服務器或緩存器中的網頁保持同步。解決方法是在網絡內容發生變化時將新的網絡內容從服務器端直接傳送到緩存器,或者當對網絡內容的訪問增加時將數據源服務器的網絡內容盡可能實時地復制到緩存服務器。

          添加Expires 或Cache-Control報文頭

          這條規則分為兩個方面,

          • 對于靜態內容添加Expires,將靜態內容設為永不過期,或者很長時間以后。
          • 對于動態內容應用合適的Cache-Control,讓瀏覽器根據條件來發送請求。

          Gzip壓縮傳輸文件

          Gzip通常可以減少70%網頁內容的大小,包括腳本、樣式表、圖片等文件。Gzip比deflate更高效,主流服務器都有相應的壓縮支持模塊。

          • 值得注意的是pdf文件可以從需要被壓縮的類型中剔除,因為pdf文件本身已經壓縮,gzip對其效果不大,而且會浪費CPU。

          配置ETags

          雖然標題叫配置ETags,但是這里你要根據具體情況進行一些判斷。首先Etag簡單來說是通過一個文件版本標識使得服務器可以輕松判斷該請求的內容是否有所更新,如果沒有就回復304 (not modified),從而避免下載整個文件。

          • 但是Etags的版本信息即使主流服務器未能很好地支持跨服務器的判斷,比如你從一個服務器集群中一臺得到Etags,然后發送到了另一臺那么校驗很有可能會失敗。
          • 條件請求If-Modified-Since和If-None-Match,都是用來進行緩存再驗證。ETag的問題是服務器構造ETag時,盡管兩個文件完全一樣,但如果處于不同的服務器的話還是會有 不同的ETag,增加了HTTP進行請求下載的次數,這對于后臺是服務器集群的網站性能損傷很大。

          盡早flush輸出

          網頁后臺程序中我們知道有個方法叫Response.Flush(),一般我們調用它都是在程序末尾,但注意這個方法可以被調用多次。目的是可以將現有的緩存中的回復內容先發給客戶端,讓客戶端“有活干”。

          那在什么時候調用這個方法比較好呢?一般情況下我們可以在對于需要加載比較多外部腳本或者樣式表時可以提前調用一次,客戶端收到了關于腳本或其他外部資源的鏈接可以并行的先發請求去下載,服務器接下來把后續的處理結果發給客戶端。

          言:

          對于剛學完HTML+CSS的初學者們,剛開始寫代碼的你們還沒有前端優化的概念,其實我們不只是會做出一些網頁出來,前端優化也必須被注入到代碼里。有時候我們會發現一些細少的差別,為什么有的網站打開的速度特別快,有的網站打開的時候前面還有一會大白板時。這時你們有沒有想過什么導致有這種差別呢?單從用戶體驗的角度上來講,您愿意為打開一個網站等待多長時間?那么問題來了,前端優化,我們應該做些什么呢?如何加快網站響應的速度呢?

          接下來的文章中源碼時代Web前端(http://www.itsource.cn)講師會給大家介紹一些常歸的提高網頁性能的實踐和相應的解決方案,讓未來的你們在處理前端性能優化上,對自己做出來的產品更有信心。

          網頁內容

          減少http請求次數

          大部分網站響應時間都花費在了下載網頁資源上,這里的資源指的是:圖片、CSS、JS、和Flash等。我們這里講的減少請求次數是縮短響應時間的關鍵點。

          一般情況下,可以分為兩種:

          一是通過簡化頁面設計來減少請求次數。

          二是網頁比較復雜的腳本或CSS文件可以采用多個腳本或打包放在一個文件里面,圖片采用CSS Sprites(圖象拼合技術),把多個圖拼成一副圖片,然后通過CSS來控制在什么地方顯示這張圖的什么位置,從而來減少請求次數,這一塊的內容,大家可以參照京東下面這一塊的CSS定位來實現。

          避免頁面跳轉

          避免頁面跳轉是什么呢?就是當客戶端收到服務器的跳轉回復時,客戶端再次根據服務器回復中的location指定的地址再次發送請求,也是就說,SEO上常用的301重定向

          比如說:

          我現在要讓訪問源碼時代的同學,進到源碼論壇,這就就是服務器端301重定向的實現方法

          RewriteEngine On

          RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//這是客戶端請求的地址

          RewriteRule ^(.*)$ http://bbs.itsource.cn/ [R=301,L]//這是客戶端實際看到的網頁

          延遲加載

          我們這里講的延遲加載需要我們先知道網頁最初加載最小的內容是什么,剩下的內容就可以使用延遲加載的實現。

          最典型的是Javascript可以延遲加載內容,這個做法是開發網頁的時候先確保網頁在沒有javascript的時候也可以很好的顯示正常的頁面效果,然后通過延遲加載腳本來完成一些高級的功能效果的做法。

          提前加載

          這種方法,恰好與上面的方法相反,也就是說先提前加載一些網頁中的資源,它又分三類:

          1.無條件提前加載

          該方法就是當網頁加載完成后,馬上去加載一些其他內容,如淘寶會在加載完成功后會去加載一些圖片拼合后的圖片

          2.有條件加載

          根據用戶輸入的信息來推斷需要加載的內容,比如說百度搜索。

          有預期的加載

          這個就比較高大上一些了,這個情況一般是在網頁重新設計的時候,由于用戶的訪問行為,本地有舊網頁的緩存,而新設計的網站沒有,設計者可以通過在舊網頁中預先加入一些新網站中可能會用到內容,這樣的話,新網頁就會先下載一些資源到本地。

          減少DOM元素數量

          如果網頁中的元素過多也對網頁的性能有影響,同時也會加重網頁加載和腳本的執行,大家可以想一下,平時在使用JS的時候,我們要實現一些效果,是不是得先找到相關DOM元素,然后再執行相關操作。 如果我們網頁中的元素過多,是不是就會有一個非常明顯的時差呢!所以減少DOM元素數量,仍然影響網頁性能。

          根據域名劃分內容

          很多時候,我們在查看其它大型的網站的時候,圖片的地址和網站的主域名還不一樣,會采用多個域名來存放相關資源的,那為什么要這樣使用呢?其實,瀏覽器一般對同一個域名的下載連接數有所限制,根據域名劃分下載內容,可以間接的增大瀏覽器并行下載連接。大大提高了網站整體的下載資源能力。從而達到優化性能的作用。

          減少iframe數量

          之前,我們講過怎么使用iframe,但是在實際的項目中,我們在使用的時候請先注意它的優缺點。

          優點:

          可以用來加載速度較慢的內容,腳本可以并行下載

          缺點:

          使用iframe內容為空時也會消耗加載時間并會阻止頁面加載

          避免404

          404就是常見的沒有找到服務器資源,一是:影響用戶體驗,打開一個返回無用信息的頁面。二是網頁中需要加載一個外部腳本,結果返回一個404,不僅阻塞了其他腳本下載,下載回來的內容(404)客戶端還會將其當成Javascript去解析。

          CSS

          將樣式表置頂

          由于網頁內容從上往下的加載方式,我們盡可能的將CSS樣式放在網頁的head中會讓網頁顯得加載速度更快,對于內容比較多的網頁非常重要,至少不會讓用戶一直等待一個白屏上,這樣的用戶體驗也是相當好的。

          假如我們把樣式表放在底部的話,就是出現一種情況,瀏覽器會拒絕渲染已經下載的網頁,因為多數瀏覽器在實現時都努力避免重新繪制。所以這一樣也是一個重點。

          避免CSS表達式

          有一些基礎CSS3的小伙伴們一直很仰慕它強大的二開能力,喜歡用一些CSS表達式來動態的設置CSS屬性,在IE5~IE8中支持,其他瀏覽器中表達式會被忽略。

          其它CSS表達式的問題在于它被重新計算的次數遠比我們想象的要多,所以我們還是盡量避免使用它來防止使用不當造成的性能開消過多。

          link標簽代替@import

          在網頁的設計中,請盡量使用link標簽來引用CSS,避免使用@import來引用,原因很簡單,您可以理解為就是將CSS樣式放在網頁中的內容底部就可以了。

          圖片

          優化圖像

          在網頁的制作中,我們會發現,banner這一類的圖片加載起來非常的慢,同時也影響網站的速度,少者幾百K,大者幾M。那么究竟這樣的圖片還有沒有優化的空間呢!?

          今天我給大家推介一個圖片優化的平臺,它就是設計師們經常去的智圖網,同時我們也可以來看一個例子:

          大家可以看到,原圖和優化過后的(智圖)圖片,相差了500多K,如果對于圖片比較多的網站,我們把整站的圖片都用來優化一下,那么可以想象一下,這是要節省多少流量呀!所以這些圖片優化我要強力推薦一下了。

          避免空的圖片src

          我們在使用img標簽的時候,盡量避免使用空的圖片src,因為空的圖片src仍然會使瀏覽器發送請求到服務器,這樣完全是浪費時間,而且浪費服務器的資源。尤其是你的網站每天被很多人訪問的時候,這種空請求造成的傷害不容忽略

          優化CSS Sprite

          Spirite中水平排列圖片,垂直排列會增加文件大小;

          Spirite中把顏色較近的組合在一起可以降低顏色數,理想狀況是低于256色以便適用PNG8格式;

          不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小,但對于用戶代理來說它需要更少的內存來把圖片解壓為像素地圖。

          不要在HTML中縮放圖片

          避免使用大圖實現圖片大小縮放來適應頁面,如果你需要小圖片,就直接使用小圖片吧。原因很簡單,針對不同的設備可以做到最好的效果,而不是加載就大的圖,來整體實現效果,如果是手機端用戶,這個開消還是挺大的,畢竟這是一個講流量的時代。

          使用小且可緩存的favicon.ico

          一般企業網站或站長都喜歡加一個圖標文件favicon.ico,不管你服務器有還是沒有,瀏覽器都會去嘗試請求這個圖標。所以我們要確保這個圖標存在并且文件盡量小,最好小于1k 設置一個長的過期時間

          總結:

          最后,本文主要針對初級入門網頁設計人員,該文內容僅涉及到HTML、CSS、Javascript、images等內容,當然還有一些其它的方法,我們在下一期的文章中指出。

          當然,上面提及的一些常歸的前端優化小技巧你GET到了嗎?請不要在你的網頁中出現與此類似的錯誤,要不然真的很影響用戶體驗,畢竟,現在是WEB2.0的時代,如果用戶對你的網頁不滿意,那就是對開發者的否定,所以為了做出更好更優秀的網頁,我們盡可能多的去關注這些小細節。

          寫本文的目的,就是為了更好的讓初級的小伙伴們快速成長起來。做一個優秀的開發人員,同時寫出來的內容可以用于同行交流體會,如果你還有更好的方法和技巧,請在下方的交流區里留言,我會第一時候回復您。謝謝!

          用Firebug動態的查看元素的變化(HTML與CSS)

          .blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
          .blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }

          CSS3標簽中的transform:scale(圖片縮放比例), 1代表原圖顯示, 1.1縮放1.1倍…

          transform: 變形

          scale: 縮放

          tranistion: 過渡


          主站蜘蛛池模板: 一区二区视频在线观看| 国产一区二区三区小说| 后入内射国产一区二区| 久久一本一区二区三区| 精品人妻少妇一区二区三区在线| 亚洲av乱码一区二区三区| 99精品国产高清一区二区三区| 怡红院一区二区三区| 国产日韩一区二区三区在线播放| 亚洲国产成人一区二区三区| 亚洲AV日韩精品一区二区三区| 在线免费观看一区二区三区| 精品欧洲AV无码一区二区男男 | 97久久精品无码一区二区| 国产一区二区精品尤物| 亚洲高清成人一区二区三区| 日本高清无卡码一区二区久久| 国产女人乱人伦精品一区二区| 日韩精品国产一区| 国产精品无码一区二区三区免费| 日韩精品电影一区| 精品乱码一区内射人妻无码| 精品一区精品二区| 国产精品自在拍一区二区不卡| 好湿好大硬得深一点动态图91精品福利一区二区 | 亚洲AV无一区二区三区久久| 鲁丝片一区二区三区免费| 久久精品一区二区东京热| 一区二区视频在线观看| 精品少妇人妻AV一区二区三区| 亚洲一区二区三区国产精华液| 欧美日韩精品一区二区在线观看 | 区三区激情福利综合中文字幕在线一区亚洲视频1| 在线免费一区二区| 国产91一区二区在线播放不卡 | 久久一区二区三区免费播放| 国产精品视频一区二区三区| 亚洲AV网一区二区三区| 午夜福利国产一区二区| 久久精品动漫一区二区三区| 久久精品日韩一区国产二区 |