float:left; display:block;

. 前言

在互聯網時代，網絡應用的性能對于用戶體驗、市場競爭力和公司聲譽至關重要。隨著Web技術的不斷發展，用戶對網頁加載速度和響應速度的期望不斷提高。因此客觀、標準地衡量頁面性能對于優化頁面具有關鍵性的指導作用。通過準確地評估性能瓶頸和問題所在，我們可以更有效地調整和優化頁面，從而改善用戶體驗，提高市場競爭力。

2. 關鍵指標

2.1

FCP (First Contentful Paint)

首次內容繪制，標記瀏覽器渲染來自 DOM 第一位內容的時間點，內容可能是文本、圖像等元素,是用戶感知加載速度的一個重要指標。

2.2

LCP (Largest Contentful Paint)

最大內容繪制時間，計算從頁面開始加載到用戶與頁面發生交互（點擊，滾動）這段時間內，最大元素繪制的時間，該時間會隨著頁面渲染變化而變化，因為頁面中的最大元素在渲染過程中可能會發生改變。

2.3

LCP (Largest Contentful Paint)

累計布局偏移。測量在頁面的整個頁面生命周期內發生的所有意外布局偏移中累計的布局偏移分數。

更多的頁面指標不在重復解釋，感興趣可以查看https://web.dev/metrics/

3. 衡量指標

性能指標一般通過以下兩種方式來進行測量：

• 在實驗場景中：使用工具在穩定、受控的環境中模擬頁面加載

1、Chrome 開發者工具

2、lighthouse

3、WebPageTest

• 在實際場景中：基于真實用戶的實際頁面加載與頁面交互

1、ftwo 之家基于web-vitals包裝的前端性能采集工具

2、Chrome User Experience Report 是google的性能檢測工具，通過引入google提供的腳本，將我們的客戶端數據上報google，從而統計你的網頁的性能報告和評估

如何衡量線上頁面站點性能，推薦使用之家的ftwo前端線上采集工具，基于真實用戶實際瀏覽過程中收集相關指標，壞體驗的UV指標參照如下，壞UV占比控制在25%以下

4. 優化措施

4.1

網絡層面

? 開啟Gzip壓縮

gzip 是 GNUzip 的縮寫，最早用于 UNIX 系統的文件壓縮。HTTP 協議上的 gzip 編碼是一種用來改進 web 應用程序性能的技術，web 服務器和客戶端（瀏覽器）必須共同支持 gzip。目前主流的瀏覽器，Chrome，firefox，IE 等都支持該協議。常見的服務器如 Apache，Nginx，IIS 同樣支持，gzip 壓縮效率非常高，通常可以達到 70% 的壓縮率。

?使用 HTTP 2

HTTP2.0 大幅度的提高了 web 性能，在 HTTP1.1 完全語義兼容的基礎上，進一步減少了網絡的延遲。實現低延遲高吞吐量。

? 使用CDN

使用內容分發網絡（CDN）是一種優化頁面性能的有效方法，它能夠縮短網絡加載時間，為用戶提供更快的訪問速度。CDN 將網站的靜態資源（如文檔、圖片、樣式表、腳本等）復制到分布在各地的服務器上，使用戶能夠從離他們較近的服務器上加載資源，從而減少網絡延遲。

為了從 CDN 中獲得最佳性能，應針對文檔、資源和接口分別設置合適的緩存時長。以下是一些建議：

1. 文檔：對于 HTML 文檔，建議設置較短的緩存時長（如幾分鐘到幾小時），以便在內容發生更改時，用戶能夠盡快獲取到更新后的內容。

2. 資源：對于 CSS、JavaScript 等靜態資源，可以設置較長的緩存時長（如一周到一個月），因為這些資源的更新頻率通常較低。但務必確保資源具有唯一的版本號或哈希值，以便在更新時使緩存失效。

3. 接口：對于 API 接口，緩存時長的設置要根據數據更新頻率進行調整。如果數據經常發生變化，建議使用較短的緩存時長；如果數據變化不大，可以使用較長的緩存時長。同時要注意合理設置緩存策略，如 Cache-Control 頭部，以確保數據的實時性和準確性。

