拉勾教育WEB前端高薪训练营概述(一)教育前端

拉钩教育WEB后端高薪训练营

概述

随着后端技术栈和工具链的迭代成熟，后端工程化、模块化也已成为了当下的主流技术方案，在这波后端技术浪潮中，涌现了例如React、Vue、Angular等基于顾客端渲染的后端框架，这类框架所建立的单页应用（SPA）具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷，其中主要涉及到以下两点：

（1）首屏加载时间过长

与传统服务端渲染直接获取服务端渲染好的HTML不同，单页应用使用JavaScript在顾客端生成HTML来呈现内容，用户须要等待顾客端JS解析执行完成就能看见页面，这就促使首屏加载时间变长，因而影响用户体验。

（2）不利于SEO

当搜索引擎爬取网站HTML文件时，单页应用的HTML没有内容，由于他它须要通过顾客端JavaScript解析执行能够生成网页内容，而目前的主流的搜索引擎对于这一部份内容的抓取还不是挺好。

为了解决这两个缺陷，业界借鉴了传统的服务端直出HTML方案，提出在服务器端执行后端框架（React/Vue/Angular）代码生成网页内容，之后将渲染好的网页内容返回给顾客端，顾客端只须要负责展示就可以了；

其实不仅仅这般，为了获得更好的用户体验，同时会在顾客端将来自服务端渲染的内容激活为一个SPA应用，也就是说以后的页面内容交互都是通过顾客端渲染处理

这些方法简而言之就是：

这些方法我们一般称之为现代化的服务端渲染，也叫同构渲染，所谓的同构指的就是服务端建立渲染+顾客端建立渲染。同理，这些方法建立的应用称之为服务端渲染应用或则是同构应用。

哪些是渲染

我们这儿所说的渲染指的是把（数据+模板）拼接到一起的这个事儿。

比如对于我们后端开发者来说最常见的一种场景就是：恳求前端插口数据，之后将数据通过模板绑定句型绑定到页面中，最终呈现给用户。这个过程就是我们这儿所指的渲染

渲染本质虽然就是字符串的解析替换sw渲染程序设置，实现方法有好多种；并且我们这儿要关注的并不是怎样渲染，而是在那里渲染的问题？

传统的服务端渲染

在明天看来，这些渲染模式是不合理或则说不先进的。由于在当下这些网页越来越复杂的情况下，这些模式存在好多显著的不足：

并且不得不说，在网页应用并不复杂的情况下，这些方法也是可取的。

顾客端渲染

下边我们以一个Vue.js创建的单页面应用为例来了解一下这些方法的渲染过程

通过这个示例可以了解到我们就可以把【数据处理】和【页码渲染】这两件事儿分开了，也就是【后端】负责数据处理sw渲染程序设置，【前端】负责页面渲染，这些分离模式极大的增强了开发效率和可维护性。

但是这样一来，【前端】更为独立，也不再受限制于【后端】，它可以选择任意的技术方案或框架来处理页面渲染。

然而这些模式下，也会存在一些显著的不足，其中最主要的就是：

对于顾客端渲染的SPA应用的问题有没有解决方案呢？

现代化的服务端渲染

Nuxt.js是一个基于Vue.js生态开发的一个第三方服务端渲染框架，通过它我们可以轻松打造现代化的服务端渲染应用。

isomorphicwebapps（同构应用）：isomorphic/universal，基于react、vue框架，顾客端渲染和服务器端渲染的结合，在服务器端执行一次，用于实现服务器端渲染（首屏直出），在顾客端再执行一次，用于接管页面交互，核心解决SEO和首屏渲染慢的问题。

剖析异同点：

相关技术：

实现原理：

服务端渲染的问题：

在对你的应用程序使用服务器端渲染(SSR)之前，你应当问的第一个问题是，是否真的须要它。这主要取决于内容抵达时间(time-to-content)对应用程序的重要程度。诸如，假如你正在建立一个内部仪表盘，初始加载时的额外几百微秒并不重要，这些情况下去使用服务器端渲染(SSR)将是一个小题大作之举。但是，内容抵达时间(time-to-content)要求是绝对关键的指标，在这些情况下，服务器端渲染(SSR)可以帮助你实现最佳的初始加载性能。

事实上，好多网站是出于效益的考虑才启用服务端渲染，性能倒是在其次。假定A网站页面中有一个关键字叫“前端性能优化”，这个关键字是JS代码跑过一遍后添加到HTML页面中的。这么顾客端渲染模式下，我们在搜索引擎搜索这个关键字，是找不到A网站的——搜索引擎只会查找现成的内容，不会帮你跑JS代码。A网站的营运方见此情形，倍感很头大：搜索引擎搜不下来，用户找不到我们，谁就会用我的网站呢？为了把“现成的内容”拿给搜索引擎看，A网站不得不启用服务端渲染。但性能在其次，不代表性能不重要。