国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

2017前端性能優(yōu)化清單

verano / 3582人閱讀

摘要:性能最好具有可量化可監(jiān)測(cè)以及可改動(dòng)的特性。下文是一份年的前端性能優(yōu)化清單,闡述了作為前端開發(fā)人員,為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。地圖設(shè)計(jì)的決定違背了性能理念,所以他在這份清單內(nèi)的順序有待考慮。

2017前端性能優(yōu)化清單

你開始使用漸進(jìn)啟動(dòng)了么?是不是已經(jīng)使用過React和Angular中tree-shakingcode-splitting兩個(gè)工具?有沒有用過Brotli、Zofli和HPACK這幾種壓縮技術(shù),或者OCSP協(xié)議(在線證書狀態(tài)協(xié)議)?知不知道資源提醒,客戶端提醒和CSS containment一類的技術(shù)?了解IPv6,HTTP/2和Service Worker這些協(xié)議嗎?

回想那些年,大家往往在完成了產(chǎn)品之后才會(huì)去考慮性能。常常把與性能相關(guān)的事情拖到項(xiàng)目的最后來(lái)做,所做的也不過是對(duì)服務(wù)器上的config文件進(jìn)行一些微調(diào)、串聯(lián)、優(yōu)化以及部分特別小的調(diào)整。而現(xiàn)在,技術(shù)已經(jīng)有了翻天覆地的變化。

一個(gè)項(xiàng)目的性能是非常重要的,除了要在技術(shù)層面上注意,更要在項(xiàng)目的設(shè)計(jì)之初就開始考慮,這樣才可以使性能的各種隱形需求完美的整合到項(xiàng)目中,隨著項(xiàng)目一起推進(jìn)。性能最好具有可量化、可監(jiān)測(cè)以及可改動(dòng)的特性。網(wǎng)絡(luò)越來(lái)越復(fù)雜,對(duì)網(wǎng)絡(luò)的監(jiān)控也變得越來(lái)越難,因?yàn)楸O(jiān)測(cè)的過程會(huì)受到包括設(shè)備、瀏覽器、協(xié)議、網(wǎng)絡(luò)類型以及其他技術(shù)(CDN,ISP,緩存,代理服務(wù)器,防火墻,負(fù)載均衡器和服務(wù)器對(duì)性能的影響都很大)的很大影響。

下文是一份2017年的前端性能優(yōu)化清單,闡述了作為前端開發(fā)人員,為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。

(你也可以下載checklist PDF或者check in Apple Pages。優(yōu)化萬(wàn)歲!)

正文

微優(yōu)化是保持性能最好的辦法,但是又不能有太過明確的優(yōu)化目標(biāo),因?yàn)檫^于明確的目標(biāo)會(huì)影響在項(xiàng)目中做的每一個(gè)決定。以下是一些不同的模型,請(qǐng)按照自己舒服的順序閱讀。

請(qǐng)準(zhǔn)備好然后定下目標(biāo)! 1. 比你最強(qiáng)的競(jìng)爭(zhēng)對(duì)手快20%

根據(jù)一個(gè)心理學(xué)研究,你的網(wǎng)站最少在速度上比別人快20%,才能讓用戶感覺到你的網(wǎng)站比別人的更快。這個(gè)速度說(shuō)的不是整個(gè)頁(yè)面的加載時(shí)間,而是開始加載渲染的時(shí)間,首次有效渲染時(shí)間(例如頁(yè)面需要加載主要內(nèi)容的時(shí)間),或者交互時(shí)間(指的是頁(yè)面或者應(yīng)用中主要的頁(yè)面加載完成,并主備好與用戶進(jìn)行交互的時(shí)間)。

在Moto G(一個(gè)中端三星設(shè)備)和Nexus 4(比較主流的設(shè)備)上衡量開始渲染時(shí)間(用WebPagetest)以及首頁(yè)有效渲染時(shí)間(用Lighthouse),最好是在一個(gè)開放的實(shí)驗(yàn)室中,使用規(guī)范的3G,4G和Wi-Fi鏈接。


Lighthouse,一個(gè)Google開發(fā)的新的性能審查工具

