今天看的是之前保存的一篇前端優(yōu)化的相關(guān)文章寨闹。但是人家寫了禁止轉(zhuǎn)載，我這邊學(xué)習(xí)的話就不抄太多東西了。
文章是這篇 快速提升前端性能近她。
文章主要介紹了如下一些需要關(guān)注的點(diǎn)：
1、最小化請(qǐng)求
這個(gè)是說一般的頁面中發(fā)的請(qǐng)求過多膳帕，會(huì)導(dǎo)致頁面打開速度變慢粘捎。
解決的一種方法是分別編譯或連接（組合、合并）CSS和javascript到一個(gè)文件中危彩。讓這個(gè)過程自動(dòng)化（Grunt 或者 Gulp）是理想的效果攒磨，但至少也應(yīng)該在生產(chǎn)環(huán)境下手動(dòng)完成。
第三方腳本是增加額外請(qǐng)求最常見的罪魁禍?zhǔn)滋阑眨芏喃@取額外的文件如腳本娩缰、圖像或CSS的請(qǐng)求都不止1個(gè)。
2谒府、壓縮拼坎、優(yōu)化
現(xiàn)在找到了減少請(qǐng)求的方法浮毯，然后就可以開始尋找各種方法來減重。文件越小泰鸡，加載速度越快债蓝。
CSS和JavaScript
壓縮樣式表和JavaScript文件可以明顯減少文件大小，我僅在壓縮上就從一個(gè)文件上節(jié)省了56%的空間盛龄。
編寫CSS饰迹，可以將一些冗長的類精簡，比如“navigation” 變?yōu)?“nav”余舶， “introduction” 變?yōu)?“intro”啊鸭，都可以節(jié)省了一些空間。
有時(shí)候需要評(píng)估類庫的必要性匿值。作者總共寫了135kb的代碼赠制，其中96kb是jquery，然后通過剝離jQuery和在Vanilla重寫它挟憔，去除了122KB钟些，最終壓縮后的文件大小減少到13KB。（Vanilla是個(gè)梗具體可以看這個(gè)
Vanilla JS——世界上最輕量的JavaScript框架（沒有之一））
之后作者設(shè)法去掉更多空間（壓縮后7KB）曲楚，最后腳本在壓縮和gzipped后只有0.365KB厘唾。
圖片
圖片通常占到一個(gè)網(wǎng)站的大頭。
可以拋棄了圖標(biāo)字體龙誊，使用內(nèi)聯(lián)SVG抚垃。SVG sprites可能是作者在整個(gè)網(wǎng)站使用中普通內(nèi)聯(lián)SVG圖標(biāo)的一個(gè)可行的替代解決方案。
在可能的情況下使用CSS代替圖片趟大，現(xiàn)在的CSS能做的已經(jīng)很多了鹤树。
你也可以通過優(yōu)化圖片來壓縮字節(jié)。有兩種方法來優(yōu)化圖片：
有損壓縮：降低圖像的質(zhì)量
無損壓縮：不影響質(zhì)量
2逊朽、頁面渲染
消除render-blocking的JavaScript和CSS罕伯。
render-blocking文件增加了瀏覽器顯示內(nèi)容的時(shí)間，因?yàn)檫@些文件需要先下載并處理叽讳。多個(gè)render-blocking文件需要瀏覽器使用多個(gè)線程去獲取和處理它們追他，等待時(shí)間進(jìn)一步增加。
CSS
默認(rèn)情況下岛蚤，瀏覽器將CSS作為渲染阻塞邑狸；因此，當(dāng)它加載時(shí)涤妒，瀏覽器暫停渲染单雾，等待CSS已經(jīng)被下載和處理。外部樣式表意味著更多的網(wǎng)絡(luò)線程，它增加了等待時(shí)間硅堆，同時(shí)大型樣式表也會(huì)增加等待時(shí)間屿储。
我們可以通過在<head>標(biāo)簽內(nèi)聯(lián)“關(guān)鍵CSS”來改善頁面渲染時(shí)間，這樣瀏覽器可以~~~~不用再等待下載整個(gè)樣式表渐逃，就可以快速地渲染頁面內(nèi)容够掠，然后通過non-rendering-blocking方式加載完整的樣式表。
確定哪些CSS是關(guān)鍵需要
（1）查看移動(dòng)或桌面下頁面視口（viewport ）大小
（2）識(shí)別視口中可見的元素
（3）選擇這些元素關(guān)聯(lián)的CSS
JavaScript
JavaScript也會(huì)導(dǎo)致render-blocking朴乖，因此它的加載也應(yīng)該優(yōu)化祖屏≈蓿可以使用以下的方法:
小的內(nèi)聯(lián)腳本买羞。
在文檔底部加載外部腳本。
使用defer屬性推遲執(zhí)行腳本雹食。
使用async屬性異步加載的腳本畜普。
Web字體
Web字體使內(nèi)容更加清晰和漂亮，但是也對(duì)頁面渲染產(chǎn)生了負(fù)面影響群叶。在加載頁面時(shí)吃挑，特別是移動(dòng)端的連接，你可能已經(jīng)注意到文本在一段時(shí)間看不見街立。這被稱為 FOIT（不可見文本閃動(dòng)）舶衬。（FOIT：當(dāng)瀏覽器嘗試下載一個(gè)web字體，它將隱藏文本一段時(shí)間赎离，直到它完成字體下載逛犹，才顯示文本。在最糟糕的情況下梁剔，文本無限期地不可見虽画，使內(nèi)容完全不能閱讀。）
其它
其他方法荣病，如啟用gzip和緩存码撰、配置SSL和從內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）獲取資源，可以提高前端性能个盆，但需要一些服務(wù)器端支持脖岛。
這就是所有內(nèi)容了，其他還有一些細(xì)節(jié)以及推薦颊亮，可以自己去看一下柴梆。希望不算侵權(quán)。
