首屏時間（First Contentful Paint），指的是浏覽器從響應用戶輸入網址地址，到首屏内容渲染完成的時間，此時整個網頁不一定要全部渲染完成，但需要展示當前視窗需要的内容

首屏加載可以說是用戶體驗中最重要的環節

利用performance.timing提供的數據：

通過DOMContentLoad或者performance來計算出首屏時間

// 方案一： document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting'); }); // 方案二： performance.getEntriesByName("first-contentful-paint")[0].startTime // performance.getEntriesByName("first-contentful-paint")[0] // 會返回一個 PerformancePaintTiming的實例，結構如下： { name: "first-contentful-paint", entryType: "paint", startTime: 507.80000002123415, duration: 0, };

在頁面渲染的過程，導緻加載速度慢的因素可能如下：

• 網絡延時問題
• 資源文件體積是否過大
• 資源是否重複發送請求去加載了
• 加載腳本的時候，渲染内容堵塞了

常見的幾種SPA首屏優化方式

• 減小入口文件積
• 靜态資源本地緩存
• UI框架按需加載
• 圖片資源的壓縮
• 組件重複打包
• 開啟GZip壓縮
• 使用SSR

常用的手段是路由懶加載，把不同路由對應的組件分割成不同的代碼塊，待路由被請求的時候會單獨打包路由，使得入口文件變小，加載速度大大增加

在vue-router配置路由的時候，采用動态加載路由的形式

routes:[ path: 'Blogs', name: 'ShowBlogs', component: () => import('./components/ShowBlogs.vue') ]

以函數的形式加載路由，這樣就可以把各自的路由文件分别打包，隻有在解析給定的路由時，才會加載路由組件

後端返回資源問題：

• 采用HTTP緩存，設置Cache-Control，Last-Modified，Etag等響應頭
• 采用Service Worker離線緩存

前端合理利用localStorage

在日常使用UI框架，例如element-UI、或者antd，我們經常性直接引用整個UI庫

import ElementUI from 'element-ui' Vue.use(ElementUI)

但實際上我用到的組件隻有按鈕，分頁，表格，輸入與警告 所以我們要按需引用

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui'; Vue.use(Button) Vue.use(Input) Vue.use(Pagination)

假設A.js文件是一個常用的庫，現在有多個路由使用了A.js文件，這就造成了重複下載

解決方案：在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3

minChunks為3表示會把使用3次及以上的包抽離出來，放進公共依賴文件，避免了重複加載組件

圖片資源雖然不在編碼過程中，但它卻是對頁面性能影響最大的因素

對于所有的圖片資源，我們可以進行适當的壓縮

對頁面上使用到的icon，可以使用在線字體圖标，或者雪碧圖，将衆多小圖标合并到同一張圖上，用以減輕http請求壓力。

拆完包之後，我們再用gzip做一下壓縮 安裝compression-webpack-plugin

cnmp i compression-webpack-plugin -D

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin') configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 為生産環境修改配置... config.mode = 'production' return { plugins: [new CompressionPlugin({ test: /\.js$|\.html$|\.css/, //匹配文件名 threshold: 10240, //對超過10k的數據進行壓縮 deleteOriginalAssets: false //是否删除原文件 })] } }

在服務器我們也要做相應的配置 如果發送請求的浏覽器支持gzip，就發送給它gzip格式的文件 我的服務器是用express框架搭建的 隻要安裝一下compression就能使用

const compression = require('compression') app.use(compression()) // 在其他中間件使用之前調用

SSR（Server side ），也就是服務端渲染，組件或頁面通過服務器生成html字符串，再發送到浏覽器

從頭搭建一個服務端渲染是很複雜的，vue應用建議使用Nuxt.js實現服務端渲染

減少首屏渲染時間的方法有很多，總的來講可以分成兩大部分 ：資源加載優化 和 頁面渲染優化

下圖是更為全面的首屏優化的方案

大家可以根據自己項目的情況選擇各種方式進行首屏渲染的優化

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!