溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Javascript、CSS實(shí)現(xiàn)頁(yè)面重構(gòu)需要注意什么

發(fā)布時(shí)間：2021-10-12 15:33:57 來(lái)源：億速云 閱讀：160 作者：小新 欄目：移動(dòng)開(kāi)發(fā)

這篇文章主要介紹Javascript、CSS實(shí)現(xiàn)頁(yè)面重構(gòu)需要注意什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

About JS、CSS

CSS：

  1. 樣式表置于頂部

  2. 避免CSS表達(dá)式

  3. 使用外部JS、CSS

  4. 削減JS、CSS

  5. <link> ，@import

  6. 避免濾鏡

JS：

  1. 腳本置于底部

  2. 使用外部JS、CSS

  3. 削減JS、CSS

  4. 不用重復(fù)腳本

  5. 減少訪問(wèn)和操作DOM

  6. 事件委托

1、樣式表置頂，Why？

瀏覽器渲染頁(yè)面都是自上而下的渲染，當(dāng)在<body>里遇到<link>或是<style>時(shí)候會(huì)阻塞渲染頁(yè)面，而且也有可能會(huì)造成頁(yè)面重繪，就好像格子鋪里，東西都按順序擺好了，但是老板說(shuō)，這個(gè)東西得這樣、那樣擺，又得挨個(gè)重新擺了。除此之外，加在<head>里是為了可以順序加載所需的樣式。

2、避免CSS表達(dá)式，Why？

很多人包括我在內(nèi)，當(dāng)學(xué)習(xí)到CSS表達(dá)式時(shí)候，都說(shuō)避免或不要用它，所以都偷懶的不用看了，包括JS里的eval一樣&hellip;&hellip;

后來(lái)有一次項(xiàng)目我就偏偏用了一次，結(jié)果。。。它成為了最后查出來(lái)的BUG。。。（IE6下影響了頁(yè)面樣式）

其實(shí)CSS表達(dá)式最主要的弊端是它影響性能，要知道CSS是具有時(shí)效性的，也就是說(shuō)，當(dāng)你修改一下樣式，它會(huì)馬上生效，

而改變窗口大小，滾動(dòng)頁(yè)面甚至移動(dòng)鼠標(biāo)都會(huì)觸發(fā)表達(dá)式進(jìn)行頻繁的求值，會(huì)嚴(yán)重影響，所以要盡量避免。

3、使用外部JS、CSS，Why？

我們都知道使用外部文件會(huì)增加HTTP請(qǐng)求，但是由于緩存的關(guān)系，當(dāng)用戶再次訪問(wèn)時(shí)，或者訪問(wèn)其它頁(yè)面里相同的文件時(shí)候，頁(yè)面會(huì)明顯提升響應(yīng)速度，而且，還有一點(diǎn)好處就是外部JSS、CSS可以減少頁(yè)面內(nèi)的文檔大小。

4、削減JS、CSS，Why？

這個(gè)不用說(shuō)了&hellip;&hellip;你說(shuō)為什么？

5、用<link>，@import，Why？

先來(lái)看看兩者區(qū)別：

區(qū)別1：老祖宗的差別。@import完全是CSS提供的一種方式，link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。

區(qū)別2：加載順序的差別。link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。

區(qū)別3：兼容性的差別。link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區(qū)別4：使用dom控制樣式時(shí)的差別。link支持使用Javascript控制DOM去改變樣式；而@import不支持。

兩者比較，@import明顯弱爆了&hellip;&hellip;

6、避免使用濾鏡，Why？

IE獨(dú)有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個(gè)濾鏡的問(wèn)題在于瀏覽器加載圖片時(shí)它會(huì)終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。在每一個(gè)元素（不僅僅是圖片）它都會(huì)運(yùn)算一次，增加了內(nèi)存開(kāi)支，因此它的問(wèn)題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來(lái)代替，這種格式能在IE中很好地工作。如果你確實(shí)需要使用AlphaImageLoader，請(qǐng)使用下劃線_filter又使之對(duì)IE7以上版本的用戶無(wú)效。

7、腳本置于底部，Why？

腳本的問(wèn)題就是當(dāng)瀏覽器渲染時(shí)候遇到<script>，就會(huì)跑去下載，然后執(zhí)行里面的JS，這期間頁(yè)面就會(huì)阻塞，等待完事了再繼續(xù)向下執(zhí)行。所以，為了先將頁(yè)面最快的呈現(xiàn)給用戶，JS應(yīng)放在</body>的上面。

8、減少訪問(wèn)、操作DOM，Why？

訪問(wèn)：在《高性能JavaScript》中這么比喻：“把DOM看成一個(gè)島嶼，把JS看成另一個(gè)島嶼，兩者之間以一座收費(fèi)橋連接”。

操作：修改和訪問(wèn)DOM元素會(huì)造成頁(yè)面的Repaint和Reflow，也就是重繪和回流。

所以問(wèn)題顯而易見(jiàn)。

解決方案：緩存已經(jīng)訪問(wèn)過(guò)的有關(guān)元素

　　　　   更新完節(jié)點(diǎn)之后再將它們一次性添加到文檔樹(shù)中

9、事件委托，Why？

事件委托，也就是利用事件冒泡的機(jī)制，把事件綁定到元素對(duì)象的父元素上。

例如：一個(gè)多行的表格，含有經(jīng)過(guò)提示行效果，并且表格會(huì)隨著分頁(yè)經(jīng)行變化。

分析：鑒于上面的第7條，我們不能犧牲性能去為每個(gè)變化的行元素綁定事件。

解決方案：把事件綁定到table的父元素上，根據(jù)e.target(e.secElement)的節(jié)點(diǎn)類型判斷來(lái)進(jìn)行操作

以上是“Javascript、CSS實(shí)現(xiàn)頁(yè)面重構(gòu)需要注意什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手