通過使用 CDN 并合理設置緩存時長，我們可以顯著提高頁面加載速度，優化用戶體驗，并節省服務器帶寬和資源。

4.2

圖片優化

圖片往往是一個 h5 頁面的重要組成部分，然而圖片占用的資源往往也是很大的，因此圖片優化在性能優化中占據很重要的地位。下面來看幾種優化圖片的方式。

• 圖片懶加載：當圖片出現在可視區域或者即將出現在可視區域時再加載圖片，避免一次性加載全部圖片，會對用戶體驗造成很大影響。
• 降低圖片質量：一些圖片適當降低圖片質量時，通常是看不出來區別的，尤其是作為背景圖片時，可以使用dis命令進行圖片壓縮。
• 盡量使用CSS代替圖片：一些簡單的圖片效果如果可以通過 CSS 效果實現則進行用 CSS 來實現，可以減小請求次數或者打包體積大小。
• 圖片指定尺寸：圖片裁剪成合適尺寸大小,img元素固定寬高，避免因網絡加載導致頁面抖動。
• 使用webp圖片：WebP 的優勢體現在它具有更優的圖像數據壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質量；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都相當優秀、穩定和統一。

4.3

代碼優化

? 第三方插件、庫按需引入

在項目中經常會使用到第三方的插件，比如在模板頁中引入或是全局注冊，會導致項目首屏資源體積增加，改成組件內局部注冊或是動態引入lib的地址

? 動態組件，按需引入

場景一: 在我們營銷專題頁中彈窗種類很多，但是實際在用戶端彈出使用時刻，只會是一兩個彈窗。因此統一所有彈窗的入口，在通過動態組件只彈窗某一個彈窗。

場景二: 長頁面，板塊很多，而且都是城市維度的動態數據，

非首屏的板塊，提前預熱計算板塊是否存在，通過動態組件和板塊的高度，當滑動可視窗口才開始下載資源和渲染。

? 動態組件有序顯示

通過指令和組件完成狀態，實現組件有序顯示，避免出現頁面CLS偏移。

（1）自定義指令v-module-status，綁定兩個參數一個版塊的順序，一個版塊的執行完成狀態。

（2）定義一個全局組件狀態存儲對象，存儲頁面使用了v-module-status指令的組件狀態數據。

（3）指令中檢查當前組件的執行完成狀態是否完成，若完成，則遍歷全局組件狀態存儲對象，查找出當前組件之前的所有組件，查看是否之前的所有組件已經完成接口請求，如果完成則把當前組件的display：none移除，反之設置成display:none，同時當前之后的所有組件也進行更新是否顯示的狀態。

（4）使用指令的組件內部需要配合設置一個接口請求完成狀態的標識，傳遞給指令，能保證指令可以拿到當前組件的接口請求狀態。

? 去掉頁面端重定向

廣告位投放中間頁，根據一定條件，跳轉不同的落地頁，影響頁面的重定向時長。

? 去掉頁面端自動錨點

帶車系投遞（高意向度）滾動錨點至猜你喜歡板塊，不帶車系通投（低意向度）錨點到SKU板塊；猜你喜歡、SKU板塊中間存在N個動態的板塊，自動錨點時，頁面會不斷跳動，給用戶帶來不友好的體驗。

定

指定車系投放

通

無車系通投

為了改善用戶體驗，建議采取以下措施之一：

1. 去掉自動錨點功能，讓用戶自主地瀏覽頁面和板塊，避免頁面頻繁跳動。

2. 優化自動錨點邏輯，在用戶關閉半屏開屏彈窗后再進行錨點跳轉。這樣一來，用戶可以先關注彈窗內容，并在關閉后再被引導至相應板塊，從而減少頁面跳動現象。

? vue 路由懶加載

當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

let router=createSimpleRouter({
routes: [
{
path: `${URL_PREFIX}/index`,
name: "index",
component: ()=> import(/* webpackChunkName: "index" */ '../views/index/Index'),
meta: meta
},
{
path: `${URL_PREFIX}/cities`,
name: "cities",
component: ()=> import(/* webpackChunkName: "cities" */ '../views/cities/Index'),
meta: {
...meta,
subcategoryId: 11750,
}
},
{
path: `${URL_PREFIX}/success/:encryptedOrderId`,
name: "success",
component: ()=> import(/* webpackChunkName: "success" */ '../views/success/Index'),
meta: {
...meta,
subcategoryId: 14393,
}
}]
});

