网页性能管理详解

网页质量管理详解

2015/09/17 · HTML5,
JavaScript ·
性能

原文出处:
阮一峰   

你赶上过品质很差的网页吗?

那种网页响应分外缓慢,占用大批量的CPU和内存,浏览起来平日有卡顿,页面的卡通片效果也不流畅。

图片 1

网页性能管理详解。您会有何样反应?我揣度,超过半数用户会关闭那一个页面,改为访问其余网站。作为一个开发者,肯定不乐意见见那种景色,怎么样才能升高品质呢?

本文将详细介绍质量难点的现身原因,以及化解方法。

你相逢过品质很差的网页吗?

您遇见过品质很差的网页吗?

作者:阮一峰

一、网页生成的进度

要明了网页质量为何不佳,就要打听网页是怎么变化的。

图片 2

网页的变型进程,大概可以分为五步。

HTML代码转化成DOM CSS代码转化成CSSOM(CSS Object Model)
结合DOM和CSSOM,生成一棵渲染树(包罗逐个节点的视觉音信)
生成布局(layout),即将有所渲染树的具有节点开展平面合成
将布局绘制(paint)在屏幕上

1
2
3
4
5
HTML代码转化成DOM
CSS代码转化成CSSOM(CSS Object Model)
结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
生成布局(layout),即将所有渲染树的所有节点进行平面合成
将布局绘制(paint)在屏幕上

那五步里面,第一步到第三步都万分快,耗时的是第四步和第五步。

“生成布局”(flow)和”绘制”(paint)那两步,合称为”渲染“(render)。

图片 3

那种网页响应万分缓慢,占用大量的CPU和内存,浏览起来平日有卡顿,页面的卡通效果也不流利。

那种网页响应十分缓慢,占用大量的CPU和内存,浏览起来平时有卡顿,页面的动画效果也不流利。

二、重排和重绘

网页生成的时候,至少会渲染一遍。用户访问的进度中,还会四处重复渲染。

以下三种状态,会造成网页重新渲染。

  • 修改DOM
  • 修改样式表
  • 用户事件(比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等)

重复渲染,就须要重新生成布局和再度绘制。前者叫做”重排”(reflow),后者叫做”重绘”(repaint)。

内需专注的是,”重绘”不肯定要求”重排”,比如改变某个网页成分的颜色,就只会触发”重绘”,不会接触”重排”,因为布局尚未改动。不过,”重排”必然造成”重绘”,比如改变一个网页元素的职位,就会同时触发”重排”和”重绘”,因为布局改变了。

图片 4

图片 5

三、对于品质的震慑

重排和重绘会不断触发,那是不可幸免的。可是,它们格外费用资源,是致使网页质量低下的根本原因。

增强网页品质,就是要降低”重排”和”重绘”的频率和资产,尽量少触发重新渲染。

前边提到,DOM变动和体裁变动,都会接触重新渲染。不过,浏览器已经很智能了,会尽力而为把所有的更改集中在一齐,排成一个行列,然后三回性执行,尽量防止很多次再次渲染。

JavaScript

div.style.color = ‘blue’; div.style.marginTop = ’30px’;

1
2
div.style.color = ‘blue’;
div.style.marginTop = ’30px’;

下边代码中,div成分有四个样式变动,不过浏览器只会触发四回重排和重绘。

设若写得不得了,就会触发一次重排和重绘。

JavaScript

div.style.color = ‘blue’; var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + ‘px’;

1
2
3
div.style.color = ‘blue’;
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + ‘px’;

地方代码对div元素设置背景观未来,第二行必要浏览器给出该因素的地点,所以浏览器不得不立即重排。

貌似的话,样式的写操作之后,如果有上面那些属性的读操作,都会引发浏览器立刻重新渲染。

JavaScript

offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight getComputedStyle()

1
2
3
4
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()

从而,从性质角度考虑,尽量不要把读操作和写操作,放在一个言语里面。

JavaScript

// bad div.style.left = div.offsetLeft + 10 + “px”; div.style.top =
div.offsetTop + 10 + “px”; // good var left = div.offsetLeft; var top =
div.offsetTop; div.style.left = left + 10 + “px”; div.style.top = top +
10 + “px”;

1
2
3
4
5
6
7
8
9
// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";
 
// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

一般的条条框框是:

体制表越简单,重排和重绘就越快。
重排和重绘的DOM成分层级越高,开销就越高。
table成分的重排和重绘开销,要超越div成分

1
2
3
样式表越简单,重排和重绘就越快。
重排和重绘的DOM元素层级越高,成本就越高。
table元素的重排和重绘成本,要高于div元素

您会有啥样影响?我揣度,大部分用户会倒闭那一个页面,改为访问别的网站。作为一个开发者,肯定不情愿看看那种气象,那么如何才能提升质量呢?

你会有怎么样反应?我疑心,半数以上用户会关闭那几个页面,改为访问其余网站。作为一个开发者,肯定不愿意看到那种场合,那么怎么着才能提升品质呢?

网站地图xml地图