您的位置：首页 > Web前端 > CSS

优化CSS重排重绘与浏览器性能

2017-01-18 10:37 225 查看

原文链接：http://caibaojian.com/css-reflow-repaint.html

浏览器的渲染机制

via浏览器渲染展示网页的过程，大致分为以下几个步骤：原文来自：http://caibaojian.com/css-reflow-repaint.html

解析html(HTML Parser)

构建DOM树(DOM Tree)

渲染树构建(Render Tree)

绘制渲染树(Painting)

慎重选择高消耗的样式

什么 CSS 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。

box-shadows

border-radius

transparency

transforms

CSS filters（性能杀手）

什么是reflow

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程叫做

reflow

.

通俗点说就是当开发人员定义好了样式后(也包括浏览器的默认样式),浏览器根据这些来计算并根据结果将元素放到它应该出现的位置上，这个过程叫做

reflow

.

由于

reflow

是一种浏览器中的用户拦截操作，所以我们了解如何减少reflow次数，及DOM的层级，css效率对refolw次数的影响是十分有必要的。

reflow(回流)是导致DOM脚本执行效率低的关键因素之一，页面上任何一个节点触发了reflow，会导致它的子节点及祖先节点重新渲染。

简单解释一下 Reflow：当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。

//code from http://caibaojian.com/css-reflow-repaint.html [code]<body>
<div class="hello">
<h4>hello</h4>
<p><strong>Name:</strong>BDing</p>
<h5>male</h5>
<ol>
<li>coding</li>
<li>loving</li>
</ol>
</div>
</body>

当p节点上发生reflow时，hello和body也会重新渲染，甚至h5和ol都会收到影响。

什么时候会导致reflow发生呢？

改变窗口大小

改变文字大小

添加/删除样式表

内容的改变，(用户在输入框中写入内容也会)

激活伪类，如:hover

操作class属性

脚本操作DOM

计算offsetWidth和offsetHeight

设置style属性

常见的重排元素

width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
overflow-y	font-weight	overflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

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

标签：

相关文章推荐

新的分享

章节导航