React 服务端渲染与预渲染

仍是SPA

需要用到 react-router-config 这个库，它可以根据 route 匹配到对应的组件，拿到当前route对应的组件是实现路由同步的关键，再通过组件的静态API方法获取接口数据

主要是在服务端通过组件的静态API方法获取接口数据后创建store，再通过 window store = store 传递给前端

主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中

服务端渲染的应用场景：一般只是对重要的页面，如首页才会做，可以提高首屏加载速度，利于SEO。其他页面实际上仍是CSR

预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。

1、SPA变为MPA

2、必须使用 History 路由，而不能使用 Hash 路由，所以对于没有做预渲染的页面往往需要服务器配置路由，如nginx 配置如下：

3、对于动态路由，如 /detail/:id ，是不支持的，不过可以换成 query 路由，如 /detailid=

4、应用场景比较有限，能想到的就是骨架屏应用，比如首页，为了速度，我们会用一些骨架屏组件，如果不做预渲染，则骨架屏组件会等整个js文件加载完毕才开始渲染，体验不好。如果做了预渲染，则当html文件加载完毕时就会开始渲染了

编者按其实，有关网页渲染的文章很多，但是相关信息比较分散，且论述并不是很完整。如果要想对这个主题有个大致的了解，我们还得学习很多知识。因此，Web开发者Alexander Skutin 决定写一篇文章。他相信，这篇文章不仅能帮助初学者，也能对那些想要刷新知识结构的高级前端开发者有所裨益。原文地址

译文如下：

网页渲染必须在很早的阶段进行，可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧，从而避免在实践的过程中遇到性能问题。

这篇文章不会研究浏览器内部的详细机制，而是提出一些通用的规则。毕竟，不同浏览器引擎的工作机制各不相同，这无疑会让开发者对浏览器特性的研究变得更加复杂。

浏览器是如何完成网页渲染？

首先，我们回顾一下网页渲染时，浏览器的动作：

根据来自服务器端的HTML代码形成文档对象模型（DOM）

加载并解析样式，形成CSS对象模型。

在文档对象模型和CSS对象模型之上，创建一棵由一组待生成渲染的对象组成的渲染树（在Webkit中这些对象被称为渲染器或渲染对象，而在Gecko中称之为“frame”。）渲染树反映了文档对象模型的结构，但是不包含诸如标签或含有display:none属性的不可见元素。在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的DOM对象，或者文本块，还加上计算过的样式。换言之，渲染树是一个文档对象模型的直观展示。

对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。

最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。

当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重复执行，因为网页的内在结构已经发生了改变。

重绘

当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。

重排

当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。这些改变通常由以下事件触发：

DOM操作（元素添加，删除，修改，或者元素顺序的改变）;

内容变化，包括表单域内的文本改变;

CSS属性的计算或改变;

添加或删除样式表;

更改“类”的属性;

浏览器窗口的操作（缩放，滚动）;

伪类激活（：悬停）。

浏览器如何优化渲染？

浏览器尽可能将重绘/重构 限制在被改变元素的区域内。比如，对于位置固定或绝对的元素，其大小改变只影响元素本身及其子元素，然而，静态定位元素的大小改变会触发后续所有元素的重流。

另一种优化技巧是，在运行几段JavaScript代码时，浏览器会缓存这些改变，在代码运行完毕后再将这些改变经一次通过加以应用。举个例子，下面这段代码只会触发一个重构和重绘：

var $body = $('body');

$bodycss('padding', '1px'); // reflow, repaint

$bodycss('color', 'red'); // repaint

$bodycss('margin', '2px'); // reflow, repaint

// only 1 reflow and repaint will actually happen然而，如前所述，改变元素的属性会触发强制性的重排。如果我们在上面的代码块中加入一行代码，用来访问元素的属性，就会发生这种现象。

var $body = $('body'); $bodycss('padding', '1px'); $bodycss('padding'); // reading a property, a forced reflow $bodycss('color', 'red'); $bodycss('margin', '2px');

其结果就是，重排发生了两次。因此，你应该把访问元素属性的操作都组织在一起，从而优化网页性能。（你可以在JSBin查到更为详细的例子）

有时，你必须触发一个强制性重排。比如，我们必须将同样的属性(比如左边距)两次赋值给同一个元素。起初，它应该设置为100px，且不带动效。接着，它必须通过过渡(transition)动效改变为50px。你现在可以在JSbin上学习这个例子，不过我会在这儿更详细地介绍它。

首先，我们创建一个带过渡效果的CSS类：has-transition { -webkit-transition: margin-left 1s ease-out; -moz-transition: margin-left 1s ease-out; -o-transition: margin-left 1s ease-out; transition: margin-left 1s ease-out; }

然后继续执行：// our element that has a "has-transition" class by default var $targetElem = $('#targetElemId');

// remove the transition class

$targetElemremoveClass('has-transition');

// change the property expecting the transition to be off, as the class is not there

// anymore

$targetElemcss('margin-left', 100);

// put the transition class back

$targetElemaddClass('has-transition');

// change the property

$targetElemcss('margin-left', 50);然而，这个执行无法奏效。所有改变都被缓存，只在代码块末尾加以执行。我们需要的是强制性的重排，我们可以通过以下更改加以实现：

// remove the transition class $(this)removeClass('has-transition');

// change the property

$(this)css('margin-left', 100);

// trigger a forced reflow, so that changes in a class/property get applied immediately

$(this)[0]offsetHeight; // an example, other properties would work, too

// put the transition class back

$(this)addClass('has-transition');

// change the property

$(this)css('margin-left', 50);现在代码如预期那样执行了。

