關於前端代碼性能優化問題

如下觀點純屬我的見解：

　　對於一個剛接觸前端不久的人來講，前端的代碼質量是很重要的一部分，畢竟關係到性能問題。我的認爲關於代碼性能優化主要由這幾方面：HTML、CSS、Javascript和HTTP，因此對這四個方面的優化能提升瀏覽器的性能。我的知識面有限，只有學到如下的知識，另外的還沒涉及，不足之處還請體諒。

　　1、 HTML

　　　　一、首先是對HTML5的充分熟悉和理解，理解標籤的語義化，減小對標籤的重定義。

　　　　二、命名的規範化，對id、class、name的規範命名有助於總體代碼的構建，方便他人的理解和閱讀。

　　2、CSS

　　　　一、CSS代碼的簡寫。熟悉和了解CSS的朋友都知道，CSS樣式表有不少縮寫方式。好比，定義字體、定義背景等，均可以把CSS代碼縮寫，從而減小代碼量，提升效率。

簡寫：
.a{
font:normal small-caps bold 14px/1.5em '宋體',arial,verdana;
}
等價於：
.a{
font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:'宋體',arial,verdana;
}

　　　　二、同屬性提出。將相同屬性的CSS格式放在一格公共的樣式中，能減小不少代碼的書寫。相信你們都不陌生。就很少作說明了。

　　　　三、儘可能將樣式寫在單獨的css文件裏面，在head元素中經過link方式引用，有時候爲了圖方便或者快速搞定功能，咱們可能會直接將樣式寫在頁面的style標籤或者直接內聯在元素上，這樣雖然簡單方便，可是很是不利於往後的維護。將代碼寫成單獨的css文件有幾點好處：

　　　　(1)內容和樣式分離，易於管理和維護

　　　　(2)減小頁面體積

　　　　(3)css文件能夠被緩存、重用，維護成本下降

　　　　四、不使用@import。這條手段已是衆所周知，這裏簡單提一下，@import影響css文件的加載速度

　　　　五、避免使用複雜的選擇器，層級越少越好。簡潔的選擇器不只能夠減小css文件大小，提升頁面的加載性能，瀏覽器解析時也會更加高效，也會提升開發人員的開發效率，下降了維護成本。

　　　　六、利用CSS繼承減小代碼量。咱們知道有一部分CSS代碼是能夠繼承的，若是父元素已經設置了該樣式，子元素就不須要去設置該樣式，這個也是提升性能的行之有效的方法。常見的能夠繼承的屬性好比：color，font-size，font-family等等；不可繼承的好比：position，display，float等。

　　　　七、結構和樣式分離。咱們平時必定遇到過這種狀況，好比一個頁面存在着多個不一樣功能的按鈕，這些按鈕的形狀大小都差很少，可是根據不一樣的功能會有不一樣的顏色或背景來加以區分。若是不進行結構和樣式分離，咱們的CSS代碼多是這樣的

　　.btn-primary{

　　width:100px;

　　height:50px;

　　padding:5px 3px;

　　background:#ccc;

　　color:#000;

　　}

　　.btn-delete{

　　width:100px;

　　height:50px;

　　padding:5px 3px;

　　background:red;

　　color:#fff;

　　}

　　這兩個或者可能更多的按鈕擁有一些不一樣的樣式，可是它們同時擁有相同的大小樣式等，咱們將其抽象的部分提取出來，結果以下：

　　.btn{

　　width:100px;

　　height:50px;

　　padding:5px 3px;

　　}

　　.primary{

　　background:red;

　　color:#fff;

　　}

　　.delete{

　　background:red;

　　color:#fff;

　　}

　　這樣提取公用的樣式出來，而後按鈕同時引用btn和primary等。這種作法除了減小重複的代碼精簡CSS以外，還有一個好處是複用性，若是須要增長其餘額外的按鈕，只須要編寫不一樣的樣式，和btn配合使用便可。

　　　　八、容器和內容分離

　　咱們平時寫代碼必定寫過這樣代碼

　　.content h3{

　　font-size:20px;

　　color:#333;

　　}

　　這樣的代碼就是內容依賴於容器，沒有分離的代碼，也就是說h3的樣式依賴於.content容器，若是其餘地方要用到相同的樣式，可是它的容器卻不是.content，那你可能就是要再寫一遍.something h3。

　　因此OOCSS推薦分離容器和內容，能夠修改爲：

　　.title{

　　font-size:20px;

　　color:#333;

　　}

　　關於這一點，我我的建議要分狀況來看，像前面這個例子，它適合樣式和容器分離。可是好比下面這種狀況：

　　.menu li{

　　font-size:12px;

　　}

　　這種ul，li列表的樣式，我覺的就按照咱們原先的作法就能夠，不必定非得給一個類給li來設定樣式，即

　　.menu-item{

　　font-size:12px;

　　}

　　這樣頁面的li標籤須要引用menu-item類。

　　三 、Javascript

　　　　一、減小全局變量。由於訪問局部變量的速度要比訪問全局變量的速度更快些。

　　　　二、減小DOM訪問。訪問DOM的次數越多，代碼運行速度越慢。所以，在有其餘方案能夠代替的時候，咱們要儘可能減小訪問DOM的次數。

　　　　三、將Javascript腳本引用放在最後加載（可異步的異步）。這樣可讓網頁渲染所須要的內容儘快加載顯示給用戶。

　　　　四、使用外部Javascirpt和CSS文件。可使這些文件被瀏覽器緩存，從而在不一樣的請求內容之間重用。使用外部Javascript和CSS文件的決定因素在於這些外部文件的重用率，若是用戶在瀏覽咱們的頁面時會訪問屢次相同頁面或者能夠重用腳本的不一樣頁面，那麼外部文件形式能夠爲你帶來很大的好處。但對於用戶一般只會訪問一次的頁面，例如microsoft.com首頁，那inline的javascript和css相對來講能夠提供更高的效率。

　　　　五、精簡Javascript代碼。將Javascript或CSS中的空格和註釋全去掉，減少體積。

　　　　六、去除重複腳本。重複的腳本不只浪費瀏覽器的下載時間，並且浪費解析和執行時間。通常用來避免引入重複腳本的作法是使用統一的腳本管理模塊，這樣不只能夠避免重複腳本引入，還能夠兼顧腳本依賴管理和版本管理。

　　4、 HTTP

　　　　一、減小HTTP請求。80%的響應時間花在下載網頁內容(images, stylesheets, javascripts, scripts, flash等)。減小請求次數是縮短響應時間的關鍵！能夠經過簡化頁面設計來減小請求次數，能夠採用如下技巧：（1）採用精靈圖 （2）將多個JS、CSS文件打包成一個文件 （3）採用地圖圖片

　　　　二、減小DNS查詢次數。DNS查詢也消耗響應時間，若是咱們的網頁內容來自各個不一樣的domain (好比嵌入了開放廣告，引用了外部圖片或腳本)，那麼客戶端首次解析這些domain也須要消耗必定的時間。DNS查詢結果緩存在本地系統和瀏覽器中一段時間，因此DNS查詢通常是對首次訪問響應速度有所影響。

　　　　三、緩存AJAX。jax能夠幫助咱們異步的下載網頁內容，可是有些網頁內容即便是異步的，用戶仍是在等待它的返回結果。PS：我的認爲能使用GET方式就不一樣POST方式

　　　　四、CDN的使用。使用CDN有兩點好處，第一，通常來講，訪問速度有保障，穩定性也有保障；第二，你能夠省下資源服務器的一部分資源負擔，節省空間節省流量，艱苦創業，能省則省啊。