《JavaScript重难点实例精讲》— DOM 加载,重排重绘

《JavaScript重难点实例精讲》— DOM 加载,重排重绘

xiaolu
2022-02-14 / 0 评论 / 12 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年02月14日,已超过134天没有更新,若内容或图片失效,请留言反馈。

load 事件

load 事件会在页面、脚本或者图片加载完成后触发,支持 onload 事件的标签有 body, frame, frameset, iframe, img, link, script
load 事件有两种实现方式:
方式一:

<body onload="bodyLoad()"></body>
<script>
  function bodyLoad() {};
</script>

方式二:

<script>
  window.onload = function() {
    console.log('document loading finished!')
  }
</script>

如果要绑定多个事件处理函数,可以引入 Jquery,使用 Jquery 的 load 方法:

$(window).load(function(){});
$(window).load(function(){});
$(window).load(function(){});

ready 事件

ready 事件只需要等待文档结构加载完成就可以执行,以下三种写法是等价的:

$(document).ready(function() {
  // do something
});
$().ready(function() {
  // do something
});
$(function() {
  // do something
});

执行顺序

  1. 使用 Jquery 的 ready 事件总会比 load 事件先执行,Jquery 提供的 ready 事件的两种形式其实是等效的,定义在前面的会先执行
  2. load 事件的执行顺序取决于方法定义中的位置,当将 script 标签写在 body 中时,方式 4 中 window.onload 会比 3 中的 Jquery 的 load() 函数先执行
  3. 写在 body 标签中的 onload 属性优先级会高于 window.onload 属性
  4. 方式 4 中 window.onload 与方式3 中 Jquery 的 load() 函数,是谁定义则谁先执行

浏览器渲染 HTML

  • 浏览器文件被 HTML 解析器解析成对应的 DOM 树,CSS 样式文件被 CSS 解析器解析生成对应的样式规则集
  • DOM 树和 CSS 样式集解析完成后,附加在一起形成一个渲染树
  • 节点信息的计算,即根据渲染树计算每个节点的几何信息
  • 渲染绘制,即根据计算完成的节点信息绘制整个页面

常见的引起重排的操作

  • 页面的首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容发生变化
  • 元素字体发生变化
  • 添加或删除可见的 DOM 元素
  • 获取某些特定的属性【见下注】

【补充】获取某些特定的属性

浏览器为了返回精准的信息,会强制 flush 队列:

常见的引起重绘的操作

重绘只是改变元素在页面中的展现样式,而不会引起元素在文档流中位置的改变

0

评论 (0)

取消