最近做了報名頁的第三期，就順手對該項目進行了一些優(yōu)化。先看h5報名頁優(yōu)化前后性能的對比吧：
。
優(yōu)化前首屏的秒出率大概是30%左右，優(yōu)化后的首屏秒出率大概是70%左右。ps:因為主要是對個人想法的一些驗證，所以沒并沒有使用客戶端的use304cache和龍哥做的service worker緩存。
項目背景
該頁面位于虎牙直播，虎牙助手，虎牙手游的活動中心中。由 運營同學(xué)在管理后臺配置所需要的表單字段（單選，多選，輸入框，多行文本框，上傳圖片等），生成對應(yīng)的報名表單。用戶填寫表單報名。該項目的優(yōu)化基于龍哥開發(fā)的腳手架。
其實加快首屏?xí)r間有兩個關(guān)鍵詞，一個是加載，一個是渲染。加快首屏?xí)r間就是要減少渲染首屏所需的文件數(shù)量和文件尺寸和盡早執(zhí)行首屏渲染的邏輯。下文所講述的方法也是圍繞著這兩點。
精簡代碼
emmmm ... 這個好像是句廢話，不過卻相當(dāng)重要，移動端的網(wǎng)絡(luò)條件較差，文件大小對加載速度還是十分有影響的。 尤其是css, 改造舊項目的時候，光冗余的css就刪除了將近300行。舉幾個栗子：
- 了解元素的默認屬性，比如塊級元素不用再設(shè)置 width:100%
- 設(shè)置了絕對定位，浮動的內(nèi)聯(lián)元素不用再設(shè)置 display:block
- 注意樣式的繼承關(guān)系，像 文本相關(guān)屬性(顏色, 字體種類，縮進，行高等）列表相關(guān)屬性（list-style）等可以繼承的屬性，在父級元素設(shè)置了之后，子元素就不用重復(fù)設(shè)置該屬性了
另外還包括簡化 dom結(jié)構(gòu)，減少元素間嵌套。
首屏css內(nèi)聯(lián)
移動端一個不可忽略的事實是 移動端的文件的緩存命中率比較低。css文件一般在head標簽里進行引入，外鏈的css文件會阻塞HTML頁面渲染，HTML頁面會被繼續(xù)下載，阻塞點后面的標簽會繼續(xù)被解析，img,link等會繼續(xù)發(fā)送請求獲取外部資源，但不會合成Rendering Tree或不會觸發(fā)頁面渲染，也不會執(zhí)行JavaScript代碼。因為使用fis3進行構(gòu)建，在css文件后面加上?__inline即可。
<link rel='stylesheet' href='index.scss?__inline'>
異步加載非首屏模塊
在本項目中， 非首屏的模塊我劃分出來了兩個。
一個是報名成功后的狀態(tài)展示。如下圖
一個是表單校驗邏輯 模塊。
上述兩個模塊均可以在渲染完表單之后再進行加載。這個時候有的同學(xué)說了，報名成功狀態(tài)異步加載我沒意見，但是表單檢驗?zāi)K你異步加載，萬一用戶在該模塊還未加載完成的時候就點擊提交開始進行校驗，那豈不是要報錯了嗎。
莫慌，那就把這部分用戶考慮進去，偽代碼如下：
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的一些新特性的進行針對性的polyfill。
- 延遲加載。 對性能上報js做了延遲加載的處理
- 上了https。
- 在優(yōu)化本項目的時候，發(fā)現(xiàn)由客戶端同學(xué)維護的js sdk并沒有做gzip壓縮。 讓運維同學(xué)幫忙處理之后，js sdk的大小由17kb減少至了6kb。
其實，還可以有其他方面可以做，等下次報名頁優(yōu)化的時候再做吧~：
- 首屏關(guān)鍵js內(nèi)聯(lián)
這個我們要對現(xiàn)有的js代碼進行拆分，使得拆分后首屏的js只包括如下三個部分的代碼：
請求相關(guān)，渲染相關(guān)，控制非首屏模塊加載邏輯。 - node中間層
理論上也是可行的。在前端這邊把請求相關(guān)和渲染相關(guān)的js單獨拎出來。在node 這邊使用node試用 ajax庫和模板引擎進行替換，拼接好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è)施的完備，才能更好的對項目進行優(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/
