前端减少首屏渲染时间

2026-08-19 09:43:28 +08:00 · 2026-02-01 16:33:38 +08:00
parent 844a57a3b8
commit 3d6d94e38f
4 changed files with 51 additions and 22 deletions
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -15,21 +15,21 @@
    if (process.env.LIB_USE_CDN) {
      if (process.env.NODE_ENV === 'production') {
    %>
-      <script src="https://s4.zstatic.net/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha384-H6KKS1H1WwuERMSm+54dYLzjg0fKqRK5ZRyASdbrI/lwrCc6bXEmtGYr5SwvP1pZ" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/vue/2.7.14/vue.runtime.min.js" integrity="sha384-OuPzRFb9+YLr+ulVAQiUKWAYfQdbHQI3IvQ86+ApeLgPgTI2EJ/ySfV9UjvFFhxN" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/vue-router/3.6.5/vue-router.min.js" integrity="sha384-/NExOjjk+Jjk5ZvMGKDUq/QxHVEJxhJXBBEb9AVSjc1zeQUYhG9cLvz1pY1/QrQF" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/vue-i18n/8.28.2/vue-i18n.min.js" integrity="sha384-hcSOWoIpDyRLasgG/oDA+pDX1b7k6FX+8BkVxPvKXZ/w1ntszakmyGEJXgMeuWCU" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" integrity="sha384-I0kZgnELdQIeth/GMZEO2WQ1Po7jSQEkkqnh7bT+ofoJ9FVqFDhxeu7I10K5DyuV" crossorigin="anonymous">
-      <script src="https://s4.zstatic.net/ajax/libs/element-ui/2.15.13/index.min.js" integrity="sha384-Wzk9c33au7LnMJ233iNheTpEpVPeseLtoqnJElShswILwuk4JaiHjpj6fKD2yhoV" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/pako/2.1.0/pako_inflate.min.js" integrity="sha384-taEjHL+GUvC8IhXeCaTNUxz3O8ItsajGFLDFj4v/VJvM24HU36qP/6sRpuAGGfeT" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha384-H6KKS1H1WwuERMSm+54dYLzjg0fKqRK5ZRyASdbrI/lwrCc6bXEmtGYr5SwvP1pZ" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/vue/2.7.14/vue.runtime.min.js" integrity="sha384-OuPzRFb9+YLr+ulVAQiUKWAYfQdbHQI3IvQ86+ApeLgPgTI2EJ/ySfV9UjvFFhxN" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/vue-router/3.6.5/vue-router.min.js" integrity="sha384-/NExOjjk+Jjk5ZvMGKDUq/QxHVEJxhJXBBEb9AVSjc1zeQUYhG9cLvz1pY1/QrQF" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/vue-i18n/8.28.2/vue-i18n.min.js" integrity="sha384-hcSOWoIpDyRLasgG/oDA+pDX1b7k6FX+8BkVxPvKXZ/w1ntszakmyGEJXgMeuWCU" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/element-ui/2.15.13/index.min.js" integrity="sha384-Wzk9c33au7LnMJ233iNheTpEpVPeseLtoqnJElShswILwuk4JaiHjpj6fKD2yhoV" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/pako/2.1.0/pako_inflate.min.js" integrity="sha384-taEjHL+GUvC8IhXeCaTNUxz3O8ItsajGFLDFj4v/VJvM24HU36qP/6sRpuAGGfeT" crossorigin="anonymous"></script>
    <% } else { %>
-      <script src="https://s4.zstatic.net/ajax/libs/lodash.js/4.17.21/lodash.js" integrity="sha384-l3ZPesZ3gDMDOrzjEodAMRyQlQnAR6KFZN2hnIr+h8Y80fuKlD1jsjdxJpKr9XgP" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/vue/2.7.14/vue.runtime.js" integrity="sha384-7Eh7MYtBZnl23Wa8pdx0AXtu35xsvTaEW6ZXBaFGIND87X3ZvFyqUffgUXa2D+HM" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/vue-router/3.6.5/vue-router.js" integrity="sha384-IkMvPbEBTaZXtDP8XKR0vzQv6h12mn1Tsm0YRzlJ5yZQtQ0b0fI2upc3EB5erSWp" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/vue-i18n/8.28.2/vue-i18n.js" integrity="sha384-6JdClPjeS6N/byLmSMRUkfj8qIW6PR8InDu0hwcpUGithNg6/3+h6QpYNqB9LXXD" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.css" integrity="sha384-i3Zi0wHs7p1SlIuNOWAJupwQHyh8Vg54HE50dXe6SiJwHglCpbLr5Nd9wiswohGS" crossorigin="anonymous">
-      <script src="https://s4.zstatic.net/ajax/libs/element-ui/2.15.13/index.js" integrity="sha384-xJNO3hLLbOGPVKrsu1WIty+KkzNuJKdRr4blB8iY29iXAqkeGJWBtHZ0DGCYi/OE" crossorigin="anonymous"></script>
-      <script src="https://s4.zstatic.net/ajax/libs/pako/2.1.0/pako_inflate.js" integrity="sha384-uHURdoyk6Dqn/gSq38WU6iUc3W0A1rnHIKEp5sjIz8w4yz1eKIM8N7WvNwKMzALi" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/lodash.js/4.17.21/lodash.js" integrity="sha384-l3ZPesZ3gDMDOrzjEodAMRyQlQnAR6KFZN2hnIr+h8Y80fuKlD1jsjdxJpKr9XgP" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/vue/2.7.14/vue.runtime.js" integrity="sha384-7Eh7MYtBZnl23Wa8pdx0AXtu35xsvTaEW6ZXBaFGIND87X3ZvFyqUffgUXa2D+HM" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/vue-router/3.6.5/vue-router.js" integrity="sha384-IkMvPbEBTaZXtDP8XKR0vzQv6h12mn1Tsm0YRzlJ5yZQtQ0b0fI2upc3EB5erSWp" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/vue-i18n/8.28.2/vue-i18n.js" integrity="sha384-6JdClPjeS6N/byLmSMRUkfj8qIW6PR8InDu0hwcpUGithNg6/3+h6QpYNqB9LXXD" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/element-ui/2.15.13/index.js" integrity="sha384-xJNO3hLLbOGPVKrsu1WIty+KkzNuJKdRr4blB8iY29iXAqkeGJWBtHZ0DGCYi/OE" crossorigin="anonymous"></script>
+      <script defer src="https://s4.zstatic.net/ajax/libs/pako/2.1.0/pako_inflate.js" integrity="sha384-uHURdoyk6Dqn/gSq38WU6iUc3W0A1rnHIKEp5sjIz8w4yz1eKIM8N7WvNwKMzALi" crossorigin="anonymous"></script>
    <%
      }
    }
