前言
性能優(yōu)化無非就是讓頁面的打開速度更快一些，以得到更好的用戶體驗(yàn)衔沼。前端在這方面可以做到的有兩方面欲芹，頁面級(jí)別的優(yōu)化卿啡，比如減少 Http 請(qǐng)求次數(shù)、加快資源的加載速度菱父；二是代碼級(jí)別的優(yōu)化颈娜，頁面重新渲染一次會(huì)經(jīng)過瀏覽器的重排（reflow）和重繪(repaint)，這兩部操作是非常耗時(shí)的浙宜，本文將根據(jù)這兩方面的優(yōu)化途徑官辽，大致總結(jié)一下。
頁面級(jí)別優(yōu)化
1. 減少 HTTP請(qǐng)求數(shù)
首先粟瞬，每個(gè)請(qǐng)求都是有成本的同仆，既包含時(shí)間成本也包含資源成本。一個(gè)完整的請(qǐng)求都需要經(jīng)過 DNS尋址裙品、與服務(wù)器建立連接俗批、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)市怎、接收數(shù)據(jù)這樣一個(gè) “漫長(zhǎng)” 而復(fù)雜的過程岁忘。時(shí)間成本就是用戶需要看到或者 “感受” 到這個(gè)資源是必須要等待這個(gè)過程結(jié)束的，資源上由于每個(gè)請(qǐng)求都需要攜帶數(shù)據(jù)区匠，因此每個(gè)請(qǐng)求都需要占用帶寬干像。另外，由于瀏覽器進(jìn)行并發(fā)請(qǐng)求的請(qǐng)求數(shù)是有上限的 (具體參見此處 )辱志，因此請(qǐng)求數(shù)多了以后蝠筑，瀏覽器需要分批進(jìn)行請(qǐng)求，因此會(huì)增加用戶的等待時(shí)間揩懒，會(huì)給用戶造成站點(diǎn)速度慢這樣一個(gè)印象什乙，即使可能用戶能看到的第一屏的資源都已經(jīng)請(qǐng)求完了，但是瀏覽器的進(jìn)度條會(huì)一直存在已球。
減少 http 請(qǐng)求次數(shù)的主要方法：
設(shè)置 HTTP緩存
http 緩存是 web 性能優(yōu)化中非常重要的一種手段臣镣，把一些常用資源在首次加載時(shí)緩存到瀏覽器本地，再次加載時(shí)可大大減少請(qǐng)求次數(shù)智亮，緩存的資源越多忆某，性能當(dāng)然越好。
緩存的規(guī)則主要有兩種阔蛉，強(qiáng)制緩存和對(duì)比協(xié)商緩存弃舒，兩種緩存分別通過Http報(bào)文頭部不同的字段進(jìn)行控制。
資源合并壓縮
CSS、 Javascript聋呢、Image 都可以用相應(yīng)的工具(Webpack)進(jìn)行壓縮苗踪，壓縮后往往能省下不少空間。
CSS Sprites
合并 CSS圖片削锰，減少請(qǐng)求數(shù)的又一個(gè)好辦法通铲。
懶加載
這條策略實(shí)際上并不一定能減少 HTTP請(qǐng)求數(shù)，但是卻能在某些條件下或者頁面剛加載時(shí)減少 HTTP請(qǐng)求數(shù)器贩。
2. 把 js 腳本置底加載
js 腳本是很容易形成阻塞颅夺，導(dǎo)致資源加載停滯，為了避免這種情況蛹稍，先加載其他資源吧黄，最后加載腳本。
3. inline 腳本異步執(zhí)行
inline 腳本與外鏈引用的腳本類似唆姐，也有可能會(huì)引起阻塞稚字，所以也要將 inline 腳本放到頁面底部或者異步方式來加載，
例如使用script標(biāo)簽的defer?和async屬性厦酬、使用setTimeOut。
4. 動(dòng)態(tài)加載 js 模塊
5. css 放在 head 中
頁面渲染過程還要經(jīng)歷重繪重排瘫想，這樣做是避免會(huì)出現(xiàn) DOM 加載完之后卻沒有樣式的情況仗阅。
代碼級(jí)別優(yōu)化
DOM操作應(yīng)該是腳本中最耗性能的一類操作，例如增加国夜、修改减噪、刪除 DOM元素或者對(duì) DOM集合進(jìn)行操作。
而修改 DOM 會(huì)引起網(wǎng)頁的重新渲染车吹。
重新渲染筹裕，就需要重新生成布局和重新繪制。前者叫做"重排"（reflow）窄驹，后者叫做"重繪"（repaint）朝卒。
需要注意的是，"重繪"不一定需要"重排"乐埠，比如改變某個(gè)網(wǎng)頁元素的顏色抗斤，就只會(huì)觸發(fā)"重繪"，不會(huì)觸發(fā)"重排"丈咐，因?yàn)椴季譀]有改變瑞眼。但是，"重排"必然導(dǎo)致"重繪"棵逊，比如改變一個(gè)網(wǎng)頁元素的位置伤疙，就會(huì)同時(shí)觸發(fā)"重排"和"重繪"，因?yàn)椴季指淖兞恕?/p>
這這兩步只是網(wǎng)頁生成的最后兩部辆影，關(guān)于頁面的生成過程徒像，主要有五步：
1. HTML代碼轉(zhuǎn)化成DOM2. CSS代碼轉(zhuǎn)化成CSSOM（CSS Object Model）3. 結(jié)合DOM和CSSOM黍特，生成一棵渲染樹（包含每個(gè)節(jié)點(diǎn)的視覺信息）4. 生成布局（layout），即將所有渲染樹的所有節(jié)點(diǎn)進(jìn)行平面合成5. 將布局繪制（paint）在屏幕上
這五步里面厨姚，第一步到第三步都非承瞥海快，耗時(shí)的是第四步和第五步谬墙。
"生成布局"（flow）和"繪制"（paint）這兩步今布，合稱為"渲染"（render）。
具體技巧參照:http://ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