你可以通過你的分析報(bào)告看看你的用戶處在哪個(gè)階段,選取其中前90%的用戶體驗(yàn)來(lái)做測(cè)試。接著收集數(shù)據(jù),建一個(gè)表格,篩去20%的數(shù)據(jù)并預(yù)設(shè)一個(gè)目標(biāo)(如:性能預(yù)算)。現(xiàn)在你可以將上述兩個(gè)值進(jìn)行對(duì)比檢測(cè)。如果你始終維持著你的目標(biāo)并且通過一點(diǎn)一點(diǎn)改變腳本去加快交互時(shí)間,那么上述方法就是合理可行的。


由Brad Frost創(chuàng)建的性能分析

和你的同事分享這份清單。首先要確保團(tuán)隊(duì)中的每個(gè)人都熟悉這份清單。項(xiàng)目中每一個(gè)決定都會(huì)影響性能,如果前端工程師們都在積極的參與項(xiàng)目概念,UX以及視覺設(shè)計(jì)的決定,這將會(huì)給整個(gè)項(xiàng)目帶來(lái)巨大收益。地圖設(shè)計(jì)的決定違背了性能理念,所以他在這份清單內(nèi)的順序有待考慮。

2. 反應(yīng)時(shí)間為100毫秒,幀數(shù)是每秒60幀

RAIL性能模型會(huì)為你提供一個(gè)優(yōu)秀的目標(biāo),既盡最大的努力在用戶初始操作后的100毫秒內(nèi)提供反饋。為了達(dá)到這個(gè)目標(biāo),頁(yè)面需要放棄權(quán)限,并將權(quán)限在50毫秒內(nèi)交回給主線程。對(duì)于像動(dòng)畫一樣的高壓點(diǎn),最好的方法就是什么都不做,因?yàn)槟阌肋h(yuǎn)無(wú)法達(dá)到最小絕對(duì)值。
同理,動(dòng)畫的每一幀都需要在16毫秒內(nèi)完成,這樣才能保證每秒60幀(一秒/60=16.6毫秒),如果可以的話最好能在10毫秒內(nèi)完成。因?yàn)闉g覽器需要一定的時(shí)間去在屏幕上渲染新的幀,而且你的代碼需要在16.6毫秒內(nèi)完成執(zhí)行。要注意,上述目標(biāo)應(yīng)用于衡量項(xiàng)目的運(yùn)行性能,而非加載性能。

3. 首次有效渲染時(shí)間要低于1.25秒,速度指數(shù)要低于1000

縱使這個(gè)目標(biāo)實(shí)現(xiàn)起來(lái)非常困難,你的最終目標(biāo)也應(yīng)該是讓開始渲染時(shí)間低于1秒且速度指數(shù)低于1000(在網(wǎng)速快的地方)。對(duì)于首次有效渲染時(shí)間,上限最好是1250毫秒。對(duì)于移動(dòng)端,3G下移動(dòng)設(shè)備首次渲染時(shí)間低于3秒都是可以接受的。稍微高一點(diǎn)也沒關(guān)系,但千萬(wàn)別高太多。

定義你所需要的環(huán)境 4. 選擇和安裝你的開發(fā)環(huán)境

不要過多的關(guān)注當(dāng)下最流行的工具,堅(jiān)持選擇適合自己開發(fā)環(huán)境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者組合起來(lái)的工具。只要這個(gè)工具運(yùn)行的速度夠快,而且沒有給你的維護(hù)帶來(lái)太大問題,這就夠了。

5. 漸進(jìn)增強(qiáng)(progressive enhancement)

在構(gòu)建前端結(jié)構(gòu)的時(shí)候,應(yīng)始終將漸進(jìn)增強(qiáng)作為你的指導(dǎo)原則。首先設(shè)計(jì)并且構(gòu)建核心體驗(yàn),隨后再完善那些為高性能瀏覽器設(shè)計(jì)的高級(jí)特性的相關(guān)體驗(yàn),創(chuàng)建彈性體驗(yàn)。如果你的網(wǎng)頁(yè)可以在使用低速網(wǎng)絡(luò)、老舊顯示器的很慢的電腦上運(yùn)行飛快,那么在光纖高配電腦上它只會(huì)運(yùn)行的更快。

