網(wǎng)頁js吸頂特效出現(xiàn)抖動(dòng)的解決

在的網(wǎng)站越來越流行吸頂特效，或者某個(gè)版塊滾動(dòng)到頂部后固定到頂部的一個(gè)特效！如下：（高手請飄過）

在線報(bào)名版塊吸頂效果

該吸頂特效代碼：

var oDiv=document.getElementById('bm'); //獲取當(dāng)前div
var divT=oDiv.offsetTop; //距離頂部距離
// console.log(divT);
window.onscroll=function() { // 獲取當(dāng)前頁面的滾動(dòng)條縱坐標(biāo)位置（依次為火狐谷歌、safari、IE678）
var scrollT=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
// console.log(scrollT);
if (scrollT >=divT) {
if (window.navigator.userAgent.indexOf('MSIE 6.0') !=-1) { // 兼容IE6代碼
oDiv.style.position='relative';
oDiv.style.top=scrollT + 'px';
} else { // 正常瀏覽器代碼
oDiv.style.position='fixed';
oDiv.style.top='80px'; //吸頂位置距離頂部80px
}
} else {
oDiv.style.position='';
oDiv.style.top=0;
}
}

吸頂效果一般都是通過修改對應(yīng)css的屬性，有原來的relative改成fixed，但是當(dāng)一個(gè)css的屬性改成fixed的時(shí)候，整個(gè)版塊就會(huì)脫離文檔流，這樣在臨界點(diǎn)時(shí)候就會(huì)產(chǎn)生抖動(dòng)！比如下拉500px之后，產(chǎn)生吸頂效果，此時(shí)整個(gè)文檔的高度為：500px+當(dāng)前版塊高度，也就是至少下拉到501px的時(shí)候才滿足吸頂條件！一旦吸頂后，版塊有relative變成了fixed屬性，脫離文檔流，這時(shí)候整個(gè)文檔的高度又變成了500px，此時(shí)已經(jīng)不滿足系統(tǒng)條件，版塊的fixed又變成relative，而后又滿足了吸頂條件....這樣就產(chǎn)生了吸頂抖動(dòng)，讓人難受的情況！

解決吸頂效果就是提前利用占位符，把當(dāng)前的版塊位置占了，這樣就是變成fixed時(shí)候，整個(gè)版塊的高度仍然不變，我一般用兩種方法：

（1）創(chuàng)建一個(gè)父DIV

創(chuàng)建一個(gè)父div，并且給div一個(gè)固定的高度！這樣只是子div發(fā)生了變化，不影響整個(gè)版塊高度！

注意：空的div對于是不是占位有一點(diǎn)的不兼容，所以有條件可以加個(gè)做左側(cè)懸浮，加上塊屬性

float:left; display:block;

(2)通過js動(dòng)態(tài)添加或者去除margin-top屬性！

通過margin-top占去版塊本身的位置，當(dāng)不滿足吸頂時(shí)候，再釋放margin-top，

相關(guān)代碼案例：

$(window).bind('scroll', function () {
if ($(window).scrollTop() > 0) {
$('.navbar').addClass('is-fixed');//給navbar增加is-fixed屬性
$(".main2").css("margin-top","40px");//給緊鄰的div添加margin，防止抖動(dòng)
} else {
$('.navbar').removeClass('is-fixed');
$(".main2").css("margin-top","0px");//還原
}
});

這種問題對于高手來說可能是小意思了，對于初學(xué)js者可能多多稍稍都會(huì)碰到這種問題，總結(jié)一下，或許你會(huì)用到！

. 前言

在互聯(lián)網(wǎng)時(shí)代，網(wǎng)絡(luò)應(yīng)用的性能對于用戶體驗(yàn)、市場競爭力和公司聲譽(yù)至關(guān)重要。隨著Web技術(shù)的不斷發(fā)展，用戶對網(wǎng)頁加載速度和響應(yīng)速度的期望不斷提高。因此客觀、標(biāo)準(zhǔn)地衡量頁面性能對于優(yōu)化頁面具有關(guān)鍵性的指導(dǎo)作用。通過準(zhǔn)確地評估性能瓶頸和問題所在，我們可以更有效地調(diào)整和優(yōu)化頁面，從而改善用戶體驗(yàn)，提高市場競爭力。

2. 關(guān)鍵指標(biāo)

2.1

FCP (First Contentful Paint)

首次內(nèi)容繪制，標(biāo)記瀏覽器渲染來自 DOM 第一位內(nèi)容的時(shí)間點(diǎn)，內(nèi)容可能是文本、圖像等元素,是用戶感知加載速度的一個(gè)重要指標(biāo)。

2.2

