整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
讀目錄
摘要：無論是在工作中，還是在面試中，web前端性能的優化都是很重要的，那么我們進行優化需要從哪些方面入手呢？可以遵循雅虎的前端優化34條軍規，不過現在已經是35條了，所以可以說是雅虎前端優化的35條軍規。已分類，挺好的，這樣對于優化有一個比較清晰的方向
80%的終端用戶響應時間都花在了前端上，其中大部分時間都在下載頁面上的各種組件：圖片，樣式表，腳本，Flash等等。減少組件數必然能夠減少頁面提交的HTTP請求數。這是讓頁面更快的關鍵。
減少頁面組件數的一種方式是簡化頁面設計。但有沒有一種方法可以在構建復雜的頁面同時加快響應時間呢？嗯，確實有魚和熊掌兼得的辦法。
合并文件是通過把所有腳本放在一個文件中的方式來減少請求數的，當然，也可以合并所有的CSS。如果各個頁面的腳本和樣式不一樣的話，合并文件就是一項比較麻煩的工作了，但把這個作為站點發布過程的一部分確實可以提高響應時間。
CSS Sprites是減少圖片請求數量的首選方式。把背景圖片都整合到一張圖片中，然后用CSS的background-image和background-position屬性來定位要顯示的部分。
圖像映射可以把多張圖片合并成單張圖片，總大小是一樣的，但減少了請求數并加速了頁面加載。圖片映射只有在圖像在頁面中連續的時候才有用，比如導航條。給image map設置坐標的過程既無聊又容易出錯，用image map來做導航也不容易，所以不推薦用這種方式。
行內圖片（Base64編碼）用data: URL模式來把圖片嵌入頁面。這樣會增加HTML文件的大小，把行內圖片放在（緩存的）樣式表中是個好辦法，而且成功避免了頁面變“重”。但目前主流瀏覽器并不能很好地支持行內圖片。
減少頁面的HTTP請求數是個起點，這是提升站點首次訪問速度的重要指導原則。
域名系統建立了主機名和IP地址間的映射，就像電話簿上人名和號碼的映射一樣。當你在瀏覽器輸入www.yahoo.com的時候，瀏覽器就會聯系DNS解析器返回服務器的IP地址。DNS是有成本的，它需要20到120毫秒去查找給定主機名的IP地址。在DNS查找完成之前，瀏覽器無法從主機名下載任何東西。
DNS查找被緩存起來更高效，由用戶的ISP（網絡服務提供商）或者本地網絡存在一個特殊的緩存服務器上，但還可以緩存在個人用戶的計算機上。DNS信息被保存在操作系統的DNS cache(微軟Windows上的”DNS客戶端服務”)里。大多數瀏覽器有獨立于操作系統的自己的cache。只要瀏覽器在自己的cache里還保留著這條記錄，它就不會向操作系統查詢DNS。
IE默認緩存DNS查找30分鐘，寫在DnsCacheTimeout注冊表設置中。Firefox緩存1分鐘，可以用network.dnsCacheExpiration配置項設置。(Fasterfox把緩存時間改成了1小時 P.S. Fasterfox是FF的一個提速插件)
如果客戶端的DNS cache是空的（包括瀏覽器的和操作系統的），DNS查找數等于頁面上不同的主機名數，包括頁面URL，圖片，腳本文件，樣式表，Flash對象等等組件中的主機名，減少不同的主機名就可以減少DNS查找。
減少不同主機名的數量同時也減少了頁面能夠并行下載的組件數量，避免DNS查找削減了響應時間，而減少并行下載數量卻增加了響應時間。我的原則是把組件分散在2到4個主機名下，這是同時減少DNS查找和允許高并發下載的折中方案。
重定向用301和302狀態碼，下面是一個有301狀態碼的HTTP頭：
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html瀏覽器會自動跳轉到Location域指明的URL。重定向需要的所有信息都在HTTP頭部，而響應體一般是空的。其實額外的HTTP頭，比如Expires和Cache-Control也表示重定向。除此之外還有別的跳轉方式：refresh元標簽和JavaScript，但如果你必須得做重定向，最好用標準的3xxHTTP狀態碼，主要是為了讓返回按鈕能正常使用。
牢記重定向會拖慢用戶體驗，在用戶和HTML文檔之間插入重定向會延遲頁面上的所有東西，頁面無法渲染，組件也無法開始下載，直到HTML文檔被送達瀏覽器。
有一種常見的極其浪費資源的重定向，而且web開發人員一般都意識不到這一點，就是URL尾部缺少一個斜線的時候。例如，跳轉到http://astrology.yahoo.com/astrology會返回一個重定向到http://astrology.yahoo.com/astrology/的301響應（注意添在尾部的斜線）。在Apache中可以用Alias，mod_rewrite或者DirectorySlash指令來取消不必要的重定向。
重定向最常見的用途是把舊站點連接到新的站點，還可以連接同一站點的不同部分，針對用戶的不同情況（瀏覽器類型，用戶帳號類型等等）做一些處理。用重定向來連接兩個網站是最簡單的，只需要少量的額外代碼。雖然在這些時候使用重定向減少了開發人員的開發復雜度，但降低了用戶體驗。一種替代方案是用Alias和mod_rewrite，前提是兩個代碼路徑都在相同的服務器上。如果是因為域名變化而使用了重定向，就可以創建一條CNAME（創建一個指向另一個域名的DNS記錄作為別名）結合Alias或者mod_rewrite指令。
Ajax的一個好處是可以給用戶提供即時反饋，因為它能夠從后臺服務器異步請求信息。然而，用了Ajax就無法保證用戶在等待異步JavaScript和XML響應返回期間不會非常無聊。在很多應用程序中，用戶能夠一直等待取決于如何使用Ajax。例如，在基于web的電子郵件客戶端中，用戶為了尋找符合他們搜索標準的郵件消息，將會保持對Ajax請求返回結果的關注。重要的是，要記得“異步”并不意味著“即時”。
要提高性能，優化這些Ajax響應至關重要。最重要的提高Ajax性能的方法就是讓響應變得可緩存，就像在添上Expires或者Cache-Control HTTP頭中討論的一樣。下面適用于Ajax的其它規則：
我們一起看看例子，一個Web 2.0的電子郵件客戶端用了Ajax來下載用戶的通訊錄，以便實現自動完成功能。如果用戶從上一次使用之后再沒有修改過她的通訊錄，而且Ajax響應是可緩存的，有尚未過期的Expires或者Cache-Control HTTP頭，那么之前的通訊錄就可以從緩存中讀出。必須通知瀏覽器，應該繼續使用之前緩存的通訊錄響應，還是去請求一個新的?？梢酝ㄟ^給通訊錄的Ajax URL里添加一個表明用戶通訊錄最后修改時間的時間戳來實現，例如&t=1190241612。如果通訊錄從上一次下載之后再沒有被修改過，時間戳不變，通訊錄就將從瀏覽器緩存中直接讀出，從而避免一次額外的HTTP往返消耗。如果用戶已經修改了通訊錄，時間戳也可以確保新的URL不會匹配緩存的響應，瀏覽器將請求新的通訊錄條目。
即使Ajax響應是動態創建的，而且可能只適用于單用戶，它們也可以被緩存，而這樣會讓你的Web 2.0應用更快。
可以湊近看看頁面并問自己：什么才是一開始渲染頁面所必須的？其余內容都可以等會兒。
JavaScript是分隔onload事件之前和之后的一個理想選擇。例如，如果有JavaScript代碼和支持拖放以及動畫的庫，這些都可以先等會兒，因為拖放元素是在頁面最初渲染之后的。其它可以延遲加載的部分包括隱藏內容（在某個交互動作之后才出現的內容）和折疊的圖片。
工具可幫你減輕工作量：YUI Image Loader可以延遲加載折疊的圖片，還有YUI Get utility是一種引入JS和CSS的簡單方法。Yahoo!主頁就是一個例子，可以打開Firebug的網絡面板仔細看看。
最好讓性能目標符合其它web開發最佳實踐，比如“漸進增強”。如果客戶端支持JavaScript，可以提高用戶體驗，但必須確保頁面在不支持JavaScript時也能正常工作。所以，在確定頁面運行正常之后，可以用一些延遲加載腳本增強它，以支持一些拖放和動畫之類的華麗效果。
預加載可能看起來和延遲加載是相反的，但它其實有不同的目標。通過預加載組件可以充分利用瀏覽器空閑的時間來請求將來會用到的組件（圖片，樣式和腳本）。用戶訪問下一頁的時候，大部分組件都已經在緩存里了，所以在用戶看來頁面會加載得更快。
實際應用中有以下幾種預加載的類型：
一個復雜的頁面意味著要下載更多的字節，而且用JavaScript訪問DOM也會更慢。舉個例子，想要添加一個事件處理器的時候，循環遍歷頁面上的500個DOM元素和5000個DOM元素是有區別的。
大量的DOM元素是一種征兆——頁面上有些內容無關的標記需要清理。正在用嵌套表格來布局嗎？還是為了修復布局問題而添了一堆的<div>s？或許應該用更好的語義化標記。
YUI CSS utilities對布局有很大幫助：grids.css針對整體布局，fonts.css和reset.css可以用來去除瀏覽器的默認格式。這是個開始清理和思考標記的好機會，例如只在語義上有意義的時候使用<div>，而不是因為它能夠渲染一個新行。
DOM元素的數量很容易測試，只需要在Firebug的控制臺里輸入：
document.getElementsByTagName('*').length
那么多少DOM元素才算是太多呢？可以參考其它類似的標記良好的頁面，例如Yahoo!主頁是一個相當繁忙的頁面，但只有不到700個元素（HTML標簽）。
分離組件可以最大化并行下載，但要確保只用不超過2-4個域，因為存在DNS查找的代價。例如，可以把HTML和動態內容部署在www.example.org，而把靜態組件分離到static1.example.org和static2.example.org。
用iframe可以把一個HTML文檔插入到父文檔里，重要的是明白iframe是如何工作的并高效地使用它。
<iframe>的優點：
<iframe>的缺點：
HTTP請求代價高昂，完全沒有必要用一個HTTP請求去獲取一個無用的響應（比如404 Not Found），只會拖慢用戶體驗而沒有任何好處。
有些站點用的是有幫助的404——“你的意思是xxx？”，這樣做有利于用戶體驗，，但也浪費了服務器資源（比如數據庫等等）。最糟糕的是鏈接到的外部JavaScript有錯誤而且結果是404。首先，這種下載將阻塞并行下載。其次，瀏覽器會試圖解析404響應體，因為它是JavaScript代碼，需要找出其中可用的部分。
用CSS表達式動態設置CSS屬性，是一種強大又危險的方式。從IE5開始支持，但從IE8起就不推薦使用了。例如，可以用CSS表達式把背景顏色設置成按小時交替的：
1
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
前面提到了一個最佳實踐：為了實現逐步渲染，CSS應該放在頂部。
在IE中用@import與在底部用<link>效果一樣，所以最好不要用它。
IE專有的AlphaImageLoader濾鏡可以用來修復IE7之前的版本中半透明PNG圖片的問題。在圖片加載過程中，這個濾鏡會阻塞渲染，卡住瀏覽器，還會增加內存消耗而且是被應用到每個元素的，而不是每個圖片，所以會存在一大堆問題。
最好的方法是干脆不要用AlphaImageLoader，而優雅地降級到用在IE中支持性很好的PNG8圖片來代替。如果非要用AlphaImageLoader，應該用下劃線hack：_filter來避免影響IE7及更高版本的用戶。
在Yahoo!研究性能的時候，我們發現把樣式表放到文檔的HEAD部分能讓頁面看起來加載地更快。這是因為把樣式表放在head里能讓頁面逐步渲染。
關注性能的前端工程師想讓頁面逐步渲染。也就是說，我們想讓瀏覽器盡快顯示已有內容，這在頁面上有一大堆內容或者用戶網速很慢時顯得尤為重要。給用戶顯示反饋（比如進度指標）的重要性已經被廣泛研究過，并且被記錄下來了。在我們的例子中，HTML頁面就是進度指標！當瀏覽器逐漸加載頁面頭部，導航條，頂部logo等等內容的時候，這些都被正在等待頁面加載的用戶當作反饋，能夠提高整體用戶體驗。
頁面含有重復的腳本文件會影響性能，這可能和你想象的不一樣。在對美國前10大web站點的評審中，發現只有2個站點含有重復腳本。兩個主要原因增加了在單一頁面中出現重復腳本的幾率：團隊大小和腳本數量。在這種情況下，重復腳本會創建不必要的HTTP請求，執行無用的JavaScript代碼，而影響頁面性能。
IE會產生不必要的HTTP請求，而Firefox不會。在IE中，如果一個不可緩存的外部腳本被頁面引入了兩次，它會在頁面加載時產生兩個HTTP請求。即使腳本是可緩存的，在用戶重新加載頁面時也會產生額外的HTTP請求。
除了產生沒有意義的HTTP請求之外，多次對腳本求值也會浪費時間。因為無論腳本是否可緩存，在Firefox和IE中都會執行冗余的JavaScript代碼。
避免不小心把相同腳本引入兩次的一種方法就是在模版系統中實現腳本管理模塊。典型的腳本引入方法就是在HTML頁面中用SCRIPT標簽：
1
<script type="text/javascript" src="menu_1.0.17.js"></script>
用JavaScript訪問DOM元素是很慢的，所以，為了讓頁面反應更迅速，應該：
有時候感覺頁面反映不夠靈敏，是因為有太多頻繁執行的事件處理器被添加到了DOM樹的不同元素上，這就是推薦使用事件委托的原因。如果一個div里面有10個按鈕，應該只給div容器添加一個事件處理器，而不是給每個按鈕都添加一個。事件能夠冒泡，所以可以捕獲事件并得知哪個按鈕是事件源。
腳本會阻塞并行下載，HTTP/1.1官方文檔建議瀏覽器每個主機名下并行下載的組件數不要超過兩個，如果圖片來自多個主機名，并行下載的數量就可以超過兩個。如果腳本正在下載，瀏覽器就不開始任何其它下載任務，即使是在不同主機名下的。
有時候，并不容易把腳本移動到底部。舉個例子，如果腳本是用document.write插入到頁面內容中的，就沒辦法再往下移了。還可能存在作用域問題，在多數情況下，這些問題都是可以解決的。
一個常見的建議是用推遲（deferred）腳本，有DEFER屬性的腳本意味著不能含有document.write，并且提示瀏覽器告訴他們可以繼續渲染。不幸的是，Firefox不支持DEFER屬性。在IE中，腳本可能被推遲，但不盡如人意。如果腳本可以推遲，我們就可以把它放到頁面底部，頁面就可以更快地載入。
很多性能原則都是關于如何管理外部組件的，然而，在這些顧慮出現之前你應該問一個更基礎的問題：應該把JavaScript和CSS放到外部文件中還是直接寫在頁面里？
實際上，用外部文件可以讓頁面更快，因為JavaScript和CSS文件會被緩存在瀏覽器。HTML文檔中的行內JavaScript和CSS在每次請求該HTML文檔的時候都會重新下載。這樣做減少了所需的HTTP請求數，但增加了HTML文檔的大小。另一方面，如果JavaScript和CSS在外部文件中，并且已經被瀏覽器緩存起來了，那么我們就成功地把HTML文檔變小了，而且還沒有增加HTTP請求數。
壓縮具體來說就是從代碼中去除不必要的字符以減少大小，從而提升加載速度。代碼最小化就是去掉所有注釋和不必要的空白字符（空格，換行和tab）。在JavaScript中這樣做能夠提高響應性能，因為要下載的文件變小了。兩個最常用的JavaScript代碼壓縮工具是JSMin和YUI Compressor，YUI compressor還可以壓縮CSS。
混淆是一種可選的源碼優化措施，要比壓縮更復雜，所以混淆過程也更容易產生bug。在對美國前十的網站調查中，壓縮可以縮小21%，而混淆能縮小25%。雖然混淆的縮小程度更高，但比壓縮風險更大。
除了壓縮外部腳本和樣式，行內的<script>和<style>塊也可以壓縮。即使啟用了gzip模塊，先進行壓縮也能夠縮小5%或者更多的大小。JavaScript和CSS的用處越來越多，所以壓縮代碼會有不錯的效果。
不要因為在HTML中可以設置寬高而使用本不需要的大圖。如果需要
1
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那么圖片本身（mycat.jpg）應該是100x100px的，而不是去縮小500x500px的圖片。
favicon.ico是放在服務器根目錄的圖片，它會帶來一堆麻煩，因為即便你不管它，瀏覽器也會自動請求它，所以最好不要給一個404 Not Found響應。而且只要在同一個服務器上，每次請求它時都會發送cookie，此外這個圖片還會干擾下載順序，例如在IE中，當你在onload中請求額外組件時，將會先下載favicon。
所以為了緩解favicon.ico的缺點，應該確保：
使用cookie的原因有很多，比如授權和個性化。HTTP頭中cookie信息在web服務器和瀏覽器之間交換。重要的是保證cookie盡可能的小，以最小化對用戶響應時間的影響。
當瀏覽器發送對靜態圖像的請求時，cookie也會一起發送，而服務器根本不需要這些cookie。所以它們只會造成沒有意義的網絡通信量，應該確保對靜態組件的請求不含cookie?？梢詣摻ㄒ粋€子域，把所有的靜態組件都部署在那兒。
如果域名是www.example.org，可以把靜態組件部署到static.example.org。然而，如果已經在頂級域example.org或者www.example.org設置了cookie，那么所有對static.example.org的請求都會含有這些cookie。這時候可以再買一個新域名，把所有的靜態組件部署上去，并保持這個新域名不含cookie。Yahoo!用的是yimg.com，YouTube是ytimg.com，Amazon是images-amazon.com等等。
把靜態組件部署在不含cookie的域下還有一個好處是有些代理可能會拒絕緩存帶cookie的組件。有一點需要注意：如果不知道應該用example.org還是www.example.org作為主頁，可以考慮一下cookie的影響。省略www的話，就只能把cookie寫到*.example.org，所以因為性能原因最好用www子域，并且把cookie寫到這個子域下。
這個限制是因為iPhone不能緩存大于25K的組件，注意這里指的是未壓縮的大小。這就是為什么縮減內容本身也很重要，因為單純的gzip可能不夠。
把各個組件打包成一個像有附件的電子郵件一樣的復合文檔里，可以用一個HTTP請求獲取多個組件（記住一點：HTTP請求是代價高昂的）。用這種方式的時候，要先檢查用戶代理是否支持（iPhone就不支持）。
前端工程師可以想辦法明顯地縮短通過網絡傳輸HTTP請求和響應的時間。毫無疑問，終端用戶的帶寬速度，網絡服務商，對等交換點的距離等等，都是開發團隊所無法控制的。但還有別的能夠影響響應時間的因素，壓縮可以通過減少HTTP響應的大小來縮短響應時間。
從HTTP/1.1開始，web客戶端就有了支持壓縮的Accept-Encoding HTTP請求頭。
1
Accept-Encoding: gzip, deflate
如果web服務器看到這個請求頭，它就會用客戶端列出的一種方式來壓縮響應。web服務器通過Content-Encoding相應頭來通知客戶端。
1
Content-Encoding: gzip
盡可能多地用gzip壓縮能夠給頁面減肥，這也是提升用戶體驗最簡單的方法。
Image with empty string src屬性是空字符串的圖片很常見，主要以兩種形式出現：
這兩種形式都會引起相同的問題：瀏覽器會向服務器發送另一個請求。
實體標簽（ETags），是服務器和瀏覽器用來決定瀏覽器緩存中組件與源服務器中的組件是否匹配的一種機制（“實體”也就是組件：圖片，腳本，樣式表等等）。添加ETags可以提供一種實體驗證機制，比最后修改日期更加靈活。一個ETag是一個字符串，作為一個組件某一具體版本的唯一標識符。唯一的格式約束是字符串必須用引號括起來，源服務器用相應頭中的ETag來指定組件的ETag：
1
2
3
4
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
然后，如果瀏覽器必須驗證一個組件，它用If-None-Match請求頭來把ETag傳回源服務器。如果ETags匹配成功，會返回一個304狀態碼，這樣就減少了12195個字節的響應體。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
Yahoo!郵箱團隊發現使用XMLHttpRequest時，瀏覽器的POST請求是通過一個兩步的過程來實現的：先發送HTTP頭，在發送數據。所以最好用GET請求，它只需要發送一個TCP報文（除非cookie特別多）。IE的URL長度最大值是2K，所以如果要發送的數據超過2K就無法使用GET了。
POST請求的一個有趣的副作用是實際上沒有發送任何數據，就像GET請求一樣。正如HTTP說明文檔中描述的，GET請求是用來檢索信息的。所以它的語義只是用GET請求來請求數據，而不是用來發送需要存儲到服務器的數據。
當用戶請求一個頁面時，服務器需要用大約200到500毫秒來組裝HTML頁面，在這期間，瀏覽器閑等著數據到達。PHP中有一個flush()函數，允許給瀏覽器發送一部分已經準備完畢的HTML響應，以便瀏覽器可以在后臺準備剩余部分的同時開始獲取組件，好處主要體現在很忙的后臺或者很“輕”的前端頁面上（P.S. 也就是說，響應時耗主要在后臺方面時最能體現優勢）。
較理想的清空緩沖區的位置是HEAD后面，因為HTML的HEAD部分通常更容易生成，并且允許引入任何CSS和JavaScript文件，這樣就可以讓瀏覽器在后臺還在處理的時候就開始并行獲取組件。
例如：
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
用戶與服務器的物理距離對響應時間也有影響。把內容部署在多個地理位置分散的服務器上能讓用戶更快地載入頁面。但具體要怎么做呢？
實現內容在地理位置上分散的第一步是：不要嘗試去重新設計你的web應用程序來適應分布式結構。這取決于應用程序，改變結構可能包括一些讓人望而生畏的任務，比如同步會話狀態和跨服務器復制數據庫事務（翻譯可能不準確）?？s短用戶和內容之間距離的提議可能被推遲，或者根本不可能通過，就是因為這個難題。
記住終端用戶80%到90%的響應時間都花在下載頁面組件上了：圖片，樣式，腳本，Flash等等，這是業績黃金法則。最好先分散靜態內容，而不是一開始就重新設計應用程序結構。這不僅能夠大大減少響應時間，還更容易表現出CDN的功勞。
內容分發網絡（CDN）是一組分散在不同地理位置的web服務器，用來給用戶更高效地發送內容。典型地，選擇用來發送內容的服務器是基于網絡距離的衡量標準的。例如：選跳數（hop）最少的或者響應時間最快的服務器。
這條規則有兩個方面：
網頁設計越來越豐富，這意味著頁面里有更多的腳本，圖片和Flash。站點的新訪客可能還是不得不提交幾個HTTP請求，但通過使用有效期能讓組件變得可緩存，這避免了在接下來的瀏覽過程中不必要的HTTP請求。有效期HTTP頭通常被用在圖片上，但它們應該用在所有組件上，包括腳本、樣式和Flash組件。
瀏覽器（和代理）用緩存來減少HTTP請求的數目和大小，讓頁面能夠更快加載。web服務器通過有效期HTTP響應頭來告訴客戶端，頁面的各個組件應該被緩存多久。用一個遙遠的將來時間做有效期，告訴瀏覽器這個響應在2010年4月15日前不會改變。
1
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你用的是Apache服務器，用ExpiresDefault指令來設置相對于當前日期的有效期。下面的例子設置了從請求時間起10年的有效期：
ExpiresDefault "access plus 10 years"---------------轉自咸魚老弟
在CSS3中，可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的變形處理。
（1）瀏覽器支持
到目前為止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。
使用rotate方法，在參數中加入角度值，角度值后面跟表示角度單位的“deg”文字即可，旋轉方向為順時針方向。
transform：rotate（45deg）；
使用scale方法來實現文字或圖像的縮放處理，在參數中指定縮放倍率。
transform：scale（0.5）；//縮小一半
（1）可以分別指定元素的水平方向的放大倍率與垂直方向的放大倍率
transform：scale（0.5，2）；//水平方向縮小一半，垂直方向放大一倍。
使用skew方法實現文字或圖像的傾斜處理，在參數中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。
transform：skew（30deg，30deg）；//水平方向上傾斜30度，垂直方向上傾斜30度。
（1）只使用一個參數，省略另一個參數
這種情況下視為只在水平方向上進行傾斜，垂直方向上不傾斜。
transform：skew（30deg）；
使用translate方法來移動文字或圖像，在參數中分別指定水平方向上的移動距離與垂直方向上的移動距離。
transform：translate（50px，50px）；// 水平方向上移動50px，垂直方向上移動50px
（1）只使用一個參數，省略另一個參數
這種情況下視為只在水平方向上移動，垂直方向上不移動。
transform：translate（50px）；
transform：translate（150px，200px） rotate（45deg） scale（1.5）；
在使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基準點進行變形的。
使用該屬性，可以改變變形的基準點。
transform：rotate（45deg）；
transform-origin：left bottom；//把基準點修改為元素的左下角
（1）指定屬性值
基準點在元素水平方向上的位置：left、center、right
基準點在元素垂直方向上的位置：top、center、bottom
（1）旋轉
分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉，在參數中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉方向為順時針旋轉。
transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；
（2）縮放
分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放，在參數中指定縮放倍率。
transform：scaleX（0.5）；
transform：scaleY（1）；
transform：scaleZ（2）；
transform：scaleX（0.5）scaleY（1）；
transform：scale（0.5） rotateY（45deg）；
（3）傾斜
分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜（無skewZ方法），在參數中指定傾斜的角度
transform：skewX（45deg）；
transform：skewY（45deg）；
（4）移動
分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動，在參數中加入移動距離。
transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;
每種變形方法的背后都存在著一個對應的矩陣。
（1）計算2D變形（3 X 3矩陣）
可以將這個2D變形矩陣書寫為matrim（a,b,c,d,e,f）,a~f均代表一個數字，用于決定怎樣執行變形處理。
（2）平移的2D矩陣
//效果一致：右移150px，下移150px
transform：matrix（1，0,0,1，150，150）；
transform：translate（150px，150px）；
（3）計算3D變形
3D縮放變形使用的4X4矩陣
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//效果一致：X軸方向上縮小五分之一，Y軸方向上縮小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);
（4）可通過矩陣執行多重變形處理
將需要的變形矩陣相乘得到一個新的變形矩陣可實現該處理。
我做了一次包含一些現場編碼的演示后，一些觀眾問我是如何操作這么快。當然這里沒有唯一的答案，答案是一堆簡單的快捷鍵和大量的實踐的組合。為了回應那些詢問，我覺得有必要看看我每天想都不用想且使用的快捷鍵。
這里有一個16 個快捷鍵的精選列表(1個自定義快捷鍵)，以gif動畫展示，我每天使用。享受吧!
(譯者注：原文所列快捷鍵均為OS X環境，為了方便Windows和Linux環境童鞋的學習，譯者將備注Windows和Linux下對應的快捷鍵)
選擇一個選中項的下一個匹配項: ctrl+d
把光標放在一個單詞上，按下ctrl+d,將選擇這個單詞。一直按住?且按D多次，將選擇當前選中項的下一個匹配項。通過按住ctrl,再按D三次,將選擇三個相同的文本。
選擇一個選中項的所有匹配項: CTRL + ? + G（譯者注：alt+f3）
和上面一樣,但它選擇文件中的所有匹配項。小心使用這個,因為它能選擇一個文件中的所有匹配項. .
選擇與光標關聯的開始和結束標簽:?+?+ K（譯者注：ctrl+shift+’）
這是一個法寶。也許你希望所有屬性保持不變,但只是想選擇標簽。這個快捷鍵為你這樣做,會注意到你可以在一次操作多個標簽。*需要Emmet插件
選擇容器內內容:CTRL + D （譯者注：ctrl+shift+a）
如果你把光標放在文本間再按下上面的鍵將選擇文本,就像?+ D。但是再次按下它，將選擇父容器,再按,將選擇父容器的父容器。*需要Emmet插件
選擇括號內的內容: ? + ? + Space（譯者注：ctrl+shift+m）
這有助于選擇括號之間的一切。同樣適用于CSS。
上移或下移行: CTRL + ? + ↑ 或 ↓（譯者注：ctrl+shift+↑ 或 ↓）
復制行或選中項: ? + ? + D（譯者注：ctrl+shift+d）
如果你已經選中了文本,它會復制你的選中項。否則,把光標放在行上,會復制整行。
增加和減少縮進: ? + [ 或 ]（譯者注：ctrl+[ 或 ]）
剪切行或選中項: ? + X（譯者注：ctrl+x）
剪切一行到你的剪切板，你可以粘貼到其他地方.
粘貼并保持縮進: ? + ? + V（譯者注：ctrl+shift+v）
這是又一個我每次都用的快捷鍵。在gif中我顯示了普通粘貼(?+ V)和縮進粘貼兩種效果的對比。注意縮進如何排列。
用標簽包裹行或選中項: CTRL + ? + W（譯者注：alt+shift+w）
使用標簽包裹一行; 開始輸入你想使用的標簽,你成功了.
移除未閉合的容器元素: ? + ’（譯者注：ctrl+shift+;）
這會移除與你的光標相關的父標簽。對清除標記很有幫助。
計算數學表達式: ? + ? + Y（譯者注：ctrl+shift+y）
我從未想過我會經常使用這個，但是確實很好用
遞增和遞減: ? + OPTION + ↑ or ↓, OPTION + ↑ or ↓（譯者注：alt+shift+↑ 或 ↓，ctrl+ ↑ 或 ↓）
按住 ? 將以10的步長改變數字, 不按住以1為步長. 同時注意到你不需要選擇數字, Sublime Text 足夠聰明到更新本行最近的數字.
大寫和小寫: ? + K then U, ? + K then L（譯者注：ctrl+k+u,ctrl+k+l）
注釋選中項/行: ? + /（譯者注：ctrl+/）
這個在所有語言下都可用, 對行和選中項都可用.
額外令人高興的事情!使用AlignTab自定義快捷鍵
上面的快捷鍵都是Sublime Text默認的快捷鍵,但是你也可以添加你自己的自定義快捷鍵。以下示例應用 AlignTab插件使用 三個自定義鍵綁定 來基于=> ,=,和:進行內容垂直對齊。因為我工作中主要使用JavaScript和PHP,這些綁定對于幾乎我需要的每一個場景都有用,但是你可以用任何你想要的字符進行垂直對齊。
在你自己的編輯器實現下面gif的效果,只需安裝 AlignTab, ,添加自定義綁定到您的自定義鍵綁定文件中,選擇一些代碼,并點擊CTRL + ? + . 或 ; 或 =.
結論
一旦你看到多行代碼發生了一個改變,通常有一個使用幾個按鍵來實現改變的方法，而不是一個個地編輯它們。通過連續使用上面快捷鍵的組合去執行重復的或可預見的改變,你可以大大提高你編碼的速度。
這里是一個簡短的Gif,包括選擇所有匹配項,復制鏈接的文本,利用多行光標粘貼復制的文本,并將該文本轉換為小寫。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
