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

时间: 2018-06-25阅读: 1661标签: 渲染

这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template

1、script 标签导入包,当这个标签导入完毕后,在window全局中就有了template 函数
2、创建一个script标签,内部是模板字符串<script type="text/template" id="tmpl">
3、 var htmlStr = template('tmpl',{要渲染的数据对象})
4、将创建好的html字符串,追加到页面中即可

 

1、服务器端渲染

     每当有客户端请求页面了,服务器先在后端调用art-template,把指定的页面预先在后端渲染后,然后通过res.end把这个渲染完毕的完整页面,

返回给客户端直接展示。

 优点:对seo友好,因为我们经过服务器端渲染的页面,在网络中传输的时候,传输的是一个真实的页面。因此,爬虫客户端,当爬到我们的页面后,

会分系我们给他提供的这个页面,此时,我们页面中的关键数据就会被爬虫给收录了。

缺点: 服务器端渲染,对服务器压力比较打,可以使用服务器端的页面缓存技术,减轻服务器的渲染压力;不适合前后端分离开发。

 

2、客户端渲染

     每当用户要请求某个页面了,

 第一步,用户需要先把这个页面请求到客户端,此时用户拿到的页面只是一个模板页面。

 第二步,浏览器在解析模板页面的时候,会发起art-template的二次资源请求,同时要发送Ajax请求,去服务器获取数据

 第三步,在客户端调用art-template 渲染HTML结构,并把渲染厚的htmlStr append 到页面指定的容器中;

缺点: 对seo相当不友好

优点: 减轻了服务器端的渲染压力;同时,最大的好处就是:能够实现前后端分离开发;

 

各自应用的场景:

1、当不需要对SEO友好的时候,推荐使用客户端渲染;

2、当需要对 SEO友好的时候,推荐使用服务器端渲染


站长推荐

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

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

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

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

Egg React SSR服务端渲染Webpack构建流程

首先执行node index.js 或者 npm run dev 启动 Egg应用,在 Egg Agent 里面启动koa服务, 同时在koa服务里面启动Webpack编译服务,挂载Webpack内存文件读取方法覆盖本地文件读取的逻辑

在React中实现条件渲染的7种方法

借助React,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染。条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在React文档中,这是一种根据条件渲染不同元素或组件的方法

Vue中强制组件重新渲染的正确方法

有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的DOM,重新开始。那么,如何让Vue以正确的方式重新呈现组件呢?

web 前端页面的渲染(DOM)

CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容。

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

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

dom渲染流程

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

十行代码实现React App 的SEO优化

谷歌已经明确表示,他们会在抓取你的网站之前运行你的JavaScript代码。准确地说,他们的爬虫(crawler)中运用 Chrome 41浏览器打开网站,和真实用户用浏览器打开一样!但是还有其他搜索引擎和社交媒体网站可能并不会这么做

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

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

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

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

点击更多...

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