正文

前端優(yōu)化層出不窮庵寞，移動(dòng)端大行其道的現(xiàn)在，我們可以說優(yōu)化好移動(dòng)端匾浪，PC端也將會(huì)更好皇帮。所以卷哩，我們可以綜合以下圖片進(jìn)行一些分析蛋辈，如圖：

image

圖中已經(jīng)對前端性能做了一些概括。但其實(shí)将谊，我覺得我們可以將這個(gè)概括更加精準(zhǔn)冷溶，扼要，豐富尊浓。所以逞频，接下來我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)：網(wǎng)絡(luò)方面、DOM操作及渲染方面栋齿、數(shù)據(jù)方面苗胀。

網(wǎng)絡(luò)方面

web應(yīng)用，總是會(huì)有一部分的時(shí)間浪費(fèi)在網(wǎng)絡(luò)連接和資源下載方面瓦堵。往往建立一次網(wǎng)絡(luò)連接是需要時(shí)間成本的基协。而且瀏覽器同一時(shí)間所發(fā)送的網(wǎng)絡(luò)請求數(shù)是有限的。所以菇用，這個(gè)層面的優(yōu)化可以從「減少請求數(shù)目」開始：

1. 減少http請求：在YUI35規(guī)則中也有提到澜驮，主要是優(yōu)化js、css和圖片資源三個(gè)方面惋鸥，因?yàn)閔tml是沒有辦法避免的杂穷。因此悍缠，我們可以做一下的幾項(xiàng)操作：

   • 合并js文件
   • 合并css文件
   • 雪碧圖的使用(css sprite)
   • 使用base64表示簡單的圖片

   上述四個(gè)方法，前面兩者我們可以使用webpack之類的打包工具進(jìn)行打包耐量；雪碧圖的話飞蚓，也有專門的制作工具；圖片的編碼是使用base64的拴鸵，所以玷坠，對于一些簡單的圖片，例如空白圖等劲藐，可以使用base64直接寫入html中八堡。

回到之前網(wǎng)絡(luò)層面的問題，除了減少請求數(shù)量來加快網(wǎng)絡(luò)加載速度聘芜，往往整個(gè)資源的體積也是兄渺，平時(shí)我們會(huì)關(guān)注的方面。

2. 減小資源體積：可以通過以下幾個(gè)方面進(jìn)行實(shí)施：

   • gzip壓縮
   • js混淆
   • css壓縮
   • 圖片壓縮

   gzip壓縮主要是針對html文件來說的汰现，它可以將html中重復(fù)的部分進(jìn)行一個(gè)打包挂谍，多次復(fù)用的過程。js的混淆可以有簡單的壓縮(將空白字符刪除)瞎饲、丑化(丑化的方法口叙，就是將一些變量縮小)、或者可以使用php對js進(jìn)行混淆加密嗅战。css壓縮妄田，就是進(jìn)行簡單的壓縮。圖片的壓縮驮捍，主要也是減小體積疟呐，在不影響觀感的前提下，盡量壓縮圖片东且，使用png等圖片格式启具，減少矢量圖、高清圖等的使用珊泳。這樣子的做法不僅可以加快網(wǎng)頁顯示鲁冯，也能減少流量的損耗。

除了以上兩部分的操作之外色查，在網(wǎng)絡(luò)層面我們還需要做好緩存工作薯演。真正的性能優(yōu)化來說，緩存是效率最高的一種综慎，往往縮短的加載時(shí)間也是最大的涣仿。

3. 緩存：可以通過以下幾個(gè)方面來描述：

   • DNS緩存
   • CDN部署與緩存
   • http緩存

   由于瀏覽器會(huì)在DNS解析步驟中消耗一定的時(shí)間，所以，對于一些高訪問量網(wǎng)站來說好港，做好DNS的緩存工作愉镰，就會(huì)一定程度上提升網(wǎng)站效率。CDN緩存钧汹，CDN作為靜態(tài)資源文件的分發(fā)網(wǎng)絡(luò)丈探，本身就已經(jīng)提升了，網(wǎng)站靜態(tài)資源的獲取速度拔莱，加快網(wǎng)站的加載速度碗降，同時(shí)也給靜態(tài)資源做好緩存工作，有效的利用已緩存的靜態(tài)資源塘秦，加快獲取速度讼渊。http緩存，也是給資源設(shè)定緩存時(shí)間尊剔，防止在有效的緩存時(shí)間內(nèi)對資源進(jìn)行重復(fù)的下載爪幻，從而提升整體網(wǎng)頁的加載速度。

