服务端渲染or预渲染

引言

今天木有引言嘤嘤嘤

浏览器渲染原理及流程

浏览器内核分两个部分:渲染引擎、JS引擎
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
在这里插入图片描述

  • DOM Tree:浏览器将HTML解析成树形的数据结构。
  • CSS Rule Tree:浏览器将CSS解析成树形的数据结构。
  • Render Tree: DOM和CSSOM合并后生成Render Tree。
  • layout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。
  • painting: 按照算出来的规则,通过显卡,把内容画到屏幕上。
  • reflow(回流):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。reflow 会从 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。
  • repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变

服务端渲染

在这里插入图片描述

主要原因:1、提升页面性能(首屏渲染) 2、对页面SEO性能优化
简而言之就是服务端渲染能够直接返回比较完整的HTML文件,浏览器便能直接渲染出页面,使得在下载js文件运行react的时候,页面已经显示,没有那么容易白屏!
在这里插入图片描述
在这里插入图片描述

不过有三个点需要注意:

  1. 虽然能够很快渲染出页面,但是没有执行react时页面无法进行交互

  2. 获取第一个字节时会更加慢一点,由于ssr需要将完整的渲染过的文件传回browser,而csr只需要返回字节相对较少的json文件即可

  3. 对服务器的吞吐量产生影响,ReactDOMServer.renderToString

    例如ReactDOMServer.renderToString的特点就是: 1>同步方法 2>独享CPU 3>阻塞事件循环流程

预渲染

就像官网所说的,如果你调研服务端渲染的目的是用来改善少数营销页面的SEO,那么我们需要的可能是预渲染

区别

SSR和预渲染使用场景还是有很大的区别的,预渲染使用场景更多的时我们所说的静态页面的形成,预渲染的使用场景更多是我们所说的静态页面的形式,而服务端渲染适用于大型的、与服务端有数据交互的功能型网站,一个明显的使用场景就是电商网站。
如何使用prerender-spa-plugin

参考资料

浏览器渲染原理及流程
“服务端渲染”吊打“客户端渲染”的那些事
详解如何在webpack中做预渲染降低首屏空白时间

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值