雷恩文字
讓企業贏在全網營銷時代
當前位置: 主頁 > 建站知識 > 網頁設計 >
聯系我們
電話咨詢:15066004201
E-mail:[email protected]
地址: 山東省東營市西城區

網站設計時如何改進CSS的呈現速度

作者:admin 點擊量:次 2018-09-07

網站設計有沒有想過網站的CSS的大小?可能會降低頁面的加載速度,拖延頁面呈現。 雖然CSS不是網站中最大的資產類型,但它是瀏覽器發現的第一個。因為瀏覽器直到CSS被下載和解析后,才渲染頁面,所以css必須盡可能的精簡。 

網站設計這里有幾個技巧來幫助你解決這方面的問題

01.在網站設計時使用淺選擇器

CSS方面使用淺選擇器可以修剪大樣式的千字節。比如在網站設計時以下情況:

nav ul li.nav-item

這可以更簡潔地表達:

.nav-item

除了幫助保持CSS的細節外,瀏覽器還可以更快地渲染由淺選擇器定向的元素。瀏覽器從右到左讀取選擇器。選擇器越深,瀏覽器渲染并重新渲染這些選擇器應用的元素所需的時間越長。對于經常回流的復雜DOM,短選擇器也可以減少傾斜。

理想情況下,您希望選擇器盡可能的淺,但這并不意味著您應該將所有內容都進行簡化。有時您需要額外的特性來擴展組件。

02.使用CSS速記屬性

簡化不必要的CSS代碼這似乎是常識你會發現在編譯中不必要地使用的頻率非常大。以下是使用中的一些屬性示例:

font-size: 1.5rem;line-height: 1.618;font-family: "Arial", "Helvetica", sans-serif;

對于這CSS!讓我們整理一下:

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

字體速記屬性可以凝結幾個聲明編輯層方便的一行,這樣在網站設計占用空間少得多

在上面所示的例子中,速記使用的空間比平常的css編譯方法了近40%。

當然,字體代碼屬性不是您可以使用的唯一速記。例如邊緣頂部邊緣權限,我們都可以使用速記方法 

填充屬性的工作方式相同。為了更多的方法來清理您的CSS,我們可以參考一些簡易屬性列表。

如果我們需要在級聯中進一步覆蓋一個值,該怎么辦?例如,假設您有一個標題元素,需要更改其較大顯示器的字體大小。 

在這種情況下,您可以使用更具體的font-size屬性:

h1{

    font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;}@media (min-width: 60rem){

    h1{

        font-size: 2rem;

    }}

這樣不僅方便,還增加了組件的靈活性。如果底層字體屬性的任何其他部分被修改,這些屬性更改將會滲透到更高一層的顯示。非常適用于組件覆蓋

03.使用預加載資源提示

預加載資源的提示可以提高給瀏覽器加載你的網站的CSS。該預加載資源的提示告訴瀏覽器啟動的早期獲取的代碼

例如網站設計時可以將其設置為HTML中的<link>標記:

<link rel="preload" href="/css/styles.css" as="style">

或者作為服務器配置中的HTTP標頭:

Link: </css/styles.css>; rel=preload; as=style

在這兩種情況下,preload可以讓瀏覽器開始加載/css/styles.css。在HTTP頭中使用預加載優先屬性可以使瀏覽器提早加載css,而不是稍后在主體中進行響應

HTTP頭中使用預加載的另一個原因是它可以在大多數HTTP / 2啟動服務器的事件推送。服務器推送是一種機制,通過這種方法信息在內容請求時被搶先推送到客戶端,并提供類似于內聯CSS的性能優勢。

服務器推送在HTTP / 1上不可用。但是,在HTTP / 1環境中使用預加載仍可以提高性能。

04.用剔除冗余軟件來處理css

有些軟件或網站可以檢查CSS是否存在規則重復冗余代碼當然其中大部分是需要收費的,例如我們之前在網站設計時使用的CSS優化

可以檢查您的CSS冗余如下: 

csscss -v styles.css

此命令列出哪些選擇器共享您可以取消復制以節省空間的規則:

{h1} AND {p} share 3 declarations

  - color: #000

  - line-height: 1.618

  - margin: 0 0 1.5rem

您可以在一個選擇器下剔除重復規則: 

h1, p{

    color: #000;

    line-height: 1.618;

    margin: 0 0 1.5rem;}

我們在設計大型的網站時利用這些功能可以節省很多空間

雷恩文字 大赢足球即时比分网 极速赛车免费计划软件下载 怎样算牛牛牌出现概率 福彩c515走势图 老虎机网 彩票买大小有什么技巧 茶苑二人斗地主银子版 三牛发手机登录平台 重庆肘时彩官网 23号吉林时时开奖号 51彩票快三登录 pk10手机预测软件免费 今天大乐透开奖结果走势图表 pt电子游戏大奖视频 彩控网 360老时时彩