好的APP開發(fā)公司都是怎樣解決CSS優(yōu)化問題的?深圳APP開發(fā)公司提醒首先避免在HTML標(biāo)簽中寫Style屬性CSS(CascadingStyleSheets)即級聯(lián)樣式表。在實(shí)際應(yīng)用中APP開發(fā)公司提醒各位可以通過以下3種方式在HTML頁面中引入CSS代碼。
(1)內(nèi)聯(lián)式
內(nèi)聯(lián)式是在HTML標(biāo)簽的style屬性中定義樣式代碼,即把代碼直接添加于所修飾的標(biāo)記元素。示例代碼如下:
01 < div style=" font- family: Arial, Helvetica, sans- serif;"> 這是 內(nèi)聯(lián) 式樣 式 代碼 </ div>
這樣做雖然更為直觀,但很大程度上加大了HTML頁面體積,不符合結(jié)構(gòu)與表現(xiàn)分離的設(shè)計思想。
(2)嵌入式在頁面中使用<style>標(biāo)簽將樣式定義為內(nèi)部塊對象。示例代碼如下:
02 < style type=" text/ css"> 03 body{ 04 font- family: Arial, Helvetica, sans- serif; 05 } 06 </ style>
內(nèi)聯(lián)CSS可以有效減少HTTP請求,提升頁面性能,緩解服務(wù)器壓力。由于瀏覽器加載完CSS才能渲染頁面,因此能防止CSS文件無法讀取而造成頁面毫無樣式的現(xiàn)象。
(3)引用外部文件
外聯(lián)式樣式表中,CSS代碼作為文件單獨(dú)存放,例如使用style.css文件存放所有樣式。在HTML中的使用<link>標(biāo)簽,定義<link>標(biāo)簽的href屬性來引用CSS文件。示例代碼如下:
01 < link rel=" stylesheet" href=" style. css" type=" text/ css"/>
雖然內(nèi)聯(lián)式和嵌入式減少了HTTP請求數(shù),但是實(shí)際上卻增加了HTML文檔的體積。不過,當(dāng)頁面中的CSS或者JavaScript代碼足夠少,反而是開啟一個HTTP請求的花費(fèi)要更大時,采用這兩種方式卻是有用的。
因此,需要在實(shí)際的項目中測試評估這種方式是否真的提升了速度。同時也要考慮到該頁面的目標(biāo)和它的受眾:如果所期望用戶只會訪問該頁面一次,例如對一些臨時活動來說決不會期望有回訪客出現(xiàn),那么使用內(nèi)聯(lián)式/嵌入式代碼能夠幫助減少HTTP請求數(shù)。
但是通常情況下,由于在HTML標(biāo)簽中直接使用style屬性將增大HTML文檔的體積,并且HTML文檔下載完成后,行內(nèi)樣式會觸發(fā)一次額外的回流事件,影響頁面性能,而且不利于后期維護(hù),因此不建議采用該方法來實(shí)現(xiàn)樣式。好了,APP開發(fā)公司本文關(guān)于“好的APP開發(fā)公司都是怎樣解決CSS優(yōu)化問題的?”的相關(guān)APP制作開發(fā)經(jīng)驗就分享到這里,謝謝關(guān)注,博納網(wǎng)絡(luò)編輯整理。