溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Javascript、CSS實現頁面重構需要注意什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
CSS：
樣式表置于頂部
避免CSS表達式
使用外部JS、CSS
削減JS、CSS
<link> ，@import
避免濾鏡
JS：
腳本置于底部
使用外部JS、CSS
削減JS、CSS
不用重復腳本
減少訪問和操作DOM
事件委托
瀏覽器渲染頁面都是自上而下的渲染，當在<body>里遇到<link>或是<style>時候會阻塞渲染頁面，而且也有可能會造成頁面重繪，就好像格子鋪里，東西都按順序擺好了，但是老板說，這個東西得這樣、那樣擺，又得挨個重新擺了。除此之外，加在<head>里是為了可以順序加載所需的樣式。
很多人包括我在內，當學習到CSS表達式時候，都說避免或不要用它，所以都偷懶的不用看了，包括JS里的eval一樣……
后來有一次項目我就偏偏用了一次，結果。。。它成為了最后查出來的BUG。。。（IE6下影響了頁面樣式）
其實CSS表達式最主要的弊端是它影響性能，要知道CSS是具有時效性的，也就是說，當你修改一下樣式，它會馬上生效，
而改變窗口大小，滾動頁面甚至移動鼠標都會觸發表達式進行頻繁的求值，會嚴重影響，所以要盡量避免。
我們都知道使用外部文件會增加HTTP請求，但是由于緩存的關系，當用戶再次訪問時，或者訪問其它頁面里相同的文件時候，頁面會明顯提升響應速度，而且，還有一點好處就是外部JSS、CSS可以減少頁面內的文檔大小。
這個不用說了……你說為什么？
先來看看兩者區別：
區別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明顯弱爆了……
IE獨有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在于瀏覽器加載圖片時它會終止內容的呈現并且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
腳本的問題就是當瀏覽器渲染時候遇到<script>，就會跑去下載，然后執行里面的JS，這期間頁面就會阻塞，等待完事了再繼續向下執行。所以，為了先將頁面最快的呈現給用戶，JS應放在</body>的上面。
訪問：在《高性能JavaScript》中這么比喻：“把DOM看成一個島嶼，把JS看成另一個島嶼，兩者之間以一座收費橋連接”。
操作：修改和訪問DOM元素會造成頁面的Repaint和Reflow，也就是重繪和回流。
所以問題顯而易見。
解決方案：緩存已經訪問過的有關元素
更新完節點之后再將它們一次性添加到文檔樹中
事件委托，也就是利用事件冒泡的機制，把事件綁定到元素對象的父元素上。
例如：一個多行的表格，含有經過提示行效果，并且表格會隨著分頁經行變化。
分析：鑒于上面的第7條，我們不能犧牲性能去為每個變化的行元素綁定事件。
解決方案：把事件綁定到table的父元素上，根據e.target(e.secElement)的節點類型判斷來進行操作
以上是“Javascript、CSS實現頁面重構需要注意什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
