前端性能指标分析-Start Render、DOM Ready、Page Load

2,529 阅读4分钟

DOM Ready,指的是页面解析完成的时间,在高级浏览器里有对应的DOM事件 - DOMContentLoaded:该事件在文档解析完成时会触发

文档的解析至少应该包括以下操作:HTML文档分析以及DOM树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行,但是不包括图片、iframe等其它资源的加载。正因为如此,该事件触发的时机一般比window.onload要早,而且是在所有DOM元素都可以操作之时。

DOM Ready指标影响的是交互功能的最早可用时间。(DOM Ready时间如果过长的话,用户会发现页面已经出来了,但是很多功能却是不可用的,也许点击某个链接会跳到页面顶部。因此,DOM Ready时间也是越短越好,这样交互功能才能尽早可用。)

对DOM Ready指标的优化:着重从脚本的使用入手。

Page Load时间指的就是window.onload事件触发的时间。

(与DOM Ready时间相比,Page Load的时间往往要更靠后一些,因为Page Load不仅仅是HTML文档解析完毕还包括了所有资源加载所需要的时间,例如图片资源的加载、iframe的加载等。)

影响因素

(1) window.onload事件总是在DOM Ready之后才会触发,因此,DOM Ready指标的影响因素也都会影响Page Load。

(2) 鉴于window.onload事件要等到所有资源加载完成后才会触发,因此资源加载的时间越长则Page Load的时间越长。

Start Render

Start Render,顾名思义指的是浏览器开始渲染的时间,从用户角度出发则可以定义为用户在页面上看到的第一个内容的时间。

Start Render主要受以下因素影响(开发人员可控):

(1) 服务器响应时间

(2) HTML文档的大小

(3) Head中资源使用情况

浏览器渲染原理及流程

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

DOM Tree:浏览器将HTML解析成树形的数据结构。

CSS Rule Tree:浏览器将CSS解析成树形的数据结构。

Render Tree: DOM和CSS合并后生成Render Tree。

reflow(回流):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染 :鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染

repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

举例:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。

注意:有些情况下,比如修改了元素的样式,浏览器并不会立刻reflow 或 repaint 一次,而是会把这样的操作积攒一批,然后做一次 reflow,这又叫异步 reflow 或增量异步 reflow。但是在有些情况下,比如resize 窗口,改变了页面默认的字体等。对于这些操作,浏览器会马上进行 reflow。

1. 浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2. 将CSS解析成 CSS Rule Tree 。

3. 根据DOM树和CSSOM来构造 Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树,因为一些像Header或display:none的东西就没必要放在渲染树中了。

4. 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout,顾名思义就是计算出每个节点在屏幕中的位置。

5. 再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。

注意:上述这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

从输入url地址栏到所有内容显示到界面上做了哪些事?

1.浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2.建立TCP连接(三次握手);
3.浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求,该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
4.服务器对浏览器请求作出响应,并把对应的 html 文本发送给浏览器;
5.浏览器将该 html 文本并显示内容;
6.释放 TCP连接(四次挥手);