好的APP開發(fā)公司詳解如何解決加載時(shí)CSS優(yōu)化？深圳APP開發(fā)公司提醒我們CSS代碼優(yōu)化的目的并不僅僅是減少CSS文件的大小，還能讓CSS代碼更有條理、更高效。編寫好的CSS代碼，有助于提升頁面的渲染速度。實(shí)際上，瀏覽器渲染引擎需要解析的CSS規(guī)則越少，性能越好。APP開發(fā)公司本文主要從以下幾方面介紹CSS優(yōu)化：
了解頁面的渲染過程。
避免在HTML標(biāo)簽中寫Style屬性。
正確使用display的屬性。
避免使用CSS表達(dá)式。
請(qǐng)勿濫用float屬性。
不濫用Web字體。
不聲明過多的Font-size。
優(yōu)化選擇器的使用。
開發(fā)APP前了解頁面的渲染過程
渲染也就是將頁面內(nèi)容顯示到瀏覽器屏幕上。瀏覽器的渲染引擎是一種對(duì)HTML文檔進(jìn)行解析并將其顯示在頁面上的工具。目前，Chrome、Safari、Opera瀏覽器中使用WebKit引擎，而Firefox瀏覽器中使用Gecko引擎，IE瀏覽器中使用Trident引擎。2013年4月3日，Google宣布在Chrome瀏覽器中使用新型開源渲染引擎Blink。Opera的BruceLawson也在官方博客中表示計(jì)劃改用Blink引擎。Mozilla也在Github中公布與韓國三星共同開發(fā)的Android系統(tǒng)與ARM系統(tǒng)用渲染引擎Servo。雖然各渲染引擎之間肯定存在著區(qū)別，但是當(dāng)用戶在地址欄中輸入U(xiǎn)RL地址、開始加載頁面時(shí)，各渲染引擎都開始實(shí)現(xiàn)如圖9.25所示的渲染處理。
首先，渲染引擎會(huì)解析HTML文檔，并將標(biāo)簽轉(zhuǎn)換成內(nèi)容樹中的DOM節(jié)點(diǎn)，構(gòu)建DOM樹。同時(shí)，它會(huì)解析頁面中的style元素和外部CSS文件中的樣式數(shù)據(jù)，根據(jù)所構(gòu)建的DOM樹和解析的樣式數(shù)據(jù)共同創(chuàng)建渲染樹。當(dāng)渲染樹被構(gòu)建完成后，開始布局處理過程。
布局的過程就是根據(jù)渲染樹種的位置信息確定每個(gè)節(jié)點(diǎn)在屏幕中的顯示位置。當(dāng)窗口尺寸被修改（resize）、發(fā)生滾動(dòng)操作，或position、display、width、height等與元素位置相關(guān)的樣式屬性值被更新時(shí)觸發(fā)布局過程。在布局過程中由于要計(jì)算所有元素的位置信息，更加會(huì)降低頁面加載性能。在WebKit引擎中把布局過程稱為Layout過程，在Gecko引擎中把繪制過程稱為Reflow過程。瀏覽器將在頁面信息發(fā)生改變時(shí)把對(duì)頁面性能的影響度降為最低。
布局這一過程是一個(gè)逐步完成的過程，為了獲得更好的用戶體驗(yàn)，渲染引擎會(huì)嘗試盡快把內(nèi)容顯示出來，而不會(huì)等到所有HTML文檔都被解析完成后才創(chuàng)建并布局渲染樹。最后開始繪制的過程，即將渲染樹中的可視化信息在屏幕中繪制顯示出來。當(dāng)color、background-color、visibility、outline等與視覺相關(guān)的樣式屬性值被更新時(shí)觸發(fā)繪制過程。在繪制過程中由于要重計(jì)算元素的視覺信息，因此會(huì)降低頁面加載性能。
在WebKit引擎中把繪制過程稱為Painting過程，在Gecko引擎中把繪制過程稱為Repaint過程。HTML元素是首先被解析到DOM樹和渲染樹中的，通過減少HTML元素的數(shù)量，可以讓瀏覽器更快地顯示完節(jié)點(diǎn)。因此，盡可能低地減少HTML中元素的數(shù)量，使用最少量必需的HTML對(duì)布局進(jìn)行語義化。瀏覽器會(huì)在所有HTML文檔被解析完畢之前先開始執(zhí)行布局處理與繪制處理，在讀入新的頁面信息時(shí)，再次構(gòu)建渲染樹并開始渲染處理與繪制處理。
因此，在加載過程中，在頁面還未加載完畢就已經(jīng)開始實(shí)現(xiàn)布局處理、渲染處理，即一系列樣式信息的更新，由JavaScript腳本代碼所觸發(fā)的動(dòng)態(tài)處理以及由用戶操作所觸發(fā)的處理等。這些處理都對(duì)頁面加載速度產(chǎn)生較大影響。
例如，通過設(shè)置元素的visibility樣式屬性值為hidden來隱藏元素時(shí)將觸發(fā)繪制過程，但是通過把元素的display樣式屬性值設(shè)置為none來隱藏元素時(shí)，將同時(shí)觸發(fā)布局過程與繪制過程。也就是說由于display樣式屬性值與元素位置信息相關(guān)，所以對(duì)頁面性能產(chǎn)生較大影響。使得布局過程或繪制過程消耗較多資源成本的樣式屬性有：
@font-f
aceanimation
transition
box-shadow
border-radius
gradient
opacity
background-size
text-align
引起布局過程與繪制過程的原因有：
元素的追加、修改與刪除。
使用動(dòng)畫。
修改樣式。
修改元素的class屬性值。
hover偽類選擇器所觸發(fā)的元素狀態(tài)改變。
由用戶在input元素中的輸入而引起的文字節(jié)點(diǎn)改變。
使用offsetWidth、offsetHeight或getComputedStyle取得樣式屬性值。
文字字體的改變。
窗口尺寸的改變（resize）。
元素透明度的改變。
頁面或元素內(nèi)的滾動(dòng)。
根據(jù)渲染引擎的不同，頁面信息發(fā)生改變時(shí)所觸發(fā)的過程也會(huì)有所區(qū)別。在部分WebKit引擎中不觸發(fā)布局過程，只觸發(fā)繪制過程。在部分渲染引擎中更容易觸發(fā)布局過程，頁面上發(fā)生任何信息改變都會(huì)對(duì)頁面性能產(chǎn)生較大影響。頁面加載時(shí)需要耗費(fèi)一些時(shí)間，在這個(gè)過程中所觸發(fā)的動(dòng)畫操作或頁面縮放操作都會(huì)引起布局過程或繪制過程，從而影響頁面加載性能。在移動(dòng)端中，用戶對(duì)頁面上的操作更加頻繁，所以減少布局過程或繪制過程的觸發(fā)次數(shù)尤為重要。由于窗口尺寸的改變，頁面滾動(dòng)或縮放都會(huì)引起布局過程或繪制過程，因此雖然不可能完全避免這些操作，但是可以通過減少布局過程或繪制過程的觸發(fā)次數(shù)來降低其對(duì)頁面性能產(chǎn)生的影響，從而提高頁面性能。好了，APP開發(fā)公司本文關(guān)于“好的APP開發(fā)公司詳解如何解決加載時(shí)CSS優(yōu)化？”的相關(guān)知識(shí)我們就分享到這里，謝謝關(guān)注。博納網(wǎng)絡(luò)編輯整理。
.jpg)
