如何优化你的超大型React应用-原创精读

5次阅读

共计 11026 个字符，预计需要花费 28 分钟才能阅读完成。

React为了大型应用而生，Electron和 React-native 赋予了它构建移动端跨平台 App 和桌面应用的能力，Taro则赋予了它一次编写，生成多种平台小程序和 React-native 应用的能力，这里特意说下 Taro，它是国产，文档写得比较不错，而且它的升级速度比较快，有 issue 我看也会及时解决，他们的维护人员还是非常敬业的！

，

Tips: 本文某些知识点如果介绍不对或者不全的地方欢迎指出，本文可能内容比较多，阅读时间花费比较长，但是希望你可以认真看下去，可以的话最好手把手去实现一些code，本文所有代码均手写。

手写 React 优化脚手架带项目
react-ssr 的源码
手写 Node.js 原生静态资源服务器
跨平台 Electron 的 demo

原生浏览器环境其实是最考验前端工程师能力的编程环境，因为我们前端大部分一开始面向浏览器编程，现在很多很多工作 5 -10 年的前端，性能面板 API 都不知道用，怎么看调用函数分析耗时都不知道，这也是最近面试的情况，觉得有人说 35 岁失业的情况，是普遍存在，但是很大部分是你在混啊兄弟。

原生浏览器环境中使用 `React` 框架，比较常见的是制作单页面 `SPA` 应用:

原生的 `SPA` 应用，分以下几种：

纯 CSR 渲染（客户端渲染）
纯 SSR 渲染（服务端渲染）
混合渲染（预渲染，webpack的插件预渲染,Next.js的约定式路由 SSR, 或者使用Node.js 做中间件，做部分SSR, 加快首屏渲染，或者指定路由SSR.）

下面会分别仔细介绍这几种渲染形式的精细化渲染，以及优缺点：

纯 `CSR` 渲染

客户端请求 RestFul 接口，接口吐回静态资源文件
- Node.js实现代码

const express = require('express')
const app = express()

app.use(express.static('pulic'))// 这里的 public 就是静态资源的文件夹，让客户端拉取的, 这里的代码是前端的代码已经构建完毕的代码 

