女邻居丰满的奶水在线观看

關(guān)于我們

鄭州網(wǎng)絡(luò )公司-前端性能優(yōu)化

2012-01-10

前端性能優(yōu)化，這是在網(wǎng)站建設中值得我們深思的問(wèn)題，希望接下來(lái)的闡述能為大家提供有益的幫助。

1.請減少HTTP請求

基本原理：

在瀏覽器（客戶(hù)端）和服務(wù)器發(fā)生通信時(shí)，就已經(jīng)消耗了大量的時(shí)間，尤其是在網(wǎng)絡(luò )情況比較糟糕的時(shí)候，這個(gè)問(wèn)題尤其的突出。

一個(gè)正常HTTP請求的流程簡(jiǎn)述：如在瀏覽器中輸入"www.xxxxxx.com"并按下回車(chē)，瀏覽器再與這個(gè)URL指向的服務(wù)器建立連接，然后瀏覽器才能向服務(wù)器發(fā)送請求信息，服務(wù)器在接受到請求的信息后再返回相應的信息，瀏覽器接收到來(lái)自服務(wù)器的應答信息后，對這些數據解釋執行。

而當我們請求的網(wǎng)頁(yè)文件中有很多圖片、CSS、JS甚至音樂(lè )等信息時(shí)，將會(huì )頻繁的與服務(wù)器建立連接，與釋放連接，這必定會(huì )造成資源的浪費，且每個(gè)HTTP請求都會(huì )對服務(wù)器和瀏覽器產(chǎn)生性能負擔。

網(wǎng)速相同的條件下，下載一個(gè)100KB的圖片比下載兩個(gè)50KB的圖片要快。所以，請減少HTTP請求。

解決辦法：

合并圖片（css sprites），合并CSS和JS文件；圖片較多的頁(yè)面也可以使用 lazyLoad 等技術(shù)進(jìn)行優(yōu)化。

2.請正確理解 Repaint 和 Reflow

注：Repaint 和 Reflow 也就是重繪和重排，請允許我在這賣(mài)弄下我有限認識的那么幾個(gè)英語(yǔ)單詞。。。囧

基本原理：

Repaint（重繪）就是在一個(gè)元素的外觀(guān)被改變，但沒(méi)有改變布局（寬高）的情況下發(fā)生，如改變visibility、outline、背景色等等。

Reflow（重排）就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會(huì )重新計算元素的幾何屬性，會(huì )使渲染樹(shù)中受到影響的部分失效，瀏覽器會(huì )驗證DOM樹(shù)上的所有其它結點(diǎn)的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器窗口變化，style屬性的改變等等。如果Reflow的過(guò)于頻繁，CPU使用率就會(huì )噌噌的往上漲，所以前端也就有必要知道 Repaint 和 Reflow的知識。

減少性能影響的辦法：

上面提到通過(guò)設置style屬性改變結點(diǎn)樣式的話(huà)，每設置一次都會(huì )導致一次reflow，所以最好通過(guò)設置class的方式；　有動(dòng)畫(huà)效果的元素，它的position屬性應當設為fixed或absolute，這樣不會(huì )影響其它元素的布局；如果功能需求上不能設置position為fixed或absolute，那么就權衡速度的平滑性。

總之，因為 Reflow 有時(shí)確實(shí)不可避免，所以只能盡可能限制Reflow的影響范圍。

3.請減少對DOM的操作

基本原理：

對DOM操作的代價(jià)是高昂的，這在網(wǎng)頁(yè)應用中的通常是一個(gè)性能瓶頸。

天生就慢。在《高性能JavaScript》中這么比喻："把DOM看成一個(gè)島嶼，把JavaScript（ECMAScript）看成另一個(gè)島嶼，兩者之間以一座收費橋連接"。所以每次訪(fǎng)問(wèn)DOM都會(huì )教一個(gè)過(guò)橋費，而訪(fǎng)問(wèn)的次數越多，交的費用也就越多。所以一般建議盡量減少過(guò)橋次數。

