精华内容
下载资源
问答
  • 从 2014 年起又开始流行了同构渲染,号称是未来,集成了前后端渲染的优点,但转眼间三年过去了,好像还是前端渲染的天下。同构到底是不是未来?自己的项目该如何选型?我想不应该只停留在追求热门和拘泥于固定模式上...

    一、引

    很久前,几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染,但是前几年 jQuery、Angular、React、Vue 等 JS 框架的大行其道,大家转向了前端渲染。从 2014 年起又开始流行了同构渲染,号称是未来,集成了前后端渲染的优点,但转眼间三年过去了,好像还是前端渲染的天下。同构到底是不是未来?自己的项目该如何选型?我想不应该只停留在追求热门和拘泥于固定模式上,忽略了前后端渲染之“争”的“核心点”,关注如何提升“用户体验”。

    二、概念

    1. 「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;
    2. 「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA 单页面应用;
    3. 「同构渲染」指前后端共用 JS,首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

    2.1 前端渲染的优势

    1. 局部刷新。无需每次都进行完整页面请求
    2. 懒加载。如在页面初始时只加载可视区域内的数据,滚动后 rp 加载其它数据,可以通过 react-lazyload 实现
    3. 富交互。使用 JS 实现各种酷炫效果
    4. 节约服务器成本。省电省钱,JS 支持 CDN 部署,且部署极其简单,只需要服务器支持静态文件即可
    5. 天生的关注分离设计。服务器来访问数据库提供接口,JS 只关注数据获取和展现
    6. JS 一次学习,到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

    2.2 后端渲染的优势

    1. 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面(首屏性能)
    2. 有利于SEO
    3. 服务端渲染不用关心浏览器兼容性问题(随意浏览器发展,这个优点逐渐消失)
    4. 对于电量不给力的手机或平板,减少在客户端的电量消耗很重要

    以上服务端优势其实只有首屏性能和 SEO 两点比较突出。但现在这两点也慢慢变得微不足道了。React 这类支持同构的框架已经能解决这个问题,尤其是 Next.js 让同构开发变得非常容易。还有静态站点的渲染,但这类应用本身复杂度低,很多前端框架已经能完全囊括。

    三、各有优劣

    可以达成共识的是,未来是前端渲染的天下,没人开始往服务器端渲染走。但是同构渲染还处于不确定的讨论中。

    3.1 前端渲染

    最大的问题就是 SEO、首屏性能。前端渲染常使用的 SPA 会把所有 JS 整体打包,导致的问题就是文件太大,等待很长时间。特别是网速差的时候。SEO 很好理解。由于传统的搜索引擎只会从 HTML 中抓取数据,一上来的空网页导致页面无法被抓取。

    3.2同构渲染

    1. 性能
      个性化的缓存是一个问题。可以把每个用户个性化信息缓存到浏览器,这是一个天生的分布式缓存系统。我们有个数据类应用通过在浏览器合理设置缓存,双十一当天节省了 70% 的请求量。试想如果这些缓存全部放到服务器存储,需要的存储空间和计算都是很非常大。

    2. 不容忽视的服务器端和浏览器环境差异
      前端代码在编写时并没有过多的考虑后端渲染的情景,因此各种 BOM 对象和 DOM API 都是拿来即用。这从客观层面也增加了同构渲染的难度。我们主要遇到了以下几个问题:

      1. document 等对象找不到的问题
      2. DOM 计算报错的问题
      3. 前端渲染和服务端渲染内容不一致的问题

      由于前端代码使用的 window 在 node 环境是不存在的,所以要 mock window,其中最重要的是 cookie,userAgent,location。但是由于每个用户访问时是不一样的 window,那么就意味着你得每次都更新 window。 而服务端由于 js require 的 cache 机制,造成前端代码除了具体渲染部分都只会加载一遍。这时候 window 就得不到更新了。所以要引入一个合适的更新机制,比如把读取改成每次用的时候再读取。

    export const isSsr = () => (
      !(typeof window !== 'undefined' && window.document && window.document.createElement && window.setTimeout)
    );
    

    原因是很多 DOM 计算在 SSR 的时候是无法进行的,涉及到 DOM 计算的的内容不可能做到 SSR 和 CSR 完全一致,这种不一致可能会带来页面的闪动。

    1. 内存溢出
      前端代码由于浏览器环境刷新一遍内存重置的天然优势,对内存溢出的风险并没有考虑充分。

    2. 异步操作
      前端可以做非常复杂的请求合并和延迟处理,但为了同构,所有这些请求都在预先拿到结果才会渲染。而往往这些请求是有很多依赖条件的,很难调和。纯 React 的方式会把这些数据以埋点的方式打到页面上,前端不再发请求,但仍然再渲染一遍来比对数据。造成的结果是流程复杂,大规模使用成本高。

    3. simple store(redux)
      这个 store 是必须以字符串形式塞到前端,所以复杂类型是无法转义成字符串的,比如 function。

    总的来说,同构渲染实施难度大,不够优雅,无论在前端还是服务端,都需要额外改造。

    三、总结

    我们赞成客户端渲染是未来的主要方向,服务端则会专注于在数据和业务处理上的优势。但由于日趋复杂的软硬件环境和用户体验更高的追求,也不能只拘泥于完全的客户端渲染。同构渲染看似美好,但以目前的发展程度来看,在大型项目中还不具有足够的应用价值,但不妨碍部分使用来优化首屏性能。做同构之前 ,一定要考虑到浏览器和服务器的环境差异,站在更高层面考虑。

    展开全文
  • 服务器渲染与前端渲染

    千次阅读 2019-02-09 14:51:30
    服务器渲染(后端渲染) 浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。 传统的jsp、php都是属于服务器渲染。 客户端渲染(前端渲染) 服务器端处理请求后将数据返回...

    服务器渲染(后端渲染)
    浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。
    传统的jsp、php都是属于服务器渲染。

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

    前端渲染的优势:

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

    万次阅读 多人点赞 2018-09-06 19:46:47
    使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: <template v-for="item in tableData"> <div :class="{'redBorder':item....

    使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下:

    <template  v-for="item in tableData">
                  <div :class="{'redBorder':item.red}">
                    <div>{{ item.name}}</div>
                    <div>
                    	<el-button size="mini" @click="clickBtn(item.id)" type="info">编辑</el-button>
                      	<p class="el-icon-error" v-show="item.tip"></p>
                    </div>
                  </div>
    </template>
    
    

    js部分如下:

    <script>
     export default {
          data() {
            return {
             tableData:[{id:0,name:"lili",red:false,tip:false}]
            }
          },
     
          methods: {
    	clickBtn(id){
    		this.tableData[id].red=true;
    		this.tableData[id].tip=true;		
    	}
    	}
    }
    </script>
    
    

    在项目中点击button后不出现红色边框和提示错误框,打开debugger查看,发现运行到了这里却没有执行,tableData中的值并没有改变,这个方法在以前使用时会起作用,可能是这次的项目比较复杂引起的,具体原因不明。
    后通过查找资料修改为使用$set来设定修改值,js如下:

    this.$set(this.tableData[id],"red",true);
    

    但是依然没有起作用,打开debugger发现tableData的值修改成功,没有渲染到页面上,查找的资料也是比较凌乱,并不能解决问题,后请教大神,才知道是数据层次太多,没有触发render函数进行自动更新

    如果遇到此类问题的话可以加我微信我帮你解决 加微信记得发个红包哦!!!!

    在这里插入图片描述

    展开全文
  • 渲染工作应该由谁完成? 时下,前端 UI 设计越来越复杂,可谓“XX与XX齐飞,XX共XX一色”。 越来越复杂的 UI 意味着越来越重的 渲染工作。 目前通常有两种选择:服务器渲染 与 客户端渲染 笔者是支持客户端...

    渲染工作应该由谁完成?

    时下,前端 UI 设计越来越复杂,可谓“XX与XX齐飞,XX共XX一色”。
    越来越复杂的 UI 意味着越来越重的 渲染工作。

    目前通常有两种选择:服务器渲染客户端渲染

    笔者是支持客户端渲染的(没错就是钦点的)

    Jade, YAML 为代表的 模板渲染引擎 一般作用于 服务器 作为 后端 的 视图部分。
    而使用 JavaScript 直接 处理 HTML DOM 则是 作用于前端,性质是客户端执行渲染。

    两者在最终用户看到的效果是一致的。
    Web App 最终都还是要落实到HTML,CSS,JavaScript上才能体现到用户界面上。
    归根结底,后端渲染是将一些模板规范语言翻译成如上三种语言回传给前端;而前端渲染则是将整个生成逻辑代码全部回传前端,再由客户端生成用户界面。

    为什么会有服务器渲染与客户端渲染?

    一开始,Web App 直接由若干 HTML,CSS, JS 组成,每一个页面需要特殊的逻辑,因此随着App规模的扩大,后端网站目录下的代码文件就越来越多,而且,彼此之间是没有同步的,比如你改了站点的布局风格。那么你很可能需要改动成百上千的HTML文件,这谁能忍?

    聪明的工程师们想到,既然如此多的HTML具有一定的逻辑联系,何不使用代码生成代码?于是后端模板语言诞生了,这可是前端狗的一大痛点啊,于是人们开始广泛使用模板语言代替手写HTML。我认为,模板语言的成功源于它成功地减少了前端工程师的工作量。

    后端模板渲染的思路应该是源自“如何管理数以千计的存储于后端的前端页面的版本一致?”这个问题的。通过代码生成代码,本质上是编译,他们基于HTML等基础语言作了更高层次的抽象封装,增强了易用性。各种模板语言大同小异,但大多都有模板中的模板这样的性质来完成继承这样的面向对象特性。

    可能,当时工程师们没有考虑前端渲染的一大原因是 以JavaScript为代表的前端技术 尚未崛起。现在H5,CSS3,JS 受到越来越广的普及使得前端的可作为性大大提升,特别是在Node.js出现以后 JS 工程师 维护后端的成本大大降低。

    编写本文时 尚不考虑 当时普及度不高的 ES6,尽管它具有更多有用的特性

    在一些jQuery用户的角度看来,JS生成前端无非就是这样的

    var e = document.createElement('div');
    $('#container').append(e);

    你需要先把DOM生成,然后再插入到其他的DOM里去。

    纯JS处理DOM确实是一件麻烦事,这可能也是客户端渲染迟迟没有发展起来的原因之一。

    考虑一下为什么后端模板语言方便简洁? 因为它用了与HTML类似的语法。

    在PHP,JSP页面里面你可以使用大量的HTML语法,只使用少量的变量注入与迭代注入。

    使用HTML进行设计明显比纯JS更方便快捷并且直观。

    那么可以借鉴地,解决客户端渲染问题的最后一个锦囊就是引入模板,在这里我们称之为组件(Component)

    对待模板,新兴的Angular,React,Vue 意见不一,甚至他们对自己在Web App 的定位也不一样。
    具体情况可以自己去了解,这并不是本文的重点。

    随着前端也支持了模板语言,那么以前的代码管理问题也解决了,以往的后端渲染引擎也大多有了基于JS的前端版本。

    前后端真正解耦,前端将专注于UI,后端将专注于数据处理,两端通过设计好的API进行交互,这会是一个趋势,不管你信不信,反正我是这样认为的。

    从 后端渲染 到 前端渲染,发生了什么变化?

    • 计算任务转移
      原本由服务器执行的渲染任务转移给了客户端,这在大量用户访问的时候大大减轻后端的压力。让后端专注做后端应该做的事情,性能将大大提高,因为服务器做的事情确实减小了,而现在随着客户端软硬件的发展,也能处理好大多数的渲染工作了。

    • 放弃前端权限
      将整个UI逻辑交给客户端以后,一些有经验有能力的用户可能会劫持UI,使得他们能够看到一些不该看到的界面。这似乎违反了安全的原则。但是“一切在前端谈安全1都是耍流氓”,后端不能轻信一切从前端传来的数据,切记一定要做好过滤与验证。只要使用SSL、屏蔽XSS、后端不出漏洞,想伪造身份劫持App还是难以做到的。

    结语

    比起后端渲染,前端渲染既能提升性能,又没有无解的安全问题,何乐不为?
    By the way, 安利一发React2,了解了很多React特性,会对UI的存在有一个更深刻的认识。


    1. 在前端存在一种名为XSS的攻击,一般通过在页面中插入script标签来远程执行代码。过滤script标签等转义可破被动XSS,另外可以通过提示用户不在console使用未知代码来预防主动XSS攻击。XSS攻击是非常危险的,必须做好防范。
    2. React 中文站:http://reactjs.cn/
    展开全文
  • Vue 服务端渲染 & 预渲染

    千次阅读 2018-06-22 09:48:08
    服务端渲染 or 预渲染 区别 如何使用预渲染 如何搭建一个预渲染开发环境 Tip 写在最后 简介 关于 Vue 的 SPA 说的已经太多太多了,它为我们带来了极速的开发体验,极强的开发效率。可能唯一有些许不足的...
  • 客户端渲染和服务器渲染的区别

    千次阅读 2020-05-07 21:41:30
    客户端渲染和服务端渲染的区别一级目录二级目录三级目录 一级目录 二级目录 三级目录
  • 与普通情况下 GPU 直接将渲染好的内容放入 Framebuffer 中不同,需要先额外创建离屏渲染缓冲区 Offscreen Buffer,将提前渲染好的内容放入其中,等到合适的时机再将 Offscreen Buffer 中的内容进一步叠加、渲染,...
  • 【浏览器渲染原理】 渲染树和页面渲染 我们主要讨论以下列出的几个问题: 什么是渲染树?和DOM树及CSSOM树有什么关系? 渲染树是如何形成的? 浏览器渲染顺序问题 1.什么是渲染树?和DOM树及CSSOM树有什么关系?首先...
  • 浅析前端渲染与后端渲染

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

    千次阅读 2018-10-31 23:14:04
    何为渲染? 页面上的数据要发生更新,就是渲染。 这个工作放在服务器进行就是服务器渲染,放在浏览器进行就是浏览器渲染。 服务器端渲染,指的是后台语言通过一些模板引擎生成 html。 浏览器端渲染,指的是用 js...
  • KeyShot的使用有很多技巧,本文将使用KeyShot为大家渲染一个完整的模型,一起来体会即时渲染的乐趣。 如果你是keyshot的新手或是小白,那么恭喜你,我也是小白,在学习今天在学习keyshot渲染的时候发现自学太难了,...
  • 前端渲染和后端渲染的区别

    千次阅读 2018-12-19 14:12:12
    前端没兴起之前,网页的展示大都是后端渲染,也就是服务器渲染。 随着前端行业的发展,前端的工作越来越精细。前后端开始分离,前端只关注ui渲染。后端只提供数据和进行逻辑处理。 简单的解释,后端的程序在把html...
  • 渲染管线是指在显示器上为了显示出图像而经过的一系列必要操作; 》GPU的渲染管线就是告诉GPU一堆数据,最后得出来一副二维图像,而这些数据就包括了”视点、三维物体、光源、照明模型、纹理”等元素。  》渲染...
  • 服务端渲染与客户端渲染的区别

    千次阅读 2019-03-02 20:03:51
    服务端渲染(SSR)与客户端渲染(BSR)都是数据渲染的主要的方式 任何的WEB项目基本的需要就是将后端的数据库中的数据渲染到页面上 客户端渲染 前端利用ajax等数据交互手段获取服务端提供的数据之后,渲染到HTML...
  • 渲染管线

    千次阅读 2017-02-07 15:00:36
    2.1为什么要介绍渲染管线?  在微软DirectX10.0规范的统一渲染架构发布以前,渲染管线曾经是选购显卡的一项重要指标。然而采用流处理器渲染架构,由于硬件工作效率更高,目前已经逐渐取代了采用渲染管线的传统架构...
  • 前端渲染与后端渲染的区别

    万次阅读 多人点赞 2017-08-18 10:14:22
    前端渲染: 指的是后端返回JSON数据,前端利用预先写的html模板,循环读取JSON数据,拼接字符串(es6的模板字符串特性大大减少了拼接字符串的的成本),并插入页面。 好处:网络传输数据量小。不占用服务端运算...
  • Vue客户端渲染和服务端渲染异同

    千次阅读 2018-09-20 18:15:18
    本文比较服务端和客户端渲染的不同,并用实例验证,同时会讲解一些Vue服务端渲染的概念。 本文不讲Vue服务端渲染的具体实现过程,需要学习服务端渲染的同学可以异步Vue服务端渲染官方教程地址: ...
  • 至2018.1版本,Unity中除了默认渲染管线,还提供了轻量级渲染管线(Lightweight Pipeline)和高清晰渲染管线(HD Pipleline)二个渲染管线。当然也支持自定义渲染管线。与高清晰渲染管线相比,...
  • iOS离屏渲染详解

    万次阅读 2020-04-29 10:19:33
    iOS离屏渲染 离屏渲染是指图层在被显示之前是在当前屏幕缓冲区以外开辟的一个缓冲区进行渲染操作。 离屏渲染需要多次切换上下文环境:先是从当前屏幕(On-Screen)切换到离屏(Off-Screen);等到离屏渲染结束以后...
  • 前后端渲染和同构渲染

    千次阅读 2017-04-28 13:47:08
    转自:阿里camsong 1. 引言 我为什么要选这篇文章呢? 十年前,几乎所有网站...从 2014 年起又开始流行了同构渲染,号称是未来,集成了前后端渲染的优点,但转眼间三年过去了,很多当时壮心满满的框架(Rendlr、L
  • 根据树状数据渲染树状下拉选项

    万次阅读 2019-07-21 16:45:04
    作者是把非末级的选项给禁用了,如果你们需求是要不禁用求留意笔者渲染时的操作。 接下来我们一起来做这个效果: 笔者所用的是react + antd,用其他的架构也是类似,请自行举一反三: 一:首先要处理从后端拿到的...
  • ...工作室早就不用vrary来工作了,全部改用了cr,不过为了对比新老两个渲染器的区别,我们采用了当年的一个的项目场景,来做一下测试。 首先,用vr渲染,大小为2K,这张图耗时75分钟,能在此看到
  • 前向渲染 延迟渲染

    千次阅读 2016-09-23 08:50:45
    而正常的前向渲染(Forward Shading)流程是把空间的点进行各种剪裁后,进行处理,所处理量远远大于我们最终看到的。所以延迟渲染出现了。它先将摄像机空间的点光栅化转化成屏幕坐标后再进行处理。这样就能减少处理...
  • @[TOC](vxe-table 渲染器详解,强大到没朋友的渲染器使用方式) vxe-table 渲染器 什么场景需要用到呢? 需要实现不同单元格编辑组件(比如:输入框、下拉框、日期选择等…) 需要定制高级筛选(比如:实现类似 ...
  • 在DOM树构建的同时,浏览器会构建渲染树(render tree)。渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer。渲染器是在文档解析和创建DOM节点后创建的,会计算DOM节点的样式信息。  在...
  • UE4渲染学习——2.渲染

    千次阅读 2018-09-24 18:07:59
    UE4渲染管线有前向渲染、延迟渲染等,本文主要分析延迟渲染。 找到Engine\Source\Runtime\Renderer\Private\DeferredShadingRenderer.h,可以看到这些函数 虚幻是通过这些函数来一步步完成渲染的。 官方说的渲染...
  • VUE强制渲染,强制更新

    万次阅读 2018-12-12 10:53:09
    列表渲染,以下数组操作方法可触发渲染 push() pop() shift() unshift() splice() sort() reverse() 当采用特殊方法操作数组后,导致无法更新数据到UI,此时可使用强制渲染,方法如下 this.$forceUpdate()  ....
  • 渲染

    千次阅读 2016-02-01 17:35:15
    渲染的模式与常规的云计算类似,即将3D程序放在远程的服务器中渲染,用户终端通过Web软件或者直接在本地的3D程序中点击一个“云渲染”按钮并借助高速互联网接入访问资源,指令从用户终端中发出,服务器根据指令...
  • 浏览器渲染引擎

    万次阅读 2019-12-07 00:06:29
    浏览器渲染引擎 主要模块 一个渲染引擎主要包括:HTML解析器,CSS解析器,javascript引擎,布局layout模块,绘图模块 HTML解析器:解释HTML文档的解析器,主要作用是将HTML文本解释成DOM树。 CSS解析器:级联样式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 166,644
精华内容 66,657
关键字:

渲染