對網(wǎng)站進(jìn)行性能優(yōu)化分井，一個非常有效的方法就是減少瀏覽器對網(wǎng)頁的重繪次數(shù)魂毁。
關(guān)于重繪
在瀏覽器渲染引擎繪制完網(wǎng)頁后荒椭，動態(tài)的更改DOM結(jié)構(gòu)或CSS樣式會引發(fā)瀏覽器頁面的重繪声旺。性能損耗的大小取決于動態(tài)改動范圍的大小笔链。如果是改動一個元素的背景顏色，那就只會引發(fā)這一個元素的重繪腮猖，但是如果是改動一個元素的寬高或者位置鉴扫，那就會引發(fā)DOM樹結(jié)構(gòu)中大量的重繪，因為它影響了兄弟元素的排列澈缺。
比如改動DOM的話要考慮改動的元素在DOM樹中的深度坪创。越深就越獨立，對其他改動影響越小姐赡。而且如果要對DOM有多次操作的話莱预，盡量合并到一次做完而不是多次。
例:在點擊a元素的時候改動該元素的背景色项滑、字體顏色依沮、字體大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代碼示例1</title>
</head>
<body>
<a href="#" id="click">點擊</a>
<script>
var click=document.getElementById('click');
click.onclick=function()
{
click.style.background="red";
click.style.color="green";
click.style.fontSize="36px";
}
</script>
</body>
</html>
在該例中枪狂，我們用js對a元素的樣式進(jìn)行三次更改危喉，會進(jìn)行三次重繪。三次重繪會延長網(wǎng)頁的加載時間州疾。
優(yōu)化方法:
把js的三次操作合并成一次操作辜限。用js添加一個class給a元素,在該class中包含所有樣式，這樣就會把三次重繪變成一次重繪严蓖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代碼示例2</title>
<style>
.clickStyle
{
background: red;
color: green;
font-size: 36px;
}
</style>
</head>
<body>
<a href="#" id="click">點擊</a>
<script>
var click=document.getElementById('click');
click.onclick=function()
{
click.className="clickStyle";
}
</script>
</body>
</html>
總結(jié)
網(wǎng)站性能優(yōu)化的方式有很多種薄嫡。雖然網(wǎng)頁的重繪在輕量級的網(wǎng)站中影響并不是很大，但是在重量級的網(wǎng)站中谈飒，性能優(yōu)化以及網(wǎng)頁加載時間就顯得尤為重要岂座。網(wǎng)站性能不好，體驗不佳杭措，頁面加載時間過長费什，帶來的直接損失就是用戶流失。所以減少瀏覽器對頁面的重繪也是性能優(yōu)化的重要方法之一。