解決辦法：

修改和訪(fǎng)問(wèn)DOM元素會(huì )造成頁(yè)面的Repaint和Reflow，循環(huán)對DOM操作更是罪惡的行為。所以請合理的使用JavaScript變量?jì)Υ鎯热?，考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)，在循環(huán)結束時(shí)一次性寫(xiě)入。

減少對DOM元素的查詢(xún)和修改，查詢(xún)時(shí)可將其賦值給局部變量。

注：在IE中：hover會(huì )降低響應速度。

4.使用JSON格式來(lái)進(jìn)行數據交換

基本原理：

JSON是一種輕量級的數據交換格式，采用完全獨立于語(yǔ)言的文本格式，是理想的數據交換格式。同時(shí)，JSON是 JavaScript原生格式，這意味著(zhù)在 JavaScript 中處理 JSON數據不需要任何特殊的 API 或工具包。

與XML序列化相比，JSON序列化后產(chǎn)生的數據一般要比XML序列化后數據體積小，所以在Facebook等知名網(wǎng)站中都采用了JSON作為數據交換方式。

JS操作JSON：

在JSON中，有兩種結構：對象和數組。

1. 一個(gè)對象以 " { " 開(kāi)始，" } " 結束。每個(gè)"名稱(chēng)"后跟一個(gè) " ： " ；"名稱(chēng)/值對"之間使用 " ， "（逗號）分隔。名稱(chēng)用引號括起來(lái)；值如果是字符串則必須用引號括起來(lái)，數值型則不需要。如：

var obj={"name"："darren"，"age"：24，"location"："beijing"}

2. 數組是值（value）的有序集合。一個(gè)數組以 " ［ " 開(kāi)始， " ］ " 結束。值之間使用 " ， " （逗號）分隔。如：

var jsonlist=［{"name"："darren"，"age"：24，"location"："beijing"}，{"name"："weidong.nie"，"age"：24，"location"："hunan"}］;

對這種數組和對象字面量的操作是非常方便且高效的。如果預先知道JSON結構的情況下，使用JSON進(jìn)行數據傳遞簡(jiǎn)直是太美妙了，可以寫(xiě)出很實(shí)用美觀(guān)可讀性強的代碼。如果你是純粹的前臺開(kāi)發(fā)人員，一定會(huì )非常喜歡JSON。

5.高效使用HTML標簽和CSS樣式

基本原理：

HTML是一門(mén)用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言，它使用標記標簽來(lái)描述網(wǎng)頁(yè)，作為一名合格的前端開(kāi)發(fā)，你有必要去知道其常用標簽代表的含義（SEO）和屬性（表現形式）。

CSS指層疊樣式表（Cascading Style Sheets），如果說(shuō)把頁(yè)面想象成一個(gè)人，HTML就是人的骨架，CSS就是人的衣裝，一個(gè)人的品味從他的衣裝就能一目了然。

一名專(zhuān)業(yè)的前端開(kāi)發(fā)也是一名優(yōu)秀的重構，因為在頁(yè)面中經(jīng)常會(huì )有各種不合理的嵌套和重復定義的CSS樣式，我不是要你重構頁(yè)面，只是希望你在碰到這種情況的時(shí)候解決這些問(wèn)題。如這樣的HTML：

 <table><tr><td>
　　<table><tr><td>
　　　　...
　　</td></tr></table>
</td></tr></table>

或者這樣的CSS：