app.get('/',(req,res)=>{//do something})

app.listen(3000,err=>{if(!err)=>{console.log('监听端口号 3000 成功')
    }
})

客户端收到一个 HTML 文件，和若干个 CSS 文件，以及多个 javaScript 文件
用户输入了 url 地址栏然后客户端返回静态文件，客户端开始解析
客户端解析文件，js代码动态生成页面。（这也是为什么说单页面应用的 SEO 不友好的原因，初始它只是一个空的 div 标签的 HTML 文件）
判断一个页面是不是 CSR，很大程度上可以根据右键点开查看页面元素，如果只有一个空的div 标签，那么大概率可以说是单页面，CSR，客户端渲染的网页。

纯 `CSR` 的应用，如何精细化渲染呢？

单页面采取 `CSR` 形式，大都依赖框架，`Vue`和 `React` 之类。一旦使用这类型技术架构，状态数据集中管理，单向数据流，不可变数据，路由懒加载，按需加载组件，适当的缓存机制 (`PWA` 技术)，细致拆分组件，单一数据来源刷新组件，这些都是我们可以精细化的方向。往往纯 `CSR` 的单页面应用一般不会太复杂，所以这里不引入 `PWA` 和`web work`等等，在后面复杂的跨平台应用中我会将那些技术一拥而上。

单一数据来源决定组件是否刷新是精细化最重要的方向。

class app extends React.PureComponent{///////}

export default connect((({xx,xxx,xxxx,xxxxx}))
////

)(app)

一旦业务逻辑非常复杂的情况下，假设我们使用的是 dva 集中状态管理，同时连接这么多的状态树模块，那么可能会造成状态树模块中任意的数据刷新导致这个组件被刷新，但是其实这个组件此时是不需要刷新的。

这里可以将需要的状态通过根组件用 props 传入，精确刷新的来源，单一可变数据来源追溯性强，也更方便debug
单向数据流不可变数据，通过 immutable.js 这个库实现

    import Immutable from require('immutable');
    var map1: Immutable.Map<string, number>;
    map1 = Immutable.Map({a: 1, b: 2, c: 3});
    var map2 = map1.set('b', 50);
    map1.get('b'); // 2
    map2.get('b'); // 50

不可变数据，数据共享，持久化存储，通过 is 比较，每次 map 生成的都是唯一的，它们比较的是 codehash 的值，性能比通过递归或者直接比较强很多。在 PureComponent 浅比较不好用的时候

一般的组件，使用 PureComponent 减少重复渲染即可
PureComponent，平时我们创建 React 组件一般是继承于 Component，而 PureComponent 相当于是一个更纯净的 Component，对更新前后的数据进行了一次浅比较。只有在数据真正发生改变时，才会对组件重新进行 render。因此可以大大提高组件的性能。
PureComponent部分源码，其实就是浅比较，只不过对一些特殊值进行了判断：



function is(x: any, y: any) {
    return ((x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) 
    );
}

这里特别注意，为什么使用 `immutable.js 和 pureComponent`，因为`React` 一旦根组件被刷

新，会自上而下逐渐刷新整个子孙组件，这样性能损耗重复渲染就会多出很多，所以我们不仅要单一数据来源控制组件刷新，偶尔还需要在 shouldComponentUpdate 中对比nextProps 和 this.props 以及this.state 以及 nextState.

路由懒加载 +code-spliting，加快首屏渲染，也可以减轻服务器压力，因为很多人可能访问你的网页并不会看某些路由的内容
使用 react-lazyload，支持SSR，非常推荐，官方的lazy 不支持 SSR，这是一个遗憾, 这里需要配合wepback4 的optimization配置，进行代码分割

Tips:这里需要下载支持动态 import 的babel 预设包 @babel/plugin-syntax-dynamic-import , 它支持动态倒入组件

webpack 配置：optimization: {
        runtimeChunk: true,
        splitChunks: {chunks: 'all'}
    }

    import React from 'react'
    import Loading from './loading-window'// 占位的那个组件，初始加载
    import Loadable from 'react-loadable'
    const LoadableComponent = Loadable({loader: () => import('./sessionWindow'),// 真正需要加载的组件
        loading: Loading,
      });
      
      
    export default LoadableComponent

好了，现在路由懒加载组件以及代码分割已经做好了，而且它支持SSR。非常棒
由于纯 CSR 的网页一般不是很复杂，这里再介绍一个方面，那就是，能不用 redux，dva 等集中状态管理的状态就不上状态树，实践证明，频繁更新状态树对用户体验来说是影响非常大的。这个异步的过程，更耗时。远不如支持通过 props 等方式进行组件间通信，原则上除了很多组件共享的数据才上状态树，否则都采用其他方式进行通信。

`SSR`, 服务端渲染：

服务端渲染可以分为：

纯服务端渲染，如 `jade,tempalte,ejs` 等模板引擎进行渲染，然后返回给前端对应的 `HTML` 文件

这里也使用Node.js+express 框架

const express= require('express')
const app =express()
const jade = require('jade')
const result = ***
const url path = *** 
const html = jade.renderFile(url, { data: result, urlPath})// 传入数据给模板引擎
app.get('/',(req,res)=>{res.send(html)// 直接吐渲染好的 `html` 文件拼接成字符串返回给客户端
}) //RestFul 接口 

app.listen(3000,err=>{//do something})

混合渲染，使用 `webpack4` 插件，预渲染指定路由, 被指定的路由为 `SSR` 渲染，后台 0 代码实现

const PrerenderSPAPlugin = require('prerender-spa-plugin')
new PrerenderSPAPlugin({routes: ['/','/home','/shop'],
            staticDir: resolve(__dirname, '../dist'),
          }),

混合渲染，使用 `Node.js` 作为中间件，`SSR`指定的路由加快首屏渲染，当然 `CSS` 也可以服务端渲染，动态 `Title 和 meta 标签`，更好的`SEO` 优化，这里 `Node.js` 还可以同时处理数据，减轻前端的计算负担。

我觉得掘金上的神三元那篇文章就写得很好，后面我自己去逐步实现了一次，感觉对 SSR 对理解更为透彻，加上本来就每天在写Node.js，还会一点Next,Nuxt, 服务端渲染，觉得大同小异。
服务端渲染本质，在服务端把代码运行一次，将数据提前请求回来，返回运行后的 html 文件，客户端接到文件后，拉取 js 代码，代码注水，然后显示，脱水，js接管页面。
同构直出代码，可以大大降低首屏渲染时间，经过实践，根据不同的内容和配置可以缩短 40%-65% 时间，但是服务端渲染会给服务器带来压力，所以折中根据情况使用。
以下是一个最简单的服务端渲染，服务端直接吐拼接后的 html 结构字符串：

var express = require('express')
var app = express()

app.get('/', (req, res) => {
 res.send(
 `
   <html>
     <head>
       <title>hello</title>
     </head>
     <body>
       <h1>hello world </h1>
     </body>
   </html>
 `
 )
})

app.listen(3000, () => {if(!err)=>{console.log('3000 监听')Ï
}
})

只要客户端访问 localhost:3000 就可以拿到数据页面访问

服务端渲染核心，保证代码在服务端运行一次，将 `redux` 的`store`状态树中的数据一起返回给客户端，客户端脱水，渲染。保证它们的状态数据和路由一致，就可以说是成功了。必须要客户端和服务端代码和数据一致性，否则 `SSR` 就算失败。

//server.js

// server/index.js
import express from 'express';
import {render} from '../utils';
import {serverStore} from '../containers/redux-file/store';
const app = express();
app.use(express.static('public'));
app.get('*', function(req, res) {if (req.path === '/favicon.ico') {res.send();
    return;
  }
  const store = serverStore();
  res.send(render(req, store));
});
const server = app.listen(3000, () => {var host = server.address().address;
  var port = server.address().port;
  console.log(host, port);
  console.log('启动连接了');
});


//render 函数
import Routes from '../Router';
import {renderToString} from 'react-dom/server';
import {StaticRouter, Link, Route} from 'react-router-dom';
import React from 'react';
import {Provider} from 'react-redux';
import {renderRoutes} from 'react-router-config';
import routers from '../Router';
import {matchRoutes} from 'react-router-config';
export const render = (req, store) => {const matchedRoutes = matchRoutes(routers, req.path);
  matchedRoutes.forEach(item => {
    // 如果这个路由对应的组件有 loadData 方法
    if (item.route.loadData) {item.route.loadData(store);
    }
  });
  console.log(store.getState(),Date.now())
  const content = renderToString(<Provider store={store}>
      <StaticRouter location={req.path}>{renderRoutes(routers)}</StaticRouter>
    </Provider>
  );
  return `
      <html>
        <head>
          <title>ssr123</title>
        </head>
        <body>
          <div id="root">${content}</div>
          <script>window.context={state:${JSON.stringify(store.getState())}}</script>
          <script src="/index.js"></script>
        </body>
      </html>
    `;
};

数据注水，脱水，保持客户端和服务端 store 的一致性。

上面返回的 script 标签, 里面已经注水，将在服务端获取到的数据给到了全局 window 下的 context 属性，在初始化客户端 store 时候我们给它脱水。初始化渲染使用服务端获取的数据～

import thunk from 'redux-thunk';
import {createStore, applyMiddleware} from 'redux';
import reducers from './reducers';

export const getClientStore = () => {const defaultState = window.context ? window.context.state : {};
  return createStore(reducers, defaultState, applyMiddleware(thunk));
};

export const serverStore = () => {return createStore(reducers, applyMiddleware(thunk));
};

这里注意，在组件的 componentDidMount 生命周期中发送 ajax 等获取数据时候，先判断下状态树中有没有数据，如果有数据，那么就不要重复发送请求，导致资源浪费。
多层级路由SSR

// 路由配置文件，改成这种方式
import Home from './containers/Home';
import Login from './containers/Login';
import App from './containers/app';
export default [
  {
    component: App,
    routes: [
      {
        path: '/',
        component: Home,
        exact: true,
        loadData: Home.loadData
      },
      {
        path: '/login',
        component: Login,
        exact: true
      }
    ]
  }
];

入口文件路由部分改成：

server.js

 const content = renderToString(<Provider store={store}>
      <StaticRouter location={req.path}>{renderRoutes(routers)}</StaticRouter>
    </Provider>
  );

client.js 

 <Provider store={store}>
      <BrowserRouter>{renderRoutes(routers)}</BrowserRouter>
    </Provider>

后续可能有利用 loader 进行 CSS 的服务端渲染以及 helmet 的动态 meta, title 标签进行 SEO 优化等，今天时间紧促，就不继续写 SSR 了。

构建 `Electron` 极度复杂，超大数据的应用。

需要用到技术，`sqlite,PWA,web work，原生 Node.js,react-window，react-lazyload，C++ 插件等`

第一个提到的是 sqlite, 嵌入式关系型数据库，轻量型无入侵性，标准的sql 语句，这里不做过多介绍。
PWA, 渐进性式 web 应用，这里使用 webpack4 的插件，进行快速使用，对于一些数据内容不需要存储数据库的，但是却想要一次拉取，多次复用，那么可以使用这个配置

通常我们如果要使用 Service Worker 基本就是以下几个步骤：
首先我们需要在页面的 JavaScript 主线程中使用 serviceWorkerContainer.register() 来注册 Service Worker，在注册的过程中，浏览器会在后台启动尝试 Service Worker 的安装步骤。
如果注册成功，Service Worker 在 ServiceWorkerGlobalScope 环境中运行；这是一个特殊的 worker context，与主脚本的运行线程相独立，同时也没有访问 DOM 的能力。
后台开始安装步骤，通常在安装的过程中需要缓存一些静态资源。如果所有的资源成功缓存则安装成功，如果有任何静态资源缓存失败则安装失败，在这里失败的不要紧，会自动继续安装直到安装成功，如果安装不成功无法进行下一步 — 激活 Service Worker。
开始激活 Service Worker，必须要在 Service Worker 安装成功之后，才能开始激活步骤，当 Service Worker 安装完成后，会接收到一个激活事件（activate event）。激活事件的处理函数中，主要操作是清理旧版本的 Service Worker 脚本中使用资源。
激活成功后 Service Worker 可以控制页面了，但是只针对在成功注册了 Service Worker 后打开的页面。也就是说，页面打开时有没有 Service Worker，决定了接下来页面的生命周期内受不受 Service Worker 控制。所以，只有当页面刷新后，之前不受 Service Worker 控制的页面才有可能被控制起来。

直接上代码，存储所有js 文件和图片 // 实际的存储根据自身需要，并不是越多越好。

const WorkboxPlugin = require('workbox-webpack-plugin')
new WorkboxPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true,
            importWorkboxFrom: 'local',
            include: [/\.js$/, /\.css$/, /\.html$/, /\.jpg/, /\.jpeg/, /\.svg/, /\.webp/, /\.png/],
        }),

PWA并不仅仅这些功能，它的功能非常强大，有兴趣的可以去 lavas 看看,PWA技术对于经常访问的老客户来说，首屏渲染提升非常大，特别在移动端，可以添加到桌面保存。666 啊～，在 pc 端更多的是缓存处理文件～
使用react-lazyload，懒加载你的视窗初始看不见的组件或者图片。

/ 开箱即用的懒加载图片
import LazyLoad from 'react-lazyload'
 <LazyLoad height={42} offset={100} once> // 这里配置表示占位符的样式～。<img
            src={this.state.src}
            onError={this.handleError.bind(this)}
            className={className || 'avatar'}
          />
</LazyLoad>

记得在移动端的滑动屏幕或者 PC 端的调用 forceCheck，动态计算元素距离视窗的位置然后决定是否显示真的图片～

import {forceCheck} from 'react-lazyload';
forceCheck()

懒加载组件

import {lazyload} from 'react-lazyload';
// 跟上面同理，不过是一个装饰器，高阶函数而已。一样需要 forcecheck()
@lazyload({
  height: 200,
  once: true,
  offset: 100
})
class MyComponent extends React.Component {render() {return <div>this component is lazyloaded by default!</div>;}
}

大数据 `React` 渲染，拥有让应用拥有 60`FPS` - 非常核心的一点优化

List长列表

]

react-virtualized-auto-sizer 和 windowScroll 配合一起使用，达到页面复杂效果 + 大数据渲染保持 60FPS。上面的官网里有介绍这些组件～

高计算量的工作交给 `web wrok` 线程


var myWorker = new Worker('worker.js'); 
first.onchange = function() {myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

这段代码中变量 first 和 second 代表 2 个 <input> 元素；它们当中任意一个的值发生改变时，myWorker.postMessage([first.value,second.value])会将这 2 个值组成数组发送给 worker。你可以在消息中发送许多你想发送的东西。
在 worker 中接收到消息后，我们可以写这样一个事件处理函数代码作为响应（worker.js）：

onmessage = function(e) {console.log('Message received from main script');
  var workerResult = 'Result:' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

onmessage 处理函数允许我们在任何时刻，一旦接收到消息就可以执行一些代码，代码中消息本身作为事件的 data 属性进行使用。这里我们简单的对这 2 个数字作乘法处理并再次使用 postMessage()方法，将结果回传给主线程。
回到主线程，我们再次使用 onmessage 以响应 worker 回传的消息：

myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}

在这里我们获取消息事件的 data，并且将它设置为 result 的 textContent，所以用户可以直接看到运算的结果。
注意：在主线程中使用时，onmessage 和 postMessage() 必须挂在 worker 对象上，而在 worker 中使用时不用这样做。原因是，在 worker 内部，worker 是有效的全局作用域。
注意：当一个消息在主线程和 worker 之间传递时，它被复制或者转移了，而不是共享。

开启 web work 线程，其实也会损耗一定的主线程的性能，但是大量计算的工作交给它也未尝不可，其实 Node.js 和javaScript都不适合做大量计算工作，这点有目共睹，尤其是 js 引擎和 GUI 渲染线程互斥的情况存在。

充分合理利用 `React` 的`Feber`架构 `diff` 算法优化项目

requestAnimationFrame调用高优先级任务，中断调度阶段的遍历，由于 React 的新版本调度阶段是拥有三根指针的可中断的链表遍历，所以这样既不影响下面的遍历，也不影响用户交互等行为。
requestIdleCallback, 这个 API 目前兼容性不太好，但是在 Electron 开发中，可以使用，两者还是有区别的，而且这两个 api 用好了可以解决很多复杂情况下的问题～。当然你也可以用上面的 api 封装这个api，也并不是很复杂。

使用 `preload`，`prefetch`,`dns-prefetch` 等指定提前请求指定文件，或者根据情况，浏览器自行决定是否提前 `dns` 预解析或者按需请求某些资源。

这里也可以 webpack4 插件实现, 目前京东在使用这个方案～

const PreloadWebpackPlugin = require('preload-webpack-plugin')
 new PreloadWebpackPlugin({
            rel: 'preload',
            as(entry) {if (/\.css$/.test(entry)) return 'style';
              if (/\.woff$/.test(entry)) return 'font';
              if (/\.png$/.test(entry)) return 'image';
              return 'script';
            },
            include:'allChunks'
            //include: ['app']
          }),

对指定 `js` 文件延迟加载～

给 script 标签，加上 async 标签，遇到此标签，先去请求，但是不阻塞解析 html 等文件～，请求回来就立马加载
给 script 标签, 加上 defer 标签，延迟加载，但是必须在所有脚本加载完毕后才会加载它，但是这个标签有bug，不确定能否准时加载。一般只给一个

写这篇时间太耗时间，而且论坛的在线编辑器到了内容很多的时候，非常卡，React-native的以及一些细节，后面再补充

手写 React 优化脚手架带项目
react-ssr 的源码
手写 Node.js 原生静态资源服务器
跨平台 Electron 的 demo

正文完

css html node.js typescript

发表至： javascript

2019-07-23

0

关于javascript:石油储运生产-2D-可视化组态应用赋能工业智慧发展

关于javascript:建议收藏-Webpack-4-优秀学习资料合集

JavaScript-事件循环机制-Event-loop

关于javascript:性能优化实战宝宝知道小程序FMP优化实录

Java并发CopyOnWriteArrayList

如何优化你的超大型React应用-原创精读

本文会从原生浏览器环境，到跨平台开发逐渐去深入介绍, 先给一些资料

原生浏览器环境：

原生浏览器环境中使用 `React` 框架，比较常见的是制作单页面 `SPA` 应用:

原生的 `SPA` 应用，分以下几种：

下面会分别仔细介绍这几种渲染形式的精细化渲染，以及优缺点：

纯 `CSR` 渲染

纯 `CSR` 的应用，如何精细化渲染呢？

这里特别注意，为什么使用 `immutable.js 和 pureComponent`，因为`React` 一旦根组件被刷

`SSR`, 服务端渲染：

服务端渲染可以分为：

纯服务端渲染，如 `jade,tempalte,ejs` 等模板引擎进行渲染，然后返回给前端对应的 `HTML` 文件

混合渲染，使用 `webpack4` 插件，预渲染指定路由, 被指定的路由为 `SSR` 渲染，后台 0 代码实现

混合渲染，使用 `Node.js` 作为中间件，`SSR`指定的路由加快首屏渲染，当然 `CSS` 也可以服务端渲染，动态 `Title 和 meta 标签`，更好的`SEO` 优化，这里 `Node.js` 还可以同时处理数据，减轻前端的计算负担。

构建 `Electron` 极度复杂，超大数据的应用。

需要用到技术，`sqlite,PWA,web work，原生 Node.js,react-window，react-lazyload，C++ 插件等`

serverce work 也有它的一套生命周期

大数据 `React` 渲染，拥有让应用拥有 60`FPS` - 非常核心的一点优化

高计算量的工作交给 `web wrok` 线程

充分合理利用 `React` 的`Feber`架构 `diff` 算法优化项目

使用 `preload`，`prefetch`,`dns-prefetch` 等指定提前请求指定文件，或者根据情况，浏览器自行决定是否提前 `dns` 预解析或者按需请求某些资源。

对指定 `js` 文件延迟加载～

下面给出一些源码和资料地址：

站内搜索

如何优化你的超大型React应用-原创精读

本文会从原生浏览器环境，到跨平台开发逐渐去深入介绍, 先给一些资料

原生浏览器环境：

原生浏览器环境中使用 React 框架，比较常见的是制作单页面 SPA 应用:

原生的 SPA 应用，分以下几种：

下面会分别仔细介绍这几种渲染形式的精细化渲染，以及优缺点：

纯 CSR 渲染

纯 CSR 的应用，如何精细化渲染呢？

这里特别注意，为什么使用 immutable.js 和 pureComponent，因为React 一旦根组件被刷

SSR, 服务端渲染：

服务端渲染可以分为：

纯服务端渲染，如 jade,tempalte,ejs 等模板引擎进行渲染，然后返回给前端对应的 HTML 文件

混合渲染，使用 webpack4 插件，预渲染指定路由, 被指定的路由为 SSR 渲染，后台 0 代码实现

混合渲染，使用 Node.js 作为中间件，SSR指定的路由加快首屏渲染，当然 CSS 也可以服务端渲染，动态 Title 和 meta 标签，更好的SEO 优化，这里 Node.js 还可以同时处理数据，减轻前端的计算负担。

构建 Electron 极度复杂，超大数据的应用。

需要用到技术，sqlite,PWA,web work，原生 Node.js,react-window，react-lazyload，C++ 插件等

serverce work 也有它的一套生命周期

大数据 React 渲染，拥有让应用拥有 60FPS - 非常核心的一点优化

高计算量的工作交给 web wrok 线程

充分合理利用 React 的Feber架构 diff 算法优化项目

使用 preload，prefetch,dns-prefetch 等指定提前请求指定文件，或者根据情况，浏览器自行决定是否提前 dns 预解析或者按需请求某些资源。

对指定 js 文件延迟加载～

下面给出一些源码和资料地址：

站内搜索

原生浏览器环境中使用 `React` 框架，比较常见的是制作单页面 `SPA` 应用:

原生的 `SPA` 应用，分以下几种：

纯 `CSR` 渲染

纯 `CSR` 的应用，如何精细化渲染呢？

这里特别注意，为什么使用 `immutable.js 和 pureComponent`，因为`React` 一旦根组件被刷

`SSR`, 服务端渲染：

纯服务端渲染，如 `jade,tempalte,ejs` 等模板引擎进行渲染，然后返回给前端对应的 `HTML` 文件

混合渲染，使用 `webpack4` 插件，预渲染指定路由, 被指定的路由为 `SSR` 渲染，后台 0 代码实现

混合渲染，使用 `Node.js` 作为中间件，`SSR`指定的路由加快首屏渲染，当然 `CSS` 也可以服务端渲染，动态 `Title 和 meta 标签`，更好的`SEO` 优化，这里 `Node.js` 还可以同时处理数据，减轻前端的计算负担。

构建 `Electron` 极度复杂，超大数据的应用。

需要用到技术，`sqlite,PWA,web work，原生 Node.js,react-window，react-lazyload，C++ 插件等`

大数据 `React` 渲染，拥有让应用拥有 60`FPS` - 非常核心的一点优化

高计算量的工作交给 `web wrok` 线程

充分合理利用 `React` 的`Feber`架构 `diff` 算法优化项目

使用 `preload`，`prefetch`,`dns-prefetch` 等指定提前请求指定文件，或者根据情况，浏览器自行决定是否提前 `dns` 预解析或者按需请求某些资源。

对指定 `js` 文件延迟加载～