其實(shí)须误，網(wǎng)絡(luò)層面的優(yōu)化還有很多挨稿，特別是針對于移動(dòng)端頁面來說。眾所周知京痢，移動(dòng)端對于網(wǎng)絡(luò)的敏感度更加的高奶甘，除了目前的4G和WIFI之外，其他的移動(dòng)端網(wǎng)絡(luò)相當(dāng)于弱網(wǎng)環(huán)境祭椰，在這種環(huán)境下臭家，資源的緩存利用是相當(dāng)重要的。而且吭产，減少http的請求次數(shù)侣监，也是至關(guān)重要的鸭轮，移動(dòng)端弱網(wǎng)環(huán)境下臣淤，對于http請求的時(shí)間也會(huì)增加。所以窃爷，我們可以看一下我們在移動(dòng)端網(wǎng)絡(luò)方面可以做的優(yōu)化：

4. 移動(dòng)端優(yōu)化：使用以下幾種方式來加快移動(dòng)端網(wǎng)絡(luò)方面的優(yōu)化：

   • 使用長cache邑蒋，減少重定向
   • 首屏優(yōu)化，保證首屏加載數(shù)據(jù)小于14kb
   • 不濫用web字體

   「使用長cache」按厘，可以使得移動(dòng)端的部分資源設(shè)定長期緩存医吊，這樣可以保證資源不用向服務(wù)器發(fā)送請求，來比較資源是否更新逮京，從而避免304的情況卿堂。304重定向，在PC端或許并不會(huì)影響網(wǎng)頁的加載速度，但是草描，在移動(dòng)端網(wǎng)絡(luò)不穩(wěn)定的前提下览绿，多一次請求，就多了一部分加載時(shí)間穗慕《銮茫「首屏優(yōu)化」，對于移動(dòng)端來說是至關(guān)重要的逛绵。2s時(shí)間是用戶的最佳體驗(yàn)怀各，一旦超出這個(gè)時(shí)間，將會(huì)導(dǎo)致用戶的流失术浪。所以瓢对，針對移動(dòng)端的網(wǎng)絡(luò)情況，不可能在這么短時(shí)間內(nèi)加載完成所有的網(wǎng)頁資源胰苏，所以我們必須保證首屏中的內(nèi)容被優(yōu)先顯示出來沥曹，而且基于TCP的慢啟動(dòng)和擁塞控制，第一個(gè)14kb的數(shù)據(jù)是非常重要的碟联，所以需要保證首部加載數(shù)據(jù)能夠小于14kb妓美。「不濫用web字體」鲤孵，web字體的好處就是壶栋，可以代替某些圖片資源，但是普监，在移動(dòng)端過多的web字體的使用贵试，會(huì)導(dǎo)致頁面資源加載的繁重，所以凯正，慎用web字體

渲染和DOM操作方面

首先毙玻，簡單的聊一下優(yōu)化渲染的重要性。在網(wǎng)頁初步加載時(shí)廊散，獲取到HTML文件之后桑滩，最初的工作是構(gòu)建DOM和構(gòu)建CSSOM兩個(gè)樹，之后將他們合并形成渲染樹允睹，最后對其進(jìn)行打印运准。我們可以通過圖片來看一下，簡單的過程：

image

這里整個(gè)過程拉出來寫缭受，具體可以再寫一篇文章胁澳，恕我偷下懶，推薦一篇比較好的文章給大家吧米者。瀏覽器渲染過程與性能優(yōu)化

