博主信息
亚瑟林
博文
4
粉丝
0
评论
0
访问量
168
积分:0
P豆:8

CSS究竟是怎么工作的?

2020年08月01日 21:01:13阅读数:59博客 / 亚瑟林/ PHP成长之路

HTML 代码和 CSS 代码共同构成了风格迥异的网页,HTML 代码定义了网页的框架与内容,CSS 则可以赋予网页独一无二的样式,那么,浏览器是如何处理 CSS 代码,将网页渲染成我们想要的结果的?

简而言之,浏览器处理文件的标准流程是这样的:

1、浏览器载入 HTML 文件(比如从网络上获取)。
2、将 HTML 文件转化成一个DOM(Document Object Model),DOM是文件在计算机内存中的表现形式。
3、接下来,浏览器会拉取该 HTML 相关的大部分资源,比如嵌入到页面的图片、视频和 CSS 样式。
4、浏览器拉取到 CSS 之后会进行解析,根据选择器的不同类型(比如element、class、id等等)把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id选择器等)应用在对应的DOM的节点中,并添加节点依赖的样式(这个中间步骤称为渲染树)。
5、上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局。
6、网页展示在屏幕上(这一步被称为着色)。

图示:

参考:https://developers.google.com/web/fundamentals/performance/critical-rendering-path

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 写在前面,笔者在做面试官这 2 年多时间内,面试了数百个前端程师,惊讶发现,超过 80% 候选人对下面这道题回答情况连及格都达不到。这样神奇一道面试题?
    我一直对人智能识别技术非常感兴趣,因为我无法想象这一种什算法,什分析过程,,,无论声音识别、人脸面部识别或其它种识别,人们外貌、说话方式都如此不同,一种图片你可以用不同方式
    泛型,使用,有什好处?答:泛型一种把类型明确推迟到创建对象或者调用方法时候才去明确特殊类型。它用于参数化类型,把类型当做参数一样传递。
    为一名前端程师,对于javascript大家都不陌生,这篇文章从更深层次方向——JS引擎去理解javascript到底运行,从而进行优化。
    php培训出来?到网上把PHP相关面试题复习一下、在招聘网站、app上投递简历、不要嫌弃资低、能学习到技术才最重要
    解决办法:首先打开【控制面板】-【卸载程序】;然后查看【office】否存在;接着当office都不存在或者安装地址出现错误时,进行重新安装;最后重新打开文件即可恢复正常。