導語：
你是否有過自己的api請求很慢，每次都要載入很久，首屏載入空白頁面幾秒鐘，圖片載入慢等等情況，這時候你就需要對自己的web專案進行優化。

1，減少HTTP請求次數，合理使用http快取

減少http的主要辦法是合併CSS、合併javascript、合併圖片。只要http請求次數減少，web的效能就會較大的提升。

2，使用程式碼壓縮

現在wepack等工具，都能夠通過npm run built，將程式碼壓縮成一個檔案，極大的減少了web應用的大小，使得頁面開啟的速度變快，甚至提高50%。

3，使用瀏覽器快取

使用瀏覽器快取，將一些檔案，CSS、javascript、logo、圖示這些靜態資源快取著，用到的時候，直接從快取裡面拿。

4，CSS放在頁面最上部，javascript放在頁面最下面

因為JavaScript是單執行緒語言，而且跟頁面渲染公用一個執行緒，JavaScript在執行的過程中，會阻塞，導致頁面不能夠渲染。所以我們要把css放在上面，先讓頁面渲染出來，在對JavaScript執行。

5，使用伺服器端渲染

伺服器端在返回 html 之前，在特定的區域，符號裡用資料填充，就是執行了JavaScript這些程式碼，然後再給使用者端，使用者端只負責解析 HTML，不用再去執行JavaScript，就可以對頁面渲染完成 。這種一般是對首屏進行處理，減少首屏事件。

6，減少DOM的操作

減少對dom的操作，儘量使用innerHTML，來改變頁面的資料。

7，需要的時候在引入

const Recommend = () => import(/* webpackChunkName: "recommend" */ 'components/recommend/recommend')
const Singer = () => import(/* webpackChunkName:'singer' */ 'components/singer/singer')
const Rank = () => import(/* webpackChunkName:'rank' */ 'components/rank/rank')
const Search = () => import(/* webpackChunkName:'search' */ 'components/search/search')
const SingerDetail = () => import(/* webpackChunkName:'singer' */ 'components/singer-detail/singer-detail')
const Disc = () => import(/* webpackChunkName:'disc' */ 'components/disc/disc')
const TopList = () => import(/* webpackChunkName:'toplist' */ 'components/top-list/top-list')
const UserCenter = () => import(/* webpackChunkName:'user' */ 'components/user-center/user-center')

這樣子寫，就能夠提高首屏速度，在需要的時候再import，能夠提高效能。

補充：

微信搜尋【web小館】，回覆全棧部落格專案，即可獲取專案原始碼和後續的實戰文章教學。每天用最簡單樸實的語言，潛移默化的提升你的計算機基礎知識和前端技術。小米粥，一個專注的web全棧工程師，我們下期再見！