繼續(xù)我們的話題韭畸，我們可以如何去縮短這個(gè)過程呢宇智？可以從以下幾個(gè)操作進(jìn)行優(yōu)化。

1. 優(yōu)化網(wǎng)頁渲染：

   • css的文件放在頭部胰丁，js文件放在尾部或者異步
   • 盡量避免內(nèi)聯(lián)樣式

   css文件放在「頭部加載」普筹，可以保證解析DOM的同時(shí)，解析css文件隘马。因?yàn)樘溃珻SS（外鏈或內(nèi)聯(lián)）會(huì)阻塞整個(gè)DOM的渲染，然而DOM解析會(huì)正常進(jìn)行酸员，所以將css文件放在頭部進(jìn)行解析蜒车，可以加快網(wǎng)頁的構(gòu)建速度。假設(shè)將其放在尾部幔嗦，那時(shí)DOM樹幾乎構(gòu)建酿愧，這時(shí)就得等到CSSOM樹構(gòu)建完成，才能夠繼續(xù)下面的步驟邀泉℃业玻「js放在尾部」：js文件不同，將js文件放在尾部或者異步加載的原因是JS（外鏈或內(nèi)聯(lián)）會(huì)阻塞后續(xù)DOM的解析汇恤，后續(xù)DOM的渲染也將被阻塞庞钢，而且一旦js中遇到DOM元素的操作，很可能會(huì)影響因谎。這方面可以推薦一篇文章——異步腳本載入提高頁面性能基括。「避免使用內(nèi)聯(lián)樣式」财岔，可以有效的減少html的體積风皿，一般考慮內(nèi)聯(lián)樣式的時(shí)候，往往是樣式本身體積比較小匠璧，往往加載網(wǎng)絡(luò)資源的時(shí)間會(huì)大于它的時(shí)候桐款。

除了頁面渲染層面的優(yōu)化，當(dāng)然最重要的就是DOM操作方面的優(yōu)化夷恍，這部分的優(yōu)化應(yīng)該是最多的魔眨，而且也是平時(shí)開發(fā)可以注意的地方。如果開發(fā)前期明白這些原理裁厅，同時(shí)付諸實(shí)踐的話冰沙，就可以在后期的性能完善上面少下很多功夫侨艾。那么执虹，接下來我們可以來看一下具體的操作：