LCP (Largest Contentful Paint)

最大內(nèi)容繪制時(shí)間，計(jì)算從頁面開始加載到用戶與頁面發(fā)生交互（點(diǎn)擊，滾動(dòng)）這段時(shí)間內(nèi)，最大元素繪制的時(shí)間，該時(shí)間會(huì)隨著頁面渲染變化而變化，因?yàn)轫撁嬷械淖畲笤卦阡秩具^程中可能會(huì)發(fā)生改變。

2.3

LCP (Largest Contentful Paint)

累計(jì)布局偏移。測量在頁面的整個(gè)頁面生命周期內(nèi)發(fā)生的所有意外布局偏移中累計(jì)的布局偏移分?jǐn)?shù)。

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

3. 衡量指標(biāo)

性能指標(biāo)一般通過以下兩種方式來進(jìn)行測量：

在實(shí)驗(yàn)場景中：使用工具在穩(wěn)定、受控的環(huán)境中模擬頁面加載

1、Chrome 開發(fā)者工具

2、lighthouse

3、WebPageTest

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

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

2、Chrome User Experience Report 是google的性能檢測工具，通過引入google提供的腳本，將我們的客戶端數(shù)據(jù)上報(bào)google，從而統(tǒng)計(jì)你的網(wǎng)頁的性能報(bào)告和評估

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

4. 優(yōu)化措施

4.1

網(wǎng)絡(luò)層面

? 開啟Gzip壓縮

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

?使用 HTTP 2

HTTP2.0 大幅度的提高了 web 性能，在 HTTP1.1 完全語義兼容的基礎(chǔ)上，進(jìn)一步減少了網(wǎng)絡(luò)的延遲。實(shí)現(xiàn)低延遲高吞吐量。

? 使用CDN

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

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

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

2. 資源：對于 CSS、JavaScript 等靜態(tài)資源，可以設(shè)置較長的緩存時(shí)長（如一周到一個(gè)月），因?yàn)檫@些資源的更新頻率通常較低。但務(wù)必確保資源具有唯一的版本號或哈希值，以便在更新時(shí)使緩存失效。

3. 接口：對于 API 接口，緩存時(shí)長的設(shè)置要根據(jù)數(shù)據(jù)更新頻率進(jìn)行調(diào)整。如果數(shù)據(jù)經(jīng)常發(fā)生變化，建議使用較短的緩存時(shí)長；如果數(shù)據(jù)變化不大，可以使用較長的緩存時(shí)長。同時(shí)要注意合理設(shè)置緩存策略，如 Cache-Control 頭部，以確保數(shù)據(jù)的實(shí)時(shí)性和準(zhǔn)確性。

通過使用 CDN 并合理設(shè)置緩存時(shí)長，我們可以顯著提高頁面加載速度，優(yōu)化用戶體驗(yàn)，并節(jié)省服務(wù)器帶寬和資源。

4.2

圖片優(yōu)化

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

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

4.3

代碼優(yōu)化

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

在項(xiàng)目中經(jīng)常會(huì)使用到第三方的插件，比如在模板頁中引入或是全局注冊，會(huì)導(dǎo)致項(xiàng)目首屏資源體積增加，改成組件內(nèi)局部注冊或是動(dòng)態(tài)引入lib的地址

? 動(dòng)態(tài)組件，按需引入

場景一: 在我們營銷專題頁中彈窗種類很多，但是實(shí)際在用戶端彈出使用時(shí)刻，只會(huì)是一兩個(gè)彈窗。因此統(tǒng)一所有彈窗的入口，在通過動(dòng)態(tài)組件只彈窗某一個(gè)彈窗。

場景二: 長頁面，板塊很多，而且都是城市維度的動(dòng)態(tài)數(shù)據(jù)，

非首屏的板塊，提前預(yù)熱計(jì)算板塊是否存在，通過動(dòng)態(tài)組件和板塊的高度，當(dāng)滑動(dòng)可視窗口才開始下載資源和渲染。

? 動(dòng)態(tài)組件有序顯示

通過指令和組件完成狀態(tài)，實(shí)現(xiàn)組件有序顯示，避免出現(xiàn)頁面CLS偏移。

（1）自定義指令v-module-status，綁定兩個(gè)參數(shù)一個(gè)版塊的順序，一個(gè)版塊的執(zhí)行完成狀態(tài)。

（2）定義一個(gè)全局組件狀態(tài)存儲對象，存儲頁面使用了v-module-status指令的組件狀態(tài)數(shù)據(jù)。

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

（4）使用指令的組件內(nèi)部需要配合設(shè)置一個(gè)接口請求完成狀態(tài)的標(biāo)識，傳遞給指令，能保證指令可以拿到當(dāng)前組件的接口請求狀態(tài)。

