您的位置：首页 > Web前端

前端性能优化-减少重绘

2016-04-22 18:42 375 查看

对网站进行性能优化，一个非常有效的方法就是减少浏览器对网页的重绘次数。

关于重绘

在浏览器渲染引擎绘制完网页后，动态的更改DOM结构或CSS样式会引发浏览器页面的重绘。性能损耗的大小取决于动态改动范围的大小。如果是改动一个元素的背景颜色，那就只会引发这一个元素的重绘，但是如果是改动一个元素的宽高或者位置，那就会引发DOM树结构中大量的重绘，因为它影响了兄弟元素的排列。

比如改动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元素的样式进行三次更改，会进行三次重绘。三次重绘会延长网页的加载时间。

优化方法:

把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>

总结

网站性能优化的方式有很多种。虽然网页的重绘在轻量级的网站中影响并不是很大，但是在重量级的网站中，性能优化以及网页加载时间就显得尤为重要。网站性能不好，体验不佳，页面加载时间过长，带来的直接损失就是用户流失。所以减少浏览器对页面的重绘也是性能优化的重要方法之一。

本文笔记记录于《高性能HTML5》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 性能优化前端 css 页面重绘

相关文章推荐

新的分享

章节导航