body .box .border ul li p strong span{color：#000}

以上都是對HTML和CSS非常糟糕的使用方法。

正確理解：

HTML是一門(mén)標記語(yǔ)言，使用合理的HTML標簽前你必須了解其屬性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比較基礎的就是得知道塊級元素和內聯(lián)元素、盒模型、SEO方面的知識。

CSS是用來(lái)渲染頁(yè)面的，也是存在渲染效率的問(wèn)題。CSS選擇符是從右向左進(jìn)行匹配的，這里對css選擇符按照開(kāi)銷(xiāo)從小到大的順序梳理一下：

ID選擇符 #box
類(lèi)選擇符 .box 
標簽 div 
偽類(lèi)和偽元素 a:hover

當頁(yè)面被觸發(fā)引起回流（reflow）的時(shí)候，低效的選擇符依然會(huì )引發(fā)更高的開(kāi)銷(xiāo)，所以請避免低效。

6.使用CDN加速（內容分發(fā)網(wǎng)絡(luò )）

基本原理：

CDN的全稱(chēng)是Content Delivery Network，即內容分發(fā)網(wǎng)絡(luò )。

"其基本思路是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數據傳輸速度和穩定性的瓶頸和環(huán)節，使內容傳輸的更快、更穩定。通過(guò)在網(wǎng)絡(luò )各處放置節點(diǎn)服務(wù)器所構成的在現有的互聯(lián)網(wǎng)基礎之上的一層智能虛擬網(wǎng)絡(luò )，CDN系統能夠實(shí)時(shí)地根據網(wǎng)絡(luò )流量和各節點(diǎn)的連接、負載狀況以及到用戶(hù)的距離和響應時(shí)間等綜合信息將用戶(hù)的請求重新導向離用戶(hù)最近的服務(wù)節點(diǎn)上。" - 百度百科。

上面幾句話(huà)有多少能安安心心看完的，所以我還是通過(guò)說(shuō)故事再來(lái)介紹一遍吧，順便補一句，故事出處不明，^_^：

古代打仗大家一定都知道，由于古代的交通很不發(fā)達，所以當外族進(jìn)攻的時(shí)候往往不能及時(shí)的反擊，等朝廷征完兵再把兵派往邊境的時(shí)候那些侵略者卻是早已不見(jiàn)了蹤影，這個(gè)讓古代的帝王很是郁悶。后來(lái)帝王們學(xué)聰明了，都將大量的兵員提前派往邊境駐扎，讓他們平時(shí)屯田，戰時(shí)當兵，這樣的策略起到了很顯著(zhù)的作用。

不足之處：

實(shí)時(shí)性不太好是CDN的致命缺陷。隨著(zhù)對CDN需求的逐漸升溫，這一缺陷將得到改進(jìn)，使來(lái)自于遠程服務(wù)器的網(wǎng)絡(luò )內容網(wǎng)頁(yè)與復本服務(wù)器或緩存器中的網(wǎng)頁(yè)保持同步。解決方法是在網(wǎng)絡(luò )內容發(fā)生變化時(shí)將新的網(wǎng)絡(luò )內容從服務(wù)器端直接傳送到緩存器，或者當對網(wǎng)絡(luò )內容的訪(fǎng)問(wèn)增加時(shí)將數據源服務(wù)器的網(wǎng)絡(luò )內容盡可能實(shí)時(shí)地復制到緩存服務(wù)器。

7.將CSS和JS放到外部文件中引用，CSS放頭，JS放尾

基本原理：

注：這個(gè)是很基礎且必須遵循的知識點(diǎn)，可是為了文章的完整性勉為其難加進(jìn)來(lái)吧，嘿嘿。

引入外部文件好處是顯而易見(jiàn)的，而且是項目稍稍復雜一點(diǎn)的時(shí)候就有必要了這樣做了。

易維護、易擴展，方便管理和重復利用。

正確的方式：

JavaScript是瀏覽器中的霸主，為什么這么說(shuō)，因為在瀏覽器在執行JavaScript代碼時(shí)，不能同時(shí)做其它事情，即《script》每次出現都會(huì )讓頁(yè)面等待腳本的解析和執行（不論JavaScript是內嵌的還是外鏈的），JavaScript代碼執行完成后，才繼續渲染頁(yè)面。這個(gè)也就是JavaScript的阻塞特性。

因為這個(gè)阻塞的特點(diǎn)，建議把JavaScript代碼放到《/body》標簽以前，這樣既能有效的防止JavaScript的阻塞，又能使得頁(yè)面的HTML結構能更快的釋放。

HTML規范清楚指出CSS要放包含在頁(yè)面的《head》區域內，這里就不多解釋了。

8.精簡(jiǎn)CSS和JS文件

基本原理：

有一條非常重要的準則一直沒(méi)有提到，就是CSS和JavaScript的壓縮，直接減少下載的文件體積。我個(gè)人經(jīng)常使用的方式是使用 YUI Compressor，它的特點(diǎn)是：移除注釋?zhuān)灰瞥~外的空格；細微優(yōu)化；標識符替換。

