`
kstgjfk403
  • 浏览: 30801 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

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

        在HTML页面完成渲染后

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

 

 

基本原则如下:

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

如下面这种情形:

<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;">

 

 

 

分享到:
评论

相关推荐

    前端开源库-virtual-html

    在前端开发领域,虚拟DOM(Virtual DOM)是一种优化网页应用性能的重要技术,它允许开发者以高效的方式处理DOM操作。本文将深入探讨一个名为"virtual-html"的开源库,该库致力于将HTML字符串转换为虚拟DOM对象,从而...

    前端项目-apng-canvas.zip

    7. **性能优化**:由于canvas动画可能消耗大量计算资源,尤其是当APNG包含多个帧或者高分辨率时,开发者需要关注性能优化,比如使用requestAnimationFrame来平滑动画,避免不必要的重绘,以及合理地管理内存。...

    前端技术栈-怀化-杨-360001

    了解CSS的解析规则、重排和重绘、样式权重以及定位对于优化页面性能至关重要。 最后,Webview是移动端与Native交互的基础,通过SDK和UI界面,前端开发者可以与产品经理和设计师紧密合作,共同打造出色的产品。 总...

    前端开源库-react-simple-list

    这个库的核心目标是帮助开发者高效地处理大量数据的列表渲染,避免不必要的DOM重绘,从而提高应用性能。 React作为Facebook推出的JavaScript库,主要用于构建用户界面,特别是单页应用。它的主要特点是组件化,允许...

    前端开源库-dom-element-watcher

    3. **性能优化**:考虑到DOM操作的性能影响,`dom-element-watcher`库可能采用了智能的变更检测算法,以最小的性能开销来监控元素变化,避免了不必要的计算和重绘。 4. **自定义回调**:当观察到DOM变化时,用户...

    前端项目-infinity.zip

    9. **性能优化**:对于性能敏感的应用,开发者可能还会关注DOM操作的效率、减少重绘和回流,以及使用Web Workers进行后台计算以避免阻塞主线程。 10. **测试与调试**:项目开发过程中,单元测试和集成测试是确保...

    让你页面速度飞起来 Web前端性能优化(视频教程+ppt)

    在浏览器渲染层面,则需要关注避免重排与重绘,合理使用预加载与预渲染技术;此外,合理的缓存策略和服务端优化也是不可或缺的一环。总之,Web前端性能优化是一个系统性的工程,需要开发人员具备全面的知识体系和...

    WEB前端工程师Web前端性能优化经验分享

    而Web前端性能优化,作为提升用户体验的重要手段之一,对于WEB前端工程师来说,掌握这项技能是必不可少的。本文将结合实际经验,分享一些在前端开发中应用广泛的性能优化技巧。 首先,减少HTTP请求是性能优化的基础...

    前端开源库-trans-interpolator.zip

    5. **性能优化**:高效地处理大量文本和数据,避免不必要的重绘和回流,提高页面性能。 6. **可扩展性**:可能提供自定义函数或插件机制,允许开发者根据需求扩展其功能。 7. **易用性**:具有良好的文档和示例,...

    前端面试题 必看--

    - 渲染过程:认识HTML解析、CSSOM构建、DOM渲染、JavaScript执行及重绘与回流的概念。 - 性能优化:如减少HTTP请求、缓存利用、代码分割、预加载和预读取等策略。 6. 框架与库: - React:理解组件化开发,虚拟...

    前端开源库-pixel-white-bg

    此外,大量应用此库可能导致页面重绘性能下降,因此在处理大量元素时,可以采用分批处理或延迟加载策略。 总之,"pixel-white-bg" 是一个适用于前端开发的实用工具,尤其对于需要像素级精确控制背景颜色的场景,它...

    前端开源库-meteor-templating

    当数据源发生变化时,Meteor 会自动刷新相关的 UI 部分,无需手动触发重绘。这对于构建实时应用程序,如聊天室、协作编辑工具等非常有用。 ### 7. 性能优化 尽管 Meteor 提供了自动更新,但过多的更新可能会导致...

    前端大厂最新面试题-Real DOM_Virtual DOM.docx

    理解这两者之间的差异和优缺点对于优化前端性能至关重要。 一、什么是Real DOM和Virtual DOM 1. Real DOM(真实DOM) Real DOM是Web浏览器对HTML文档的一种抽象表示,它包含了网页的所有元素、属性和结构。每当...

    前端性能优化全面汇总图.zip

    16. **避免重排和重绘(Layout Triggers & Paint Triggers)**:理解DOM树的渲染原理,避免不必要的DOM操作,减少重排和重绘。 17. **性能预算(Performance Budget)**:设定项目的性能指标上限,确保优化工作的...

    前端大厂最新面试题-HTML面试题.docx

    浏览器的回流与重绘 (Reflow & Repaint) 1. 回流和重绘的概念 浏览器使用流式布局模型 (Flow Based Layout),将 HTML 解析成 DOM,...因此,我们需要尽量减少回流和重绘的次数,使用上述优化方案来提高浏览器的性能。

    前端性能优化指南

    优秀的前端性能优化能够显著提高网页加载速度、减少资源消耗、增强用户交互体验,进而提升整体的业务表现。本指南将深入探讨几个关键的优化领域,包括AJAX优化、Cookie管理、DOM操作优化等方面,帮助开发者掌握最佳...

    前端性能优化:掌握解决方案.zip

    移除未使用的CSS,避免样式重绘和回流。 10. **JavaScript性能优化**:避免全局变量和作用域链查找;合理使用闭包;减少DOM操作,批量处理更新;使用箭头函数和const/let代替function和var,减少内存泄漏。 11. **...

    前端大厂最新面试题-layout_painting.docx

    在前端开发中,布局重绘与回流是两个非常重要的概念,它们直接影响着页面的渲染性能。下面,我们将深入探讨布局重绘与回流的概念、触发场景、优化方法等。 一、什么是布局重绘与回流? 在浏览器解析HTML时,每个...

Global site tag (gtag.js) - Google Analytics