zoukankan      html  css  js  c++  java
  • vue-前端渲染和后端渲染的区别

      说前端渲染和后端渲染前,渲染这个概念可以理解成:将html+css代码进行解析,变成页面上肉眼看见的图形界面;其实渲染整个过程还是挺复杂,只要上述简单理解即可。

      要开始说前端渲染和后端渲染了,那就得从早期的网页开发到目前流行的开发阶段的演变过程说起,主要分为3个阶段:

        1. 后端时代(前后端不分离)

        2. 前后端分离时代

        3. 单页面富应用时代

    一. 后端时代

      相信后的小伙伴还学过JSP呢,现在想想不知道多久没碰这东西了。但在早期呢确实是用JSP做视图的展示的,看下图:

       看完这个图后,我再解释一下。在早期页面的生成,他是通过模板引擎来做到的,最典型的就是JSP了。页面上的动态数据获取是由服务端Java来实现的,最终在服务端渲染出了html,将其返回给页面。因此这种方式也叫做后端渲染,html的最终生成是在服务端,浏览器只是拿到这个页面而已。

      那什么是后端路由呢?我们拿springmvc的流程来举例子,后端路由相当是HandlerMapping处理器映射器,请求URL过来,由映射器进行正则匹配然后找到处理器

    二.前后端分离时代

      在后端时代还在用JSP时,那时候弊端太多了,典型的是耦合度太高,后端人员任务重,前后端人员沟通不方便...

      前后端分离 出现后,前后端开发进行一定的解耦,仅仅是降低耦合度,并不是0耦合。那是因为出现Ajax技术,才实现了前后端分离的萌芽,画个图吧:

       说这幅图前,还普及一下一个知识,现在前后都分离常见有两种模式:

        1. 前端代码和后端代码都在同一个项目目录里面,该项目部署到一台服务器上

        2. 前端代码和后端代码是在不同的项目目录里面,两个项目是分别独立运行的,互不相关,可部署在不同的服务器里。比如上面画的这个图就是属于该情况。一般项目的前端代码放在静态资源服务器上,后端代码放在API服务器或者说Web服务器上

      说完这个小常识后,再来讲下这幅图。浏览器起初拿到的页面是不完整的,是没有数据渲染过的,因此还得借助ajax去请求api服务器获取数据,最终渲染出真正的一个html页面。浏览器ajax请求获取数据后,并浏览器自身渲染的过程,就叫做前端渲染,因为这个工作呢不再是由服务端来做了,已经交付给浏览器负责,说白点即JavaSript渲染,而不再是Java了

    三.单页面富应用时代

      单页面富应用在vue中的体现可以说是淋漓尽致了。但不说vue啊,说什么是单页面富应用?

      单页面富应用是说在静态资源服务器上,只有一个html页面,一套css代码,一套JS代码;浏览器去拿到上述的全部资源,进行部分展示和使用,如果通过请求具体的其他URL,在同一个页面中进行另有一部分的展示和使用。

      可能说得有点抽象,也不画图了,因为这个没啥可画的。还是细说一下。

      1. 浏览器发送请求到静态资源服务器

      2. 静态服务器返回一个html页面,一套css代码,一套JS代码,即全部的资源

      3. 浏览器拿到全部的资源后,并不是全部使用上的。比如访问首页,那就从全部的资源中展示首页相关的html+css+js,当去访问订单,那就在同一个页面里面不刷新的情况下,展示订单相关的html+css+js

      我们发现同一个页面里面,没有再次向静态服务器发送页面请求的情况下,做到了页面的变化。这取决于两点:

        》开始时已经把全部资源获取了

        》前端路由。正是因为有前端路由,我们才可以通过触发某个事件,在同一个页面内进行局部的页面变化。如果学过vue的话都知道,实际上是同一个页面里单单切换了其中的组件

      单页面富应用有一个最大的好处是:只请求一次静态服务器,不需要多次请求页面了。不过对于前端人员来讲呢,实际上真不是一个html页面,本来写多少页面还是多少

      做个总结:单页面富应用 是在 前后端分离基本基础上,加了前端路由这个东西。

  • 相关阅读:
    php 字符串
    iOS copy&mutableCopy理解
    Swift学习(二)
    Swift 学习一函数&函数属性&懒加载
    LICEcap GIF 屏幕录制工具
    UIApplication介绍
    进度条渐变色
    -(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
    DedeCms 5.7友情链接模块注入漏洞
    phpcms v9会员中心文件上传漏洞
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14601743.html
Copyright © 2011-2022 走看看