導語：
你是否有過自己的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全堆疊工程師，我們下期再見！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/139276.html
標籤：其他