前端如何計算首屏及白屏時間代碼示例
一、首屏時間
白屏時間：頁面渲染完所有內容的時間
- 簡單點就是在
<body>標簽后寫js代碼計算，但是不是很準確
<head>
<title>白屏時間</title>
</head>
<body></body>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('首屏時間結束點：', time)
</script>
- 還有一個思路就是利用
MutationObserver監(jiān)控DOM的變化，變化幅度最大一次時間的就是首屏時間
1. DOM的增加、修改、刪除，會觸發(fā) MutationObserver
2. 每次 DOM 變化可以計算出一個相對時間(time)和 DOM 變化的分數(shù)，并存入一個 observerData 數(shù)組中
3. 而后處理 observerData 數(shù)組，計算 DOM 變化時分數(shù)的差值，取 DOM 分數(shù)變化最大的時間點作為首屏時間的取值點
4. 因為首屏并不是所有DOM都渲染，所以不能取最后一項DOM加載完的時間
二、白屏時間
白屏時間：頁面開始顯示內容的時間
- 一般瀏覽器開始渲染
<body>標簽或者解析完<head>標簽，就是頁面白屏結束的時間點。
<head>
<title>白屏時間</title>
</head>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('白屏時間結束點：', time)
</script>
- 如果不支持
performance，可以這樣做
<head>
<title>白屏時間</title>
<script type="text/javascript">
window.start = Date.now();
console.log('白屏時間開始點：', window.start)
</script>
</head>
<script type="text/javascript">
const time = Date.now() - window.start
console.log('白屏時間結束點：', time)
</script>附：首屏加載速度慢怎么解決？
1 減少入口文件體積
常用的手段是路由懶加載，只有在解析路由才會加載相應的組件
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 避免組件重復打包
假設A.js文件是一個常用的庫，現(xiàn)在有多個路由使用A.js文件，這樣就造成重復下載。
解決方案：
在webpack的config文件中，修改CommonsChunkPlugin的配置minChunks:2minChunks為2會把使用2次及以上的包抽離出來，放進公共的依賴文件中，避免了重復加載組件。
5 圖片資源壓縮
圖片資源雖然不在編碼過程中，但是它對頁面加載速度影響較大。對于所有的圖片資源，可以進行適當?shù)膲嚎s。
對于頁面上的icon，可以使用在線字體圖標，或者使用雪碧圖將眾多小圖標合并到一張圖上，以減少http請求的壓力。
雪碧圖被運用在眾多使用了很多小圖標的網(wǎng)站上。相對于把每張小圖標以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內存和帶寬更加友好。
使用雪碧圖的優(yōu)點有以下幾點：
將多張圖片合并到一張圖片中，可以減小圖片的總大小
將多張圖片合并到一張圖片后，只需一次網(wǎng)絡請求就可以將所需的資源全部下載，減小建立連接的消耗，在移動端尤為明顯
雪碧圖的制作與使用方法：
使用圖像編輯軟件如Photoshop將多張圖放到同一個圖層并導出或使用自動化構建工具自動拼接合并后的圖片
引用圖片時，圖片地址為合并后的圖片地址，通過background-position調整背景圖的位置，并通過容器的寬高共同作用，來選出所需的圖片
注意：
在HTTP2中，已經(jī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
});總結
到此這篇關于前端如何計算首屏及白屏時間的文章就介紹到這了,更多相關前端計算首屏及白屏時間內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
現(xiàn)在在手機等移動端設備訪問的人越來越多，我們前端開發(fā)者一直致力于將設計稿還原成頁面，供用戶訪問。但除高度還原設計稿外，交互上的良好體驗也是我們應該做到的。2021-05-05
本文主要介紹了TypeScript聲明合并的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
本文給大家分享一個帶有變形動畫特效的下拉導航菜單特效，該導航菜單在菜單項之間切換時，下拉菜單會快速的根據(jù)菜單內容的大小來動態(tài)變形，顯示合適的下拉菜單大小，效果非常棒。對導航下拉菜單代碼感興趣的朋友可以參考下本文2016-11-11
這篇文章主要介紹了ES6學習筆記之正則表達式和字符串正則方法,結合實例形式對比分析了ES5與ES6正則操作的常用函數(shù)功能與用法區(qū)別,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序開發(fā)探究,非常具有實用價值，需要的朋友可以參考下。2016-12-12
在Javascript中,每個對象都有一個指向另一個對象的鏈接,這個鏈接被稱為原型鏈,原型鏈是Javascript的一種繼承機制,它通過鏈接對象的原型對象來實現(xiàn)屬性和方法的繼承,本文小編就來和大家一起深度探索JavaScript中的原型鏈機制2023-09-09
這篇文章主要為大家詳細介紹了小程序實現(xiàn)列表刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
xmlplus組件設計系列之下拉刷新（PullRefresh)（6）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設計系列之下拉刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
在一些電商網(wǎng)站上，經(jīng)?？吹接猩唐穲D片被放大查看的功能，所以本文將使用前端技術實現(xiàn)一個簡單的圖片放大鏡功能，希望能給大家?guī)硪欢ǖ膸椭?/div> 2023-06-06
JS前端面試必備——基本排序算法原理與實現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實現(xiàn)方法,結合實例形式詳細分析了JS常見的基本排序算法相關原理、實現(xiàn)方法、時間復雜度及操作注意事項,需要的朋友可以參考下2020-02-02最新評論