當(dāng)前可視化的頁(yè)面優(yōu)先加載完成，即在可見的屏幕范圍內(nèi)，內(nèi)容應(yīng)該毫秒時(shí)間段內(nèi)完全展現(xiàn)。

Lazyload，即延遲加載

滾屏加載是一種常見的無刷新動(dòng)態(tài)加載數(shù)據(jù)的方案，通常用在列表形式數(shù)據(jù)展示中。預(yù)先加載10條數(shù)據(jù)，也就只需要渲染這10條數(shù)據(jù)，下拉滾屏的時(shí)候，再去獲得下面的10條數(shù)據(jù)。

Media Query（響應(yīng)式加載）

響應(yīng)式設(shè)計(jì)是現(xiàn)在網(wǎng)站設(shè)計(jì)的一個(gè)流行趨勢(shì)，隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，這項(xiàng)技術(shù)也越來越受到重視。通過這項(xiàng)技術(shù)，我們能夠方便地控制資源的加載與顯示，例如說在分辨率不同的手機(jī)上，分別使用不同的css，加載不同大小的圖片資源。?

異步加載，防止第三方資源的使用影響到頁(yè)面本身的功能。

第三方資源有的時(shí)候不可控，比如說頁(yè)面統(tǒng)計(jì)、地圖顯示、分享組件等，這些第三方資源使用的時(shí)候要慎重選擇，充分考察它們對(duì)于性能的影響，使用異步加載的方式進(jìn)行，防止第三方資源的使用影響到頁(yè)面本身的功能。

一個(gè)頁(yè)面訪問，切忌頻繁地跳轉(zhuǎn)。

圖片的使用

顯示效果較好的圖片格式中，有webp、jpg和png24/32這幾種常見的圖片格式。一般來說，webp的圖片最小，但在iOS或者android4.0以下的系統(tǒng)中可能會(huì)有兼容性問題需要解決。

Jpg是我們最常使用的方案，大小適中，解碼速度快，兼容性問題也基本不存在，是我們?cè)贖5的應(yīng)用中使用起來性價(jià)比最高的方案。

Png24或png32，一般來說，顯示效果肯定會(huì)比jpg更好，但是實(shí)際上人眼很難感知出來，所以在H5應(yīng)用中要避免這種格式的大圖片。

對(duì)于少量的圖片，推薦用智圖或者tinypng等工具來幫助自己選擇合適的大小、格式。

像素控制

在H5應(yīng)用中，圖片的像素要嚴(yán)格控制，一般來說不建議寬度超過640px。

小圖片合并

在html網(wǎng)頁(yè)中，如果有多個(gè)小圖片需要加載，不妨試試CSS Sprites方案，尤其是一些基本不變，大小差不多的操作類型圖標(biāo)。

避免DataURL

DataURL是用Base64的方式，將圖片變成一串文本編碼放入代碼的方式。這種方式有好處，因?yàn)樗梢詼p少一次http交互的請(qǐng)求，對(duì)于一些體積特別小的圖片，或者是動(dòng)態(tài)生成的圖片可以考慮使用。但在H5應(yīng)用中，一般情況下，我們都是需要避免DataURL的，因?yàn)樗臄?shù)據(jù)體積通常比二進(jìn)制圖片的格式大1/3，而且它不會(huì)被瀏覽器緩存，每次頁(yè)面刷新都需要重新加載這部分?jǐn)?shù)據(jù)。

使用圖片的替代(css3, svg, iconfont)

CSS3和svg可以更好地使用GPU進(jìn)行渲染加速，而且會(huì)避免增加圖片資源導(dǎo)致的http請(qǐng)求增加。例如一些div的圓角效果，就完全可以用用css來實(shí)現(xiàn)。

Iconfont，可以認(rèn)為是一種矢量類型的操作字體。如果頁(yè)面中有較多的操作圖標(biāo)，可以考慮使用iconfont來替代圖片資源。

域名/服務(wù)端部署

Gzip

服務(wù)端要開啟Gzip壓縮。

資源緩存，長(zhǎng)cache

合理設(shè)置資源的過期時(shí)間，尤其對(duì)一些靜態(tài)的不需要改變的資源，將其緩存過期時(shí)間設(shè)置得長(zhǎng)一些。

分域名部署(靜態(tài)資源域名)

將動(dòng)態(tài)資源和靜態(tài)資源放置在不同的域名下，例如圖片，放在自己特定的域名下。這樣的好處是，靜態(tài)資源請(qǐng)求時(shí)，不會(huì)帶上動(dòng)態(tài)域名中所設(shè)置的cookie頭信息，從而減少http請(qǐng)求的大小。

減少Cookie

盡量減少Cookie頭信息的大小，因?yàn)檫@部分?jǐn)?shù)據(jù)使用的是上行流量，上行帶寬更小，所以傳輸速度更慢，因此要盡量精簡(jiǎn)其大小。

CDN加速

部署CDN服務(wù)器，或者使用第三方的CDN加速服務(wù)，優(yōu)化不同地域接入網(wǎng)站的帶寬速度。

代碼資源

Javascript, CSS合并

盡量將所有的js和css合并，減少資源請(qǐng)求的次數(shù)。

外聯(lián)使用js, css

外聯(lián)使用js和css，這樣可以有效地利用緩存，避免html頁(yè)面刷新后重新加載這部分代碼。

壓縮html, js, css

壓縮代碼，尤其是js和css資源，壓縮后的大小可以降低至原來的1/3以下，有效節(jié)約流量。

資源的版本更新

