精华内容
下载资源
问答
  • 前端渲染有很多框架,而且形式和内容在不断发生变化。这些演变的背后是设计模式的变化,而归根到底是功能划分逻辑的演变:MVC—>MVP—>MVVM(忽略最早混在一起的写法,那不称为模式)。近几年兴起的React、Vue、...
  • 浅谈前端渲染和后端渲染

    千次阅读 2019-09-04 17:36:46
    在给大家介绍我理解的前端渲染和后端渲染的区别之前,先给大家看看我对于前端渲染和后端渲染的理解 前端渲染:      前端渲染就是指后端返回JSON数据或者JSONP数据,在前端利用预先写的html...

         在给大家介绍我理解的前端渲染和后端渲染的区别之前,先给大家看看我对于前端渲染和后端渲染的理解
    前端渲染:
         前端渲染就是指后端返回JSON数据或者JSONP数据,在前端利用预先写的html模板,循环读取JSON数据或者JSONP数据,进行选取,拼接,并且将这些数据插入页面来达到渲染效果。
    后端渲染:

         前端进行数据请求,后端用后台模板引擎直接生成html,前端接受到数据之后,直接插入页面。
    两者的好处和坏处:
    1.前端渲染:
    好处:网络传输数据量小。不占用服务端运算资源(解析模板),模板在前端(很有可能仅部分在前端),改结构变交互都前端自己来了,改完自己调就行。
    坏处:前端耗时较多,对前端工作人员水平要求相对较高。前端代码较多,因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。
    2.后端渲染
    好处:前端耗时少,即减少了首屏时间,模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板)
    坏处:占用服务器资源。
    前端渲染与后端渲染对比:
        前端渲染:
    页面呈现速度:主要受限于带宽和客户端机器的好坏,优化效果好,可以逐步动态展开内容,感觉上会更快一点。
    可维护性强,前后端分离,各施其职,代码一目明了。
    SEO友好度(seo=Search(搜索) Engine(引擎) Optimization(优化),即搜索引擎优化):差,大量使用ajax,多数浏览器不能抓取ajax数据。
    编码效率:高,前后端各自只做自己擅长的东西,后端最后只输出接口,不用管页面呈现,只要前后端人员能力不错,效率不会低。
        后端渲染:
    页面呈现速度:快,受限于用户的带宽
    可维护性:差(前后端不分离)
    SEO友好度:好,后端的数据一步搞定,直接生成相对应的模板网页
    编码效率:低(有时候可能手忙脚乱,找不到数据对应的位置或者数据)

    展开全文
  • 前端渲染服务端渲染总结

    千次阅读 2019-08-23 16:44:38
    用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文件之后就可以直接解析展示了,而这也就是所谓的服务器端渲染了...

    今天被问到什么是前端和服务端渲染,回答的很不好,下面总结一下:

    什么是服务器端渲染和客户端渲染?
     互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文件之后就可以直接解析展示了,而这也就是所谓的服务器端渲染了。而随着前端页面的复杂性提高,前端就不仅仅是普通的页面展示了,而可能添加了更多功能性的组件,复杂性更大,另外,彼时ajax的兴起,使得业界就开始推崇前后端分离的开发模式,即后端不提供完整的html页面,而是提供一些api使得前端可以获取到json数据,然后前端拿到json数据之后再在前端进行html页面的拼接,然后展示在浏览器上,这就是所谓的客户端渲染了,这样前端就可以专注UI的开发,后端专注于逻辑的开发。

    两者本质的区别是什么?
      客户端渲染和服务器端渲染的最重要的区别就是究竟是谁来完成html文件的完整拼接,如果是在服务器端完成的,然后返回给客户端,就是服务器端渲染,而如果是前端做了更多的工作完成了html的拼接,则就是客户端渲染。

    服务器端渲染的优缺点是怎样的?
    优点:
    1.前端耗时少。因为后端拼接完了html,浏览器只需要直接渲染出来。
    2.有利于SEO。因为在后端有完整的html页面,所以爬虫更容易爬取获得信息,更有利于seo。
    3.无需占用客户端资源。即解析模板的工作完全交由后端来做,客户端只要解析标准的html页面即可,这样对于客户端的资源占用更少,尤其是移动端,也可以更省电。
    4.后端生成静态化文件。即生成缓存片段,这样就可以减少数据库查询浪费的时间了,且对于数据变化不大的页面非常高效 。
    缺点:

    1.不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,则对于前端复杂度高的项目,不利于项目高效开发。另外,如果是服务器端渲染,则前端一般就是写一个静态html文件,然后后端再修改为模板,这样是非常低效的,并且还常常需要前后端共同完成修改的动作; 或者是前端直接完成html模板,然后交由后端。另外,如果后端改了模板,前端还需要根据改动的模板再调节css,这样使得前后端联调的时间增加。
    2.占用服务器端资源。即服务器端完成html模板的解析,如果请求较多,会对服务器造成一定的访问压力。而如果使用前端渲染,就是把这些解析的压力分摊了前端,而这里确实完全交给了一个服务器。

    客户端渲染的优缺点是怎样的?
    优点:  
    1.前后端分离。前端专注于前端UI,后端专注于api开发,且前端有更多的选择性,而不需要遵循后端特定的模板。
    2.体验更好比如,我们将网站做成SPA或者部分内容做成SPA,这样,尤其是移动端,可以使体验更接近于原生app。
    缺点:
    1.前端响应较慢如果是客户端渲染,前端还要进行拼接字符串的过程,需要耗费额外的时间,不如服务器端渲染速度快。
    2.不利于SEO目前比如百度、谷歌的爬虫对于SPA都是不认的,只是记录了一个页面,所以SEO很差。因为服务器端可能没有保存完整的html,而是前端通过js进行dom的拼接,那么爬虫无法爬取信息。 除非搜索引擎的seo可以增加对于JavaScript的爬取能力,这才能保证seo。

    使用服务器端渲染还是客户端渲染?
      不谈业务场景而盲目选择使用何种渲染方式都是耍流氓比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用服务器端渲染;而类似后台管理页面,交互性比较强,不需要seo的考虑,那么就可以使用客户端渲染。

    另外,具体使用何种渲染方法并不是绝对的,比如现在一些网站采用了首屏服务器端渲染,即对于用户最开始打开的那个页面采用的是服务器端渲染,这样就保证了渲染速度,而其他的页面采用客户端渲染,这样就完成了前后端分离。

    对于前后端分离,如果进行seo优化?
      如果进行了前后端分离,那么前端就是通过js来修改dom使得html拼接完全,然后再显示,或者是使用SPA,这样,seo几乎没有。那么这种情况下如何做seo优化呢?

    我们可以自行提交sitemap,让蜘蛛主动去爬取,但是遇到了sitemap中的url,达到指定页面之后只有元js怎么办呢?这是我们可以使用标签来进行简单的优化,比如打印出当前页面信息的一些关键的信息点,但是正常用户并不需要这些,会造成额外的负担,且前端可以判断是否支持JavaScript,而后段不行,只好根据百度的spider做UA判断,使用phantomjs或者nginx代理,来对spider访问的页面进行特殊的处理,达到被收录的效果。但这种效果还是不好。。。

    而目前的react和vue都提供了SSR,即服务器端渲染,这也就是提供seo不好的解决方式了。

    究竟如何理解前后端分离?
      实际上,时至今日,前后端分离一定是必然或者趋势,因为早期在web1.0时代的网页就是简单的网页,而如今的网页越来越朝向app前进,而前后端分离就是实现app的必然的结果。所以,我们可以认为html、css、JavaScript组成了这个app,然后浏览器作为虚拟机来运行这些程序,即浏览器成为了app的运行环境,成了客户端,总的来说就是当前的前端越来越朝向桌面应用或者说是手机上的app发展了,而比如说电脑上的qq可以服务器端渲染吗?肯定不能!所以前后端分离也就成了必然。而我们目前接触额前端工程化、编译(转译)、各种MVC/MVVM框架、依赖工具、npm、bable、webpack等等看似很新鲜、创新的东西实际上都是传动桌面开发所形成的概念,只是近年来前端发展较快而借鉴过来的,本质上就是开源社区东平西凑做出来的一个visual studio。
     
     --------------------------------------------------------------------------------------------------------------------------------------
     服务器渲染(后端渲染)
    浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。
    传统的jsp、php都是属于服务器渲染。

    客户端渲染(前端渲染)
    服务器端处理请求后将数据返回给浏览器,浏览器通过拼接html字符串或者使用js模板引擎,或者React这类框架进行页面渲染,又称作 : 局部渲染

    前端渲染的优势:

    1.局部更新页面,无需每次都进行完整页面请求
    2.懒加载。页面初始时只加载可视区域内的数据,随着滚动等操作再加载其他数据
    3.节约服务器成本
    4.关注分离设计。服务器只用于访问数据库提供接口,前端关注展现。
    5.富交互,使用 JS 实现各种酷炫效果

    展开全文
  • 前端渲染步骤

    2020-09-28 10:32:02
    渲染引擎及关键渲染路径(Critical Rendering Path) 1.构建DOM树(DOM tree):从上到下解析HTML文档生成DOM节点树(DOM tree),也叫内容树(content tree); 2.构建CSSOM(CSS Object Model)树:加载解析样式生成...

    渲染引擎及关键渲染路径(Critical Rendering Path)
    1.构建DOM树(DOM tree):从上到下解析HTML文档生成DOM节点树(DOM tree),也叫内容树(content tree);
    2.构建CSSOM(CSS Object Model)树:加载解析样式生成CSSOM树;
    3.执行JavaScript:加载并执行JavaScript代码(包括内联代码或外联JavaScript文件);
    4.构建渲染树(render tree):根据DOM树和CSSOM树,生成渲染树(render tree);

    渲染树:按顺序展示在屏幕上的一系列矩形,这些矩形带有字体,颜色和尺寸等视觉属性。

    5.布局(layout):根据渲染树将节点树的每一个节点布局在屏幕上的正确位置;

    6.绘制(painting):遍历渲染树绘制所有节点,为每一个节点适用对应的样式,这一过程是通过UI后端模块完成;

    展开全文
  • 什么又是前端渲染呢?后端渲染和前端渲染又有什么区别呢? 最近在学习Vue的时候接触到了这个话题,我觉得还挺有意思的,所以写下来,记下来。 一、什么是后端渲染? 我们都知道现在的网页都由html+css+js组成,但是...

    什么是后端渲染?什么又是前端渲染呢?后端渲染和前端渲染又有什么区别呢?

    最近在学习Vue的时候接触到了这个话题,我觉得还挺有意思的,所以写下来,记下来。


    一、什么是后端渲染?

    我们都知道现在的网页都由html+css+js组成,但是在比较早的时候是没有js(JavaScript)的。所以那时候网页开发一般都是用html+css+jsp(java server page)/php来开发。我自学前端写的第一个算是有网络交互功能的东西(留言板)用的就是html+css+php来完成的(php代码的作用是从数据库中读取数据,并且把它动态的放在要渲染的页面上)。以我写的留言板为例,当我们从浏览器输入一个url的时候,浏览器会将我们输入的url发送到服务器上。当服务器拿到这个url的时候,服务器会进行解析然后在后台生成一个包含html+css+js+php的网页。这时候服务器端就已经生成一个最终的网页了,网页渲染好之后,就会把渲染好的网页直接传给浏览器(html+css+数据),这就是最终的网页了,这就是后端渲染。所以后端渲染简单的说就是,网页在服务器渲染完成,再返回给浏览器,网页是在服务器端进行渲染,而不是在浏览器端进行渲染。
    我写的留言板用的是前后端分离,当然,我们也可以只用html+css+php来完成,也就是我们的后端渲染
    早期的网页整个html都是服务器来渲染,服务器直接生产渲染好对应的html页面,返回给客户端进行展示

    二、那么什么又是前端渲染呢?

    在明白我们所说的后端渲染之后,其实大家很容易就能想到前端渲染是什么样的。在经历过比较早的阶段之后,随着Ajax的出现,就有了我们的前后端分离的阶段。这时候后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中。举个例子,当我们从浏览器输入一个url的时候,浏览器会将我们输入的url发送到服务器上,然后再从服务器返回html+css+js(js代码由浏览器执行)。然后我们的客户端,也就是我们的浏览器再通过Ajax请求(API),然后服务器接收请求返回数据,浏览器接收到数据后再进行动态渲染,局部刷新页面,这就是我们的前端渲染。
    我写的留言板用的是前后端分离,通过Ajax来动态获取数据进行渲染

    三、后端渲染和前端渲染又有什么区别呢?

    看到这里,想必大家都能明白了后端渲染和前端渲染的区别。在比较早的时候,后端程序员好像是比较辛苦的,又要写数据处理,又得写网页,而那时候的前端被戏称为“切图仔”,在当时开发分工是比较混乱的,维护起来也麻烦。来到了前后端分离阶段后,前后端责任分工开始清晰了起来,后端专注于数据上,前端专注于页面交互和页面的可视化。并且当移动端(ios系统,android系统)出现后,后端不需要进行任何处理,依然使用之前定的一套API就可以。

    总结

    随着技术的发展,网页开发也朝着越来越好,越来越精的方向走去。后端渲染和前端渲染的区别主要就是渲染的方式不同。(以上仅代表个人意见,新人一枚,如有错误,多多指正!如果觉得我写的还可以请大家多多点赞哦)

    展开全文
  • mustache 前端渲染模板

    2019-08-23 15:19:17
    (积分会自动改,需要的留言)实例https://blog.csdn.net/github_38854224/article/details/88012869
  • 前端渲染和后端渲染

    2019-05-21 19:31:46
    前端渲染是通过ajax请求数据,然后通过js语法将数据展示到页面中,称之为前端渲染 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端 后端模板 ejs pug( jade ) art-template 现在流行的: ...
  • 前端渲染和后端渲染的区别

    千次阅读 2017-09-02 17:47:08
    在网上查找了很久的前端渲染和后端渲染的区别,最后总算在知乎上看到了一个比较清楚的解释,感谢万分!作者:iakul 链接:https://www.zhihu.com/question/28725977/answer/42077482 来源:知乎 著作权归作者所有...
  • JS前端渲染大批量数据

    千次阅读 2019-09-11 15:15:05
    前端渲染大批量数据 这里会提出三种方法 <ul></ul> 1.最简单的 const number = 99999; let ul = document.querySelector("ul"); for (var i = 0; i < total; i++) { let li = document....
  • 服务器渲染与前端渲染

    千次阅读 2019-02-09 14:51:30
    客户端渲染(前端渲染) 服务器端处理请求后将数据返回给浏览器,浏览器通过拼接html字符串或者使用js模板引擎,或者React这类框架进行页面渲染,又称作 : 局部渲染 前端渲染的优势: 局部更新页面,无需每次都进行...
  • ArcGIS接入动态服务完成前端渲染,DynamicMapServiceLayerRender
  • 前端渲染和后端渲染的区别在哪里首先了解前端与后端的渲染 一、前端渲染 访问网页时,先请求到 html 内容,并渲染出来。然后根据需要发送 ajax 请求获取后台返回的数据来更新页面。 后端返回json数据后,前端预先写...
  • 富文本前端渲染

    2021-03-04 17:21:58
    富文本前端渲染 在后台添加富文本的时候存进数据库他是以HTML的格式显示的 在前台它不会给你HTML的格式展出,会以文本格式展出,下面代码就是对数据库里面的富文本添加的字段进行转译 在需要转译的字段后加上|raw...
  • 前端渲染几十万条数据不卡顿 渲染大数据时,合理使用createDocumentFragment和requestAnimationFrame,将操作分为一小段执行. createDocumentFragment()方法 用来创建一个虚拟的节点对象,或者说说是用来创建文档...
  • 简单的前端渲染模板实现

    千次阅读 2017-10-09 22:40:24
    今天碰巧看到网络上一些高手博客写着渲染模板教程,就做个随笔记录吧! 渲染模板简单的说,就是将一些数据,字符串加载到几个的变量当中。 var tpl = 'Hei, my name is , and I\'m years old.'; js数据加载方式 ...
  • 基于Django的前端渲染方式总结

    千次阅读 2019-01-11 16:18:15
    1-2 Template前端获取数据渲染 1-3 详细学习博客跳转 1-3-1 Django - 模板层 - 变量、过滤器、标签 1-3-2 Django - 模板层 - 模板的导入和继承 、静态文件的使用 1-3-2 基于此方法实现渲染...
  • 前端渲染树形结构

    千次阅读 2019-09-25 14:39:29
    要解析渲染的数据 dsList: [ { "name": "杭州", qyList: [ {"name": "杭州1"}, {"name": "杭州2"}, ] }, { "name": "金华", qyList: [ {"name": "金华1"}, {"name": "金华2"}, ] }, ] 效果...
  • 抓取前端渲染的页面 随着AJAX技术不断的普及,以及现在AngularJS这种Single-page application框架的出现,现在js渲染出的页面越来越多。对于爬虫来说,这种页面是比较讨厌的:仅仅提取HTML内容,往往无法拿到有效的...
  • 通过OpenGL理解前端渲染原理(1)

    千次阅读 2019-07-29 11:15:04
    通过OpenGL理解前端渲染原理,本文着重介绍渲染管线工作流程。 一、OpenGL OpenGL,是一套绘制3D图形的API,当然它也可以用来绘制2D的物体。OpenGL有一大套可以用来操作模型和图片的函数,通常编写OpenGL库的人是...
  • 后端渲染和前端渲染的比较

    千次阅读 2017-03-18 15:56:16
    脱离场景谈架构都是耍牛氓! 不同的方案会有不同的优劣,我们来比较一下后端模板渲染和前端模板渲染: 一、后端渲染 ...页面呈现速度:快,受限于用户的带宽 ...二、前端渲染 页面呈现速度:主要受限于带宽和客
  • 图解 SSR 等 6 种前端渲染模式

    千次阅读 2020-06-21 20:20:00
    关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术写在前面React、Vue 等现代化前端框架的大旗之下,CSR(...
  • 在网上查找了很久的前端渲染和后端渲染的区别,最后总算在知乎上看到了一个比较清楚的解释,感谢万分! 作者:iakul 链接:https://www.zhihu.com/question/28725977/answer/42077482 来源:知乎 著作权归作者所有。...
  • 抓取前端渲染的页面

    千次阅读 2016-05-23 17:30:24
    随着AJAX技术不断的普及,以及现在AngularJS这种Single-page application框架的出现,现在js渲染出的页面越来越多。对于爬虫来说,这种页面是比较讨厌的:仅仅提取HTML内容,往往无法拿到有效的信息。那么如何处理...
  • 前端没兴起之前,网页的展示大都是后端渲染,也就是服务器渲染。 随着前端行业的发展,前端的工作越来越精细。...前端渲染是,通过ajax请求接口返回的数据,将数据渲染出来。后端只写接口,分工更明细。
  • 使用 Headless Chrome 渲染 JavaScript 前端渲染的网页(如 AngularJS)以便搜索引擎爬取
  • 前端渲染与SEO优化踩坑小记

    千次阅读 2016-08-30 15:20:31
    前言 在网站页面后端渲染的时代,开发者只需要按照规范制作搜索引擎友好的页面便可以快速让搜索... 后端只提供数据接口、业务逻辑与持久化服务,而视图、控制与渲染则交给前端。 因此,越来越多的网站从后端渲染变成...
  • 采用redux设计模式,采用chrome为UI内核渲染,采用ElementUI为前端渲染,采用Vue为前端双向绑定,采用“热加载”快速开发。 背景问题 在C#.net传统PC开发中还在苦恼缓慢,界面UI老旧不易美化的问题吗? 1.常常为了*...
  • sword 简单前端渲染方案&webapp解决SEO问题
  • 浅析前端渲染与后端渲染

    千次阅读 2017-08-04 15:40:58
    前端渲染与后端渲染本质上可以理解为:浏览器渲染与服务器渲染  备注:以下纯属本人个人的一些总结与看法,如有异同,欢迎大家指教; 渲染的本质:字符串的拼接,将数据渲染进固定格式的html代码中,形成最终的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 183,849
精华内容 73,539
关键字:

前端渲染