网页的最初形式就是一个个静态页面,例如咱们写了一个 html 文件,放在服务器上就能够供用户访问了。 然后网站变得须要展现更多的内容,让内容更加动态,所以须要接入数据库,配合数据库的内容作展现,因而诞生了 html 模板引擎,用于把动态的数据插入到 html 中,叫作动态页面,后面我会叫它为传统的动态页面,例如 java 的 Jsp,php 的 Smarty 和 node 的 Jade 等。 再后来伴随浏览器的发展,网页交互变得愈来愈复杂等一系列缘由,前端技术日新月异,诞生了先后端分离的单页面应用,简称 spa(single page application),最流行的莫过于 react、angular 和 vue了,三大框架一统江湖。 单页面应用也有其自身的缺陷,seo不友好、首次加载较慢,可是你们又不可能回过头去使用模版引擎,因而乎基于单页面应用框架的 SSR(sever side rendering)服务端渲染应运而生,例如基于 vue 的 nuxt.js 和基于 react 的 next.js。 它不只使咱们统一了技术栈,还解决了单页面自己的一些问题,以致于咱们能在某些场景下获得知足。php
基于整个发展史,我在这里暂且把网页的开发方式划分为这四个类型:传统的静态页面、传统的动态页面、单页面、单页面的服务端渲染。css
接下来咱们从下面几个方面,来谈一谈每一种开发方式html
html-css-js前端
将静态资源存放在服务器,用户经过 url 访问静态资源并加载到浏览器,最后渲染vue
引入资源少,开发速度快,对于复杂应用开发效率极低java
服务器只须要返回静态资源,响应流程简单,速度很是快node
服务器压力小,占用不多资源react
仅支持展现少许信息的网页,交互较少,好比简单的介绍页面,官方网站,我的简历网页等。程序员
html-css-js、ajax、数据库、后端程序及相关模版引擎ajax
运行后端程序并监听路由(请求路径),用户访问对应路由后端渲染对应的页面,执行相关 sql 并返回数据,模版引擎将数据插入到 html 节点中,返回 html,浏览器渲染
开发效率较高,mvc模式,须要搭建耦合的先后端架构,模版引擎后端渲染部分和前端 ajax 经过 js 渲染部分须要额外编码处理。若是后端迁移语言,几乎等于重写。先后端职责并非特别分明,后端程序员也能够修改模板。
服务端程序须要监听路由,同步请求接口,渲染模板,响应流程较多,加载速度较快
服务器须要启动后端程序,后端程序须要请求数据和渲染页面,占用内存和计算资源较多
内容丰富,复杂交互的动态网页,适合全栈开发。也有一种动静结合的应用场景,后端程序根据路由,把页面动态渲染后生成一个静态的页面,按期更新此静态页面,这样用户访问的时候,就直接访问的是静态页面,能很大程度减小服务器压力。缺点是更新不及时,是一种相似缓存的策略,使用此方式仍是根据应用场景综合评估。
html-css-js、ajax、单页面框架
服务器直接返回静态资源,浏览器加载执行相关 js,单页面框架判断路由执行对应 js 代码,全部请求异步,彻底经过 js 插入和修改 dom ,不须要服务端作任何事情。
开发效率较高,mvvm模式,先后端分离彻底独立的纯前端应用,先后端职责分明互不干涉。
无静态资源缓存状况下,首次加载速度较慢,由于须要经历静态资源下载、js 彻底执行、异步数据返回。首次加载完成后页面路由被前端控制,切换很是快。缓存静态资源之后,首次加载速度也很是快。
服务器压力很小,只须要返回静态资源,网页逻辑、路由和计算所有分摊给无数客户端。
内容丰富、数据量大、复杂交互的动态网页。大部分场景都能知足,是目前最流行的方式。
注:之因此没有直接使用 SSR(服务端渲染)来表示,是由于动态网页也能够叫服务端渲染。
html-css-js、ajax、单页面框架、nodejs、基于node和单页面框架自行实现核心逻辑 或者 使用三方框架如nextjs、nuxtjs
用户访问 url, node 拦截到路由,并根据路由渲染对应单页面组件生成 dom 字符串,若是有数据请求,同步获取到数据后才渲染出 dom 字符串,插入到 html 中返回客户端,客户端很快显示出界面,至此服务端渲染完成。客户端 body 后的 script 标签加载单页面相关 js 文件,然后客户端进行一次单页面同构,完成对应组件 dom 的事件绑定及那些服务器端没法实现的功能,后续的交互和程序执行就彻底是一个单页面应用。
开发效率相对于单页面要低一些,由于额外要处理的逻辑变得比较多,好比 node 没有 window 对象等等。也会有应用方案自己的一些小坑,以及须要花成本学习 next 等框架。
首次加载速度比较快,由于很快就能先呈现出页面(可是同构未完成时功能受限)。若是没有缓存的状况下,首次加载速度 SSR 是优于单页面的,若是 js 被缓存,反而单页面会快一点。由于 SSR 会多一点服务端的流程开销。
相比纯单页面,服务器须要增长 node 服务带来的消耗。而服务器压力会比动态页面少不少,由于仅仅是用户第一次访问的时候才是服务端渲染,然后路由改变页面渲染都是被单页面控制。
内容丰富,复杂交互的动态网页,对首屏加载有要求的项目,对 seo 有要求的项目(由于服务端第一次渲染的时候,已经把关键字和标题渲染到响应的 html 中了,爬虫可以抓取到此静态内容,所以更利于 seo)。此方式一些适合的项目:活动模板,新闻通知类,博客系统,混合开发等等。
文章如有错误,欢迎指出,以便修改~