星空网 > 软件开发 > Java

DOM,DOM,DOM,重要的事情要说 3 遍

  DOM树与Render树

  这个应该都是知道的。就是用户请求HTML下来后,浏览器渲染引擎的基本工作中两个概念。

  DOM,DOM,DOM,重要的事情要说 3 遍 

  copy一张图,流程大概就是:解析html构建DOM树,渲染树构建,渲染树布局,绘制渲染树。

这里要注意的一点是,DOM树和render树并不是简单的一一对应关系。render树中并不包含那些不需要渲染的节点。比方说head、title这样的;display:none也是不会有的;还有一些设置position:absolute,fixed,构造render树时会根据实际情况来构造。

  重绘(redraw)和重排(reflow)

  从字面上就是能理解了,重绘就是重新绘制,重排就是重构render树。这两个都是负担很重的操作,比方说table tree中显示隐藏,浏览器需要重排,重绘,如果子节点比较多,有可能页面就卡死了(ie6、7这样的老古董很容易会这样)。所以这样的事情我们尽量少做,也就是写js的时候尽量少些这样类型的代码。

  而重排一般都是下面这样的操作引起的(尽量少的使用)。

  1.   添加、删除可见的DOM元素(visibility:hidden也算,不要为为什么)
  2.   元素的位置改变
  3.   元素尺寸改变,也就是盒子模型中的属性改变
  4.   内容改变(文本加长了,图片尺寸改变)
  5.   浏览器窗格改变大小
  6.   获取某些属性(offset**,scroll**,client**)

  最小化重绘与重排

  1、合并css操作为一次操作

  2、当要批量修改dom时,先将该元素中文档流中摘除,对其使用多重改变,最后将元素带回文档中。(设置display:none;使用DocumentFragment;clone一个节点)

  3、在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量。

  4、将需要多次重排的元素(比方说动画),position属性设为absolute或fixed,使其脱离文档流,这样它的变化不会影响到其他元素。

  DOM 真的很慢

  如果把ECMAScript看做一个孤岛,DOM看做一个孤岛,DOM访问看成是过桥的话,每次DOM访问都是需要"过桥费"的。过的多,费用就越高,也就越消耗性能。所以尽量减少DOM的访问。比方缓存获取下来的DOM元素。




原标题:DOM,DOM,DOM,重要的事情要说 3 遍

关键词:dom

dom
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

公告中的英国商标可以转让吗?:https://www.kjdsnews.com/a/1380814.html
全面汇总商标查询网站大全,一次搞定:https://www.kjdsnews.com/a/1380815.html
全面掌握商标查询网站的最新攻略:https://www.kjdsnews.com/a/1380816.html
全面指南如何申请英文商标:https://www.kjdsnews.com/a/1380817.html
全面介绍项目商标注册的重要性:https://www.kjdsnews.com/a/1380818.html
全面介绍英国商标在线注册申请流程:https://www.kjdsnews.com/a/1380819.html
千岛湖绿城度假酒店的简介:https://www.vstour.cn/a/363185.html
深圳大湾区游轮夜景 深圳大湾区游轮夜景图:https://www.vstour.cn/a/363186.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流