js 에서 cssText 성능 이 높 은 문 제 를 사실 로 증명 합 니 다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title> cssText </title>
</head>
<body>
<input type="button" value=" 1" onclick="test1()"/> ||
<input type="button" value=" 2" onclick="test2()"/>
<div id="container"></div>
<script>
var container = document.getElementById('container');
function appendElement(){
var ary = [];
container.innerHTML = '';
for(var i=0;i<=1000;i++){
var div = document.createElement('div');
ary.push(div);
container.appendChild(div);
}
return ary;
}
function test1(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
}
var d2 = new Date;
console.log(' ：' + (d2-d1));
}
function test2(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.cssText = 'width:50px;height:50px;background-color:red;';
}
var d2 = new Date;
console.log(' ：' + (d2-d1));
}
</script>
</body>
</html>
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
테스트 1 은 다음 세 줄 코드 를 사용 합 니 다
sty.cssText = 'width:50px;height:50px;background-color:red;';
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
여 기 를 클릭 하면 바로 테스트 할 수 있 습 니 다:
|||// [Ctrl+A 선택:]
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
js 에서 cssText 성능 이 높 은 문 제 를 사실 로 증명 합 니 다.4.567913.테스트 1,테스트 2 는 각각 1000 개의 div 를 페이지 에 추가 합 니 다.테스트 1 은 다음 세 줄 코드 를 사용 합 니 다 테스트 2 는 cssText 한 줄 로 해결 합 니 다 테스트 1...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
