博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS的工作过程
阅读量:5876 次
发布时间:2019-06-19

本文共 824 字,大约阅读时间需要 2 分钟。

在平时的工作中,可能都是再用一些框架或者是简单的CSS来修饰我们的HTML页面,那么仔细想想一个资深的前端从业者,是否需要知道他的工作原理和过程呢,技术这种东西,当然是我们了解的越多,才会使用的越得心应手。那么下面,我就为大家来介绍一下CSS的工作过程把。 有个经典的问题:从你输入 URL 到看到页面都发生了什么?这个问题回答可长可短,回答详细了扯上大几千字都不是问题。这里我从接收到 HTML,CSS,JS 等各种文件之后开始说,前面的都不是本题重点了。 总的来说,过程分以下几步:

  1. 处理 HTML 标记并构建 DOM 树。
  2. 处理 CSS 标记并构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 根据渲染树来布局,以计算每个节点的几何信息。
  5. 将各个节点绘制到屏幕上。 是不是感觉很神奇,简单的几个过程就能让我们的页面变得好看起来,这还是属于很浅的一些内容,更深层次东西在bob老师最近的直播课中经常有讲到,大家可以多多关注哦。不说这些题外话了,我们下面来画几个图,帮助大家更清楚的理解CSS的工作过程、。
  6. 构建 DOM Tree:HTML 文件加载后,浏览器开始构建 DOM Tree,DOM Tree 就是描述 HTML 文档中元素层叠关系的一棵树,长这样

  1. 构建 CSSOM 树:与DOM 类似,我们需要对 CSS 构建树。首先CSS 字节转换成字符,接着转换成令牌和节点,最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内,CSSOM 树长这样

3.合成渲染树:将 DOM 树和 CSSOM 树合并成一棵渲染树,长这样

4.绘制/栅格化:我们已经知道各个元素的样式和布局方式了,接下来就是浏览器内核(平时说的 webkit 内核)来计算,将渲染树中的每个节点转换成屏幕上的实际像素。 5.绘制到屏幕。

转载于:https://juejin.im/post/5c99f2ddf265da60e21c084e

你可能感兴趣的文章
Linux下DNS实战篇之主从同步
查看>>
centos7 安装之后 TAB无法自动补全 !?
查看>>
MFC标签页--对话框
查看>>
我的友情链接
查看>>
mysql主从+keepalived高可用
查看>>
11g rac ORA-01157问题处理
查看>>
国内code平台托管开源站点
查看>>
U盘的常见物理故障类型和故障表现汇总
查看>>
生产线上的nginx如何添加未编译安装模块
查看>>
面向过程与函数式编程区别的浅显理解
查看>>
你人生中的那口井挖了没有?
查看>>
“节”后余生蛇年的加班开始了
查看>>
web 客户端 移动设备 各种调试工具
查看>>
我的友情链接
查看>>
ubuntu修改IP地址和网关的方法
查看>>
mian(int argc,char *argv[])及getopt()函数
查看>>
CDN是什么作用在哪里?
查看>>
mysql数据库复制延迟参考
查看>>
我的友情链接
查看>>
Siebel SQL Performance
查看>>