2. DOM操作優(yōu)化：

   • 避免在document上直接進(jìn)行頻繁的DOM操作
   • 使用classname代替大量的內(nèi)聯(lián)樣式修改
   • 對于復(fù)雜的UI元素，設(shè)置position為absolute或fixed
   • 盡量使用css動(dòng)畫
   • 使用requestAnimationFrame代替setInterval操作
   • 適當(dāng)使用canvas
   • 盡量減少css表達(dá)式的使用
   • 使用事件代理

   前面三個(gè)操作唠梨，其實(shí)都是希望『減少回流和重繪』袋励。其實(shí)，進(jìn)行一次DOM操作的代價(jià)是非常之大的，以前可以通過網(wǎng)頁操作是否卡頓來進(jìn)行判斷茬故，但是盖灸，現(xiàn)代瀏覽器的進(jìn)步已經(jīng)大大減少了這方面的影響。但是磺芭，我們還是需要清楚赁炎，如何去減少回流和重繪的問題。因?yàn)檫@里不想細(xì)說這方面的知識钾腺，想要了解的話徙垫，可以看這篇文章——回流與重繪：CSS性能讓JavaScript變慢？放棒。這可是張鑫旭大大的一篇文章呦(^.)姻报。「盡量使用css動(dòng)畫」间螟，是因?yàn)楸旧韈ss動(dòng)畫比較簡單吴旋，而且相較于js的復(fù)雜動(dòng)畫，瀏覽器本身對其進(jìn)行了優(yōu)化厢破，使用上面不會(huì)出現(xiàn)卡頓等問題荣瑟。「使用requestAnimationFrame代替setInterval操作」摩泪，相信大家都有所耳聞褂傀，setInterval定時(shí)器會(huì)有一定的延時(shí)，對于變動(dòng)性高的動(dòng)畫來說加勤，會(huì)出現(xiàn)卡頓現(xiàn)象仙辟。而requestAnimationFrame正好解決的整個(gè)問題■罚「適當(dāng)使用canvas」叠国，不得不說canvas是前端的一個(gè)進(jìn)步，出現(xiàn)了它之后戴尸，前端界面的復(fù)雜性也隨之提升了粟焊。一些難以完成的動(dòng)畫，都可以使用canvas進(jìn)行輔助完成孙蒙。但是项棠，canvas使用頻繁的話，會(huì)加重瀏覽器渲染的壓力挎峦，同時(shí)導(dǎo)致性能的下降香追。所以，適當(dāng)時(shí)候使用canvas是一個(gè)不錯(cuò)的建議坦胶⊥傅洌「盡量減少css表達(dá)式的使用」晴楔，這個(gè)在YUI規(guī)則中也被提到過，往往css的表達(dá)式在設(shè)計(jì)之初都是美好的峭咒，但在使用過程中税弃，由于其頻繁觸發(fā)的特性，會(huì)拖累網(wǎng)頁的性能凑队，出現(xiàn)卡頓则果。因此在使用過程中盡量減少css表達(dá)式的使用，可以改換成js進(jìn)行操作漩氨《烫酰「使用事件代理」：往往對于具備冒泡性質(zhì)的事件來說，使用事件代理不失為一種好的方法才菠。舉個(gè)例子：一段列表都需要設(shè)定點(diǎn)擊事件茸时，這時(shí)如果你給列表中的每一項(xiàng)設(shè)定監(jiān)聽，往往會(huì)導(dǎo)致整體的性能下降赋访，但是如果你給整個(gè)列表設(shè)置一個(gè)事件可都，然后通過點(diǎn)擊定位目標(biāo)來觸發(fā)相應(yīng)的操作，往往性能就會(huì)得到改善蚓耽。

DOM操作的優(yōu)化渠牲，還有很多，當(dāng)然也包括移動(dòng)端的步悠。這個(gè)會(huì)在之后移動(dòng)端優(yōu)化部分被提及签杈，此處先賣個(gè)關(guān)子。上面我們概述了開始渲染的時(shí)候和DOM操作的時(shí)候的一些注意事項(xiàng)鼎兽。接下來要講的是一些小細(xì)節(jié)的注意答姥，這些細(xì)節(jié)可能對于頁面影響不大，但是一旦堆積多了谚咬，性能也會(huì)有所影響鹦付。

3. 操作細(xì)節(jié)注意：

   • 避免圖片或者frame使用空src
   • 在css屬性為0時(shí)，去掉單位
   • 禁止圖像縮放
   • 正確的css前綴的使用
   • 移除空的css規(guī)則
   • 對于css中可繼承的屬性择卦，如font-size敲长，盡量使用繼承，少一點(diǎn)設(shè)置
   • 縮短css選擇器秉继，多使用偽元素等幫助定位

   上述的一些操作細(xì)節(jié)祈噪，是平時(shí)在開發(fā)中被要求的，更可以理解為開發(fā)規(guī)范尚辑。(基本操作辑鲤，坐下^_)

列舉完基本操作之后，我們再來聊一下移動(dòng)端在DOM操作方面的一些優(yōu)化腌巾。

