Web网页渲染的几种模式

更新日期: 2020-04-24阅读: 3.1k标签: 渲染

译文:Rendering on the Web
本文主要内容来源于对上文的翻译,图也来源于此,加上了一点平时工作的理解,英语渣、翻译不是很准确,有条件的可以直接阅读上文链接。本文主要是自己在阅读时做的笔记,供自己以后查看。


预备知识

几种常见的模式:

  • SSR: Server-Side Rendering - rendering a client-side or universal app to html on the server.
  • CSR: Client-Side Rendering - rendering an app in a browser, generally using the dom.
  • Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data.
  • Prerendering: running a client-side application at build time to capture its initial state as static HTML.

在开启渲染模式对比之前,了解几个有意义的性能对比参数:

  • TTFB: Time to First Byte - seen as the time between clicking a link and the first bit of content coming in.
  • FP: First Paint - the first time any pixel gets becomes visible to the user.
  • FCP: First Contentful Paint - the time when requested content (article body, etc) becomes visible.
  • TTI: Time To Interactive - the time at which a page becomes interactive (events wired up, etc).


渲染模式

SSR 服务端渲染

Server-Side Rendering - 就是服务端渲染出HTML页面,比如以前的JSP,php


除了TTFB会延长(服务端需要去准备相应的页面数据),其他三个性能参数都比较客观;

优点是更好的性能数据,客户端压力更小,利于seo;缺点是对服务端性能要求更高,压力较大;页面切换无法渐进式加载,每个页面都需要重新渲染,页面切换时不能定义过渡动画(间隔有白屏,Chrome 在同域名页面跳转时,有一个PLS优化,即延迟到下一个页面FCP节点时开始下一个页面的渲染);

在2014年以前,更多网站是以SSR的形式,随着前端职业化和JS技术的不断发展,纯SSR正在逐渐淡出历史舞台。


Static Rendering 静态页面渲染(古老的客户端渲染方式)

静态渲染就是直接用已经成型的html文件进行渲染,会有一些辅助的JS来增强页面交互;比如Hexo模板引擎生成的文章Html,当然很多公司也还存在页面内容纯手工的做法,这种渲染适合交互少的一些官方展示性网站;

静态渲染的优点:

  • 性能参数都比较优异,TTFB 和 FP 和 FCP几乎相同;
  • 适合CDN部署;
  • 客户端与服务端压力都比较小;

静态渲染的缺点之一是必须为每个可能的URL生成单独的HTML文件。 当您无法提前预测这些URL的URL或具有大量唯一页面的网站时,这可能具有挑战性甚至不可行, 如果是纯手工开发,那开发效率相对也比较低。

但从工作几年的经验来看,这种纯静态渲染的网站除了一些文档,博客类网站,更多是借助JS技术来提高页面的可交互能力。

静态渲染与SSR渲染(或则服务端预渲染)很像,可以通过禁用js 和 降低网速来甄别网站是采用的静态渲染技术还是预渲染技术;


CSR 客户端渲染

Client-side rendering (CSR) ,一种纯在客户端(浏览器)利用JS操作Dom渲染页面的方式. 所有的生成逻辑, 数据获取, 模板 and 路由 都由浏览器而不是服务端来控制。

除了TTFB短,其他都会被延长,可以通过Http2的服务端推送与<link rel=preload>来提升FCP;

客户端渲染是当前最流行的渲染模式,常以SPA单页面应用的方式存在;因为有reactvue, angular这种热门UI框架支持,加上webpack的构建打包,开发效率相比前两种方式高出很多,页面可做很多复杂的交互操作与图形渲染;

由于JS和css的大小会影响首屏的渲染,所以最好做好代码分割,只提供页面渲染必要的资源代码,应用懒加载的形式来提供其余的资源时非常有必要的;

骨架屏渲染(CSR with Prerendering)在当代也是一种比较时髦的技术
,GatsBy引擎就是这种技术的突出使用者。就是会先通过服务端渲染出一个大致的骨架,告诉用户网站已经对你的请求有响应了,但其实这个时候只能看到一个很模糊的布局且不能交互,得等到页面数据请求回来后,页面才开始正式的渲染。


Rehydration 同构渲染

同构其实就是SSR+CSR的合体。首屏的html页面由服务端提供,然后加载js,js利用现有的dom树来接管渲染后页面的交互操作,跳转到新页面时就变成纯CSR渲染,是一种比较有技术含量的渲染方式,当下比较流行的NextJs(React), NuxtJs(Vue)就是这种渲染技术的成熟框架;