參考鏈接

https://web.dev/metrics/

https://www.infoq.cn/article/HVyqFtlxgDao4vq5Durp

作者簡介

方林鋒

■ 經銷商技術部-營銷活動團隊

■ 2015年加入汽車之家，任職于經銷商技術部-營銷活動技術團隊，目前負責專題、車展等相關開發。

來源:微信公眾號:之家技術

出處:https://mp.weixin.qq.com/s/vY-tgd20BphaONOGbQw9IQ

TML配置

• 文件應以“”首行頂格開始，推薦使用“”。
• 必須申明文檔的編碼charset，并且使用UTF-8編碼。
• 移動端必須使用 viewport 適配
• 頁面title是極為重要的不可缺少的一項。

以下是一個標準的html結構

html復制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- 頁面標題不能為空 -->
    <title>京東商城:商家后臺</title>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 樣式文件 以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 頁面主體 -->
    <div class="warp">
      <header>頂部內容區域，比如：菜單頭</header>
      <div class="content">主內容區域</div>
      <footer>頂部頁尾區域，比如：備案號</footer>
    </div>
     
    <!-- js文件 在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多個框架混合使用，在同一個工程里面要保持主框架的一致性，多框架同時使用會造成代碼混亂，后期會變得越來越難維護。

Css開發規范

1、全局樣式禁止使用!important

2、避免使用導入式引入css樣式文件；

css復制代碼<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

歷史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要將依賴的js文件刪除，避免資源加載浪費

文件必須使用gzip壓縮

開啟Gzip壓縮功能， 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮，提高訪問速度

api接口中，無用字段占傳輸比例30%以上時，刪除無用字段

在開發過程中，發現無用字段占傳輸比例30%以上時，請進行返回數據的刪減，加快數據請求速度

關于圖片壓縮

上傳圖片之前一定要做圖片的無損壓縮，節省網絡流量,推薦網站tinypng

HTML的標準結構

html復制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索，不強制使用 -->
    <meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
    <meta name="Description" Content=”頁面描述″>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推薦手動引入指定路徑 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 樣式文件必須以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 內聯樣式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 頁面標題不能為空 -->
    <title>頁面標題</title>
  </head>
  <body>
  <!-- 頁面主體 -->
    <div class="warp">
    <header>頂部內容區域，比如：菜單頭</header>
    <div class="content">主內容區域</div>
    <footer>頂部頁尾區域，比如：備案號</footer>
    </div>
 
    <!-- JavaScript 文件在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

• 不同模塊區域可使用簡要備注標識模塊內容
• HTML 標簽語義化使結構清晰，比如：
• CSS 外鏈引入必須放在 中
• JS 外鏈引入必須放在中
• 省略圖像、媒體文件、樣式表和腳本等嵌入式資源 URL 協議頭部聲明 ( http:// , https:// )，用//代替。
• favicon 在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：1。在 Web Server 根目錄放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML標簽使用守則

標簽小寫

原生 HTML 標簽元素小寫使用，自定義組件使用小駝峰命名（自定義標簽避免和原生標簽同名）

html復制代碼<!-- 錯誤 ? -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正確 ? -->
<div></div>  
<p></p> 
 
<!-- 自定義組件 -->
<shareDialog><shareDialog/>

套用規則

禁止在行內元素中嵌套塊級元素??

html復制代碼<!-- 錯誤的嵌套 ? -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正確的嵌套 ? -->
<div><span></span></div>  
<p><i></i></p>   

更多標簽使用規則介紹請查看尾部附錄

屬性定義

定義屬性賦值時，使用雙引號，禁止單雙引號混用

html復制代碼<!-- 錯誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標題">   
 
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">   

正確閉合

除自閉合標簽外，所有標簽都需正確的編寫閉合標簽

常用自閉合標簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用規范

ID 和 Class 取通用且有意義的名字；

使用連字符 - 作為 ID、Class 名稱界定符 ，不要駝峰命名法和下劃線；

避免選擇器嵌套層級過多，盡量少于 3 級；

使用命名空間防止命名沖突，利于維護；

css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}

