Web前端性能優化經驗分享(2)

var obj={"name":"darren","age":24,"location":"beijing"

　　2. 數組是值(value)的有序集合。一個數組以 “ [ ” 開始， “ ] ” 結束。值之間使用 “ , ” (逗號)分隔。如：

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}]; 

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

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

　　基本原理：

　　HTML是一門用來描述網頁的一種語言，它使用標記標簽來描述網頁，作為一名合格的前端開發，你有必要去知道其常用標簽代表的含義(SEO)和屬性(表現形式)。

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

　　一名專業的前端開發也是一名優秀的重構，因為在頁面中經常會有各種不合理的嵌套和重復定義的CSS樣式，我不是要你重構頁面，只是希望你在碰到這種情況的時候解決這些問題。如這樣的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是一門標記語言，使用合理的HTML標簽前你必須了解其屬性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。

　　CSS是用來渲染頁面的，也是存在渲染效率的問題。CSS選擇符是從右向左進行匹配的，這里對css選擇符按照開銷從小到大的順序梳理一下：

　　1)ID選擇符 #box

　　2)類選擇符 .box

　　3)標簽 div

　　4)偽類和偽元素 a:hover

　　當頁面被觸發引起回流(reflow)的時候，低效的選擇符依然會引發更高的開銷，所以請避免低效。

　　6.使用CDN加速(內容分發網絡)

　　基本原理：

　　CDN的全稱是Content Delivery Network，即內容分發網絡。

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

　　上面幾句話有多少能安安心心看完的，所以我還是通過說故事再來介紹一遍吧，順便補一句，故事出處不明，^_^：

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

　　不足之處：

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

原文轉自：http://www.uml.org.cn/Test/201307115.asp