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
});执行顺序
- 使用 Jquery 的 ready 事件总会比 load 事件先执行，Jquery 提供的 ready 事件的两种形式其实是等效的，定义在前面的会先执行
- load 事件的执行顺序取决于方法定义中的位置，当将 script 标签写在 body 中时，方式 4 中 window.onload 会比 3 中的 Jquery 的 load() 函数先执行
- 写在 body 标签中的 onload 属性优先级会高于 window.onload 属性
- 方式 4 中 window.onload 与方式3 中 Jquery 的 load() 函数，是谁定义则谁先执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.min"></script>
<script>
$(document).ready(function () {
console.log('执行方式1: $(document).ready()');
});
$(function () {
console.log('执行方式2: $(function(){})');
});
$(window).load(function () {
console.log('执行方式3: $(window).load()');
});
window.onload = function () {
console.log('执行方式4: window.onload');
}
function bodyOnLoad() {
console.log('执行方式5: body 标签的 onload 属性');
}
</script>
</head>
<body onload="bodyOnLoad()"></body>
</html>执行结果：1、2、3、5
{/collapse-item}
{collapse-item label="script 标签写在 body 中"}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.min"></script>
</head>
<body onload="bodyOnLoad()">
<script>
$(document).ready(function () {
console.log('执行方式1: $(document).ready()');
});
$(function () {
console.log('执行方式2: $(function(){})');
});
$(window).load(function () {
console.log('执行方式3: $(window).load()');
});
window.onload = function () {
console.log('执行方式4: window.onload');
}
function bodyOnLoad() {
console.log('执行方式5: body 标签的 onload 属性');
}
</script>
</body>
</html>执行结果：1、2、4、3
{/collapse-item}
浏览器渲染 HTML
- 浏览器文件被 HTML 解析器解析成对应的 DOM 树，CSS 样式文件被 CSS 解析器解析生成对应的样式规则集
- DOM 树和 CSS 样式集解析完成后，附加在一起形成一个渲染树
- 节点信息的计算，即根据渲染树计算每个节点的几何信息
- 渲染绘制，即根据计算完成的节点信息绘制整个页面
常见的引起重排的操作
- 页面的首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容发生变化
- 元素字体发生变化
- 添加或删除可见的 DOM 元素
- 获取某些特定的属性【见下注】
【补充】获取某些特定的属性
浏览器为了返回精准的信息，会强制 flush 队列：
常见的引起重绘的操作
重绘只是改变元素在页面中的展现样式，而不会引起元素在文档流中位置的改变
评论 (0)