<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background:yellow;
width:100px;
height:500px;
}
</style>
</head>
<body>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, culpa dolor dolorum earum eveniet reprehenderit voluptates. Amet aspernatur consectetur consequatur deserunt est facere molestias non provident quod, reiciendis sint, veritatis?
</div>
<script>
// window.onresize=function(){
// var div=document.getElementById("div1");
// console.log(1);
// div.style.height=div.offsetWidth+"px"
// }
//这段非常简单的例子有两个问题可能会造成浏览器运行缓慢:
//首先要计算offsetWidth属性,如果元素或者其他元素有复杂的css样式,那么这个计算可能会很复杂;
//其次,设置元素的高度需要对页面进行回流;
//这里可以使用节流函数,如下例所示:
function resize(){
var div=document.getElementById("div1");
console.log(1);
div.style.height=div.offsetWidth+"px"
}
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},100)
}
window.onresize=function(){
throttle(resize)
}
//这样虽然用户不会感觉到变化,但是给浏览器节省的计算量可能会非常大;这里时间设置了100毫秒,具体情况具体分析
</script>
</body>
</html>
throttle节流函数
最新推荐文章于 2024-07-31 08:49:18 发布