--- a/frontend/src/api/base.js
+++ b/frontend/src/api/base.js
@@ -9,9 +9,10 @@ export const apiClient = axios.create({
 })

 export let init
+export let ensureBaseUrlInited
 export let getBaseUrl
 if (!process.env.BACKEND_DISCOVERY) {
-  init = async function() {}
+  init = function() {}

  const onRequest = config => {
    config.baseURL = getBaseUrl()
@@ -24,16 +25,19 @@ if (!process.env.BACKEND_DISCOVERY) {

  apiClient.interceptors.request.use(onRequest, onRequestError, { synchronous: true })

+  ensureBaseUrlInited = async function() {}
+
  getBaseUrl = function() {
    return window.location.origin
  }

 } else {
-  init = async function() {
-    return updateBaseUrls()
+  init = function() {
+    updateBaseUrls()
  }

-  const onRequest = config => {
+  const onRequest = async config => {
+    await firstInitPromise
    let baseUrl = getBaseUrl()
    if (baseUrl === null) {
      throw new Error('No available endpoint')
@@ -64,7 +68,7 @@ if (!process.env.BACKEND_DISCOVERY) {
    return promise
  }

-  apiClient.interceptors.request.use(onRequest, onRequestError, { synchronous: true })
+  apiClient.interceptors.request.use(onRequest, onRequestError)
  apiClient.interceptors.response.use(onResponse, onResponseError)

  const DISCOVERY_URLS = process.env.NODE_ENV === 'production' ? [
@@ -85,6 +89,13 @@ if (!process.env.BACKEND_DISCOVERY) {
  let curBaseUrl = null
  let baseUrlToCircuitBreaker = new Map()

+  let firstInitResolve = null
+  let firstInitPromise = new Promise(resolve => {
+    firstInitResolve = resolve
+  }).then(() => {
+    firstInitResolve = null
+  })
+
  const doUpdateBaseUrls = async() => {
    async function requestGetUrls(discoveryUrl) {
      try {
@@ -115,6 +126,14 @@ if (!process.env.BACKEND_DISCOVERY) {
        let url = `${baseUrl}/api/ping`
        await axios.get(url, { timeout: 3 * 1000 })
        sortedBaseUrls.push(baseUrl)
+
+        if (firstInitResolve) {
+          if (curBaseUrl === null) {
+            curBaseUrl = baseUrl
+            console.log('Switch server endpoint to', curBaseUrl)
+          }
+          firstInitResolve()
+        }
      } catch {
        errorBaseUrls.push(baseUrl)
      }
@@ -124,14 +143,23 @@ if (!process.env.BACKEND_DISCOVERY) {
    sortedBaseUrls = sortedBaseUrls.concat(errorBaseUrls)

    baseUrls = sortedBaseUrls
-    if (baseUrls.indexOf(curBaseUrl) === -1) {
+    if (curBaseUrl !== null && baseUrls.indexOf(curBaseUrl) === -1) {
      curBaseUrl = null
    }

+    if (firstInitResolve) {
+      // 全失败了则在这里resolve
+      firstInitResolve()
+    }
+
    console.log('Found server endpoints:', baseUrls)
  }
  const updateBaseUrls = _.throttle(doUpdateBaseUrls, 3 * 60 * 1000)

+  ensureBaseUrlInited = async function() {
+    return firstInitPromise
+  }
+
  getBaseUrl = function() {
    updateBaseUrls()

--- a/frontend/src/api/chat/ChatClientRelay.js
+++ b/frontend/src/api/chat/ChatClientRelay.js
@@ -1,4 +1,4 @@
-import { getBaseUrl } from '@/api/base'
+import { ensureBaseUrlInited, getBaseUrl } from '@/api/base'
 import * as chat from '.'
 import * as chatModels from './models'

@@ -46,13 +46,14 @@ export default class ChatClientRelay {
    this.msgHandler.onDebugMsg(new chatModels.DebugMsg({ content }))
  }

-  wsConnect() {
+  async wsConnect() {
    if (this.isDestroying) {
      return
    }

    this.addDebugMsg('Connecting')

+    await ensureBaseUrlInited()
    let baseUrl = getBaseUrl()
    if (baseUrl === null) {
      this.addDebugMsg('No available endpoint')
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -10,6 +10,8 @@ import * as i18n from './i18n'
 import App from './App'
 import NotFound from './views/NotFound'

+apiBase.init()
+
 if (!process.env.LIB_USE_CDN) {
  Vue.use(VueRouter)
  Vue.use(ElementUI)
@@ -61,8 +63,6 @@ const router = new VueRouter({
  ]
 })

-await apiBase.init()
-
 new Vue({
  render: h => h(App),
  router,