• 避免選擇器和 Class、ID 疊加使用
• 聲明順序，相關屬性應為一組，建議遵循： 定位布局屬性 -> 盒模型屬性 -> 文本屬性 -> 視覺屬性 -> 其他屬性
• 對于 JS 操作相關選擇器 前面需加上 特殊應用標識前綴

css復制代碼/* 標準的聲明順序 */
.declaration-order {
  /* 布局屬性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型屬性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本屬性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 視覺屬性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他屬性 */
  cursor: pointer;
}

圖片相關使用規范

<img/>標簽守則

• src 屬性不能為空，需添加默認值（托底圖片路徑）
• 為重要圖片添加 alt 屬性，當無法顯示圖像時，瀏覽器將顯示替代文本，便于 SEO 及用戶閱讀
• 為圖片標簽 增加 width 和 height 屬性，避免圖片加載從無到有，導致頁面抖動
• 大量圖片流資源，使用懶加載技術按需加載

html復制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
 
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

圖片資源守則

大小

尺寸 小于 50 ×?50 的請使用 字體圖標（iconfont）或者 將多個圖標合成一張大圖使用（雪碧圖） 尺寸大于 50 ×?50 的圖片，引入前先使用 在線壓縮 對其進行壓縮 ，圖片大小盡量控制在 300kb 以內

倍率

PC端、移動端 推薦使用 2倍圖 (@2x），避免設備分辨率過高，圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景，可使用 3倍圖（@3x）

html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍圖： 圖片展示區域大小 : 圖片實際尺寸=1 ：2

無論使用幾倍圖，圖片大小都需遵守上條限制

如遇圖片倍圖問題，可咨詢 @UI童鞋

性能守則

• 避免不必要的 DOM 操作瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優化 DOM 樹查詢的方案是，當一個元素出現多次時，將它保存在一個變量中，來避免多次查詢 DOM 樹。

js復制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
  lis=document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
  lis=ul.getElementsByTagName('li')

• 異步加載第三方內容 當你無法保證嵌入第三方內容 比如 埋點、調研等資源正常工作的時候，你需要考慮用異步加載這些代碼，避免阻塞整個頁面加載。
• 減少標簽的數量 編寫 HTML 代碼時，盡量避免多余的標簽嵌套，避免 DOM樹的冗余
• 控制靜態資源數量

1個頁面中建議CSS文件不要超過3個（1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式）； JS文件不要超過5個（1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件）。

編碼建議

縮進使用 2個空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號

其他建議

保持一定的代碼潔癖，尤其在大型項目中

• 代碼邏輯應當直截了當，清晰易讀，保持與業務邏輯與代碼一一對應關系，減少邏輯錯誤的可能性，降低二次開發成本；
• 刪除過期無用代碼，減少代碼過大，造成不必要的維護成本
• 代碼盡量復用，擁有組件化思想
• 代碼命名合理化，即使不寫注釋情況下，也可以讓其他開發人員一眼明白意思
• 性能調至最優，降低耦合度，避免別人做不合理的優化時而造成的混亂
• 整潔的模塊邊界，明確的劃分模塊之間的邏輯邊界，盡量保證職責單一，避免功能交叉混雜
• 讓代碼沒有改進的余地，在開發時把各種情況都想到了，如果有人企圖改進它，總是會回到原點

性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用的質量。Lighthouse會對各個測試項的結果打分，并給出優化建議，這些打分標準和優化建議可以視為Google的網頁最佳實踐。

Chrome拓展程序 谷歌商店安裝lighthouse后，在右上角或者菜單里點擊圖中圖標，Options可以配置測試項目，點擊Generate report即可測試。

命令行

js復制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help

檢測結果

【附錄】常用的標簽規范

點贊收藏支持、手留余香、與有榮焉，動動你發財的小手喲，感謝各位大佬能留下您的足跡。

作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873