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事件,多次写监听同一个事件,函数会被依次执行的,不会被覆盖。