4. 移動(dòng)端優(yōu)化：

   • 長列表滾動(dòng)優(yōu)化
   • 函數(shù)防抖和函數(shù)節(jié)流
   • 使用touchstart遂填、touchend代替click
   • HTML的viewport設(shè)置
   • 開啟GPU渲染加速

   首先铲觉，長列表滾動(dòng)問題澈蝙，是移動(dòng)端需要面對的吓坚，IOS盡量使用局部滾動(dòng)，android盡量使用全局滾動(dòng)灯荧。同時(shí)礁击，需要給body添加上-webkit-overflow-scrolling: touch來優(yōu)化移動(dòng)段的滾動(dòng)。如果有興趣的同學(xué)逗载，可以去了解一下ios和android滾動(dòng)操作上的區(qū)別以及優(yōu)化哆窿。「防抖和節(jié)流」厉斟，設(shè)計(jì)到滾動(dòng)等會(huì)被頻繁觸發(fā)的DOM事件挚躯，需要做好防抖和節(jié)流的工作。它們都是為了限制函數(shù)的執(zhí)行頻次擦秽，以優(yōu)化函數(shù)觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率码荔，出現(xiàn)延遲，假死或卡頓的現(xiàn)象感挥。

   介紹：函數(shù)防抖缩搅，當(dāng)調(diào)用動(dòng)作過n毫秒后，才會(huì)執(zhí)行該動(dòng)作，若在這n毫秒內(nèi)又調(diào)用此動(dòng)作則將重新計(jì)算執(zhí)行時(shí)間；函數(shù)節(jié)流雁竞，預(yù)先設(shè)定一個(gè)執(zhí)行周期碘菜，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)新周期锤窑。

   「touchstart、touchend代替click」，也是移動(dòng)端比較常用的操作筑累。click在移動(dòng)端會(huì)有300ms延時(shí)，這應(yīng)該是一個(gè)常識唄丝蹭。(不知道的小伙伴該收藏一下呦)慢宗。這種方法會(huì)影響用戶的體驗(yàn)。所以做優(yōu)化時(shí)奔穿，最簡單的方法就是使用touchstart或者touchend代替click镜沽。因?yàn)樗鼈兪录?zhí)行順序是touchstart->touchmove->touchend->click〖铮或者缅茉，使用fastclick或者zepto的tap事件代替click事件∧写荩「HTML的viewport設(shè)置」蔬墩，可以防止頁面的縮放译打，來優(yōu)化性能∧绰「開啟GPU渲染加速」奏司，小伙伴們一定聽過CPU吧，但是這里的GPU不能和CPU混為一談呦樟插。GPU的全名是Graphics Processing Unit韵洋，是一種硬件加速方式。一般的css渲染黄锤，瀏覽器的渲染引擎都不會(huì)使用到它搪缨。但是，在3D渲染時(shí)鸵熟，計(jì)算量較大副编，繁重，瀏覽器會(huì)開啟顯卡的硬件加速來幫助完成這些操作流强。所以痹届，我們這里可以使用css中的translateZ設(shè)定，來欺騙瀏覽器煮盼，讓其幫忙開啟GPU加速短纵，加快渲染進(jìn)程。

DOM部分的優(yōu)化僵控，更多的是習(xí)慣香到。需要自己強(qiáng)制要求自己在開發(fā)過程中去注意這些規(guī)范。所以报破，這部分的內(nèi)容可以多關(guān)注一下悠就，才能夠慢慢了解。同時(shí)充易，本人對于上述幾點(diǎn)的描述是概括性的梗脾。并沒有對其進(jìn)行詳細(xì)的展開。因此盹靴，也要求你去細(xì)細(xì)的查閱Google呦炸茧。

數(shù)據(jù)方面

數(shù)據(jù)，也可以說是前端優(yōu)化方面比較重要的一塊內(nèi)容稿静。頁面與用戶的交互響應(yīng)梭冠，往往伴隨著數(shù)據(jù)交互，處理改备，以及ajax的異步請求等內(nèi)容控漠。所以，我們也可以來聊聊這一塊的知識。首先是對于圖片數(shù)據(jù)的處理：

