随着“新数字基础设施”和5G的发展，许多领域的技术有了更深的基础，而数字双胞胎、智能工厂、智能城市和虚拟仿真教学的发展越来越快。部署方案也是从最初的本地部署，到现在的webGL本地+网络方式、实时云渲染技术加持等多种方案可选。每种方案各有优劣势，而实时云渲染却是解放了程序使用的时间空间限制，同时扩展了更多可用终端类型，尤其是现在更方便的手机。
但是当很多人不太了解实时云渲染(像素流)的时候，可能会有一种观点认为这种技术需要非常高的带宽。其实这个认知也是有对有错的。今天计数软件小秦就和大家聊聊实时云渲染产品使用中的带宽问题。
首先说一下影响带宽的因素。其实对带宽影响比较大的因素有两个：并发(同时操作的人数，也就是视频领域同时在线观看的人数)，和视频流的码率。简单总结就是内容码率越大、并发数越多，则对带宽的要求也越高。，比如在1080P清晰度下，目前行业内常见的码率视频类应用可能会在2~4m左右；云流化为了更好的体验，可能会在3~8m左右。但如果提升到4K，视频点播行业一般会在5~8m左右码率，云流化则可能在10m甚至更多(以实际情况为准。这里的数字仅供比较，不代表实际情况)。按照8m码率计算，如果并发5人，需要40M带宽，如果10人，需要80M带宽。点云渲染还支持围观模式，即一个人操作其他人观看过程。在旁观者模式下，每增加一个人，带宽需求就会相应增加。比如同时有10个人的时候，围观的人有20个，一共30个人的时候，带宽需求会达到240M。至于如何处理多余的带宽，请参考本文《实时云渲染技术支持服务器多少并发的判断方法》。那么4K就一定比1080P好吗？其实这个也要看用户的设备概况。如果用户的显示器不支持4K，那就没多大意义了，目前主流显示器还是1080P。分辨率和清晰度其实是有一定区别的，1080P分辨率如果用较高码率，画质也不是就比4K分辨率差，分辨率只是画面的原始大小，清晰度还跟编码设置的码率这些因素有关。
关于网络有很多问题，即你支持公网还是局域网部署？其实对于点量实时云渲染（像素流）无论公网还是局域网都是可以的，具体要看项目的情况。在公网条件下，带宽计算可以参照前段的方法。在网络条件还可以的情况下，延迟可以控制在几十毫秒。如果是在局域网内，一般是千兆局域网，带宽基本不是问题。对于公网下的部署，国内大型厂商的云服务器基本可以部署在全国几个地区。以上是点软件秦晓在实时云渲染中对网络和带宽的一些分享。
预渲染和实时渲染
Pre-render-spa-plugin预渲染：在构建阶段生成与预渲染路径匹配的html文件(注意：每条需要预渲染的路线都有对应的html)。构建的html文件已经有了一些内容。
将const PrerenderSPAPlugin=require(\ ' prerender-spa-plugin \ ')引入NP install prerender-spa-plugin-save \ n webback . prod . config . js . nconst Renderer=PrerenderSPAPlugin。PuppeteerRenderer \ n插件：[新的PrerenderSPAPlugin({ \ n static dir:path . join(_ _ dirname，\ '/dist\ ')，\ n//output dir:path . join(_ _ dirname，\ '/prerendered\ ')，\ n index path:path . join(_ _ dirname，\ '/dist\ '\'index.html\ ')， routes: [\ '/mobile/home.html\ '\'/mobile/doctor_team.html\ '\'/mobile/about.html\']，\ n Renderer:new Renderer({ \ n inject:{ \ n foo:\ ' bar \ ' \ n }，\ Nheadless: false。\ nrenderaftodumentevent:\ ' Render-Active \ ' \ n//RenderAfterElements:\ '容器\ '\ n//render after time:5000 \ n })\ n })\ n]\ NST
索引路径：模板页面
Routes:要预先呈现的页面路径。
注射：挂在窗户上。__PRERENDER_INJECTED对象，可用于通过窗口获取预呈现页面上的值。_ _ prerender _ injected.foo。
无头：渲染时显示浏览器窗口。对调试非常有用。
RenderAfterDocumentEvent:等待事件触发进行渲染。在这里，我明白是时候让木偶师得到那一页了。
RenderAfterDocumentEvent是关键。这是为了监视document.dispatchEvent事件，并决定何时开始预渲染。需要在钩子函数中触发事件，比如
new Vue({ el: \'#app\ '路由器， render: h=h(App)，\ n mounted(){ \ n//renderAfterDocumentEvent将需要它。 document.dispatchEvent(新事件(\ ' render-active \ ')\ n } \ n })；\ nrenderAfterElementExists:等待dom元素出现以进行呈现。
渲染时间：渲染时间：5000毫秒
结合项目，执行包编译命令。
nrun build:prod \ n下面的页面是在dist目录下生成的，虽然生成了两层目录，但是还是映射到\'/mobile/home.html \ '\ '/mobile/doctor _ team.html \ '\'/mobile/about.html \ '
看看打包的页面，主体内容已经渲染好了。
启动http-server访问http://127 . 0 . 0 . 1:8080/mobile/about . html，效果和正常访问一样。
render-spa-plugin利用了木偶师的爬行功能。木偶师是Chrome出品的官方headlessChromenode库。它提供了一系列API，无需UI即可调用Chrome的功能，适用于爬虫、自动处理等场景。它很强大，所以很容易将运行时HTML打包到一个文件中。原理是在Webpack构建阶段结束时，在本地启动一个puppeter服务，访问预渲染配置的路由，然后将puppeter中的渲染页面输出到HTML文件，建立路由对应的目录。
特定代码可以与render-puppet下的代码组合。
在render.js中，启动本地服务，通过page.goto依次访问
http://localhost:8000/mobile/about . html，
http://localhost:8000/mobile/home . html
http://localhost:8000/mobile/doctor _ team . html
通过page.content()获取html
结合项目实践，这个插件漏洞很多。
1.在config/index.js中，assetsPublicPath最初被写成/dist，导致预渲染的页面体无法渲染，是一个空白页。可以通过将其更改为/来进行预呈现，但这导致了不需要预呈现的页面资源的错误路径。
2.此插件不支持在此版本的webpack下延迟加载路由，
“网络背包”:'^4.6.0'
网上提到npm i webpack@4.28.4可以解决。果然，webpack版本升级后，支持路由的懒加载。
3.在需要请求动态数据的页面中，预渲染只能保证静态部分不发生变化。不想写死，就得充当动态数据代理。webpack中devserver的代理数据无效，需要使用nginx或其他代理工具代理在线数据。