? 去掉頁面端重定向

廣告位投放中間頁，根據(jù)一定條件，跳轉(zhuǎn)不同的落地頁，影響頁面的重定向時(shí)長。

? 去掉頁面端自動(dòng)錨點(diǎn)

帶車系投遞（高意向度）滾動(dòng)錨點(diǎn)至猜你喜歡板塊，不帶車系通投（低意向度）錨點(diǎn)到SKU板塊；猜你喜歡、SKU板塊中間存在N個(gè)動(dòng)態(tài)的板塊，自動(dòng)錨點(diǎn)時(shí)，頁面會(huì)不斷跳動(dòng)，給用戶帶來不友好的體驗(yàn)。

定

指定車系投放

通

無車系通投

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

1. 去掉自動(dòng)錨點(diǎn)功能，讓用戶自主地瀏覽頁面和板塊，避免頁面頻繁跳動(dòng)。

2. 優(yōu)化自動(dòng)錨點(diǎn)邏輯，在用戶關(guān)閉半屏開屏彈窗后再進(jìn)行錨點(diǎn)跳轉(zhuǎn)。這樣一來，用戶可以先關(guān)注彈窗內(nèi)容，并在關(guān)閉后再被引導(dǎo)至相應(yīng)板塊，從而減少頁面跳動(dòng)現(xiàn)象。

? vue 路由懶加載

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

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

作者簡介

方林鋒

■ 經(jīng)銷商技術(shù)部-營銷活動(dòng)團(tuán)隊(duì)

■ 2015年加入汽車之家，任職于經(jīng)銷商技術(shù)部-營銷活動(dòng)技術(shù)團(tuán)隊(duì)，目前負(fù)責(zé)專題、車展等相關(guān)開發(fā)。

來源:微信公眾號:之家技術(shù)

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

TML配置

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

以下是一個(gè)標(biāo)準(zhǔn)的html結(jié)構(gòu)

html復(fù)制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- 頁面標(biāo)題不能為空 -->
    <title>京東商城:商家后臺</title>
    <!-- 移動(dòng)端必須使用 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>頂部內(nèi)容區(qū)域，比如：菜單頭</header>
      <div class="content">主內(nèi)容區(qū)域</div>
      <footer>頂部頁尾區(qū)域，比如：備案號</footer>
    </div>
     
    <!-- js文件 在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

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

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

Css開發(fā)規(guī)范

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

2、避免使用導(dǎo)入式引入css樣式文件；

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

未使用的js/css禁止引用

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

文件必須使用gzip壓縮

開啟Gzip壓縮功能，可以使網(wǎng)站的css、js 、xml、html 文件在傳輸時(shí)進(jìn)行壓縮，提高訪問速度

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

在開發(fā)過程中，發(fā)現(xiàn)無用字段占傳輸比例30%以上時(shí)，請進(jìn)行返回?cái)?shù)據(jù)的刪減，加快數(shù)據(jù)請求速度

關(guān)于圖片壓縮

上傳圖片之前一定要做圖片的無損壓縮，節(jié)省網(wǎng)絡(luò)流量,推薦網(wǎng)站tinypng

HTML的標(biāo)準(zhǔn)結(jié)構(gòu)

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

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

HTML標(biāo)簽使用守則

標(biāo)簽小寫

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

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

套用規(guī)則

禁止在行內(nèi)元素中嵌套塊級元素??

html復(fù)制代碼<!-- 錯(cuò)誤的嵌套 ? -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正確的嵌套 ? -->
<div><span></span></div>  
<p><i></i></p>

更多標(biāo)簽使用規(guī)則介紹請查看尾部附錄

屬性定義

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

html復(fù)制代碼<!-- 錯(cuò)誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標(biāo)題">   
 
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標(biāo)題" data="formTitle">

正確閉合

除自閉合標(biāo)簽外，所有標(biāo)簽都需正確的編寫閉合標(biāo)簽

常用自閉合標(biāo)簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用規(guī)范

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

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

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

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

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

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

css復(fù)制代碼/* 標(biāo)準(zhǔn)的聲明順序 */
.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;
}

圖片相關(guān)使用規(guī)范

<img/>標(biāo)簽守則

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

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

圖片資源守則

大小

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

倍率

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

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

2倍圖：圖片展示區(qū)域大小 : 圖片實(shí)際尺寸=1 ：2

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

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

性能守則

避免不必要的 DOM 操作瀏覽器遍歷 DOM 元素的代價(jià)是昂貴的。最簡單優(yōu)化 DOM 樹查詢的方案是，當(dāng)一個(gè)元素出現(xiàn)多次時(shí)，將它保存在一個(gè)變量中，來避免多次查詢 DOM 樹。

