前端- 关于SPA

发表于 2021-01-01 分类于前端

前端- 关于SPA

三类

static page
dynamic pages
Single Page Application

https://academind.com/learn/web-dev/dynamic-vs-static-vs-spa/

1.静态页面 ：html + css

2.动态页面 ： framework 动态生成， eg JSP

3.SPA

angular（js）， vue， react etc...

server 端只返回一个html， js 操作dom + fetch data

Issue: SEO - 搜索引擎优化（SSR：搜索引擎带流量的，必须由服务器端渲染。）

前端开发：

Old Way：

JSP 套模板，前后端耦合，设计+前段html -》 java工程师装换html 到jsp ，效率低下，容易出错。JSP 只能部署在servlet容器（如tomact ），无法使用nginx （nginx 高并发能力），因此性能较差。第一次请求JSP，需要编译成servet，每次请求都是servlet通过输出流输出html页面。

流程：客户端请求，服务端servlet(controller) - 后端控制路由和渲染，然后分层 service 层 -> dao层， JSP

servlet VS JSP： https://www.zhihu.com/question/37962386/answer/87758781

related： jquery

功能：

选择网页元素 + 过滤器
操作元素 : eg $('h1').html('Hello');
增加删除dom 元素
事件 eg $(button).on('click', fn)
浏览器兼容性（现在babel + polyfill）

New Way：

前后端分离 - nginx serve html+static assets, proxy pass to appliaction server (eg tomcat)

主要通过ajax 调用后端接口，解耦，减少依赖(mocking)，前后端可以单独部署 (以前的方式war包)。减少应用服务器压力，因为静态资源不会走应用服务器。

流程： load html + ajax， js dom

https://www.zhihu.com/question/267014376/answer/444793972 https://www.zhihu.com/question/28207685/answer/575863155 https://zhuanlan.zhihu.com/p/71937497 https://www.zhihu.com/question/328020258/answer/712683292 https://zhuanlan.zhihu.com/p/83505426 https://www.zhihu.com/question/375185573/answer/1103410656

SSR (server side rendering)

首屏渲染

browser 需要解析static asset + JavaScript interpret ， SSR 思想是server 端直接把最终的html 这个发回来。

Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser.

优点: SAP的SEO问题， faster loading

缺点： complexity，大的应用server端渲染take time

解决方案： SPA 框架有各自的解决方案，或者puppeteer + headless chrome

https://www.educative.io/edpresso/what-is-server-side-rendering

SPA

The server returns one single, pre-generated HTML page which in turn contains JavaScript code that changes the page dynamically in the browser (this approach is known as a “Single Page Application” or “SPA”)

页面不需要到server到重新获取，渲染主要依靠client side js + 调用server端api 获取数据，前段路由

Why？

fast，应为不需要update 整个page ，只有第一次会load html/ccss/img/scripts, 后续都是ajax 获取数据动态更新页面
cachinfg，可以使用browser的cache
user experience
框架支持

eg： gmail， github