整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
總體來(lái)看85分，性能還是蠻不錯(cuò)的，但還是給出了一些優(yōu)化建議
一條條從前端的角度分析一下
縮短初始服務(wù)器響應(yīng)時(shí)間
這個(gè)主要與域名解析與布局，服務(wù)器性能，首站資源請(qǐng)求數(shù)量相關(guān)。前端開(kāi)發(fā)需要注意的是，盡可能將不需要的資源去掉，減少引用庫(kù)的數(shù)量和大小，即按需引入，或者自己封裝通用的js方法和組件等。
使用視頻格式提供動(dòng)畫(huà)內(nèi)容
大型 GIF 無(wú)法提供動(dòng)畫(huà)內(nèi)容。通過(guò)將大型 GIF 轉(zhuǎn)換為視頻，您可以節(jié)省大量用戶帶寬。考慮將 MPEG4/WebM 視頻用于動(dòng)畫(huà)，將 PNG/WebP 用于靜態(tài)圖像網(wǎng)站優(yōu)化，盡量不使用 GIF網(wǎng)站優(yōu)化，以節(jié)省網(wǎng)絡(luò)字節(jié)。但這也可能會(huì)增加人力成本，比如視頻的設(shè)計(jì)，網(wǎng)站是否需要更合理的布局等。
減少未使用的
可能某些js被引入?yún)s并未使用，我們需要將其取消，前端開(kāi)發(fā)應(yīng)避免引入未使用的方法，組件，文件等，可以通過(guò)進(jìn)行規(guī)范。
移除阻塞未渲染的資源
小網(wǎng)站，關(guān)鍵css和js進(jìn)行內(nèi)聯(lián)，會(huì)大大加快渲染速度
內(nèi)聯(lián)js
<html>
<head>
<script type="text/javascript">
/* page.js的內(nèi)容 */
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
內(nèi)聯(lián)css
<html>
<head>
<style tpe="text/css">
.blue {
color: blue;
}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
HTML5允許我們給 標(biāo)簽添加屬性： “async” 來(lái)告訴瀏覽器不必停下來(lái)等待該腳本執(zhí)行，什么時(shí)候下載完什么時(shí)候執(zhí)行該腳本就可以了。這樣的話瀏覽器會(huì)邊下載page.js邊渲染后面的內(nèi)容。
<html>
<head>
<script type="text/javascript" src="page.js" async></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
對(duì)于那些首屏渲染不需要用到的CSS，我們可以依舊使用文件形式并在頁(yè)面內(nèi)容渲染完成后再加載。
<!doctype html>
<html>
<head>
</head>
<body>
<div>
Hello, world!
</div>
<link href="other.css" rel="stylesheet" />
</body>
</html>
采用新一代格式提供圖片
如果網(wǎng)站圖片較多，較大，WebP 和 AVIF 等圖片格式的壓縮效果通常優(yōu)于 PNG 或 JPEG，因而下載速度更快，消耗的數(shù)據(jù)流量更少。
使用標(biāo)簽，是 H5 中的一個(gè)新標(biāo)簽，類(lèi)似它也可以指定多個(gè)格式的資源，由瀏覽器選擇自己支持的格式進(jìn)行加載。
<picture class="picture">
<source type="image/webp" srcset="image.webp">
<img class="image" src="image.jpg">
<picture>
更多關(guān)于前端使用webp的相關(guān)內(nèi)容，請(qǐng)前往
確保文本在加載字體期間保持可見(jiàn)狀態(tài)
避免在加載自定義字體時(shí)顯示不可見(jiàn)文本的最簡(jiǎn)單方法是臨時(shí)顯示系統(tǒng)字體。通過(guò)包含font-: swap在您的@font-face風(fēng)格中，您可以在大多數(shù)現(xiàn)代瀏覽器中避免 FOIT
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400
src: local('Pacifico Regular'), local'Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
圖片沒(méi)有給定寬高
我們都知道，圖片在瀏覽器中，如果沒(méi)有給定寬高，那圖片自己的分辨率就是其在瀏覽器中的寬高。但這會(huì)增大頁(yè)面布局所需的計(jì)算和速度。請(qǐng)為圖片元素設(shè)置明確的寬度值和高度值，以減少布局偏移并改善 CLS。
注冊(cè)事件監(jiān)聽(tīng)
盡量避免使用事件處理某些邏輯。”事件不會(huì)可靠地觸發(fā)，而且監(jiān)聽(tīng)該事件可能會(huì)妨礙系統(tǒng)實(shí)施“往返緩存”之類(lèi)的瀏覽器優(yōu)化策略。請(qǐng)改用“”或“”事件。
window.addEventListener('pagehide', (event) => {
if (event.persisted) {
console.log('This page *might* be entering the bfcache.');
} else {
console.log('This page will unload normally and be discarded.');
}
});
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