6. Angular,React,Ember等

最好使用那些支持服務(wù)器端渲染的框架。在使用某個(gè)框架錢,先記錄服務(wù)器和客戶端的引導(dǎo)時(shí)間,記得要在移動(dòng)設(shè)備上測(cè)試,最終才能使用某個(gè)框架(因?yàn)槊鎸?duì)的是性能問題,如果在使用某個(gè)框架后,再做修改是非常困難的)。如果你使用JavaScript框架,要保證你的選擇是被廣泛使用并且經(jīng)過考驗(yàn)的。不同框架對(duì)性能有著不同程度的影響,同時(shí)對(duì)應(yīng)著不同的優(yōu)化策略,所以最好可以清楚的了解你要用的框架的每個(gè)方面。在寫網(wǎng)頁(yè)應(yīng)用時(shí)可以先看看PRPL pattern和application shell architecture。


本圖描述了PRPL pattern


上圖是application shell,是一個(gè)小型的、由HTML,CSS和JavaScript構(gòu)成的用戶界面

7. AMP還是Instant Articles?

根據(jù)你整體組織結(jié)構(gòu)的優(yōu)先順序和策略,你可以考慮使用Google的AMP或Facebook的Instant Articles。要知道沒有這些你也可以達(dá)到不錯(cuò)的性能,但是AMP可以提供一個(gè)性能不錯(cuò)的免費(fèi)的內(nèi)容分發(fā)網(wǎng)絡(luò)框架(CDN),Instant Articles可以在Facebook上促進(jìn)你的性能。你也可以建立progressive web AMP。

8. 選擇適合你的CDN

根據(jù)你的動(dòng)態(tài)數(shù)據(jù)量,可以將一部分內(nèi)容外包給靜態(tài)網(wǎng)站生成工具,將它置于CDN上,從中生成一個(gè)靜態(tài)版本,從而避免那些數(shù)據(jù)庫(kù)的請(qǐng)求。也可以選擇基于CDN的靜態(tài)主機(jī)平臺(tái),通過交互組件豐富你的頁(yè)面(JAMStack)。

注意CDN是否可以很好的處理(或分流)動(dòng)態(tài)內(nèi)容。沒必要單純的將你的CDN限制為靜態(tài)。反復(fù)檢查CDN是否執(zhí)行了內(nèi)容的壓縮和轉(zhuǎn)化,檢查智能HTTP/2傳輸和緩存服務(wù)器(ESI),注意哪些靜態(tài)或動(dòng)態(tài)的部分處在CDN的邊緣(最接近用戶的服務(wù)器)。

開始優(yōu)化 9. 直接確定優(yōu)化順序

首先應(yīng)該弄清楚你想解決的問題是什么。檢查一遍你所有的文件(JavaScript,圖片,字體,第三方script文件以及頁(yè)面中重要的模塊,例如輪播,復(fù)雜信息圖標(biāo)和多媒體內(nèi)容),并將他們分類。
列一個(gè)表格。明確瀏覽器上應(yīng)該有的基礎(chǔ)核心內(nèi)容,哪些部分屬于為高性能瀏覽器設(shè)計(jì)的升級(jí)體驗(yàn),哪些是附加內(nèi)容(那些不必要或者可以被延時(shí)加載的部分,例如字體,不必要的樣式,輪播組件,播放器,社交網(wǎng)站入口,很大的圖片)。更詳細(xì)的細(xì)節(jié)請(qǐng)參考文章”Improving Smashing Magazine’s Performance‘’。

10. 使用符合標(biāo)準(zhǔn)的技術(shù)

使用符合標(biāo)準(zhǔn)的技術(shù)向過時(shí)的瀏覽器提供核心體驗(yàn),向老式瀏覽器提供增強(qiáng)體驗(yàn), 同時(shí)對(duì)所加載的內(nèi)容要有嚴(yán)格的把控。即首要加載核心體驗(yàn)部分,將增強(qiáng)部分放在DomContentLoaded,把額外內(nèi)容發(fā)在load事件中。