庫(kù)js、css通常不會(huì)更新，但是我們的業(yè)務(wù)js和css可能會(huì)有更新，如果命中瀏覽器緩存，可能會(huì)讓一些新的特性不能及時(shí)展現(xiàn)，甚至可能導(dǎo)致邏輯上的沖突。

因此對(duì)于這些js、css的資源引入，最好用版本號(hào)或者更新時(shí)間來作為后綴，這樣的話，后綴不變，命中緩存；后綴改變，瀏覽器自動(dòng)更新最新的代碼。

Css位置

CSS要放到html代碼的開頭的head標(biāo)簽結(jié)束前。如果網(wǎng)頁(yè)是動(dòng)態(tài)生成的，那么在head代碼完成后可以強(qiáng)制輸出（例如php的flush()操作），這樣的話，瀏覽器就會(huì)更快地解析出來head中的內(nèi)容，開始下載css文件資源。

Js位置

Js放到前，這樣的話，js的加載不會(huì)影響初始頁(yè)面的渲染。

代碼規(guī)范

避免空src

圖片設(shè)置為空的src地址，在某些瀏覽器中可能會(huì)導(dǎo)致增加一個(gè)無效的http請(qǐng)求，因此要避免。

避免css表達(dá)式

可能會(huì)讓頁(yè)面多次執(zhí)行計(jì)算，造成卡頓等性能問題。

避免空css規(guī)則

降低css渲染計(jì)算的成本

避免直接設(shè)置元素style

直接設(shè)置style屬性，一方面在html代碼中不利于緩存，另一方面也不利于樣式的復(fù)用，因此要避免，通過指定id或者class的方式，在css代碼塊中進(jìn)行樣式調(diào)整。

服務(wù)端接口

接口合并

如果頁(yè)面需要請(qǐng)求兩部分以上的數(shù)據(jù)接口，建議將其合并，否則會(huì)增加一次http請(qǐng)求。

減少接口數(shù)據(jù)量

有的時(shí)候，服務(wù)端會(huì)把一些無關(guān)緊要的數(shù)據(jù)返回回來，尤其是類似于更新時(shí)間、狀態(tài)等信息，如果在客戶端不影響內(nèi)容的邏輯展示，不妨在接口返回的數(shù)據(jù)中直接去掉這些內(nèi)容。

緩存

緩存接口數(shù)據(jù)，在一些數(shù)據(jù)新舊敏感性不高的場(chǎng)景下很有作用，在非首次加載數(shù)據(jù)時(shí)候優(yōu)先使用上次請(qǐng)求來的緩存數(shù)據(jù)，可以讓頁(yè)面更加快速地渲染出來，而不用等待一個(gè)新的http請(qǐng)求結(jié)束之后再渲染。這一點(diǎn)我們?cè)诤竺孢€會(huì)再次提及。

★其他一些建議

合理使用css

正確使用Display屬性 Display屬性會(huì)影響頁(yè)面的渲染，因此請(qǐng)合理使用

display:inline后不應(yīng)該再使用width、height、margin、padding以及float

display:inline-block后不應(yīng)該再使用float

display:block后不應(yīng)該再使用vertical-align

display:table-*后不應(yīng)該再使用margin或者float

不濫用float

不聲明過多的font-size

值為0時(shí)不需要單位

標(biāo)準(zhǔn)化各種瀏覽器前綴

無前綴應(yīng)放在最后

CSS動(dòng)畫只用 （-webkit- 無前綴）兩種即可

其它前綴為 -webkit- -moz- -ms- 無前綴 四種，（-o-Opera瀏覽器改用blink內(nèi)核，所以淘汰）

選擇器

避免讓選擇符看起來像是正則表達(dá)式。高級(jí)選擇器不容易讀懂，執(zhí)行耗時(shí)也長(zhǎng)

盡量使用ID選擇器

盡量使用css3動(dòng)畫

資源加載

使用srcset

首次加載不超過1024KB（或者可以說是越小越好）

html和js

減少重繪和回流

緩存dom選擇和計(jì)算

緩存列表.length

盡量使用事件代理,避免批量綁定事件

使用touchstart，touchend代替click

Html使用viewport

減少dom節(jié)點(diǎn)

合理使用requestAnimationFrame動(dòng)畫代替setTimeOut

適當(dāng)使用Canvas動(dòng)畫

TouchMove, Scroll事件會(huì)導(dǎo)致多次渲染

單頁(yè)應(yīng)用

釘釘?shù)膶徟?yīng)用，使用的就是單頁(yè)架構(gòu)。在這種架構(gòu)下，基本不存在頁(yè)面跳轉(zhuǎn)的等待時(shí)間，只需要執(zhí)行js邏輯觸發(fā)界面變化，最多進(jìn)行一次網(wǎng)絡(luò)請(qǐng)求，獲得服務(wù)端數(shù)據(jù)，其他資源均不需要再次請(qǐng)求。

資源離線

再快的網(wǎng)絡(luò)交互，畢竟也是跨越了數(shù)個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)，因此一張圖片、一個(gè)js，優(yōu)化到了極致，也照樣可能需要幾百毫秒的時(shí)間來獲得。因此想要打破這個(gè)極限，就要使用資源離線的策略。

在釘釘?shù)奈?yīng)用中，就使用了這樣的一個(gè)“離線包”策略。一些固定的圖片、js庫(kù)等，被打包放入app中（或根據(jù)需要，在app啟動(dòng)的時(shí)候進(jìn)行下載更新）。

微應(yīng)用中，網(wǎng)頁(yè)代碼里面加載網(wǎng)絡(luò)資源的需求，就變成了直接加載本地文件，速度自然得到再一次巨大的提升。