1. 圖片加載處理：

   • 圖片預(yù)加載
   • 圖片懶加載
   • 首屏加載時(shí)進(jìn)度條的顯示

   「圖片預(yù)加載」盐捷，預(yù)加載的寓意就是提前加載內(nèi)容偶翅。而圖片的預(yù)加載往往會(huì)被用在圖片資源比較大，即時(shí)加載時(shí)會(huì)導(dǎo)致很長的等待過程時(shí)碉渡，才會(huì)被使用的聚谁。常見場景：圖片漫畫展示時(shí)。往往會(huì)預(yù)加載一張到兩張的圖片爆价】寻停「圖片懶加載」媳搪，懶加載或許你是第一次聽說铭段，但是，這種方式在開發(fā)中會(huì)被經(jīng)常使用秦爆。首先序愚，我們需要明白一個(gè)道理：往往只有看到的資源是必須的，其他資源是可以隨著用戶的滾動(dòng)等限，隨即顯示的爸吮。所以，特別是對于圖片資源特別多的網(wǎng)站來說望门，做好圖片的懶加載是可以大大提升網(wǎng)頁的載入速度的形娇。

   常見的圖片懶加載的方式就是：在最初給圖片的src設(shè)置一個(gè)比較簡單的圖片，然后將圖片的真實(shí)地址設(shè)置給自定義的屬性筹误，做一個(gè)占位桐早，然后給圖片設(shè)置監(jiān)聽事件，一旦圖片到達(dá)視口范圍厨剪，從圖片的自定義屬性中獲取出真是地址哄酝，然后賦值給src，讓其進(jìn)行加載祷膳。

   「首屏進(jìn)度條的顯示」：往往對于首屏優(yōu)化后的數(shù)據(jù)量并不滿意的話陶衅，同時(shí)也不能進(jìn)一步縮短首屏包的長度了，就可以使用進(jìn)度條的方式直晨，來提醒用戶進(jìn)行等待搀军。

講完了圖片這一塊數(shù)據(jù)資源的處理，往往我們需要去優(yōu)化一下異步請求這一部分的內(nèi)容勇皇。因?yàn)檎志洌惒降臄?shù)據(jù)獲取也是前端不可分割的。這一部分我們也可以做一定的處理：

2. 異步請求的優(yōu)化：

   • 使用正常的json數(shù)據(jù)格式進(jìn)行交互
   • 部分常用數(shù)據(jù)的緩存
   • 數(shù)據(jù)埋點(diǎn)和統(tǒng)計(jì)

   「JSON交互」儒士，JSON的數(shù)據(jù)格式輕巧的止，結(jié)構(gòu)簡單，往往可以大大優(yōu)化前后端的數(shù)據(jù)通信着撩∽绺＃「常用數(shù)據(jù)的緩存」匾委，可以將一些用戶的基本信息等常用的信息做一個(gè)緩存，這樣可以保證ajax請求的減少氓润。同時(shí)赂乐，HTML5新增的storage的內(nèi)容，也不用怕cookie暴露咖气，引起的信息泄漏問題挨措。「數(shù)據(jù)埋點(diǎn)和統(tǒng)計(jì)」崩溪，對于資深的程序員來說浅役，比較了解。而且目前的大部分公司也會(huì)做這方面的處理伶唯。有心的小伙伴可以自行查閱觉既。

最后，還有就是大量數(shù)據(jù)的運(yùn)算瞪讼。對于javascript語言來說，本身的單線程就限制了它并不能計(jì)算大量的數(shù)據(jù)粹断，往往會(huì)造成頁面的卡頓符欠。而可能業(yè)務(wù)中有些復(fù)雜的UI需要去運(yùn)行大量的運(yùn)算，所以瓶埋，webWorker的使用是至關(guān)重要的希柿。或許悬赏，前端標(biāo)準(zhǔn)普及的落后狡汉，會(huì)導(dǎo)致大家對于這些新生事物的短暫缺失吧。

總結(jié)

本篇文章就前端性能這個(gè)話題做了一個(gè)總結(jié)闽颇《艽鳎或許，并不全面兵多，但是都是一些平時(shí)開發(fā)中會(huì)被經(jīng)常用到的知識尖啡。希望有心者能夠去親身的嘗試一下這些方面的優(yōu)化。本篇的概述了一下幾個(gè)知識點(diǎn)：

• 網(wǎng)絡(luò)層面的優(yōu)化
• 數(shù)據(jù)層面的優(yōu)化
• DOM操作與渲染層面的優(yōu)化

原文鏈接：https://juejin.im/post/59e1bbc9f265da430f311fb1