最近做了報名頁的第三期畏腕，就順手對該項目進(jìn)行了一些優(yōu)化乘凸。先看h5報名頁優(yōu)化前后性能的對比吧：
鸥拧。
優(yōu)化前首屏的秒出率大概是30%左右党远，優(yōu)化后的首屏秒出率大概是70%左右。ps:因為主要是對個人想法的一些驗證富弦，所以沒并沒有使用客戶端的use304cache和龍哥做的service worker緩存沟娱。
項目背景
該頁面位于虎牙直播，虎牙助手腕柜，虎牙手游的活動中心中济似。由 運(yùn)營同學(xué)在管理后臺配置所需要的表單字段（單選，多選盏缤，輸入框砰蠢，多行文本框，上傳圖片等）唉铜，生成對應(yīng)的報名表單台舱。用戶填寫表單報名。該項目的優(yōu)化基于龍哥開發(fā)的腳手架潭流。
其實加快首屏?xí)r間有兩個關(guān)鍵詞竞惋，一個是加載，一個是渲染灰嫉。加快首屏?xí)r間就是要減少渲染首屏所需的文件數(shù)量和文件尺寸和盡早執(zhí)行首屏渲染的邏輯拆宛。下文所講述的方法也是圍繞著這兩點(diǎn)。
精簡代碼
emmmm ... 這個好像是句廢話讼撒，不過卻相當(dāng)重要胰挑，移動端的網(wǎng)絡(luò)條件較差蔓罚，文件大小對加載速度還是十分有影響的。 尤其是css, 改造舊項目的時候瞻颂，光冗余的css就刪除了將近300行豺谈。舉幾個栗子：
- 了解元素的默認(rèn)屬性，比如塊級元素不用再設(shè)置 width:100%
- 設(shè)置了絕對定位贡这，浮動的內(nèi)聯(lián)元素不用再設(shè)置 display:block
- 注意樣式的繼承關(guān)系茬末，像 文本相關(guān)屬性(顏色, 字體種類，縮進(jìn)盖矫，行高等）列表相關(guān)屬性（list-style）等可以繼承的屬性丽惭，在父級元素設(shè)置了之后，子元素就不用重復(fù)設(shè)置該屬性了
另外還包括簡化 dom結(jié)構(gòu)辈双，減少元素間嵌套责掏。
首屏css內(nèi)聯(lián)
移動端一個不可忽略的事實是 移動端的文件的緩存命中率比較低。css文件一般在head標(biāo)簽里進(jìn)行引入湃望，外鏈的css文件會阻塞HTML頁面渲染换衬，HTML頁面會被繼續(xù)下載，阻塞點(diǎn)后面的標(biāo)簽會繼續(xù)被解析证芭，img,link等會繼續(xù)發(fā)送請求獲取外部資源瞳浦，但不會合成Rendering Tree或不會觸發(fā)頁面渲染，也不會執(zhí)行JavaScript代碼废士。因為使用fis3進(jìn)行構(gòu)建叫潦，在css文件后面加上?__inline即可。
<link rel='stylesheet' href='index.scss?__inline'>
異步加載非首屏模塊
在本項目中官硝， 非首屏的模塊我劃分出來了兩個矗蕊。
一個是報名成功后的狀態(tài)展示。如下圖
一個是表單校驗邏輯 模塊氢架。
上述兩個模塊均可以在渲染完表單之后再進(jìn)行加載拔妥。這個時候有的同學(xué)說了，報名成功狀態(tài)異步加載我沒意見达箍，但是表單檢驗?zāi)K你異步加載没龙，萬一用戶在該模塊還未加載完成的時候就點(diǎn)擊提交開始進(jìn)行校驗，那豈不是要報錯了嗎缎玫。
莫慌硬纤，那就把這部分用戶考慮進(jìn)去，偽代碼如下：
var valiator;
function loadValiatorMod(cb) {
require.async('valiator.js', (mod)=> {
valiator = mod;
cb && cb();
})
}
loadValiatorMod();
$saveInfo.on('click', ()=> {
if(!valiator) {
loadValiatorMod(()=>{
valiator.start();
// 提交表單
})
}else{
valiator.start();
// 提交表單
}
})
一開始就讓
按需加載
- 如上所說赃磨，該項目要同時適配虎牙直播和助手手游APP筝家，那么可以去根據(jù)不同的平臺去加載一些特性代碼。偽代碼如下：
var isAnchorApp = util.getUrlParam('isAnchorApp') === 1; // 是否是開播app
if(isAnchorApp ){
loadJs('huyasdk.js', function() {
writeCookie();
})
}else{
loadJs('anchorApp.js');
}
- 報名表中可能有上傳圖片的操作邻辉，上傳圖片的需要之前升澤寫的一個插件溪王，但是不是每一個報名表所必須的腮鞍，當(dāng)有上傳圖片的表單再去加載這個插件
renderFirstScreen(); // 在渲染邏輯執(zhí)行完之后再判斷是否加載上傳組件
var needUploadImg = $('.upload-img').length > 0;
needUploadImg && loadJs('upload.js');
其他常規(guī)操作(不具備通用性)
- jquery版本由1.8版本升級到2.x版本，包體積減小
- 去除引入es6的polyfill文件莹菱，龍哥幫忙改造了構(gòu)建工具移国，可以對es6的一些新特性的進(jìn)行針對性的polyfill。
- 延遲加載道伟。 對性能上報js做了延遲加載的處理
- 上了https迹缀。
- 在優(yōu)化本項目的時候，發(fā)現(xiàn)由客戶端同學(xué)維護(hù)的js sdk并沒有做gzip壓縮蜜徽。 讓運(yùn)維同學(xué)幫忙處理之后祝懂，js sdk的大小由17kb減少至了6kb。
其實拘鞋，還可以有其他方面可以做砚蓬，等下次報名頁優(yōu)化的時候再做吧~：
- 首屏關(guān)鍵js內(nèi)聯(lián)
這個我們要對現(xiàn)有的js代碼進(jìn)行拆分，使得拆分后首屏的js只包括如下三個部分的代碼：
請求相關(guān)盆色，渲染相關(guān)灰蛙，控制非首屏模塊加載邏輯。 - node中間層
理論上也是可行的傅事。在前端這邊把請求相關(guān)和渲染相關(guān)的js單獨(dú)拎出來。在node 這邊使用node試用 ajax庫和模板引擎進(jìn)行替換峡扩，拼接好html和內(nèi)聯(lián)的css和 請求蹭越，渲染相關(guān)的js后，一起返回教届。 - 公用庫替換
縱觀現(xiàn)在組里的h5項目响鹃，復(fù)雜一些的項目還是比較少的。依據(jù)之前的經(jīng)驗案训，其實我們使用jquery/zepto的話买置，使用頻率最高的功能是 ajax, selector, event 這三個。 其實可以把這些模塊給封裝在一起强霎，而不是全部使用忿项。
當(dāng)然，紙上得來終覺淺城舞，上述的幾個方案還是要自己去試轩触，有數(shù)據(jù)支撐后才能證明方案的正確性和可實施性。
總結(jié)
優(yōu)化之后發(fā)現(xiàn)其實優(yōu)化手段沒有那么復(fù)雜家夺，再簡單的項目也有優(yōu)化空間脱柱，得益于構(gòu)建工具，性能上報等這些基礎(chǔ)設(shè)施的完備拉馋，才能更好的對項目進(jìn)行優(yōu)化榨为。下篇文章以上電視主播設(shè)置h5聊聊單頁面應(yīng)用的優(yōu)化~
參考文章： http://www.cnblogs.com/fsjohnhuang/p/6739064.html
www.alloyteam.com/2015/10/optimization-of-alloyteam-series-the-first-screen-time/
