白屏时间
白屏时间指:输入网址回车 ->
浏览器开始显示内容的时间。
计算白屏时间
我们通常认为浏览器开始渲染<body>
标签或者解析完<head>
标签的时刻就是页面白屏结束的时间点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏</title>
<script type="text/javascript">
// 不兼容performance.timing 的浏览器,如IE8
window.pageStartTime = Date.now();
</script>
<!-- 页面 CSS 资源 -->
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="page.css">
<script type="text/javascript">
// 白屏时间结束点
window.firstPaint = Date.now();
</script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
- 可用Preformance API时:
白屏时间 = firstPaint - performance.timing.navigationStart
- 不可用Preformance API时:
白屏时间 = firstPaint - pageStartTime
首屏时间
首屏时间指:输入网址回车->
浏览器首屏内容渲染完成
计算首屏时间
常用方法:
- 首屏模块标签标记法
- 统计首屏内加载最慢的图片的时间
- 自定义首屏内容计算法
1、首屏模块标签标记法
在HTML文档中对标记首屏内容的结束位置。只适用于不需要通过拉取数据以及不考虑图片等资源加载的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首屏</title>
<script type="text/javascript">
window.pageStartTime = Date.now();
</script>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="page.css">
</head>
<body>
<!-- 首屏可见模块1 -->
<div class="module-1"></div>
<!-- 首屏可见模块2 -->
<div class="module-2"></div>
<script type="text/javascript">
window.firstScreen = Date.now();
</script>
<!-- 首屏不可见模块3 -->
<div class="module-3"></div>
<!-- 首屏不可见模块4 -->
<div class="module-4"></div>
</body>
</html>
首屏时间 = firstScreen
- performance.timing.navigationStart
2、统计首屏内图片完成加载的时间
通常首屏内容加载最慢的就是图片资源,因此我们会把首屏内加载最慢的图片的时间当做首屏的时间。
首屏时间 = 加载最慢的图片的时间点 - performance.timing.navigationStart
3、自定义模块内容计算法
由于统计首屏图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容,来简化首屏时间。如下面的做法:
- 忽略图片等资源加载情况,只考虑页面主要DOM
- 只考虑首屏的主要模块,而不是严格意义首屏以上的所有内容。
参考文章: