截至目前的2022年，工作期间的前端业务主要介绍以下特征
SPA：单页应用程序（单页应用程序），它仅限于网页中的所有活动，加载相应的HTML，JavaScript和CSS。由于用户的操作，跳到页面上。相反，它将使用JavaScript动态转换HTML（使用DIV开关显示和隐藏）来实现与用户的UI交互。在Spa应用程序中，加载应用程序后，整个页面将不会刷新。提前并取决于内容区域（区域）中内容以显示内容的观看。
功能：前端路由，动态更新，快速响应，良好的经验，但不包括在搜索引擎（SEO）和长脚本下载和启动时间
SEO：搜索引擎优化是一种通过分析搜索引擎的排名，如何搜索各种搜索引擎，如何捕获Internet页面以及如何确定特定关键字的排名来搜索各种搜索引擎的技术。，通过合理的文档内容，TKD，META，H1和其他标签改善网站访问和流量
HybridApp：由本机和Web开发的应用程序，Cross -Platform开发的，并且本质的本质仍然是嵌入在App的不同平台中的WebView中的独立本机应用程序。具有灵活开发Web应用程序的特征，Cross--平台但接近与WebApp，NativeApp和Hybridapp相对应的本地体验
page =模板+数据上没有添加数据，这是我们今天正在谈论的渲染
客户端渲染CSR（客户端渲染）
服务器渲染SSR（侧面渲染）（SEO友好，第一个屏幕渲染很快，但复杂，服务器逻辑和耗时）渲染 - >第一个屏幕渲染时间：
第一个屏幕渲染时间是指浏览器从响应用户的输入URL地址，到可以交互的页面内容图，即第一个有效绘图（FMP）。在这个及时
第一个屏幕渲染优化：资源文件数量的大小（压缩和包装），缓存（正面和背面，缓存控制，服务工作人员，本地存储机构），http，图形和其他资源，视觉过渡（skelet），SSR，脚本分析顺序，渲染阻塞，异步脚本等。
分析URL->返回index.html，而没有主要内容
- >（（由爬行完成）拉动样式，种子文件，框架脚本，库/插头-in
- >加载业务系统的主文件
- >启动应用程序
- >注册路由
- >初始化每个页面
- >治疗路由
- >输入页面生命周期并执行页面逻辑
- >页面静态内容渲染（白屏阶段已经结束，但要取决于接口的返回和渲染速度）
- >异步数据接一个地返回，并呈现页面。
业务是面对C端的电子商务用户。产品信息需要支持搜索引擎捕获。它在技术上是由节点和webpack构建的。水疗应用程序，混合模式Web和应用集成，自我开发框架（REECT），大量文件，大容量，大容量，大容量，大容量，大量文件，大量的文件，大容量，大容量，大容量和大量文件。数据是某些业务系统的第一个屏幕会消耗很长时间，并带有明显的白色屏幕，需要SEO支持并优化第一个屏幕性能！解决方案 - > SSR（服务器直接生成HTML内容并返回到浏览器以渲染第一个屏幕内容）
1.将一组带有服务器语言的页面用于搜索引擎（高成本）
2.了解服务器上的JavaScript解析器以分析客户端的脚本语言，例如V8解析器中嵌入的服务器（低性能）
3.SSR框架，例如Next.js（不必要的）理想解决方案是使用React对SSR的支持使基于节点的Javasript同质性，“写一次，无处不在，无处不在”
react-dom/服务器库
带有其他属性的RenderToString（）（常用）
RenderTostaticmarkup（）没有其他属性
rendertonodestream（）可读静态页面
1.客户端服务器的脚本编写基于节点的commonjs规则，最小化相同结构中涉及的模块中的复杂依赖项。2.路由规则支持Express。分析后，服务器首先处理路由规则，调用其自己的页面显示组件，生成HTML，然后将其呈现给用户。加载客户端JavaScript后，删除由SSR产生的模块，切换到CSR模式4. App Envimense成为WebApp时，插件方法被渲染为入口文件中与SSR相同的静态直接直接
服务器和客户端是同质模型（网络请求和数据处理层）2。组件样式3.路由规则和工具类别（路由实现：H5-端基于浏览器PopState Event（HistoryApi），Hybrid基于浏览器Hashchang事件（哈希）。当启动相同的路由时，根据判断环境自动切换相同的路由，并实现相同的路由分析规则，以确保此代码同质）
APP和H5用于SEO View.2。同性恋依赖性和其他逻辑过程
1.路由器解析基础对象是每个页面的TKD和其他一些页面配置变量，带有index.ejs（带有第五个幻灯片的图片）使用SEO2的输出。在此处的同一路由中，可以直接配置配置。回到基本视图，您仍然需要使用SEO处理句柄来返回SEO处理后返回视图
2.集成1. indexContainer是服务器渲染的一个反应组件。Seomodel是服务器数据请求的模块
2.使用尝试捕捉，在处理异常时降级它以进行灾难恢复以恢复普通的基本视图
3.请注意，引用和使用React组件需要提前引入服务器支持服务器支持，例如Bable的预设
3.查看组件1.这是一个普通的纯React组件容器，用于呈现服务器视图。除了不结合事件外，其他事件还与CSR组件一致
2.当CSR端视图开始渲染时，为SSR视图设置“ CSR-View”类名称（一个问题：为什么首先是类名称不是SSR-view？））））
3.该视图将由Web side SSR和应用程序包装，作为在渲染服务器渲染后使用相同的模板
4.模型核心这里是SSR数据处理层的核心
1.执行以发送数据请求队列来完成“集成”模块（此之前的第二个）。在完成回调的队列中，集成模块的恢复是用数据触发的。
2. AbsTractIndExmodel，作为网络请求的构造函数存储模块，在此处继承了服务侧接口请求模块的基类，并将其与队列进行比较
3.构造函数将由客户端和服务器的网络请求模块引用，但不同之处在于，客户端的接口请求模块基于XHR（XMLHTTPREQUEST），并且服务器为HTTP。
第五，同质请求构造函数1.AAPI地址和接口处理模块将参与相同的结构，将参与相同的结构。
2.在客户端上，您只需要将构造函数引用到构造函数，以继承实例触发请求作为服务器
6.混合模式应用程序的处理1.上述SSR进程已封装在包装插头中，并且注册了相应的业务系统配置文件，以启动WebPack中的start -up plug -in
2.获取数据并下载图片并将其作为静态图片放在WebApp软件包中
3.执行插件后，将SSR后的字符串写入静态HTML条目文件。该应用程序未来打开的页面是SSR处理的页面
根据我们的测试，当Android或iOS首次初始化时，它的成本约为300至400ms，第二次需要大约100?200ms。可以看到第二个初始化更快，因此我们可以在这里初始化一个初始化webview提前以提高性能或共享网络浏览量。
使用SSR之后
分析URL->返回index.html的内容
- >拉动样式，种子文件，框架脚本，库/插头-in
- >加载业务系统的主文件
- >启动应用程序 - >注册路由
- >初始化每个页面
- >治疗路由
- >（不再使用白色屏幕）输入页面生命周期并执行页面逻辑
- >页面静态内容渲染
- >一个接一个地返回的异步数据，并且页面的每个部分都呈现
我们可以看到，在第一个负载中，除了简短的重新要求时间闪光灯外，它非常好。这是非常重要的。我们的index.html审查了可以看到动态产品数据的原始代码，该代码表明该产品支持该产品，该产品支持支持该产品的产品。
它确实解决了大多数问题，但仍然存在一些缺点：1。App的静态数据更新问题2.在没有本地缓存的情况下解决问题
计划：
1.在Web环境中，将SEO数据注入index.html作为静态JSON作为静态JSON，并且应用程序环境用于将静态数据包装到WebPack中
2.页面初始化时，区分环境收集依赖性。
3.接口返回数据时，更新相应的缓存依赖性
补充优化细节：
1. WERSSR，在第一个屏幕中评估接口，然后处理在接口界面的接口数据实例上不需要在接口数据实例中显示的数据。
2.在应用程序侧下载图片时，仅下载显示的图表，减少包装的大小3.App环境界面以返回数据更新，进行数据比较，替换由匹配产品下载的匹配网络地址4.根据场景，根据场景和优化...
一些可以改善的要点：
1.由于PWA是针对网络环境制作的，因此有一个独立的缓存判断，因此第一次进行保险，SEO数据只是过渡数据，这是Web环境中浪费的请求。
2. SPA页面逻辑太重。SEO在同一结构中生成的视图直接删除（两个渲染）而不是重复使用的绑定事件
3. SEO和应用程序的处理增加了服务器和包装过程中的业务代码和服务器负担的数量，并且在开发过程中的调试并不容易
4.“不完整”同质，该计划仅优化Vision和SEO的第一个屏幕
没有最好的技术，只有最合适的解决方案
原始：https：//juejin.cn/post/71113507317091597