網(wǎng)頁加載速度,是優(yōu)先于一切首先讓客戶感覺到的東西,網(wǎng)頁加載速度將極大影響用戶體驗,用戶期望且能夠接受的頁面加載時間在3秒以內(nèi)。尚武科技的網(wǎng)站建設(shè)的每一個網(wǎng)站都會做了大量優(yōu)化工作,啟用緩存的模式下把主要頁面的執(zhí)行時間控制在了0.1秒內(nèi)。對于網(wǎng)絡(luò)性能,要把優(yōu)化的重點放在網(wǎng)頁內(nèi)容加載本身。我們把常見的影響因素分硬件和軟件兩部分,硬件相關(guān)的有:
1、服務(wù)器負載的控制,以cpu、內(nèi)存和磁盤IO為主要參考參數(shù)。
2、域名解析和網(wǎng)絡(luò)傳輸速度,建議站長選擇穩(wěn)定的域名和網(wǎng)絡(luò)服務(wù)商,并根據(jù)網(wǎng)站實際需要保留足夠大網(wǎng)絡(luò)帶寬。
這方面就是客戶為什么選擇我們的尚武科技的主機的原因,更好地服務(wù)器質(zhì)量和更好的線路質(zhì)量是基礎(chǔ),更重要的一個指標就是單個服務(wù)器容納的網(wǎng)站數(shù)目,我們尚武科技的IDC服務(wù)器保證單個服務(wù)器的網(wǎng)站數(shù)目不高于50個,這在業(yè)內(nèi)也是一個很難實現(xiàn)的目標,但是客戶的用戶感受才是我們追求的。
軟件相關(guān)主要指前端頁面設(shè)計:
1、移動網(wǎng)站的頁面格式經(jīng)歷了從wml ->xhtml -> html5,目前以html5 + css3作為主流頁面設(shè)計規(guī)范。
2、圖片格式采用png/jpg/gif皆可,主要目的是保持清晰的情況下讓文件容量盡量小。手機的屏幕寬度描述通常分為像素寬度width和設(shè)備寬度device-width,比如iphone6的widh:750,device-width:375。通常網(wǎng)頁設(shè)計以device-width為基準,但是為了手機上圖片清晰,實際圖片長寬可以是css定義里面的2倍。
3、網(wǎng)頁中的小圖片或者圖標,建議使用icon font或者css sprites技術(shù),把多個圖片合并成一個文件。
4、網(wǎng)頁設(shè)計時一個頁面可能需要載入多個js和css,實際上線后建議多個同類文件合并,并且壓縮css和js文件。
5、web服務(wù)端啟用gzip壓縮輸出功能可以明顯提高加載速度。
說到這里網(wǎng)站打開速度慢,最大的問題還是在圖片的大小上面,
除了以上提到的,系統(tǒng)架構(gòu)及頁面優(yōu)化方法還涉及到很多技術(shù)細節(jié),另外還可以使用一些業(yè)績比較成熟的設(shè)計策略,比如按需加載、延時加載等、征對不同的網(wǎng)絡(luò)環(huán)境返回不同信息量的板式或者不同壓縮程度的圖片、漸進設(shè)計等等。尚武科技的主站所有的圖片都采用異步加載的方式得以實現(xiàn)。
隨著web交互越來越豐富,后續(xù)我們還會推動在用戶交互行為上的性能提升,給出交互性能的檢測工具,確保用戶交互的順暢。主要涉及到面向渲染引擎、JS解析引擎的一些運行時特點,比如避免頻繁觸發(fā)repaint和reflow、優(yōu)化dom操作策略、避免使用低效的API、選擇器優(yōu)化、避免內(nèi)存泄露,利用內(nèi)存緩存數(shù)據(jù),優(yōu)化循環(huán)或者遞歸算法降低復(fù)雜度等。