提升頁面渲染速度的4個CSS技巧

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶喜歡快速的Web應用。他們期望頁面加載速度快,運行流暢。如果滾動時出現動畫中斷或延遲,用戶很可能就會離開你的網站。作爲一名開發者,你可以做很多事情來提升用戶體驗。本文主要介紹你可以用來提升頁面渲染速度的4個CSS技巧。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"1. Content-visibility"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一般來說,大部分Web應用都有複雜的UI元素,並且它的擴展超出了用戶在瀏覽器視圖中所能看到的範圍。在這種情況下,我們可以使用"},{"type":"codeinline","content":[{"type":"text","text":"content-visibility"}]},{"type":"text","text":" 來跳過渲染屏幕之外的內容。如果你有大量屏幕之外的內容的話,這會大大減少頁面渲染時間。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個功能是最新添加的功能之一,而且它是提升渲染性能最有影響力的功能之一。"},{"type":"codeinline","content":[{"type":"text","text":"content-visibility"}]},{"type":"text","text":" 接受幾個值,我們可以在一個元素上使用"},{"type":"codeinline","content":[{"type":"text","text":"content-visibility: auto;"}]},{"type":"text","text":" 來立即獲得性能提升。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以看下面這個頁面,包含很多顯示不同信息的卡片。雖然屏幕能顯示大約12個卡片,但列表中有差不多375個卡片。如你所見,瀏覽器花費1037ms來渲染這個頁面。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9a\/9a7886a685c274ddd100ff5ca630144a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一般HTML頁面"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下一步,你可以向所有的卡片中加入"},{"type":"codeinline","content":[{"type":"text","text":"content-visibility"}]},{"type":"text","text":" 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這個例子中,向頁面中加入"},{"type":"codeinline","content":[{"type":"text","text":"content-visibility"}]},{"type":"text","text":" 後,渲染時間下降到150ms。性能提升了6倍以上。"}]}]}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章