有关性能优化的实际建议

总结现有的资料，我提出以下建议：

创建有效的HTML和CSS文件，不要忘记指明文档的编码方式。样式应该包含在标签内，脚本代码则应该加在标签末端。

尽量简化和优化CSS选择器（这种优化方式几乎被使用CSS预处理器的开发者统一忽视了）将嵌套程度保持在最低水平。以下是CSS选择器的性能排名（从最快者开始）

1 识别器:#id

2 类:class

3 标签：div

4 相邻兄弟选择器：a + i

5 父类选择器：ul> li

6 通用选择器：

7 属性选择：input[type="text"]

8 伪类和伪元素：a:hover你应该记住，浏览器在处理选择器时依照从右到左的原则，因此最右端的选择器应该是最快的：#id或则class：div {} // bad list li {} // bad list-item {} // good #list list-item {} // good 1在你的脚本代码中，尽可能减少DOM操作。缓存所有东西，包括元素属性以及对象（如果它们被重用的话）。当进行复杂的操作时，使用“孤立”元素会更好，之后可以将其加到DOM中（所谓“孤立”元素是与DOM脱离，仅保存在内存中的元素）。

2如果你使用jQuery来选择元素，请遵从jQuery选择器最佳实践方案。

3为了改变元素的样式，修改“类”的属性是奏效的方法之一。执行这一改变时，处在DOM渲染树的位置越深越好（这还有助于将逻辑与表象脱离）。

4尽量只给位置绝对或者固定的元素添加动画效果。

5在使用滚动时禁用复杂的悬停动效（比如，在中添加一个额外的不悬停类）。读者可以阅读关于这个问题的一篇文章。

想了解更多的细节问题，大家也可以看看这两篇文章：

1,How browsers work？

2,Rendering: repaint, reflow/relayout, restyle

　　reactjs在服务器端渲染好处：

　　提升性能是需要再浏览器端的性能提升还是服务端的 性能提升，是两个概念，服务端渲染会给服务端造成一定的压力，减轻客户端的压力；好处：在整个页面级别的应用会使得浏览器在解析dom完成之后马上有东西可以渲染。再者就是对seo比较友好一些；

　　渲染的流程主要是：

准备数据，一般从数据库或外部API获得 (一般要先 render React 一次，去触发所需的API)

数据和React结合生成HTML Markup

除了把HMTL Markup输出外， 还要把'State'输出，这要在客户端才能保留'State'

1、首先需要创建一个HTML，html是网页的基础与骨架。

2、在html中增加测试数据，用来测试checkbox是否选中。

3、编写javascript，按钮点击时，触发事件，将选中的checkbox值获取。

4、美化页面，增加样式文件，和引入jquery文件。

5、打开浏览器，打开测试页面。

6、进行测试显示渲染到页面成功。

举个商品列表页面为例子。

前端渲染：说的应该是刚进入页面时，商品列表这些数据都不给你，不会渲染出这些数据。然后加载script时，再用ajax或者fetch之类的发起了请求另一个接口，服务端返回了商品列表的json数据给你，你在js中用模板引擎之类的技术，把这些数据拼成html字符串插入到Dom里。

服务端渲染：服务端用php的smarty模板或者java的jsp，把页面的商品列表信息渲染出来了，返回一个html给浏览器了。

区别：如果页面要求被蜘蛛抓取，前端渲染的数据就不能被抓取到，但是服务端渲染的页面就能被抓取到。如果有SEO要求，只能用服务端渲染。如果用Nodejs渲染的话，那就都没这些问题了。

渲染的意思是：在绘画中，用水墨或淡的色彩烘染物象，以增强艺术效果。

渲染是一个汉语词语，词语出自国画技法专业词汇。这种技法可以使画面更加丰富多彩，突出物像的特征和氛围。此外，渲染也可以指物像间的衬托，以及文艺创作中的一种表现手法，对所写对象作突出的描写、形容、拱托。

在计算机图形学中，渲染指的是将三维场景中的模型、灯光等元素转化为可见的二维图像的过程。在CG行业中，渲染是指通过复杂的数学计算，将3D场景中的元素转化为最终的视觉效果。总的来说，渲染是一种艺术表现手法，通过色彩、光线等手法增强画面效果，使其更具视觉冲击力。

词语使用场景：

词语使用场景：

1、计算机图形学和动画：在计算机图形学和动画领域，渲染是指将三维模型、场景、灯光等元素通过计算机算法转化为可见的二维图像的过程。渲染是计算机动画、视频游戏、设计可视化等领域中非常重要的一个步骤。

2、网页开发：在网页开发中，渲染通常指浏览器将HTML、CSS和 JavaScript代码解析后呈现出来的过程。渲染包括了文档对象模型（DOM）的构建、CSSOM（CSS对象模型）的构建以及最终将这些信息合成为可视化的网页。

3、服务端渲染（SSR）：在Web开发中，服务端渲染（Server-Side Rendering，简称SSR）指的是在服务器端预先生成完整的HTML结构内容，然后将这个内容发送给浏览器，由浏览器直接显示在页面上。SSR可以提高页面加载速度、改善SEO效果等。

4、3D渲染技术：在产品设计、制造和展示等领域，3D渲染技术可以生成逼真的三维视觉效果，帮助开发人员和利益相关者在真实环境中可视化产品，收集潜在缺陷和风险数据，改进开发过程。此外，3D产品展示还可以让产品在市场竞争中脱颖而出。

5、艺术创作：在绘画、影视、广告等艺术创作领域，渲染是一种重要的表现手法，通过对色彩、光线、阴影等元素的运用，增强画面效果，使其更具视觉冲击力。