hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

CSS的事情历程引见(图文)【html5教程】

2019-11-26HTML搜搜PHP网52°c
A+ A-
本篇文章给人人带来的内容是关于CSS的事情历程引见(图文),有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

在日常平凡的事情中,能够都是再用一些框架或者是简朴的CSS来润饰我们的HTML页面,那末细致想一想一个资深的前端从业者,是不是须要晓得他的事情道理和历程呢,手艺这类东西,当然是我们相识的越多,才会运用的越随心所欲。那末下面,我就为人人来引见一下CSS的事情历程把。
有个典范的题目:从你输入 URL 到看到页面都发生了什么?这个题目回覆可长可短,回覆细致了扯上大几千字都不是题目。这里我从接收到 HTML,CSS,JS 等种种文件以后最先说,前面的都不是本题重点了。
总的来说,历程分以下几步:

  1. 处置惩罚 HTML 标记并构建 DOM 树。
  2. 处置惩罚 CSS 标记并构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个衬着树。
  4. 依据衬着树来规划,以盘算每一个节点的多少信息。
  5. 将各个节点绘制到屏幕上。

是不是是觉得很奇异,简朴的几个历程就可以让我们的页面变得悦目起来,这照样属于很浅的一些内容,更深条理东西在bob先生近来的直播课中经常有讲到,人人能够多多关注哦。不说这些题外话了,我们下面来画几个图,协助人人更清晰的明白CSS的事情历程、。

1、构建 DOM Tree:HTML 文件加载后,浏览器最先构建 DOM Tree,DOM Tree 就是形貌 HTML 文档中元素层叠关联的一棵树,长如许

2、构建 CSSOM 树:与DOM 相似,我们须要对 CSS 构建立。起首CSS 字节转换成字符,接着转换成令牌和节点,末了链接到一个称为“CSS 对象模子”(CSSOM) 的树结构内,CSSOM 树长如许

3.合成衬着树:将 DOM 树和 CSSOM 树合并成一棵衬着树,长如许

4、绘制/栅格化:我们已晓得各个元素的款式和规划体式格局了,接下来就是浏览器内核(日常平凡说的 webkit 内核)来盘算,将衬着树中的每一个节点转换成屏幕上的现实像素。

5、绘制到屏幕。

【引荐课程:CSS视频教程】

以上就是CSS的事情历程引见(图文)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS的事情历程引见(图文)【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: