前后端发展----wsdchong

本文回顾了网站从1990年至2015年的技术演变,详细介绍了前端和后端的发展历程,包括HTML、CSS、JavaScript、AJAX、Node.js等关键技术的出现与成熟。同时,探讨了前后端分离的概念、优势及其实现方式,为大型分布式架构和多端应用提供了技术基础。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

时间:2020/3/30

前言:网站发展、前端的追求、后端的追求、前后端分离、前端基本功和发展路线、后端基本功和发展路线;

术业有专攻,精力有限,用90%的精力做好10%的事。

认知是不断前进的。以下内容不一定对,请辩证地理解。

https://blog.youkuaiyun.com/qq_17231297/article/details/80826491

https://blog.youkuaiyun.com/freekiteyu/article/details/79927047

一、网站发展

前端发展史

动因是计算机和互联网的发展;

第一阶段:1990年推出HTML;1995年推出PHP;1996年推出CSS;1997年推出JS;IE2002年占有96%的市场;

 

动因是智能机和移动网络的发展,多客户端开始出现。

第二阶段: 2005年AJAX开始流行;jQuery解决浏览器兼容性问题;2008年HTML5草案发布和chrome发布JavaScript引擎V8;2013年chrome超过IE;

HTML新特性:webworker可以让JavaScript运行在多线程中;websocket可以实现前端和后台双工通信;webGL实现web3d网页游戏;2014年w3c正式发布HTML5推荐标准。

2009年基于事件循环的异步I/0框架——node.js诞生。拓展了JavaScript在服务端的无限可能。

前端mv**框架,网页逐渐从website演变成webapp,最终导致复杂的单页应用。

2015年,es6发布;

 

二、前端的追求

追求:页面表现、速度流畅、兼容性、用户体验;易维护、可测试、高性能、低流量。

精力放在:HTML5、CSS3、JavaScript、Ajax、jQuery、bootstrap、react.js、vue.js、node.js、gulp、JavaScript多线程、模块化、兼容性、性能优化、cdn

三、后端的追求

追求:高并发、高可用、高性能、安全、存储;

精力放在:Java基础、jvm原理、spring+springmvc、Linux、MySQL、mongodb、mybatis、JDBC、多线程、性能优化

四、前后端分离

前后端分离:使开发更加高效、更加强大。为大型分布式架构、多端化服务、安全打下基础。

核心思想是:前端HTML页面通过Ajax调用后端restuful api接口并使用json数据进行交互。

互联网架构中:

Web服务器:nginx服务器,一般解析静态资源;外网访问

应用服务器:tomcat服务器,解析动态资源;内容访问

 

前后端分离的优势:

1实现真正的前后端解耦,前端服务器使用nginx。

前端服务器放css、js、图片等静态资源;前端服务器负责控制页面引用&跳转&路由,前端页面异步调用后端的接口,后端服务器使用tomcat加快整体响应速度。(需要使用node.js、react、webpack)

2发现错误,可以迅速定位是谁的问题;

页面逻辑、跳转错误、浏览器兼容问题、脚本错误、页面样式由前端服务;

接口数据出错、数据没有提交成功、应答超时的问题由后端服务。

3在大并发的情况下,可以同时水平扩展前后端服务器。

4减少后端服务器的并发/负载压力

除了接口以外的其他所有HTTP请求全部转移到前端nginx上,接口的请求调用tomcat,参考nginx反向代理tomcat。除第一次页面请求后,浏览器大量调用本地缓存。

5即使后端服务宕机,前端页面也可以正常访问,只是数据刷不出来。

6接口可以共用,有app相关的服务,可以通过代码重构,然后大量复用接口,提升效率(多端应用)

7页面显示的东西再多也不怕,因为有异步加载;

8nginx支持页面热部署,不用重启服务器,升级无缝;

9增加代码的维护性和易读性;

10提高开发效率,因为前后端并行开发,不像以前强依赖;

11在nginx中部署证书,外网使用https访问,并且只开发443和80端口,其他端口一律关闭,内网使用HTTP,性能和安全都有保障。

12前端大量的组件代码得以复用,组件化,提升开发效率。

五、前端基本功和发展

前端基本功:HTML:基础(文本、列表、表格、表单、链接)、H5

            CSS:选择器、盒子、基本(文本、列表、表格、表单、链接、定位、滚动)、C3;

            JS:事件、结构化、正则、面向对象、ES6

            概念:HTTP协议、DOM、webapi、跨域通信、安全问题(CSRF、XSS)、浏览器渲染机制、异步和单线程、页面性能优化、防抖动和节流阀、前端错误监控

            思想:计算机网络、操作系统、软件工程、数据结构;

页面时代:js库:jQuery、

          Js插件:swiper.js、iscroll.js等

          桌面UI:jQuery UI、bootstrap

          响应式UI:jQuery Mobile

组件时代:js库:react.js、vue.js(页面的生成、代码的管理和复用)

          桌面UI:element UI

          响应式UI:mintUI

前端服务器:运行环境:node.js

构建工具:gulp

模块化方案:webpack

CSS预处理器:sass

 

前端发展:

页面表现(HTML+CSS+JavaScript)、易维护(代码管理、部署流程、代码质量)、代码复用(react.js+vue.js)、安全、SEO

六、后端基本功和发展

第一阶段:数据结构和算法、Java基础、设计模式、JVM

第二阶段:SSM框架、工具(maven、git、IDEA、日志框架、Jenkins)、Java并发编程、Java网络编程、数据库

第三阶段:应用服务器、Linux、分布式系统、微服务架构、安全

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值