移動端性能優(yōu)化(4)

腳本類
盡量使用id選擇器
選擇頁面DOM元素時盡量使用id選擇器斑响,因為id選擇器速度最快。

合理緩存DOM對象
對于需要重復(fù)使用的DOM對象畸颅,要優(yōu)先設(shè)置緩存變量盟猖,避免每次使用時都要從整個DOM樹中重新查找讨衣。

**// 不推薦**
$('#mod .active').remove('active');
$('#mod .not-active').addClass('active');

**// 推薦**
let $mod = $('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');

頁面元素盡量使用事件代理,避免直接事件綁定
使用事件代理可以避免對每個元素都進行綁定式镐,并且可以避免出現(xiàn)內(nèi)存泄露及需要動態(tài)添加元素的事件綁定問題反镇,所以盡量不要直接使用事件綁定。

// 不推薦
$('.btn').on('click', function(e){
    console.log(this);
});

// 推薦
$('body').on('click', '.btn', function(e){
    console.log(this);
});

使用touchstart代替click
由于移動端屏幕的設(shè)計娘汞,touchstart事件和click事件觸發(fā)時間之間存在300毫秒的延時歹茶,所以在頁面中沒有實現(xiàn)touchmove滾動處理的情況下,可以使用touchstart事件來代替元素的click事件,加快頁面點擊的響應(yīng)速度惊豺,提高用戶體驗燎孟。但同時我們也要注意頁面重疊元素touch動作的點擊穿透問題。扮叨、

// 不推薦
$('body').on('click', '.btn', function(e){
    console.log(this);
});

// 推薦
$('body').on('touchstart', '.btn', function(e){
    console.log(this);
});

避免touchmove缤弦、scroll連續(xù)事件處理
需要對touchmove、scroll這類可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流彻磁,例如設(shè)置每隔16ms(60幀的幀間隔為16.7ms,因此可以合理地設(shè)置為16ms)才進行一次事件處理狸捅,避免頻繁的事件調(diào)用導(dǎo)致移動端頁面卡頓衷蜓。

// 不推薦
$('.scroller').on('touchmove', '.btn', function(e){
    console.log(this);
});

// 推薦
$('.scroller').on('touchmove', '.btn', function(e){
    let self = this;
    setTimeout(function(){
        console.log(self);
    }, 16);
});

避免使用eval、with尘喝,使用join代替連接符+磁浇,推薦使用ECMAScript 6的字符串模板
這些都是一些基礎(chǔ)的安全腳本編寫問題,盡可能使用較高效率的特性來完成這些操作朽褪,避免不規(guī)范或不安全的寫法置吓。

盡量使用ECMAScript 6+的特性來編程
ECMAScript 6+一定程度上更加安全高效,而且部分特性執(zhí)行速度更快缔赠,也是未來規(guī)范的需要衍锚,所以推薦使用ECMAScript 6+的新特性來完成后面的開發(fā)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嗤堰,一起剝皮案震驚了整個濱河市戴质,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌踢匣,老刑警劉巖告匠,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異离唬,居然都是意外死亡后专,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門输莺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戚哎,“玉大人,你說我怎么就攤上這事模闲〗ㄌ保” “怎么了?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵尸折,是天一觀的道長啰脚。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么橄浓? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任粒梦,我火速辦了婚禮,結(jié)果婚禮上荸实,老公的妹妹穿的比我還像新娘匀们。我一直安慰自己,他們只是感情好准给,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布泄朴。 她就那樣靜靜地躺著,像睡著了一般露氮。 火紅的嫁衣襯著肌膚如雪祖灰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天畔规,我揣著相機與錄音局扶,去河邊找鬼。 笑死叁扫,一個胖子當著我的面吹牛三妈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播莫绣,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼畴蒲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了兔综?” 一聲冷哼從身側(cè)響起饿凛,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎软驰,沒想到半個月后涧窒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡锭亏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年纠吴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片慧瘤。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡戴已,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锅减,到底是詐尸還是另有隱情糖儡,我是刑警寧澤,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布怔匣,位于F島的核電站握联,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜金闽,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一纯露、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧代芜,春花似錦埠褪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嫡秕,卻和暖如春玉工,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背淘菩。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留屠升,地道東北人潮改。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像腹暖,于是被迫代替她去往敵國和親汇在。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 腳本類 盡量使用id選擇器 選擇頁面DOM元素時盡量使用id選擇器脏答,因為id選擇器速度最快糕殉。 合理緩存DOM對象 ...
    O8閱讀 373評論 0 0
  • 一、網(wǎng)絡(luò)加載類 1.首屏數(shù)據(jù)請求提前殖告,避免JavaScript文件加載后才請求數(shù)據(jù)2.首屏加載和按需加載阿蝶,非首屏內(nèi)...
    will666閱讀 442評論 0 1
  • 曾經(jīng)和你吃路邊攤的姑娘,為什么沒和你走到最后黄绩? 朋友分手了羡洁,我不知道他們之間交往的那些細節(jié),但是我在想爽丹,一...
    果兒果果兒閱讀 213評論 0 1
  • 文|孤十二 前幾天在琳瑯滿目的書店不知所措的時候粤蝎,想起了前一段時間朋友極力好評和推薦的東野圭吾的書籍真仲。 當...
    孤十二閱讀 450評論 0 0
  • 1 晚上做飯的時候,小寶推開門漏出了小腦袋說:“媽媽初澎,我可以幫你做什么呢秸应?”。 “哇,寶貝想幫媽媽做事了呀灸眼?哪你想...
    我們皆好閱讀 134評論 2 5