快捷導(dǎo)航

前端如何計(jì)算首屏及白屏?xí)r間代碼示例

更新時(shí)間：2024年07月12日 10:26:27 作者：一顆不甘墜落的流星

白屏?xí)r間是指用戶進(jìn)入該網(wǎng)站(比如刷新頁面、跳轉(zhuǎn)到新頁面等通過該方式)的時(shí)刻開始計(jì)算,一直到頁面內(nèi)容顯示出來之前的時(shí)間節(jié)點(diǎn),這篇文章主要給大家介紹了關(guān)于前端如何計(jì)算首屏及白屏?xí)r間的相關(guān)資料,需要的朋友可以參考下

一、首屏?xí)r間

白屏?xí)r間：頁面渲染完所有內(nèi)容的時(shí)間

簡(jiǎn)單點(diǎn)就是在<body> 標(biāo)簽后寫js代碼計(jì)算，但是不是很準(zhǔn)確

<head>
	<title>白屏?xí)r間</title>
</head>
<body></body>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('首屏?xí)r間結(jié)束點(diǎn)：', time)
</script>

還有一個(gè)思路就是利用 MutationObserver 監(jiān)控DOM的變化，變化幅度最大一次時(shí)間的就是首屏?xí)r間

1. DOM的增加、修改、刪除，會(huì)觸發(fā) MutationObserver
2. 每次 DOM 變化可以計(jì)算出一個(gè)相對(duì)時(shí)間(time)和 DOM 變化的分?jǐn)?shù)，并存入一個(gè) observerData 數(shù)組中
3. 而后處理 observerData 數(shù)組，計(jì)算 DOM 變化時(shí)分?jǐn)?shù)的差值，取 DOM 分?jǐn)?shù)變化最大的時(shí)間點(diǎn)作為首屏?xí)r間的取值點(diǎn)
4. 因?yàn)槭灼敛⒉皇撬蠨OM都渲染，所以不能取最后一項(xiàng)DOM加載完的時(shí)間

二、白屏?xí)r間

白屏?xí)r間：頁面開始顯示內(nèi)容的時(shí)間

一般瀏覽器開始渲染 <body> 標(biāo)簽或者解析完 <head> 標(biāo)簽，就是頁面白屏結(jié)束的時(shí)間點(diǎn)。

<head>
	<title>白屏?xí)r間</title>
</head>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('白屏?xí)r間結(jié)束點(diǎn)：', time)
</script>

如果不支持performance，可以這樣做

<head>
	<title>白屏?xí)r間</title>
	<script type="text/javascript">
		window.start = Date.now();
		console.log('白屏?xí)r間開始點(diǎn)：', window.start)
	</script>
</head>
<script type="text/javascript">
const time = Date.now() - window.start
console.log('白屏?xí)r間結(jié)束點(diǎn)：', time)
</script>

附：首屏加載速度慢怎么解決？

1 減少入口文件體積

常用的手段是路由懶加載，只有在解析路由才會(huì)加載相應(yīng)的組件

const routes = [
  {
    path: "blogs",
	name: "blogs",
	component: () => import('./components/blog.js')
  }
];

2 靜態(tài)資源本地緩存

后端返回的資源：采用http緩存

前端合理利用localStorage

CDN靜態(tài)資源緩存

3 UI框架按需加載

在日常使用的UI框架，例如element-UI，antd，我們按需引入：

import { Button } from 'antd';

4 避免組件重復(fù)打包

假設(shè)A.js文件是一個(gè)常用的庫，現(xiàn)在有多個(gè)路由使用A.js文件，這樣就造成重復(fù)下載。

解決方案：

在webpack的config文件中，修改CommonsChunkPlugin的配置minChunks:2minChunks為2會(huì)把使用2次及以上的包抽離出來，放進(jìn)公共的依賴文件中，避免了重復(fù)加載組件。

5 圖片資源壓縮

圖片資源雖然不在編碼過程中，但是它對(duì)頁面加載速度影響較大。對(duì)于所有的圖片資源，可以進(jìn)行適當(dāng)?shù)膲嚎s。
對(duì)于頁面上的icon，可以使用在線字體圖標(biāo)，或者使用雪碧圖將眾多小圖標(biāo)合并到一張圖上，以減少http請(qǐng)求的壓力。

雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上。相對(duì)于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對(duì)內(nèi)存和帶寬更加友好。

使用雪碧圖的優(yōu)點(diǎn)有以下幾點(diǎn)：

將多張圖片合并到一張圖片中，可以減小圖片的總大小
將多張圖片合并到一張圖片后，只需一次網(wǎng)絡(luò)請(qǐng)求就可以將所需的資源全部下載，減小建立連接的消耗，在移動(dòng)端尤為明顯

雪碧圖的制作與使用方法：

使用圖像編輯軟件如Photoshop將多張圖放到同一個(gè)圖層并導(dǎo)出或使用自動(dòng)化構(gòu)建工具自動(dòng)拼接合并后的圖片
引用圖片時(shí)，圖片地址為合并后的圖片地址，通過background-position調(diào)整背景圖的位置，并通過容器的寬高共同作用，來選出所需的圖片

注意：

在HTTP2中，已經(jīng)不需要考慮減少請(qǐng)求數(shù)，故雪碧圖在HTTP2中優(yōu)化性能的意義已經(jīng)不大

6 開啟gzip壓縮

拆包之后，可以再使用gzip做一下壓縮，安裝compression-webpack-plugin在webpack中配置壓縮

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js','css'];

// 配置compression-webpack-plugin壓縮
new CompressionWebpackPlugin({
	algorithm：'gzip',
	test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
	threshold: 10240,
	minRatio: 0.8
});