`

css和html中的dom节点都是怎么被处理的

阅读更多

今天看到一篇文章浏览器渲染原理  很不错

为什么我会去注意这篇东西呢!因为我昨天在修复朋友们提交的一个小bug后,发现自己的前端有点糟糕,可能是以前我对于前端的处理方式都是交给我的朋友的。原本在我的前端理解中,对于css的控制,我一直希望使用id和css,原因是我觉得够简单和直接,没有复杂的递归关系,不需要一层一层向下看,但是呢这要求很高的文档规范和命名规则,否则名字实在太多了。


通过阅读上述文章,我知道了如下东西:

1,html 会被解析成dom结构

2,css也会被解析成一个dom 这里的dom其实我就理解成一个树图,数据结构里面的树图

3,当css被赋予在html上时,他们两者会被关联

4,浏览器在处理css的变化时有reflow/repaint

5,1)不要一条一条地修改DOM的样式。与其这样,还不如预先定义好css的class,然后修改DOM的className。 这条很棒

 

6,2)把DOM离线后修改。如:

  • 使用documentFragment 对象在内存里操作DOM
  • 先把DOM给display:none(有一次reflow),然后你想怎么改就怎么改。比如修改100次,然后再把他显示出来。
  • clone一个DOM结点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。
  • 对于这的理解,我认为就是在js中把dom,赋值给一个变量,然后对这个变量做操作,最后在赋值给页面的html元素,而不是直接在获取。
  • 举例:var a=$("#id").val();然后你需要对这个a做样式的改动,这时a的变化不会和html有关联,但是如果你直接$("#id").css('')这里你css了很多,可能就会造成浏览器一直在reflow或者repaint

7,3)不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

这条我的理解是 for循环中如果你在不停的获取$("#id").val()是一个不可取的行为

4)尽可能的修改层级比较低的DOM。当然,改变层级比较底的DOM有可能会造成大面积的reflow,但是也可能影响范围很小。

这里的意思我这么理解,你修改的子节点越接近树梢可能影响的范围越小,但是如果你n个子节点用的是同一个css的id或者class可能就是要大面积reflow了。

5)为动画的HTML元件使用fixed或abslout的position,那么修改他们的CSS是不会reflow的。

fixed和abstlout的定位就是匹配尺寸的和绝对位置的,相对于relative和float:left来说,我理解是前两者的z-index比一般的div+1层,所以才会不影响周边的div而独立的存在。其他几个布局模式,都是需要牵制于周围的div的,也就会引发reflow了

6)千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。

 

再相信的信息去看那篇帖子吧!我后续把他提到的文章看下。做个小翻译。

 

 

分享到:
评论

相关推荐

    SentinelJS是一个小型JavaScript库可让您使用CSS选择器682字节检测新的DOM节点

    SentinelJS是一个小型JavaScript库,可让您使用CSS选择器(682字节)检测新的DOM节点

    dom-move:将子节点从一个 DOM 节点移动到另一个节点

    source所有子节点都将被删除,并附加到destination 。 返回destination节点,因此您可以执行以下操作: var content = move ( source , document . createElement ( 'div' ) ) ; 如果省略第二个参数,则会创建一个...

    grail:通过 CSS 选择器查找 DOM 节点的简单 JavaScript 库

    一个简单的 JavaScript 库,用于通过 CSS 选择器查找 DOM 节点。 例子 grail . find ( '#abc' ) ; grail . find ( 'div.alpha' ) ; grail . findAll ( 'div' , document . body ) ; grail . findAll ( '.alpha' ) ;...

    domhide.js:隐藏和显示 DOM 节点的小型快速实用程序

    为了扭转这一点,为了揭示标签的内部结构,评论节点值作为 HTML 插入回,评论节点本身被删除。 为了在隐藏期间保留尺寸(如果标签的尺寸是可变的并且取决于内部标签的尺寸),我们检查标签是否在样式属性(内联 ...

    dompath:一个为DOM节点生成CSS选择器的JS库

    简单的实验库,可从DOM节点生成CSS选择器。 用法 //call function, pass any element: var path = dompath(document.body); //get CSS selector: var selector = path.toCSS(); //can be serialized into JSON: var...

    JavaScript DOM编程艺术(中文第2版)

    2.7.1 内建对象 2.7.2 宿主对象 2.8 小结 第3章 DOM 3.1 文档:DOM中的"D" 3.2 对象:DOM中的"O" 3.3 模型:DOM中的"M" 3.4 节点 3.4.1 元素节点 3.4.2 文本节点 3.4.3 属性节点 3.4.4 CSS 3.4.5 获取元素 3.4.6 盘点...

    selector-query:从 dom 节点获取唯一的 css 选择器

    选择器查询 查询选择器 >< 选择器查询 ##用法 var selectorQuery = require ( 'selector-query' ) documnet . addEventListner ( 'click' , function ( e ) { console . log ( selectorQuery ( e ....} )

    易语言调用com对象实现css表达式爬虫

    一种是只有一个结果集的(例如 get by id 就是返回一个dom节点的),。一种是返回一个数组的(例如 css表达式,获取的结果就是一个数组,哪怕只有一个成员)。所以这就解释了为啥会有两个类,那个dom数组类,就是对返回的...

    树形表格菜单 动态添加节点/动态删除节点/动态移动节点

    1.完整的包命名空间 2.自定义header footer 3.动态添加节点/动态删除节点/动态...15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现

    详谈DOM简介及节点、属性、查找节点的方法

    DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式。 DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0...

    c认证web进阶dom与bom

    DOM控制css样式 1、通过style属性控制样式 2、通过classList控制样式 背景更换 背景色更换 节点写入 1、节点写入常用方式 事件基础 1、节点写入常用方式 2、事件绑定 案例 监听器 更改样式 事件自增 ...

    JavaScript(四):JavaScript版的DOM总结

    属性 : value,style ,width2、DOM操作1) 单个HTML DOM节点的操作a、找到DOM节点b、DOM修改2)DOM结构的改变a、添加节点b、移除节点c、插入节点3)显示和隐藏 DOM总结 跟着老师从HTML入门,对CSS有了初步了解,再...

    javascript中的DOM详解

    创建一个新节点 var a document createElement "div" ; 使用警告对话框输出节点 alert a ; < script> 错误的节点 <script type "text javascript"> 创建一个新节点 传入不...

    通过CSS选择器可用于任何节点的自定义元素-JavaScript开发

    没有自定义元素,没有Shadow DOM,忘记了polyfills和类,仅使用了很好的旧HTML,以指数规律地添加了elementElements我喜欢的关于自定义元素的所有内容都可用于任何节点,并且可以通过CSS选择器使用。 没有自定义元素...

    contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

    在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 DOM 选择器)。 1、DOMElement.contains(DOMNode) 这个方法起先用在 IE ,用来确定 DOM Node 是否包含在另一个 DOM Element 中。 当尝试优化 CSS 选择器...

    jQuery DOM节点的遍历方法小结

    本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记 children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法。这里需要注意:.children...

    JavaScript王者归来part.1 总数2

     9.4.3 系统实现--解析和处理棋谱   9.4.4 完整的棋谱阅读器   9.5 总结   第10章 正则表达式  10.1 什么是正则表达式   10.1.1 正则表达式的概念   10.1.2 JavaScript中的正则表达式   10.2 正则...

    jQuery操作DOM_动力节点Java学院整理

    答案当然是操作对应的DOM节点啦! 回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦,而且有的浏览器只有innerHTML,有的浏览器支持innerText,有了jQuery对象,不需要考虑浏览器差异了,全部统一操作! 修改Text...

    《原生js制作简易DOM拾色器实例教程》源码

    本文件属于文章《原生js制作简易DOM拾色器实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明...html、css、js代码都在同一个文件中。此文件不建议直接用于工作中的项目,仅适合学习。

    get-css-data:一个微型库,用于从链接和样式节点收集样式表数据

    将CSS数据作为连接字符串和DOM排序的字符串数组返回 允许文档,iframe和阴影DOM遍历 处理@import规则 处理绝对和相对URL 检查,修改和/或过滤来自每个节点CSS数据 在每个请求之前修改XHR对象 提供UMD和ES6模块 兼容...

Global site tag (gtag.js) - Google Analytics