1、document.write()文档流执行完毕页面也会重绘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<p>abc</p>
<script>
// 三种创建元素方式的区别
// 1、document.write() 创建元素 如果页面文档流加载完毕,再调用这句话会导致页面重绘
var btn = document.querySelector('button');
btn.onclick = function(){
document.write('<div>123</div>');
}
</script>
</body>
</html>
原先页面:
点击了button后:页面被重绘(重新绘制)
1.1、window.onload
以下代码也会将页面重绘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<p>abc</p>
<script>
window.onload = function(){//当整个页面加载完了,再加载这段js
document.write('<div>123</div>');
}
// 三种创建元素方式的区别
// 1、document.write() 创建元素 如果页面文档流加载完毕,再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function(){
// document.write('<div>123</div>');
// }
</script>
</body>
</html>
2、innerHTML 创建元素
// 2、innerHTML 创建元素,相比与document.querySelector()效率更高
var inner = document.querySelector('.inner');
//2.1、追加字符串的形式创建元素,酶促都要开辟新的内存空间,相比于往数组内放元素效率较低
// for(var i = 0;i<=10;i++){
// inner.innerHTML +='<a href = "#">百度</a>'
// }
//2.2、往数组中放元素的方式创建数组,效相比于拼接字符串率较高
var arr = [];
for(var i = 0;i<=10;i++){
arr.push('<a href = "#">百度</a>');
}
inner.innerHTML = arr.join('');
3、document.querySelector()创建元素
// 3、document.querySelector()创建元素,相比与innerHTML效率更低
var create = document.querySelector('.create');
for(var i = 0;i<=10;i++){
var a = document.createElement('a');
create.appendChild(a);
}
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// window.onload = function(){//当整个页面加载完了,再加载这段js
// document.write('<div>123</div>');
// }
// 三种创建元素方式的区别
// 1、document.write() 创建元素 如果页面文档流加载完毕,再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function(){
// document.write('<div>123</div>');
// }
// 2、innerHTML 创建元素,相比与document.querySelector()效率更高
var inner = document.querySelector('.inner');
//2.1、追加字符串的形式创建元素,酶促都要开辟新的内存空间,相比于往数组内放元素效率较低
// for(var i = 0;i<=10;i++){
// inner.innerHTML +='<a href = "#">百度</a>'
// }
//2.2、往数组中放元素的方式创建数组,效相比于拼接字符串率较高
var arr = [];
for(var i = 0;i<=10;i++){
arr.push('<a href = "#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3、document.querySelector()创建元素,相比与innerHTML效率更低
var create = document.querySelector('.create');
for(var i = 0;i<=10;i++){
var a = document.createElement('a');
create.appendChild(a);
}
</script>
</body>
</html>