在css中哪个属性会影响dom读取文档流的顺序.direction,writing-mode

html-css011

在css中哪个属性会影响dom读取文档流的顺序.direction,writing-mode,第1张

writing-mode

writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。

但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则。

而writing-mode之所以给人“生僻”的感觉,是有原因的。

实际上writing-mode这个CSS属性在上古时代就诞生了,IE5.5浏览器就已经支持了

前端web页面的渲染流程

1、构建DOM与 CSSOM

浏览器通过http请求,获得静态资源后,进行页面渲染时,构建dom与cssom是同时进行的。

html 构建dom

构建dom时,按照html页面中标签的顺序,由上向下渲染。

css 构建cssom

html构建cssom的同时,将css样式构建为cssom

2、渲染树 Render Tree

该过程中DOM与CSSOM合并,生成渲染树,树中包含了渲染页面所需要的节点。

3、布局Layout

计算出每个节点对象的精确位置和大小

4、绘制Paint

使用上面准备好的节点信息,绘制出页面

javascript

我们看到,在构建DOM和CSSOM阶段,会有javascript进入

1、当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行。

2、JavaScript 可以查询和修改 DOM 与 CSSOM。

3、JavaScript 执行将暂停,直至 CSSOM 就绪。

————————————————

原文链接: https://blog.csdn.net/baidu_30891377/article/details/106313534

关于 DOM 的几个级别,实际上是由 W3C 标准,W3C就是 world wide web consortium 的缩写,中文翻译过来就是万维网联盟,是web技术领域最具有权威和影响力的国际中立性技术标准机构,具体就不展示了。

其中 DOM 就是标准之一:DOM 分为三个级别:DOM1级、DOM2级、DOM3级。

那 DOM 具体是什么东西呢?DOM 其实是文档对象模型(document object model)的缩写,它是一种提供对文档访问或修改方法的模型,它的范围很广,但对于 web 开发者来说,往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术,但实际上范围远不局限在这里。

DOM 1级(DOM Level 1)于1998年10月成为 W3C 的推荐标准,DOM1级由两个模块组成:DOM核心(DOM Core)和 DOM HTML,DOM Core 能映射以XML为基础的文档结构,允许获取和操作文档的任意部分,而DOM HTML 通过添加 HTML 专用的对象与函数对 DOM Core 进行了扩展。简单说,DOM1级就是映射文档结构和提供基本的文档操作方法。

DOM2级,就是对DOM1级进行扩展,2级DOM通过对象接口增加对鼠标和用户界面事件、范围、遍历和重叠样式表(CSS)的支持。同时也对DOM1进行了扩展,从而可支持XML命名空间。简单来说,DOM2级就是在DOM1的基础上增加了视图、事件、样式、遍历和范围的接口,和支持XML命名空间。

DOM3级,在前面DOM基础上,引入了以统一方式加载和保存文档的方法,新增了验证文档的方法,同时也对DOM核心进行了扩展,开始支持XML1.0规范。

除了上面的三个等级之外,还有一个叫DOM0级的东西,实际上标准并没有这个东西,它指的是IE4和Netscape Navigator 4.0 最初支持的DHTML,DHTML实际上是HTML、CSS和JS的一个集成,代表的是一种已有的技术,不是标椎,所以DOM0级其实代表的是历史节点中未形成标准的一个初期产物。

举一个常见的DOM0级事件和DOM2级事件的比较:绑定按钮的onclick赋值为一个函数就是DOM0级的,但是onclick多次赋值不同函数,最后也会被后面的函数覆盖掉;而DOM2级利用提供的addEventListener方法监听按钮的click事件,多次写监听同一个事件,函数会被依次执行的,不会被覆盖。