【免费】23-渲染流水线：CSS如何影响首次加载时的白屏时间？_For_vip_user_0011资源-CSDN文库

需积分: 0 161 浏览量 2022-08-04 14:16:33 上传评论收藏 653KB PDF 举报

资源详情

资源评论

资源推荐

23-渲染流⽔线：CSS如何影响⾸次加载时的⽩屏时间？23-渲染流⽔线：CSS如何影响⾸次加载时的⽩屏时间？

在上⼀篇⽂章中我们详细介绍了DOM的⽣成过程，并结合具体例⼦分析了JavaScript是如何阻塞DOM⽣成

的。那本⽂我们就继续深⼊聊聊渲染流⽔线中的CSS。因为CSS是⻚⾯中⾮常重要的资源，它决定了⻚⾯最

终显⽰出来的效果，并影响着⽤⼾对整个⽹站的第⼀体验。所以，搞清楚浏览器中的CSS是怎么⼯作的很有

必要，只有理解了CSS是如何⼯作的，你才能更加深刻地理解如何去优化⻚⾯。

本⽂我们先站在渲染流⽔线的视⻆来介绍CSS是如何⼯作的，然后通过CSS的⼯作流程来分析性能瓶颈，最

后再来讨论如何减少⾸次加载时的⽩屏时间。

渲染流⽔线视⻆下的CSS渲染流⽔线视⻆下的CSS

我们先结合下⾯代码来看看最简单的渲染流程：

这两段代码分别由CSS⽂件和HTML⽂件构成，我们来分析下打开这段HTML⽂件时的渲染流⽔线，你可以先

参考下⾯这张渲染流⽔线⽰意图：

含有CSS的⻚⾯渲染流⽔线

//theme.css

div{

color:coral;

background-color:black

}

<html>

<head>

<linkhref="theme.css"rel="stylesheet">

</head>

<body>

<div>geekbangcom</div>

</body>

</html>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余6页未读，立即下载

评论0

内容反馈

西西里的小裁缝

粉丝: 25
资源: 292

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip