引言
? 大家好辨液，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官——蘇南(South·Su)箱残，今天是國(guó)慶節(jié)的第二天滔迈，這個(gè)假期沒有外出(不要問我為什么，自己腦補(bǔ)～??)被辑，前些天分享了一篇前端面試匯總的文章燎悍，有些同學(xué)在群里問了其中的一些細(xì)節(jié)，其中大家最關(guān)心的性能優(yōu)化這塊盼理，今天整理了公司項(xiàng)目中的一些認(rèn)為不錯(cuò)的點(diǎn)谈山，跟大家一起分享，如有理解錯(cuò)誤宏怔，請(qǐng)糾正奏路。
優(yōu)化概括
1、首先最基本的臊诊，CSS樣式表放在頁(yè)面頭部Head內(nèi)且link鏈?zhǔn)揭敫敕郏琷avascript放在底部body結(jié)束標(biāo)簽前避免阻塞。
2抓艳、js/html/css/圖片都做壓縮合并触机，圖片預(yù)加載、懶加載玷或，也是老生常談了儡首，在這里推薦一個(gè)圖片無損極限壓縮的工具，能壓小60～80%左右,比較麻煩的是每次要手動(dòng)操作——TinyPNG偏友，有興趣的同學(xué)了可以了解一下他們的API蔬胯，自己封裝一個(gè)服務(wù)調(diào)用壓縮，不過免費(fèi)次數(shù)有限制哦约谈。
3笔宿、減少DOM元素?cái)?shù)量犁钟，減少DOM的操作：
- 減少 DOM 元素?cái)?shù)量，合理利用:after泼橘、:before等偽類涝动，避免頁(yè)面過深的層級(jí)嵌套;
- 優(yōu)化javascript性能,減少DOM操作次數(shù)(或集中操作)，能有效規(guī)避頁(yè)面
重繪/重排; - 如何才算少炬灭？抱歉醋粟，這個(gè)沒有辦法給出一個(gè)標(biāo)準(zhǔn)精確的答案，只能說盡可能去做優(yōu)化重归，如數(shù)據(jù)分頁(yè)米愿、首屏直出、按需加載等鼻吮。
4育苟、靜態(tài)資源CDN分發(fā)：
- CDN的意圖就是盡可能的減少資源在轉(zhuǎn)發(fā)、傳輸椎木、鏈路抖動(dòng)等情況下順利保障信息的連貫性违柏；
- 通俗的講就是
CDN系統(tǒng)能夠?qū)崟r(shí)地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間等綜合信息將用戶的請(qǐng)求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上———曾經(jīng)人們都說距離產(chǎn)生美香椎，后來變了都說距離產(chǎn)生小三漱竖，在這里距離產(chǎn)生的是用戶跑路了，所以足以說明CDN的重要性畜伐； - CDN采用各節(jié)點(diǎn)緩存的機(jī)制緩存很嚴(yán)重馍惹，當(dāng)我們項(xiàng)目的靜態(tài)資源(只是之前存放在cdn上的資源)修改后，如果CDN緩存沒有做相應(yīng)更新玛界，則看到的還是舊的網(wǎng)頁(yè)万矾，解決的辦法是刷新緩存，七牛云脚仔、騰訊云都可單獨(dú)針對(duì)某個(gè)文件/目錄進(jìn)行刷新勤众；
- 廣告常說：XX酒雖好，可不要貪杯哦鲤脏，CDN托管也是如此，合理使用：圖片吕朵、常用js組件猎醇、css重置樣式等，即不常改動(dòng)的文件即可走CDN努溃，包括項(xiàng)目?jī)?nèi)的一些介紹頁(yè)硫嘶；
- img標(biāo)簽要設(shè)置高寬,同樣這么做它也能減少頁(yè)面
重繪/重排，使用WebP格式圖片梧税，它能對(duì)原圖(png)做到近98%壓縮沦疾，當(dāng)然它也不是完美的：
WebP最初在2010年發(fā)布称近，目標(biāo)是減少文件大小，支持無損哮塞、有損壓縮刨秆，動(dòng)態(tài)、靜態(tài)圖片忆畅，壓縮比率優(yōu)于 GIF衡未、JPEG、JPEG2000家凯、PNG 等格式缓醋，非常適合用于網(wǎng)絡(luò)等圖片傳輸，現(xiàn)在開始已經(jīng)被越來越多的瀏覽器支持绊诲，當(dāng)然 WebP 格式也有它的缺點(diǎn)送粱，算法相對(duì)其他格式更加復(fù)雜，會(huì)在節(jié)省流量資源的同時(shí)會(huì)占用計(jì)算資源掂之，對(duì)計(jì)算機(jī)造成更大的負(fù)擔(dān),WebP支持的像素最大數(shù)量是16383x16383葫督。有損壓縮的WebP僅支持8-bit的YUV4:2:0格式。而無損壓縮（可逆壓縮）的WebP支持VP8L編碼與8-bit之ARGB色彩空間板惑。又無論是有損或無損壓縮皆支持Alpha透明通道橄镜、ICC色彩配置、XMP詮釋數(shù)據(jù)冯乘，更詳細(xì)支持說明:caniuse.com
優(yōu)勢(shì)：
- 體積小幾乎可以毫不夸張的說洽胶，已經(jīng)小的不能再小了；
- 小而美的同時(shí)裆馒，還質(zhì)量好姊氓，幾乎看不出來與原圖差別；
- 曾經(jīng)的動(dòng)態(tài)圖gif喷好、jpeg壓縮都會(huì)不清晰翔横，但現(xiàn)在對(duì)它來說都是so easy～。
缺點(diǎn)/困難：
- 目前并不是所有瀏覽器都支持
WebP梗搅，因此需要解決瀏覽器適配問題禾唁；
- 對(duì)于已上線的項(xiàng)目，采用
WebP需要替換大量圖片无切，工作量太大(不確定后臺(tái)程序是否能搞定)荡短。
5、域名拆分：
- 什么叫拆分域名哆键？很多公司初始項(xiàng)目搭建掘托，都只申請(qǐng)了一個(gè)域名，站點(diǎn)的所有內(nèi)容(html/php/jsp籍嘹、js闪盔、css弯院、img等都放在一個(gè)域名下)，域名拆分主要為了增加瀏覽器資源請(qǐng)求的并行度即并發(fā)問題泪掀，讓瀏覽器能同時(shí)發(fā)起更多的請(qǐng)求听绳，也解決了請(qǐng)求默認(rèn)攜帶的cookie問題，減少了數(shù)據(jù)傳輸字節(jié)族淮；
- 如何拆分辫红？以現(xiàn)在前后端分離式開發(fā)為例，建議分為三大類：
- 前端類 - 項(xiàng)目業(yè)務(wù)本身的htm祝辣、css贴妻、js、圖標(biāo)/片等蝙斜；
- 靜態(tài)類 - 即上述提到的CDN資源類名惩；
- 動(dòng)態(tài)類 - 可歸為后端API接口類；
以下為各瀏覽器請(qǐng)求并發(fā)數(shù)孕荠，數(shù)據(jù)來源于
chorme搜索娩鹉，珍愛生命，遠(yuǎn)離某……??：
| 瀏覽器 | HTTP/1.1 | HTTP/1.0 |
|---|---|---|
| Chrome | 6 | 6 |
| 火狐 | 6 | 6 |
| Safari | 4 | 4 |
| IE11 | 6 | 6 |
| IE9 | 10 | 10 |
| …… | …… | …… |
6稚伍、 減少http請(qǐng)求次數(shù)
- 是的弯予，你沒有看錯(cuò)，就是減少http請(qǐng)求次數(shù)个曙，節(jié)省網(wǎng)絡(luò)請(qǐng)求時(shí)間锈嫩，但你可能又會(huì)問，前面不是讓拆分域名嗎垦搬？呼寸？一個(gè)是部署拆分，一個(gè)是請(qǐng)求減少猴贰，沒毛病哦对雪；
- 首先我們來了解一下http的請(qǐng)求過程（簡(jiǎn)單通俗的闡述一下）：
- DNS 域名解析 -
1.拿出電話，找到某個(gè)接頭人的號(hào)碼米绕； - 發(fā)起 TCP 的 3 次握手 -
2.接通后暗號(hào)：A)瑟捣、你好，你好义郑，我是長(zhǎng)江一號(hào)蝶柿，請(qǐng)問能聽到嗎？B),你好非驮，我是長(zhǎng)江二號(hào)，能聽到你講話雏赦，你能聽到我說什么嗎劫笙？A)芙扎、能聽到，我們開始講正事吧……; - 正常數(shù)據(jù)傳輸中…… -
3.聊的很嗨填大； - 結(jié)束傳輸斷鏈的 4 次揮手 -
4.聊完了戒洼，準(zhǔn)備告別：A)、(可以是服務(wù)端允华，也可以是客戶端)該說的我都說完了圈浇，你自己看著辦吧；B)靴寂、好的我也說完了磷蜀；B)、(B緊接著又跟A發(fā)了條信息)百炬，再見褐隆；A)、然后A收到B的話剖踊，而B那邊已經(jīng)放下手機(jī)掛了庶弃，A等了一下聽B沒有再說啥，也就掛了(掛個(gè)毛啊德澈，婊子無情歇攻，戲子無義，陪你嘮嗑這么久梆造，都不給個(gè)好評(píng)～??)缴守； - 當(dāng)然，現(xiàn)在的
HTTP/2.0的處理有所不同澳窑，2.0過程還有TLS/SSL的處理斧散，HTTP是超文本傳輸協(xié)議，信息是明文傳輸摊聋，HTTPS則是具有安全性的SSL(Certificate Authority鸡捐，申請(qǐng)證書)加密傳輸協(xié)議,HTTPS加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議,內(nèi)容傳輸經(jīng)過完整性校驗(yàn)麻裁、內(nèi)容經(jīng)過對(duì)稱加密箍镜，每個(gè)連接生成一個(gè)唯一的加密密鑰、第三方無法偽造服務(wù)端(客戶端)身份等眾多優(yōu)勢(shì)煎源，同時(shí)也有劣勢(shì)因?yàn)樽龅氖虑槎嗔酥虚g對(duì)接的次數(shù)同樣需要時(shí)間色迂，這也是HTTPS更慢的根本原因。 -
上兩圖吧手销，這樣大家看著清晰一些歇僧，但暫時(shí)只列了HTTP/1.0的，HTTP/2.0的圖下次有時(shí)間再補(bǔ)，是有一個(gè)大佬指點(diǎn)我的哦诈悍，說這樣看起來更騷氣祸轮，大家會(huì)更喜歡，哈哈～：
本文由@IT·平頭哥聯(lián)盟-首席填坑官?蘇南 分享 - 三次握手
- DNS 域名解析 -
結(jié)論：從上面的這個(gè)過程可以看出侥钳，每一次請(qǐng)求都這么復(fù)雜适袜，減少http的請(qǐng)求次數(shù)是不是很有必要呢？舷夺？答案是肯定的苦酱，我們會(huì)以以下幾個(gè)維度來進(jìn)行優(yōu)化：
- 合并
JS、CSS文件给猾；- 圖片/圖標(biāo) sprites 合并疫萤，或使用
iconfont字體圖標(biāo)，或者SVG Sprites耙册；什么是Svg Sprites?给僵；- 資源按需加載，即當(dāng)前頁(yè)面用到什么详拙，就加載什么帝际，避免加載與當(dāng)前頁(yè)面無關(guān)的事情，這一點(diǎn)現(xiàn)在的React/Vue/Angular等
MVVM框架饶辙，基于webpack編譯打包工具蹲诀，做的很好；- 前端數(shù)據(jù)的緩存（如：一個(gè)列表頁(yè)弃揽，進(jìn)入詳情脯爪，再返回，這個(gè)用戶的交互行為是很頻繁的矿微，可以對(duì)列表的數(shù)據(jù)進(jìn)度一個(gè)緩存痕慢，不用每次返回都進(jìn)行加載，比如5分鐘更新一次涌矢。
7掖举、 數(shù)據(jù)設(shè)置緩存，好累寫不動(dòng)了娜庇，http緩存的設(shè)置塔次，之前的面試匯總??如何設(shè)置http緩存？吧名秀；
8励负、 站點(diǎn)服務(wù)端開啟Gzip壓縮，當(dāng)然還可以了解一下Brotli 或 Zopfli 匕得，據(jù)說 Brotli 比 Gzip 和 Deflate更有效继榆，有興趣的同學(xué)可以了解一下；
8、 避免重定向裕照，盡量減少 iframe 使用攒发，它會(huì)阻塞主頁(yè)面的渲染;
9调塌、 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性);
10晋南、 合理使用dns-prefetch、prefetch羔砾、 preload负间、 defer、async：
-
dns-prefetch：使用dns-prefetch對(duì)項(xiàng)目中用到的域名進(jìn)行 DNS 預(yù)解析姜凄，減少 DNS 查詢政溃，如： <link rel="dns-prefetch" />；BAT各大巨頭都是這么干的态秧，請(qǐng)看下圖董虱，dns的詳細(xì)解析過程今天先不講了，碼字碼不動(dòng)了申鱼，寫分享比加班做項(xiàng)目還累愤诱，望體諒～； -
prefetch： 它是一個(gè)優(yōu)先級(jí)非常低的資源加載標(biāo)識(shí)捐友，瀏覽器會(huì)在空閑時(shí)(即主進(jìn)程資源加載完成后)下載帶有prefetch標(biāo)識(shí)的資源并緩存到disk淫半，在后續(xù)模塊使用到這個(gè)文件的時(shí)候，會(huì)直接從緩存讀认蛔科吭；該功能webpack有個(gè)插件，配置后編譯能自動(dòng)插入到頁(yè)面上; -
preload：沒錯(cuò)猴鲫，它就是一個(gè)可以預(yù)加載資源的屬性对人，詳細(xì)說明請(qǐng)看官方API,一般情況下我們可能會(huì)對(duì)接下來的業(yè)務(wù)需要的audio、img拂共、font牺弄、script等資源進(jìn)行預(yù)先加載（甚至是下一個(gè)路由頁(yè)面哦），這樣能達(dá)到0秒打開頁(yè)面的效果匣缘！
-
暫時(shí)就想到這么多了猖闪，歡迎補(bǔ)充……
阿里巴巴的天貓首頁(yè)
京東首頁(yè)
首席填坑官?蘇南 的react-redux入門示例
總結(jié)：
- 推薦幾個(gè)工具：WebPagetest、Lighthouse肌厨、SpeedCurve培慌、New Relic 等主動(dòng)/被動(dòng)監(jiān)測(cè)工具，都能高效幫助我們分析發(fā)現(xiàn)問題的所在柑爸，從而對(duì)癥下藥;
- DNS預(yù)解析的是非重要的吵护，它是一個(gè)url到解析IP，到查詢根服務(wù)器的一個(gè)過程，可能會(huì)在下一次單獨(dú)總結(jié)出來分享馅而，有興趣的同學(xué)也可以自行先了解一下祥诽，
-
要把一個(gè)項(xiàng)目做好，每一個(gè)細(xì)節(jié)都很重要瓮恭，希望今天的分享能給大家的工作帶來些許幫助雄坪，謝謝屯蹦！
@IT·平頭哥聯(lián)盟專注于前端维哈、測(cè)試的分享
文章分享計(jì)劃：
最近一直在思考，如何有規(guī)化的分享工作中的積累登澜，國(guó)慶這些天也一直看了很多大神寫的博客阔挠，最后綜合自身的能力及時(shí)間，決定先嘗試寫一個(gè)# 動(dòng)畫 #系列文章脑蠕，動(dòng)畫可能主要包含（CSS/Canvas）兩部分购撼，歡迎大家持續(xù)關(guān)注！
以上就是今天的分享谴仙，新手上路中迂求，我會(huì)努力讓自己變得更優(yōu)秀、寫出更好的文章狞甚，文章中有不對(duì)之處锁摔，煩請(qǐng)各位大神斧正。如果你覺得這篇文章對(duì)你有所幫助哼审，那就請(qǐng)關(guān)注下方的 公眾號(hào)吧谐腰。
作者：蘇南 - 首席填坑官
交流群：912594095，公眾號(hào)：honeyBadger8
本文原創(chuàng)春霍，著作權(quán)歸作者所有砸西。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處址儒。