从上图可看,TTFB,FP和SSR几乎一样,FCP会由于js的下载解析变长。页面看起来很快被渲染出来(直出),且看起可交互,但实际上这时候还不能马上响应时间,因为要等到客户端JS执行,事件监听启动后,输入这些交互操作才可用,所以TTI相比SSR也会变长。

优点:利于SEO,同时结合了SSR与CSR的特点,首屏之后的页面交互可实现渐进式加载,可控性高;
缺点:

  • 技术要求更高(包含代码处理),同时对服务器和客户端都有性能要求;
  • React过去提供的服务端html生成方法renderToString是同步的,这回阻塞Node服务主线程;但后面推出了异步的renderToNodeStream,服务端压力相对而言就没那么大了

我自己在公司的两个项目做过同构尝试,都是基于Dva的React 同构渲染项目,感兴趣的话,可作为参考入门。

对于同构渲染可以优化的点,自己的总结是:

  • JS,CSS等页面静态资源文件,最好还是单独部署走CDN;
  • 交互JS 在页面交互要求不高的情况下,可以设置async或则deffer标志


其他

没咋理解,想了解最好看原文

  • Partial Rehydration 部分同构渲染:顾名思义就是页面的部分组件或试图采用渐进式同构的方式加载,主要目的是减少页面对客户端JS的依赖;
  • Trisomorphic Rendering,三态渲染:这种渲染技术仅适用于service workers可用的时候,大致意思是,首先由服务端提供一个初始文件流,然后service workers接管将文件流渲染出一个html文件,并开始在页面渲染,同时服务端也在生成可用的页面;下图是其提供的思路:


贴出原文:
If service workers are an option for you, “trisomorphic” rendering may also be of interest. It's a technique where you can use streaming server rendering for initial/non-JS navigations, and then have your service worker take on rendering of HTML for navigations after it has been installed. This can keep cached components and templates up to date and enables SPA-style navigations for rendering new views in the same session. This approach works best when you can share the same templating and routing code between the server, client page, and service worker


总结

在决定渲染方法时,请思考并了解您应用的瓶颈在哪;考虑静态渲染还是服务器渲染是否可以帮助您达到90%的效果;完全可以以最少的JS来配合HTML来获得交互体验也是完全可以的,下面是一个全文总结性的图表:

首发于我的博客:Web网页渲染的几种模式,转载请注明

链接: https://www.fly63.com/article/detial/8767

vue中数据更新变化,而页面视图未渲染的解决方案

在使用vue的时候,我们都知道它是双向数据绑定的,但是在使用不熟的情况下,经常会遇到:data中的数据变化了,但是并没有触发页面渲染。下面就整理一些出现这种情况的场景以及解决办法。

服务端渲染和客户端渲染的对比

这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template。当不需要对SEO友好的时候,推荐使用客户端渲染;当需要对 SEO友好的时候,推荐使用服务器端渲染

解决使用vue.js未渲染前代码显示问题

在使用vue的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板的情况。实在很影响美观,可以使用vue现成的指令来解决这个问题:v-cloak

在微信小程序中渲染html内容的实现

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢?

原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

估计大家都听过,尽量将 CSS 放头部,JS 放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付考核当然可以,但实际应用中必然一塌糊涂

Vue渲染数据理解以及Vue指令

原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏览器的重绘和回流),Vue是一个mvvm框架(库),大幅度减少了DOM操作

Web渲染那些事儿

在决定渲染方式时,需要测量和理解真正的瓶颈在哪里。静态渲染或服务器渲染在多数情况都比较适用,尤其是可交互性对JS依赖较低的场景。下面是一张便捷的信息图,显示了服务器到客户端的技术频谱:

vue从后台获取数据赋值给data,如何渲染更细视图

如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况。官网API是这样介绍的:Vue.set(target,key,value)

react 异步加载数据时的渲染问题

当数据需要异步加载时render获取不到数据可能会报一些错误,此时需要在render函数中加一个判断.行到render时,state对象的haveData为false, 所以此时页面展示 loading,当异步获取数据成功时

Vue.js中v-html渲染的dom添加scoped的样式

在vue.js中,要将一段字符串渲染成html,可以使用v-html指令。但是 官方文档 中的v-html部分也提醒了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!