提升页面渲染速度的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倍以上。"}]}]}]}