前端模板+后端數(shù)據(jù)，使用模板，數(shù)據(jù)雙重緩存進(jìn)
LocalStorage前端模板+后端數(shù)據(jù) 和 前端ajax獲取后端HTML字符串這兩種方式來(lái)實(shí)現(xiàn)性能的優(yōu)化，后端將生成的靜態(tài)文件推送到CDN，用戶訪問(wèn)時(shí)給用戶埋了速度信息(測(cè)試用戶的寬帶速度)來(lái)決定了他使用哪種方式渲染
將每個(gè)模塊的HTML,CSS,JS和相關(guān)依賴進(jìn)行抽離，實(shí)現(xiàn)按需加載
將第一幀輪播圖圖片和渲染邏輯直出在頁(yè)面，防止因用戶網(wǎng)速慢導(dǎo)致輪播圖區(qū)域一直未加載
對(duì)滾動(dòng)事件進(jìn)行節(jié)流處理，盡量避免在滾動(dòng)的時(shí)候進(jìn)行DOM操作與復(fù)雜計(jì)算，在渲染邏輯初始化的時(shí)候，收集好樓層的相關(guān)信息，包括樓層高度、樓層的offsetTop等，這樣在滾動(dòng)的時(shí)候就不再需要進(jìn)行任何DOM操作了，讓滾動(dòng)的效率有所提升。而當(dāng)樓層的數(shù)據(jù)例如樓層高度發(fā)生變化時(shí)，則通過(guò)消息通知的機(jī)制來(lái)實(shí)時(shí)地更新樓層信息即可。
腳本延后加載執(zhí)行，還有業(yè)務(wù)上一些統(tǒng)計(jì)上報(bào)等邏輯，可以放到 window onload 事件之后再執(zhí)行，這樣可以避免由于類似統(tǒng)計(jì)這樣的請(qǐng)求占用到頁(yè)面加載資源，從而降低頁(yè)面 onload 時(shí)間。
模板、數(shù)據(jù)分離緩存。利用localStorage我們可以對(duì)模板和數(shù)據(jù)進(jìn)行緩存，這樣當(dāng)用戶第二次加載的時(shí)候就可以不用再去請(qǐng)求網(wǎng)絡(luò)資源，而可以直接從本地獲取了。
但緩存之后如何進(jìn)行更新呢？我們可以通過(guò)進(jìn)行MD5校驗(yàn)版本來(lái)實(shí)現(xiàn)。
對(duì)數(shù)據(jù)來(lái)說(shuō)，數(shù)據(jù)是由后端給出的，我們可以讓后端同學(xué)將可以緩存的接口數(shù)據(jù)計(jì)算出一個(gè)MD5值作為版本號(hào)，然后直出在頁(yè)面上，同時(shí)在接口中返回這個(gè)版本號(hào)，這樣當(dāng)前端去加載是首先判斷版本號(hào)是否一致，以此來(lái)判斷是直接讀緩存還是從網(wǎng)絡(luò)請(qǐng)求資源。
- 強(qiáng)制webkit內(nèi)核渲染
很多國(guó)產(chǎn)瀏覽器都是雙內(nèi)核，例如360、QQ瀏覽器等，而它們都提供了強(qiáng)制使用Webkit內(nèi)核渲染的開啟方式，這樣可以讓用戶獲得更好的瀏覽體驗(yàn)。
<meta name="renderer" content="webkit" />
使用
Icon Font: Icon Font兼容性非常好，可以讓不同瀏覽器的用戶獲得一致的瀏覽體驗(yàn)，并且通過(guò)字體壓縮工具，壓縮后的字體文件也可以非常小，不會(huì)有太多的性能損耗。空閑時(shí)間自動(dòng)加載樓層及圖片
將樓層的加載操作放入一個(gè)隊(duì)列中，我們可以在用戶停止?jié)L動(dòng)操作3s后開始自動(dòng)加載這個(gè)隊(duì)列中的樓層，而當(dāng)用戶開始滾動(dòng)的時(shí)候清空這個(gè)加載隊(duì)列，停止?jié)L動(dòng)3秒后又重新開始加載。通過(guò)這樣處理可以合理利用用戶瀏覽的空閑時(shí)間來(lái)加載頁(yè)面，讓用戶感覺頁(yè)面加載更快。
var scrollTimer = null;
var isScrolling = false;
$(window).bind('scroll.loadFloor', function (e) {
isScrolling = true;
clearTimeout(autoLoadTimer);
clearTimeout(scrollTimer);
autoLoadingQueue = [];
resourceLoader && resourceLoader.pause();
scrollTimer = setTimeout(function () {
isScrolling = false;
if (pageConfig.idleTimeLoad) {
autoLoadTimer = setTimeout(autoLoad, 3000);
}
}, 200);
});
function autoLoad () {
if (!isScrolling) {
runFloorLoadQueue();
}
}
- 災(zāi)備策略
后端有一層兜底，前端也有一層服務(wù)，前端緩存也有一層。
- 后端： 去上游拿數(shù)據(jù)異常，則返回前端兜底數(shù)據(jù)
- 前端： 接口數(shù)據(jù)格式有誤，則主動(dòng)調(diào)用兜底接口來(lái)替代
- 前端： 將之前頁(yè)面緩存，接口錯(cuò)誤，則取緩存頁(yè)面
- 靜態(tài)資源預(yù)加載
在首頁(yè)預(yù)加載鏈接的活動(dòng)頁(yè)面
