在的網站越來越流行吸頂特效,或者某個版塊滾動到頂部后固定到頂部的一個特效!如下:(高手請飄過)
在線報名版塊吸頂效果
該吸頂特效代碼:
var oDiv=document.getElementById('bm'); //獲取當前div
var divT=oDiv.offsetTop; //距離頂部距離
// console.log(divT);
window.onscroll=function() { // 獲取當前頁面的滾動條縱坐標位置 (依次為火狐谷歌、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;
}
}
吸頂效果一般都是通過修改對應css的屬性,有原來的relative改成fixed,但是當一個css的屬性改成fixed的時候,整個版塊就會脫離文檔流,這樣在臨界點時候就會產生抖動!比如下拉500px之后,產生吸頂效果,此時整個文檔的高度為:500px+當前版塊高度,也就是至少下拉到501px的時候才滿足吸頂條件!一旦吸頂后,版塊有relative變成了fixed屬性,脫離文檔流,這時候整個文檔的高度又變成了500px,此時已經不滿足系統條件,版塊的fixed又變成relative,而后又滿足了吸頂條件....這樣就產生了吸頂抖動,讓人難受的情況!
解決吸頂效果就是提前利用占位符,把當前的版塊位置占了,這樣就是變成fixed時候,整個版塊的高度仍然不變,我一般用兩種方法:
(1)創建一個父DIV
創建一個父div,并且給div一個固定的高度!這樣只是子div發生了變化,不影響整個版塊高度!
注意:空的div對于是不是占位有一點的不兼容,所以有條件可以加個做左側懸浮,加上塊屬性
float:left; display:block;
(2)通過js動態添加或者去除margin-top屬性!
通過margin-top占去版塊本身的位置,當不滿足吸頂時候,再釋放margin-top,
相關代碼案例:
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 0) {
$('.navbar').addClass('is-fixed');//給navbar增加is-fixed屬性
$(".main2").css("margin-top","40px");//給緊鄰的div添加margin,防止抖動
} else {
$('.navbar').removeClass('is-fixed');
$(".main2").css("margin-top","0px");//還原
}
});
這種問題對于高手來說可能是小意思了,對于初學js者可能多多稍稍都會碰到這種問題,總結一下,或許你會用到!
. 前言
在互聯網時代,網絡應用的性能對于用戶體驗、市場競爭力和公司聲譽至關重要。隨著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 頁面的重要組成部分,然而圖片占用的資源往往也是很大的,因此圖片優化在性能優化中占據很重要的地位。下面來看幾種優化圖片的方式。
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
以下是一個標準的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>
避免多個框架混合使用,在同一個工程里面要保持主框架的一致性,多框架同時使用會造成代碼混亂,后期會變得越來越難維護。
1、全局樣式禁止使用!important
2、避免使用導入式引入css樣式文件;
css復制代碼<style type="text/css">
@import url(./demo.css);
</style>
歷史頁面會有一些功能下線,在去除頁面初始化的js語句的同時,也要將依賴的js文件刪除,避免資源加載浪費
開啟Gzip壓縮功能, 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮,提高訪問速度
在開發過程中,發現無用字段占傳輸比例30%以上時,請進行返回數據的刪減,加快數據請求速度
上傳圖片之前一定要做圖片的無損壓縮,節省網絡流量,推薦網站tinypng
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 標簽元素小寫使用,自定義組件使用小駝峰命名(自定義標簽避免和原生標簽同名)
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 名稱界定符 ,不要駝峰命名法和下劃線;
避免選擇器嵌套層級過多,盡量少于 3 級;
使用命名空間防止命名沖突,利于維護;
css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
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/>標簽守則
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童鞋
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')
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
檢測結果
標簽 | 語義 | 嵌套常見錯誤 | 常用屬性 |
<a></a> | 超鏈接/錨 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 塊級容器 | ||
<p></p> | 段落 | 不能嵌套塊級元素 | |
<span></span> | 內聯容器(行內元素) | 不可嵌套塊級容器 | |
<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> | 標簽(常用input元素定義標注) | 不可嵌套塊級容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主體 | 只能嵌套在table內 | |
<thead></thead> | 表頭 | 只能嵌套在table內 | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的單元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的標題單元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按鈕 | 不可嵌套表單、表格等塊級元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
<option></option> | select中的一個選項 | 只能嵌套在select內 | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 無序列表 | 只能嵌套li | |
<li></li> | 無序列表項 | 只能嵌套在 ul 或 ol 內 | |
<iframe></iframe> | 內嵌一個網頁 | frameborder,width,height,src,scrolling,name | |
<br /> | 換行 | ||
<link /> | 引用樣式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文檔信息 | 只用于head內 | content,http-equiv,name |
<script></script> | 引用腳本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用樣式 | 不可嵌套任何元素 | type,media |
<title></title> | 文檔標題 | 只用于head內 |
點贊收藏支持、手留余香、與有榮焉,動動你發財的小手喲,感謝各位大佬能留下您的足跡。
作者:StriveToY
鏈接:https://juejin.cn/post/7262378982255394873
*請認真填寫需求信息,我們會在24小時內與您取得聯系。