前端性能提高技术之----HTML重绘篇

最新推荐文章于 2024-02-28 23:00:49 发布

jfk403

最新推荐文章于 2024-02-28 23:00:49 发布

阅读量912

点赞数

CC 4.0 BY-SA版权

分类专栏： html css2 javascript 文章标签： html css js ViewUI

本文链接：https://blog.youkuaiyun.com/jfk403/article/details/84819289

javascript 同时被 3 个专栏收录

28 篇文章

订阅专栏

html

7 篇文章

订阅专栏

css2

5 篇文章

订阅专栏

本文探讨了如何通过减少HTML页面重绘次数来提高网页性能，包括深入DOM层级修改样式、合并样式更改及预设图片尺寸等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img src="home.png" style="width:200px; height: 200px;">

在HTML页面完成渲染后

，任何改动页面样式或结构的操作都会引起浏览器重绘，性能的损耗直接取决于动态改变的范围：如果只是改变一个元素的颜色之类的信息则只会重绘该元素；而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘，所以在页面操作中要尽量减少页面重绘的次数，

基本原则如下：

改动的DOM元素越深则影响越小，尽量深入到节点深处。
对某些DOM样式有多重变动尽量合并到一起修改。
显示的设置图片的宽度和高度。

如下面这种情形：

<a href="javascript:void(0);" id="example">传统的代码</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.style.backgroundColor = "red"; 
 example.style.width = "200px"; 
 example.style.color = "white"; 
 } 
</script>

对页面元素进行三次样式修改操作，会引发三次页面重绘，而采用下面的方式则只会引发一次重绘即可完成：

<style> 
 .dblClick { 
 width: 200px; 
 background: red; 
 color: white; 
 } 
</style> 
<a href="javascript:;" id="example">CSS优化的代码</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.className = "dblClick"; 
 } 
</script>

HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示，这会消耗额外时间，因此显示的指定图片的宽度和高度可以减少页面“回溯”消耗。

<img src="home.png" style="  width: 200px; height: 200px;">