1. 開啟頁面
這個時候頁面是完全空白的。
2. 首屏渲染
html 和引用的 css 載入完畢，瀏覽器進行首次渲染，有可見的內容出現。
我們把首次渲染需要載入的資源體積稱為「首屏體積」。
3. 首次內容渲染
react、 react-dom、業務**載入完畢，應用第一次渲染，頁面主要內容出現。
4. 可互動
然後應用的**開始執行，拉取資料、進行動態 import、響應事件等，完畢後頁面進入可互動狀態。
5. 內容載入完畢
接下來 lazyload 的等多**內容開始逐漸載入完畢。
6. 頁面載入完畢
然後直到頁面的其他資源載入完畢。
接下來，我們分別討論這些步驟中，有哪些優化的點。
react 專案中的 html 都會提供乙個 root 節點
我們可以使用 html-webpack-plugin 自動給 root 節點插入內容。
// webpack.config.js
const htmlwebpackplugin = require('html-webpack-plugin');
const path = require('path');
const fs = require('fs');
// 讀取要自動插入root節點的 html 和 css
var loading =
module.exports = ),
]}
// html
<%= htmlwebpackplugin.options.loading.html %>
import react from 'react';
import from 'react-router-dom';
import loadable from 'react-loadable'
import loading from './components/loading'
let home = loadable()
let user = loadable()
let others = loadable()
export default class rootrouter extends react.component
}
把 es2015+ 的**編譯成 es5，體積會增大好幾倍，執行速率也會減慢。在當下2023年，大部分現代瀏覽器已經支援 es6 語法。我們要做的，就是把**編譯到 es2015+，然後給少數的老舊瀏覽器留乙份 es5 的**即可。
具體的做法就是使用現代主流瀏覽器能識別 type="module"，就載入第一條 es2015+ 的**。老舊瀏覽器不能識別 type="module" 和 type="nomodule"，就會載入第二條 es5 的**。
我們在載入文字、的時候，經常出現「閃屏」的情況，比如文字或者還沒有載入完畢，此時頁面上對應的位置還是完全空著的，然後載入完畢，內容會突然撐開頁面，導致「閃屏」的出現，造成不好的使用者體驗。
為了避免這種「閃屏」的情況，我們要做的就是提前設定佔位元素，也就是 placeholder。已經有一些現成的第三方元件可以用了。
react專案 效能優化 首頁優化 載入優化
react路由懶載入 非同步元件 react loadable 以路由元件分割 或者參考 安裝cnpm install react loadable s 如果專案有100個頁面，那laodable.js就需要寫100遍，這樣就感覺有點冗餘了，所以這個我們可以封裝一下 首先，我們建乙個utilsrc ...
react專案效能優化方向
react按需載入 react效能優化點 rect 效能 問題 對於react 應用，怎麼優化它的效能？侷限 只關注react框架 回答 以下方向思想 1.應用載入效能 載入過程，頁面渲染過程 cdn 怎麼優化cdn對於靜態資源的快取？快取和回源 cdn上沒有找到資源，到源站上面去拉取 快取重新整理...
React 效能優化
避免重複渲染 當乙個元件的props或者state改變時，react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時，react會更新dom。在一些情況下，你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度，它是在重新渲染過...