YUI Compressor是java程序，如果你對java很熟悉的話(huà)可快速的上手使用yuicompressor.jar；如果你對java很陌生也沒(méi)關(guān)系，一樣可以使用YUI Compressor，下面介紹其使用方式。

YUI Compressor的配置和使用：

先配置使用環(huán)境：

1.先確保電腦中是否安裝了JDK

2.再配置必要的環(huán)境變量（細節不能三兩句說(shuō)清，所以不知道如何設置還是搜索吧）

3.在cmd界面，輸入javac可測試是否安裝成功

使用方法可從cmd到進(jìn)入yuicompressor.jar所在磁盤(pán)，我以自己的yuicompressor-2.4.2.jar為例：

1.壓縮JS

java -jar yuicompressor-2.4.2.jar api.js > api.min.js

2.壓縮CSS

java -jar yuicompressor-2.4.2.jar style.css > style.min.css

當然，還有另一種更傻瓜式的使用方式，趕興趣的朋友自己可去多嘗試下。

9.壓縮圖片和使用圖片Spirit技術(shù)

基本原理：

注：其實(shí)壓縮圖片和圖片精靈是兩個(gè)方面的技術(shù)，可是既然都是關(guān)于圖片的優(yōu)化還是放到一塊吧。

現在由于工作的細分，專(zhuān)業(yè)的前端工程師已經(jīng)少有機會(huì )去切圖了，可是關(guān)于圖片壓縮還是得略微了解，一般圖片壓縮的方式有：

1.縮小圖片分辨率；

2.改變圖片格式；

3.降低圖片保存質(zhì)量。

關(guān)于圖片精靈（Spirit）技術(shù)就和我們工作直接相關(guān)，不管是在CSS中的圖片還是在HTML結構中的圖片都會(huì )產(chǎn)生HTTP請求，前端優(yōu)化的第一條就是減少請求數，最直接有效的方法是使用圖片精靈（CSS Spirit）。圖片精靈就是把許多圖片放到一張大圖片里面，通過(guò)CSS來(lái)顯示圖片的一部分。

至于圖片精靈的操作細節就不多做介紹了，網(wǎng)上相關(guān)內容很多。

10.注意控制Cookie大小和污染

基本原理和使用方法：

有關(guān)Cookie的基礎和高級知識可以去看本人寫(xiě)過(guò)的一篇文章《JavaScript 操作 Cookie》。

因為Cookie是本地的磁盤(pán)文件，每次瀏覽器都會(huì )去讀取相應的Cookie，所以建議去除不必要的Coockie，使Coockie體積盡量小以減少對用戶(hù)響應的影響；

使用Cookie跨域操作時(shí)注意在適應級別的域名上設置coockie以便使子域名不受其影響

Cookie是有生命周期的，所以請注意設置合理的過(guò)期時(shí)間，合理地Expire時(shí)間和不要過(guò)早去清除coockie，都會(huì )改善用戶(hù)的響應時(shí)間。

時(shí)間有限，今年就先到這里吧，哈哈。愿大家新年快樂(lè )，工作順利。我會(huì )在以后的工作中慢慢完善這篇文章，也請大家多提寶貴建議。

如果大家也有什么好的優(yōu)化方式也請留言，到時(shí)會(huì )補充到這篇文章當中，先在此謝謝了。

參考資料

百度百科

http://dev.w3.org/html5/markup/common-models.html