以前我們可以通過瀏覽器的版本推斷出設(shè)備的性能,但現(xiàn)在我們已經(jīng)無(wú)法推測(cè)了。因?yàn)楝F(xiàn)在市場(chǎng)上很多廉價(jià)的安卓手機(jī)都不考慮內(nèi)存限制和CPU性能,直接使用高版本的Chrome瀏覽器。一定要注意,在我們沒有其他選擇的時(shí)候,我們選擇的技術(shù)同時(shí)可能成為我們的限制。

11. 考慮微優(yōu)化和漸進(jìn)啟動(dòng)

在一些應(yīng)用中,可以在渲染頁(yè)面前先初始化應(yīng)用。最好先顯示框架,而不是一個(gè)進(jìn)度條或指示器。使用可以加速初始渲染時(shí)間的模塊或技術(shù)(例如tree-shaking和code-splitting),因?yàn)榇蟛糠中阅軉栴}來(lái)自于應(yīng)用引導(dǎo)程序的初始分析時(shí)間。還可以在服務(wù)器上提前編譯,從而減輕部分客戶端的渲染過程,從而快速輸出結(jié)果。最后,考慮使用Optimize.js來(lái)加快初始加載速度,它的原理是包裝優(yōu)先級(jí)高的調(diào)用函數(shù)(雖然現(xiàn)在已經(jīng)沒什么必要了)。


漸進(jìn)啟動(dòng)指的是使用服務(wù)器端渲染,從而快速得到首次有效渲染,這個(gè)渲染過程也包括小部分的JavaScript文件,目的是使交互時(shí)間盡可能的接近首次有效渲染時(shí)間。

到底采用客戶端渲染還是服務(wù)器端渲染?不論哪種做法,我們的目標(biāo)都是建立漸進(jìn)啟動(dòng):使用服務(wù)器端渲染可以得到很短的首次有效渲染時(shí)間,這個(gè)渲染過程也包括小部分的JavaScript文件,目的是使交互時(shí)間盡可能的接近首次有效渲染時(shí)間。接下來(lái),盡可能的增加一些應(yīng)用的非必要功能。不幸的是,正如Paul Lewis所說(shuō),框架基本上對(duì)開發(fā)者是沒有優(yōu)先級(jí)的概念的,因此漸進(jìn)啟動(dòng)在很多庫(kù)和框架上是很難實(shí)施的。如果你有時(shí)間的話,還是考慮使用策略去優(yōu)化你的性能吧。

12. HTTP的緩存頭使用的合理嗎?

仔細(xì)檢查一下例如expirescache-controlmax-age以及其他HTTP緩存頭是否被正確的使用。一般來(lái)說(shuō),資源不論在短時(shí)間(如果它會(huì)被頻繁改動(dòng))還是不確定的時(shí)間內(nèi)(如果它是靜態(tài)的)都是可緩存的——你大可在需要的時(shí)候在URL中成改版本。

如果可能,使用為指紋靜態(tài)資源設(shè)計(jì)的Cache-control:immutable,從而避免二次驗(yàn)證(2016年12月,只有FireFox在https://處理中支持)。你可以使用,Heroku的primer on HTTP caching headers,Jake Archibald的 ”Caching Best Practices”,還有IIya Grigorik的HTTP caching primer作為指導(dǎo)。

13. 減少使用第三方庫(kù),加載JavaScript異步操作

當(dāng)用戶請(qǐng)求頁(yè)面時(shí),瀏覽器會(huì)抓取HTML同時(shí)生成DOM,然后抓取CSS并建立CSS對(duì)象模型,最后通過匹配DOM和CSS對(duì)象生成渲染樹。在需要處理的JavaScript文件被解決之前,瀏覽器不會(huì)開始對(duì)頁(yè)面進(jìn)行渲染。作為開發(fā)者,我們要明確的告訴瀏覽器不要等待,直接開始渲染。具體方法是使用HTML中的deferasync兩個(gè)屬性。

事實(shí)上,defer更好一些(因?yàn)閷?duì)于IE9及以下用戶對(duì)于IE9及以下用戶,很有可能會(huì)中斷腳本)。同時(shí),減少第三方庫(kù)和腳本的使用,尤其是社交網(wǎng)站的分享按鍵和