全文3268字,预计阅读时间8分钟内容:1.术语表2.业务背景:新服务市场业务线3.困境:服务端的渲染由后端主导,而前端只负责生产导出静态(浏览器端执行)js文件4.重新开始:前端也可以做服务端渲染,js也可以在服务端生成html1:介绍Node.js作为服务渲染层2:确定SSR技术方案node-vue-ssr5.新挑战:Node.js和SSR的加入,同构逻辑复杂6.合理分层:拆解不同终端的复杂性,多端一次性开发生效,提高开发效率7.可配置开发:各层开发单元如何工作并传递到下一层1:节点层:数据抓取和SSR渲染2:前端工程:之间的桥梁client和server3:数据配置层,保持数据一致性4:状态处理层:对获取的数据进行筛选5:页面层:渲染8.其他:9.结论:优缺点对比:SSR构建的各种指标对比rd机静态输出改造后Node机上1:总加载时间2:其他指标对比未来展望1.术语解释:2.业务背景:新服务市场业务线随着百度智慧采购的发展,我们致力于打造自己的商业生态,以Aiprocure为核心,以搜索流量为基础,打造服务市场平台。服务市场致力于服务全网B端商户。搜索流量是我们的基石。我们需要服务器端渲染来提高我们的搜索排名。当然服务端渲染也可以提升部分用户体验。3、困境:服务端的渲染由后端主导,前端只负责输出静态(浏览器端执行)的js文件。我们是爱买的前端团队。用于渲染的渲染引擎。前端设计用于生成Smarty引擎源文件。导致前后端没有完全分离,前端过于依赖后端渲染,整体优化和效率提升太有限。新制度希望继承旧制度的优点,丢掉它的包袱,重新来过它的不足。流程图如下:4、重新开始:前端也可以做服务端渲染,js也可以在服务端生成html。经过研究分析,Node.js也可以支持服务端渲染,性能不输PHP的Smarty渲染引擎,在整个部门专注于效率提升和跨平台协同的前提下,整个部门的技术服务市场使用Node.js作为渲染引擎,增强前端能力,实现跨平台和效率提升。流程图如下:1:引入Node.js作为服务渲染层本身。渲染是前端的工作量。节点的介绍。端更专注,前端可以介入服务端,连接服务端和客户端,增强工程能力。2:确定SSR技术方案node-vue-ssr得益于技术的进步,现有的Node.vue-ssr和已有的vue技术栈最终选择了node-vue-ssr。node-vue-ssr的实现过程:详见文档https://ssr.vuejs.org/zh/5.新挑战:Node.js和SSR的加入,同构逻辑复杂1.SSR需要加入状态和CSR状态判断2.在统一数据处理方面,Nuxt.js(vue-ssr的一个框架)会保持nodejs和客户端的数据一致。这种方式缺点很大,效率低:每次开发一个页面,都要写请求逻辑(串行数据和并行数据)和网络异常处理逻辑(网络请求失败,后端异常状态码)。,未登录请求登录数据)扩展性差:难以实现跨平台活动页面的后续扩展(效率太低,代码耦合在一个功能里,lowcode难以升级)中为了解决这些问题,对问题进行了多步拆解、数据采集处理、分层(客户端和服务端代码分离),实现高扩展、高效开发、简单维护、快速锁定问题等6.合理分层:拆解不同终端的复杂性,多个终端同时生效,提高开发效率。7.配置开发:各层开发单元如何工作并传递给下一层1:节点层:数据抓取和SSR渲染节点层获取用户访问路由,根据路由提前获取数据配置层的数据信息,同时获取公共数据(用户信息)并发送给状态处理层。2:前端工程化:客户端和服务端的桥梁,通过工程化解决一套代码开发,运行在多个终端。代码可以在服务端运行生成html节点,代码可以在浏览器运行js交互生成html。3:数据配置层,保持数据一致性根据数据配置层的配置信息,从Node获取相同的数据。数据相同,构建和渲染结果相同。配置信息:exportdefault{//title"title":"ServiceMarket","name":"home",//路由匹配"path":"/",//是否需要构建ssr"ssr":true,//请求参数"ajax":[//并行接口{"path":"/home/info",//串行接口"children":[{"path":"/home/getProductConf","params":{//依赖父接口的参数"name":'parent.data[0].data.name'}}]},//并行接口{"path":"/home/getProductConf"}]}对于项目层的配置,我们加强了配置文件,使项目的所有页面都支持三种灵活的配置:1.对于客户端体验要求高,SEO要求高的,使用SSR搭建2.对于用户体验要求比较一般的,使用数据端预取方式3.对于静态页面,使用客户端js显示。4:状态处理层:对得到的数据进行过滤。一个项目的页面有很多种状态。比如用户中心需要登录,如果没有登录,需要显示。没有登录界面。如果数据采集失败,应显示采集失败界面。在这样的状态下,之前的项目中出现了很多冗余的代码。状态处理层根据页面的配置对数据进行处理,只有成功的数据才会由状态处理层传递给页面层。同时,如果不成功(未登录、获取数据失败等),会显示相应的状态。5:页面层:渲染得益于合理的分层和逻辑拆解,整个页面层只用于交互和页面数据渲染。8、其他:配置灵活:支持三种渲染方式:服务端渲染、数据直出渲染、客户端CSR渲染。容灾方案:服务端渲染出现BUG,可灵活转为客户端渲染。日志收集:收集每一个请求,记录当前cup和内存性能参数,出现问题后及时报警,问题出现IX。结论:优点:前端SSR渲染赋予了我们的项目生命力,更灵活的配置,更好的用户体验,更强大的功能,更好的迭代,更高的安全性和容忍率。缺点:Node.js层的引入导致成本增加对比:静态输出和rd机改造后SSR在Node机上构建的各种指标对比(一)总加载时间图1:渐进式CSR加载总时长为1.7s图2:SSR总加载时间为1.2s,提升了30%(二)其他指标对比图1:渐进式CSR渲染第一次绘制243ms后,第一次内容绘制为943ms,andenddrawingis1243ms图2:SSR渲染的第一次contentdrawingandcontent绘制在427ms,andendofdrawing1027msFP(FirstPaint)FCP(FirstContentfulPaint)第一次绘制LCP(LargestContentfulPaint)内容绘制最大内容渲染DCL(DomContentloaded):未来分析与展望:通过性能对比,整体收益远远超过眼前的东西,在future,我们期待继续实现以爱心采购为中心的商业生态的配置,用数据描述每个页面,使用Node.活动页面定制。推荐阅读:百度APP视频播放解码优化百度爱饭饭实时CDP构建实践当技术重构遇上DDD,如何实现业务与技术的双赢?接口文档自动更改?百度程序员开发效率MAX技术秘诀!百度搜索平台低代码探索与实践------百度极客说百度官方技术公众号上线!技术干货·行业资讯·在线沙龙·行业大会招聘信息·介绍资料·技术书籍·百度外设
