提高網頁效能的方法二，用 cssText 來置換屬性。
每當點擊橘色盒子的時候，盒子就會向左偏移。並做一個按鈕可以讓盒子回到原來位置。

說明：
我們把原本的 rectangle.style.left = left + 'px';
置換成 rectangle.style.cssText += left: ${left}px; 來避免 reflow

小提醒：
因為 cssText 是直接複寫 css 內容，所以我們用 += 累加的方式，將要修改的樣式字串加到後面

codepen

HTML code

<div class="move where">點我向右走</div>
<button class="reset">reset</button>

CSS code

.move {
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: orange;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
  cursor: pointer;
}

.where {
  left: 10px;
}

.reset {
  border-radius: 50px;
  font-weight: bold;
  background: black;
  color: white;
}

JS code

var left = 10;
var top = 10;

var rectangle = document.getElementsByClassName("where")[0]
var reset = document.getElementsByClassName("reset")[0]

rectangle.addEventListener('click', function(){
  left += 10;
  rectangle.style.cssText = `left: ${left}px`
  //rectangle.style.left = left + 'px';
})

reset.addEventListener('click', () => {
  rectangle.style.cssText = "left: 10px"
  left = 10;
})