前端如何計(jì)算首屏及白屏?xí)r間代碼示例
一、首屏?xí)r間
白屏?xí)r間：頁面渲染完所有內(nèi)容的時(shí)間
- 簡單點(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è)相對時(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 圖片資源壓縮
圖片資源雖然不在編碼過程中，但是它對頁面加載速度影響較大。對于所有的圖片資源，可以進(jìn)行適當(dāng)?shù)膲嚎s。
對于頁面上的icon，可以使用在線字體圖標(biāo)，或者使用雪碧圖將眾多小圖標(biāo)合并到一張圖上，以減少http請求的壓力。
雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上。相對于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內(nèi)存和帶寬更加友好。
使用雪碧圖的優(yōu)點(diǎn)有以下幾點(diǎn)：
將多張圖片合并到一張圖片中，可以減小圖片的總大小
將多張圖片合并到一張圖片后，只需一次網(wǎng)絡(luò)請求就可以將所需的資源全部下載，減小建立連接的消耗，在移動(dòng)端尤為明顯
雪碧圖的制作與使用方法：
使用圖像編輯軟件如Photoshop將多張圖放到同一個(gè)圖層并導(dǎo)出或使用自動(dòng)化構(gòu)建工具自動(dòng)拼接合并后的圖片
引用圖片時(shí)，圖片地址為合并后的圖片地址，通過background-position調(diào)整背景圖的位置，并通過容器的寬高共同作用，來選出所需的圖片
注意：
在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
});總結(jié)
到此這篇關(guān)于前端如何計(jì)算首屏及白屏?xí)r間的文章就介紹到這了,更多相關(guān)前端計(jì)算首屏及白屏?xí)r間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS如何讓你的移動(dòng)端交互體驗(yàn)更加優(yōu)秀
現(xiàn)在在手機(jī)等移動(dòng)端設(shè)備訪問的人越來越多，我們前端開發(fā)者一直致力于將設(shè)計(jì)稿還原成頁面，供用戶訪問。但除高度還原設(shè)計(jì)稿外，交互上的良好體驗(yàn)也是我們應(yīng)該做到的。2021-05-05
本文主要介紹了TypeScript聲明合并的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
JS實(shí)現(xiàn)快速的導(dǎo)航下拉菜單動(dòng)畫效果附源碼下載
本文給大家分享一個(gè)帶有變形動(dòng)畫特效的下拉導(dǎo)航菜單特效，該導(dǎo)航菜單在菜單項(xiàng)之間切換時(shí)，下拉菜單會(huì)快速的根據(jù)菜單內(nèi)容的大小來動(dòng)態(tài)變形，顯示合適的下拉菜單大小，效果非常棒。對導(dǎo)航下拉菜單代碼感興趣的朋友可以參考下本文2016-11-11
ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法分析
這篇文章主要介紹了ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法,結(jié)合實(shí)例形式對比分析了ES5與ES6正則操作的常用函數(shù)功能與用法區(qū)別,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序開發(fā)探究,非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-12
在Javascript中,每個(gè)對象都有一個(gè)指向另一個(gè)對象的鏈接,這個(gè)鏈接被稱為原型鏈,原型鏈?zhǔn)荍avascript的一種繼承機(jī)制,它通過鏈接對象的原型對象來實(shí)現(xiàn)屬性和方法的繼承,本文小編就來和大家一起深度探索JavaScript中的原型鏈機(jī)制2023-09-09
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)列表刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
xmlplus組件設(shè)計(jì)系列之下拉刷新（PullRefresh)（6）
xmlplus 是一個(gè)JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之下拉刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
基于JavaScript實(shí)現(xiàn)圖片放大鏡功能
在一些電商網(wǎng)站上，經(jīng)常看到有商品圖片被放大查看的功能，所以本文將使用前端技術(shù)實(shí)現(xiàn)一個(gè)簡單的圖片放大鏡功能，希望能給大家?guī)硪欢ǖ膸椭?/div> 2023-06-06
JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS常見的基本排序算法相關(guān)原理、實(shí)現(xiàn)方法、時(shí)間復(fù)雜度及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02最新評論