DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 頁面重構技能-Javascript、CSS篇
頁面重構技能-Javascript、CSS篇
編輯:前端技巧     

About JS、CSS

CSS:

  1. 樣式表置於頂部
  2. 避免CSS表達式
  3. 使用外部JS、CSS
  4. 削減JS、CSS
  5. <link> ,@import
  6. 避免濾鏡

JS:

  1. 腳本置於底部
  2. 使用外部JS、CSS
  3. 削減JS、CSS
  4. 不用重復腳本
  5. 減少訪問和操作DOM
  6. 事件委托

1、樣式表置頂,Why?

浏覽器渲染頁面都是自上而下的渲染,當在<body>裡遇到<link>或是<style>時候會阻塞渲染頁面,而且也有可能會造成頁面重繪,就好像格子鋪裡,東西都按順序擺好了,但是老板說,這個東西得這樣、那樣擺,又得挨個重新擺了。除此之外,加在<head>裡是為了可以順序加載所需的樣式。

2、避免CSS表達式,Why?

很多人包括我在內,當學習到CSS表達式時候,都說避免或不要用它,所以都偷懶的不用看了,包括JS裡的eval一樣……

後來有一次項目我就偏偏用了一次,結果。。。它成為了最後查出來的BUG。。。(IE6下影響了頁面樣式)

其實CSS表達式最主要的弊端是它影響性能,要知道CSS是具有時效性的,也就是說,當你修改一下樣式,它會馬上生效,

而改變窗口大小,滾動頁面甚至移動鼠標都會觸發表達式進行頻繁的求值,會嚴重影響,所以要盡量避免。

3、使用外部JS、CSS,Why?

我們都知道使用外部文件會增加HTTP請求,但是由於緩存的關系,當用戶再次訪問時,或者訪問其它頁面裡相同的文件時候,頁面會明顯提升響應速度,而且,還有一點好處就是外部JSS、CSS可以減少頁面內的文檔大小。

4、削減JS、CSS,Why?

這個不用說了……你說為什麼?

5、用<link>,@import,Why?

先來看看兩者區別:

區別1:老祖宗的差別。@import完全是CSS提供的一種方式,link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬於CSS范疇,只能加載CSS。

區別2:加載順序的差別。link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以後加載。

區別3:兼容性的差別。link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的浏覽器不支持。

區別4:使用dom控制樣式時的差別。link支持使用Javascript控制DOM去改變樣式;而@import不支持。

兩者比較,@import明顯弱爆了……

6、避免使用濾鏡,Why?

IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於浏覽器加載圖片時它會終止內容的呈現並且凍結浏覽器。在每一個元素(不僅僅是圖片)它都會運算一次,增加了內存開支,因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替,這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader,請使用下劃線_filter又使之對IE7以上版本的用戶無效。

7、腳本置於底部,Why?

腳本的問題就是當浏覽器渲染時候遇到<script>,就會跑去下載,然後執行裡面的JS,這期間頁面就會阻塞,等待完事了再繼續向下執行。所以,為了先將頁面最快的呈現給用戶,JS應放在</body>的上面。

8、減少訪問、操作DOM,Why?

訪問:在《高性能JavaScript》中這麼比喻:“把DOM看成一個島嶼,把JS看成另一個島嶼,兩者之間以一座收費橋連接”。

操作:修改和訪問DOM元素會造成頁面的Repaint和Reflow,也就是重繪和回流。

所以問題顯而易見。

解決方案:緩存已經訪問過的有關元素

       更新完節點之後再將它們一次性添加到文檔樹中

9、事件委托,Why?

事件委托,也就是利用事件冒泡的機制,把事件綁定到元素對象的父元素上。

例如:一個多行的表格,含有經過提示行效果,並且表格會隨著分頁經行變化。

分析:鑒於上面的第7條,我們不能犧牲性能去為每個變化的行元素綁定事件。

解決方案:把事件綁定到table的父元素上,根據e.target(e.secElement)的節點類型判斷來進行操作

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved