关闭

SSR服务端渲染

时间: 2020-12-18阅读: 78标签: 渲染

SSR简介

SSR 是Server Side Render简称;就是在服务端进行渲染生成html文件,浏览器世界显示生成html文件, 补充:我们传统使用的属于CSR是Client Side Render,页面上的内容是我们加载的js文件渲染出来的,文件运行在浏览器上面。

SSR优点

  • 可以很好解决首页需要加载jscss导致页面加载缓慢问题(最头疼),SSR直接将HTML字符串传递给浏览器,加快了首屏加载时间。
  • 优化seo,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
  • 服务端渲染不用关心浏览器兼容性问题,运算过程都在服务端完成,避免浏览器兼容同时也能减少客户端的电量消耗(省电)

SSR缺点

  • 由于运算都在服务器完成,所以就需要服务能承受的负载更高。
  • 增加开发的复杂程度,构建和部署。


reactvue服务端渲染

Vue 可使用Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt.js是特点(优点):

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 css
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等

React 可使用Next.js

Next.js 具有同类框架中最佳的“开发人员体验”和许多内置功能。列举其中一些如下:
Next.js是特点(优点):

  • 直观的、 基于页面 的路由系统(并支持 动态路由)
  • 预渲染。支持在页面级的 静态生成 (SSG) 和 服务器端渲染 (SSR)
  • 自动代码拆分,提升页面加载速度
  • 具有经过优化的预取功能的 客户端路由
  • 内置 CSS 和 Sass 的支持,并支持任何 CSS-in-JS 库
  • 开发环境支持 快速刷新
  • 利用 Serverless Functions 及 API 路由 构建 API 功能
  • 完全可扩展


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10162

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

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

如何渲染几万条数据并不卡住界面?

如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。

让页面更早的渲染:使用 preload 提升资源加载优先级

preload 是一个新的 Web 标准,旨在提高性能以及提供给 web 开发者更多的细粒度加载控制。它可以使开发者自定义加载逻辑而避免以 script 标签加载资源所带来的性能损耗。

dom渲染流程

在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement,对应的是html标签。

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

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

Vue渲染函数

使用v-else 指令来表示 v-if 的 else,v-else 元素必须紧跟在 v-if 或者 v-else-if元素的后面,否则它将不会被识别 :通常会复用已有元素而不是从头开始渲染(就近原则),key使得Vue渲染速度会变得非常快。

页面需要渲染10万条数据,应该怎么实现?

设置总数据源,页面内容数据存储容器,制定页面内容数据存储容器规则。用户滑到地6屏数据的时候,显然前面5屏数据不在可视窗口,那你可以将存储容器的前3屏数据删除。同时,再从总数据源取第11屏到第13屏数据。

浏览器渲染网页的流程

浏览器渲染网页的流程(HTML CSS JS):1.使用 HTML 创建文档对象模型(DOM)2.使用 CSS 创建 CSS 对象模型(CSSOM)3.基于 DOM 和 CSSOM 执行脚本(Scripts)

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

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

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

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

点击更多...

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