亚洲城老虎机手机版:网页性能管理详解

网页质量管理详解

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地图