js復(fù)制代碼/* 推薦用變量保存頻繁使用的 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')

異步加載第三方內(nèi)容當(dāng)你無法保證嵌入第三方內(nèi)容比如埋點(diǎn)、調(diào)研等資源正常工作的時(shí)候，你需要考慮用異步加載這些代碼，避免阻塞整個(gè)頁面加載。
減少標(biāo)簽的數(shù)量編寫 HTML 代碼時(shí)，盡量避免多余的標(biāo)簽嵌套，避免 DOM樹的冗余
控制靜態(tài)資源數(shù)量

1個(gè)頁面中建議CSS文件不要超過3個(gè)（1個(gè)組件庫樣式文件、1個(gè)項(xiàng)目公共樣式、1個(gè)頁面樣式）； JS文件不要超過5個(gè)（1個(gè)框架文件、1個(gè)組件庫文件、1個(gè)項(xiàng)目公共庫文件、1個(gè)頁面腳本文件、1個(gè)埋點(diǎn)文件）。

編碼建議

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

其他建議

保持一定的代碼潔癖，尤其在大型項(xiàng)目中

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

性能檢測工具 - Lighthouse簡介 Lighthouse是一個(gè)Google開源的自動(dòng)化工具，主要用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。Lighthouse會(huì)對各個(gè)測試項(xiàng)的結(jié)果打分，并給出優(yōu)化建議，這些打分標(biāo)準(zhǔn)和優(yōu)化建議可以視為Google的網(wǎng)頁最佳實(shí)踐。

Chrome拓展程序谷歌商店安裝lighthouse后，在右上角或者菜單里點(diǎn)擊圖中圖標(biāo)，Options可以配置測試項(xiàng)目，點(diǎn)擊Generate report即可測試。

命令行

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

檢測結(jié)果

【附錄】常用的標(biāo)簽規(guī)范

標(biāo)簽	語義	嵌套常見錯(cuò)誤	常用屬性
<a></a>	超鏈接/錨	a不可嵌套a	href,name,title,rel,target
<div></div>	塊級容器
<p></p>	段落	不能嵌套塊級元素
<span></span>	內(nèi)聯(lián)容器（行內(nèi)元素）	不可嵌套塊級容器
<form></form>	表單		action,target,method,name
<input />	輸入框	不可嵌套元素	type,name,value,checked,disabled,maxlength,readonly,accesskey
<textarea></textarea>	多行文本輸入控件		name,accesskey,disabled,readonly,rows,cols
<img />	圖像	不可嵌套元素	alt,src,width,height
<label></label>	標(biāo)簽（常用input元素定義標(biāo)注）	不可嵌套塊級容器	for
<table></table>	表格	只可嵌套表格子元素	width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody>	表格主體	只能嵌套在table內(nèi)
<thead></thead>	表頭	只能嵌套在table內(nèi)
<tr></tr>	表格行	嵌套于table或thead、tbody、tfoot
<td></td>	表格中的單元格	只用于tr	colspan,rowspan
<th></th>	表格中的標(biāo)題單元格	只用于tr	colspan,rowspan
<tfoot></tfoot>	表格表尾	只用于table
<button></button>	按鈕	不可嵌套表單、表格等塊級元素	type,disabled
<select></select>	列表框或下拉框	只能嵌套o(hù)ption或optgroup	name,disabled,multiple
<option></option>	select中的一個(gè)選項(xiàng)	只能嵌套在select內(nèi)	value,selected,disabled
<ol></ol>	有序列表	只能嵌套li
<ul></ul>	無序列表	只能嵌套li
<li></li>	無序列表項(xiàng)	只能嵌套在 ul 或 ol 內(nèi)
<iframe></iframe>	內(nèi)嵌一個(gè)網(wǎng)頁		frameborder,width,height,src,scrolling,name
<br />	換行
<link />	引用樣式或icon	不可嵌套任何元素	type,rel,href
<meta />	文檔信息	只用于head內(nèi)	content,http-equiv,name
<script></script>	引用腳本	不可嵌套任何元素	type,src
<style></style>	引用樣式	不可嵌套任何元素	type,media
<title></title>	文檔標(biāo)題	只用于head內(nèi)

點(diǎn)贊收藏支持、手留余香、與有榮焉，動(dòng)動(dòng)你發(fā)財(cái)?shù)男∈謫眩兄x各位大佬能留下您的足跡。

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

在線咨詢

上一篇：css禁止文字被選中
下一篇：大數(shù)據(jù)編程入門：JavaScript字符串

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商