概念
1、常見性能優(yōu)化方法有哪些笼平？給出不少于5條實(shí)際可行的方案
主要從四大方面考慮：文件要小园骆、網(wǎng)速要快、請求要少寓调、服務(wù)器方面锌唾。
具體措施有：
1、減少 HTTP 的請求次數(shù)夺英。
- 請求網(wǎng)頁資源時(shí)晌涕，對每個(gè) html逗噩，css，js 和圖像文件都會(huì)發(fā)送一個(gè) HTTP 請求混狠，如果頁面加載了大量 CSS献幔、JavaScript 和圖像文件，就會(huì)因請求數(shù)過多而造成用戶體驗(yàn)變差曼验。
- 解決方案：
- 如果有多個(gè) CSS 文件，合并為一個(gè) CSS 文件崔慧。
- 如果有多個(gè) JavaScript 文件炒考，合并為一個(gè) JavaScript 文件可缚。
- 小圖標(biāo)通過 CSS Sprite 進(jìn)行合并。
2斋枢、網(wǎng)速方面可以使用內(nèi)容分發(fā)網(wǎng)絡(luò) CDN（Content Delivery Network）帘靡。
- 簡單的靜態(tài)資源服務(wù)器，將一些靜態(tài)資源放在CDN上瓤帚；
- CDN可以根據(jù)地理位置描姚，將用戶導(dǎo)向距離用戶最近的服務(wù)器節(jié)點(diǎn)。從而使內(nèi)容傳輸?shù)酶旄甏巍⒏€(wěn)定轩勘，但需要相當(dāng)?shù)馁M(fèi)用支出。
3怯邪、將 CSS 和 JavaScript 的引用放在正確的位置绊寻。
- CSS 文件會(huì)阻止渲染，但通常不會(huì)阻止下載悬秉。
- JavaScript 文件會(huì)阻塞下載澄步，并會(huì)在下載之后立即執(zhí)行，而不顧 DOM 是否加載完畢和泌。
- 解決方案：
- 將樣式表放置在頭部村缸，可使頁面樣式正常顯示。
- 將 JavaScript 的引用放在 body最后面允跑，以避免阻塞其他內(nèi)容的下載王凑，并保證執(zhí)行時(shí) DOM 已加載完畢。
4聋丝、使用外部的 CSS 和 JavaScript 文件索烹。
- 盡管內(nèi)聯(lián)比外部文件響應(yīng)更快且外部文件會(huì)增加 HTTP 請求的個(gè)數(shù)，但使用外部文件可以使相同 CSS／JavaScript 文件可為多個(gè) HTML 文件復(fù)用弱睦。
頻繁使用但不常改動(dòng)的外部文件可使用緩存方案百姓，從而減少 HTTP 請求數(shù)。 - 解決方案：
- 將內(nèi)聯(lián)的 CSS 和 JavaScript 代碼放置到外部文件中况木。
- 可復(fù)用的代碼整合放置到同一文件中垒拢。
5、壓縮文件（文件內(nèi)容的壓縮）：
- 壓縮可以極大地減少文件的體積火惊，從而減少文件傳輸?shù)臅r(shí)間求类。
- 解決方案：
- 對于 CSS 和 JavaScript 文件，可以通過去除注釋屹耐、空白字符和替換變量名等辦法進(jìn)行壓縮尸疆。
- 對于圖像，可以使用工具通過一定的壓縮算法進(jìn)行壓縮。
6寿弱、后端可以使用 Gzip 壓縮（數(shù)據(jù)流的壓縮）犯眠。
- 使用 Gzip 時(shí)，服務(wù)器端在傳輸前會(huì)對所傳輸?shù)膬?nèi)容進(jìn)行 Gzip 壓縮症革，從而減小傳輸文件的體積筐咧，瀏覽器在接收到文件之后先進(jìn)行解壓縮，然后渲染和執(zhí)行文件噪矛。
7量蕊、為文件頭指定 Expires 或 Cache-Control
- 二者都是通過使用緩存來減少 HTTP 的請求數(shù)量，并減小 HTTP 的響應(yīng)大小來達(dá)到讓頁面加載更快的目的摩疑。
- 如果 Web 服務(wù)器開啟了 Expires 模塊危融，則會(huì)在響應(yīng)頭中提供一個(gè)時(shí)間值，指明資源在本地的過期時(shí)間雷袋，在這個(gè)時(shí)間之前吉殃，當(dāng)再次需要加載該資源時(shí)，就可直接使用緩存中的數(shù)據(jù)楷怒，而不需再次發(fā)送 HTTP 請求蛋勺。
- 使用 Cache-Control 可克服 Expires 頭因指定特定時(shí)間而要求服務(wù)器和客戶端時(shí)鐘嚴(yán)格同步的限制。通過指定 max-age鸠删，提供一個(gè)秒數(shù)值抱完，如果相同的資源距離上次請求的時(shí)間少于這個(gè)數(shù)值，則使用緩存的版本刃泡，從而避免額外的 HTTP 請求巧娱。
- 解決方案：
- 靜態(tài)資源（包括但不限于圖像）可使用 Expires 頭。
- 經(jīng)常更新的動(dòng)態(tài)資源推薦使用 Cache-Control烘贴。
