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

js性能之最小化重绘和重排(样式相关)

阅读更多

前面有一篇记录了重绘和重排(http://zhangyaochun.iteye.com/blog/1681641

 

改变样式方面:

 

    多次修改样式的时候应该合并所有的改变最后一次处理,这样只修改DOM一次

 

   1、使用cssText

 

 

var el = document.getElementById("test");
el.style.cssText = "color:blue;border:1px solid red;width:100px;"
 

(这个其实在动画里面还是有比较多应用,比如以前百度世界末日专题里面的动画)。

 

   2、修改class的名称,而不是修改内联样式

 

       试用的场景:不依赖运行逻辑和计算的情况

 

 

var el = document.getElementById("test");
el.className = 'hover';
 

 

 

1
0
分享到:
评论

相关推荐

    页面最小窗口闪烁

    特别是在窗口大小改变或页面最小化恢复时,如果JavaScript代码执行不当,可能会触发不必要的重排或重绘。 4. **浏览器优化**:某些浏览器可能有自己的优化策略,比如延迟重绘或重排到一个批次进行,但这并不总是...

    JavaScript性能优化技巧分享共8页.pdf.zip

    5. **减少重排与重绘**:修改DOM元素可能导致浏览器进行重排(布局调整)和重绘(样式更新),这是性能杀手。尽量避免直接改变元素尺寸和位置,或者使用CSS `transform`和`opacity`属性来实现动画,因为这些操作通常...

    Cardinal一个模块化移动优先的CSS框架专注于性能和可伸缩性

    在性能方面,Cardinal通过最小化CSS代码、优化重排和重绘、以及利用CSS3特性如媒体查询和Flexbox,实现了快速的页面渲染。此外,Cardinal还支持CSS变量,这使得全局样式更改变得轻松,而无需修改大量代码,进一步...

    PageAccelerator一个让web页面加载更快的很轻解决方案

    7. **资源优化**:PageAccelerator可能还包含了对HTML、CSS和JavaScript的进一步优化,例如通过最小化DOM操作,减少重排和重绘,以及优化CSS选择器以提高渲染效率。 8. **HTTP/2多路复用**:如果支持,...

    深入探究使JavaScript动画流畅的一些方法

    例如,它们可以进行更少的DOM操作,更有效地处理动画的回调,以及通过更智能的调度机制来最小化布局重排和重绘。 为了避免布局颠簸和垃圾回收引起的动画延迟,建议将DOM查询和更新分开进行。在JavaScript中进行动画...

    灰色个性相册展示HTML5模板_灰色 css3 html5 相册 简洁 摄影 大图.zip

    8. 轻量级优化:考虑到性能,模板可能使用了最小化的CSS和JavaScript,避免不必要的重排和重绘,以及优化了图片大小和格式,以实现快速加载和流畅的用户体验。 9. 文档结构:HTML5的语义化标签(如, , , , , )可以...

    html加载顺序.zip

    2. **DOM操作**:JavaScript可以修改DOM,这会导致浏览器重新构建受影响的部分,可能导致重排和重绘。 3. **异步加载**:使用`window.onload`或`DOMContentLoaded`事件监听整个页面或DOM加载完成,此时可以安全地...

    有赞(24问).pdf

    在前端框架中使用虚拟DOM可以提高性能,因为它可以减少与真实DOM的直接操作,通过批量更新来减少重排重绘的次数。当状态变更时,框架会首先构建一个新的虚拟DOM树,然后通过与旧的虚拟DOM树进行比较,计算出最小的...

    render-test

    当JavaScript修改DOM结构时,浏览器会重新计算元素布局(重排),并根据新的布局重新绘制元素(重绘)。这些过程对性能有很大影响,因为它们可能导致屏幕闪烁和用户体验延迟。 1. **DOM操作**:高效的JavaScript...

    韦斯特克里夫测试

    4. **重排与重绘分析**:识别可能导致频繁重排和重绘的操作,如动态修改样式或DOM结构。 5. **代码审查**:查找可能引起性能问题的代码片段,如不必要的JavaScript计算或循环。 通过Westcliff Test,开发者可以了解...

    前端性能检查表:체크리스트

    - 选择轻量级的框架或库,如React或Vue,并正确配置虚拟DOM以减少重绘和重排。 12. **A/B测试** - 进行A/B测试,评估性能优化措施的实际效果。 13. **持续监控** - 使用如Google Lighthouse、WebPageTest等工具...

    梅干摄影

    4. **虚拟DOM**:Vue使用虚拟DOM来提高性能和效率,当数据变化时,Vue会计算出最小化的DOM更新操作,避免不必要的重绘和重排。 5. **路由管理**:对于单页面应用(SPA),Vue有官方的vue-router库,用于管理应用的...

    加载页面:Pagina creada para FreeCodeCamp

    6. **最小化重排和重绘**:通过合理安排CSS属性和布局,减少浏览器需要进行的重排和重绘操作,从而提升页面渲染速度。 从压缩包文件名称"Loading-Page-master"来看,这可能是项目的主分支或者源代码仓库,通常包含...

    react-wftbbz:用StackBlitz创建:high_voltage:

    React通过虚拟DOM(Document Object Model)提高应用性能,当组件状态变化时,React会计算出最小化的DOM更新,从而减少页面重绘和重排。在React应用中,数据流通常是单向的,这使得状态管理更加清晰。 接下来,我们...

    MobileComponent:移动网页上的动态效果组件

    MobileComponent 可能会采用延迟加载、最小化 CSS 文件、减少重排和重绘等方式来提升组件的加载速度和运行效率。 8. **可访问性**:遵循 WCAG(Web 内容无障碍指南)标准,MobileComponent 可能会确保组件对辅助...

    关键渲染路径

    3. **最小化DOM深度**:减少DOM节点数量和深度,可以降低布局和渲染的复杂性。 4. **避免阻塞渲染**:尽量避免在HTML头部放置大型CSS文件,以免阻塞浏览器对DOM的解析。 5. **使用HTTP/2**:HTTP/2协议支持多路...

    js右下角弹出窗口,点击可关闭效果

    - **性能优化**:考虑使用更高效的DOM操作方法,减少重绘和重排成本。 通过上述分析可以看出,这个右下角弹出窗口及点击关闭效果的实现是基于纯JavaScript和CSS完成的,不仅简单易懂,而且具备一定的实用价值。...

    测试750ms

    7. **减少重排和重绘**:理解DOM渲染原理,避免在关键渲染路径中引起不必要的布局和绘制操作。 8. **使用异步加载**:对于非阻塞脚本,使用`async`或`defer`属性加载。 9. **正确设置缓存**:通过HTTP头部信息告诉...

Global site tag (gtag.js) - Google Analytics