本文探讨了操作DOM中读写style对浏览器渲染性能的影响，通过实验揭示了连续读取和写入样式如何触发layout和recalculate style过程。建议使用Chrome的Timeline工具监测性能，并提供优化策略，如批量处理读写操作以减少渲染成本。
读写style对渲染过程的影响
一直都说操作DOM性能很差，那么为什么差呢？读写style会给性能造成什么影响？本文作为渲染性能的第一篇（从发布时间来看）其实不太合适，第一篇应该先和大家简单介绍浏览器对于页面的渲染过程，后面会补上，恰好今天写了一些读写style的demo，于是提前写了这篇博客。
参考：全部来源于Google最新web的开发者文档：
关于timeline的简单使用，可以参考之前的一篇文章：
实验过程
实验过程非常简单：操作元素的style，然后通过timeline观测渲染过程发生了什么变化。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
.s-1 .read:nth-child(1) {
width: 500px;
background-color: green;
}
.s-1 .read
最低0.47元/天 解锁文章
扫一扫
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
