时间: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、分布式系统、微服务架构、安全