今天看的是之前保存的一篇前端優化的相關文章。但是人家寫了禁止轉載，我這邊學習的話就不抄太多東西了。
文章是這篇 快速提升前端性能。
文章主要介紹了如下一些需要關注的點：
1、最小化請求
這個是說一般的頁面中發的請求過多，會導致頁面打開速度變慢。
解決的一種方法是分別編譯或連接（組合、合并）CSS和javascript到一個文件中。讓這個過程自動化（Grunt 或者 Gulp）是理想的效果，但至少也應該在生產環境下手動完成。
第三方腳本是增加額外請求最常見的罪魁禍首，很多獲取額外的文件如腳本、圖像或CSS的請求都不止1個。
2、壓縮、優化
現在找到了減少請求的方法，然后就可以開始尋找各種方法來減重。文件越小，加載速度越快。
CSS和JavaScript
壓縮樣式表和JavaScript文件可以明顯減少文件大小，我僅在壓縮上就從一個文件上節省了56%的空間。
編寫CSS，可以將一些冗長的類精簡，比如“navigation” 變為 “nav”， “introduction” 變為 “intro”，都可以節省了一些空間。
有時候需要評估類庫的必要性。作者總共寫了135kb的代碼，其中96kb是jquery，然后通過剝離jQuery和在Vanilla重寫它，去除了122KB，最終壓縮后的文件大小減少到13KB。（Vanilla是個梗具體可以看這個
Vanilla JS——世界上最輕量的JavaScript框架（沒有之一））
之后作者設法去掉更多空間（壓縮后7KB），最后腳本在壓縮和gzipped后只有0.365KB。
圖片
圖片通常占到一個網站的大頭。
可以拋棄了圖標字體，使用內聯SVG。SVG sprites可能是作者在整個網站使用中普通內聯SVG圖標的一個可行的替代解決方案。
在可能的情況下使用CSS代替圖片，現在的CSS能做的已經很多了。
你也可以通過優化圖片來壓縮字節。有兩種方法來優化圖片：
有損壓縮：降低圖像的質量
無損壓縮：不影響質量
2、頁面渲染
消除render-blocking的JavaScript和CSS。
render-blocking文件增加了瀏覽器顯示內容的時間，因為這些文件需要先下載并處理。多個render-blocking文件需要瀏覽器使用多個線程去獲取和處理它們，等待時間進一步增加。
CSS
默認情況下，瀏覽器將CSS作為渲染阻塞；因此，當它加載時，瀏覽器暫停渲染，等待CSS已經被下載和處理。外部樣式表意味著更多的網絡線程，它增加了等待時間，同時大型樣式表也會增加等待時間。
我們可以通過在<head>標簽內聯“關鍵CSS”來改善頁面渲染時間，這樣瀏覽器可以~~~~不用再等待下載整個樣式表，就可以快速地渲染頁面內容，然后通過non-rendering-blocking方式加載完整的樣式表。
確定哪些CSS是關鍵需要
（1）查看移動或桌面下頁面視口（viewport ）大小
（2）識別視口中可見的元素
（3）選擇這些元素關聯的CSS
JavaScript
JavaScript也會導致render-blocking，因此它的加載也應該優化。可以使用以下的方法:
小的內聯腳本。
在文檔底部加載外部腳本。
使用defer屬性推遲執行腳本。
使用async屬性異步加載的腳本。
Web字體
Web字體使內容更加清晰和漂亮，但是也對頁面渲染產生了負面影響。在加載頁面時，特別是移動端的連接，你可能已經注意到文本在一段時間看不見。這被稱為 FOIT（不可見文本閃動）。（FOIT：當瀏覽器嘗試下載一個web字體，它將隱藏文本一段時間，直到它完成字體下載，才顯示文本。在最糟糕的情況下，文本無限期地不可見，使內容完全不能閱讀。）
其它
其他方法，如啟用gzip和緩存、配置SSL和從內容分發網絡（CDN）獲取資源，可以提高前端性能，但需要一些服務器端支持。
這就是所有內容了，其他還有一些細節以及推薦，可以自己去看一下。希望不算侵權。
