前端发展史

ES和JS

为了让各大浏览器统一编程规范 ECMA（欧洲计算机制造联合协会）以JS语言为基础制定了ECMAScript标准规范，从此浏览器厂商都是按照这个规范来开发自己的浏览器产品。

2011年6月ES5发布，相较于ES4改动非常大。2015年ES6(ES2015)发布。2014年HTML第五代发布，2011年CSS第三代发布，前端技术栈稳固。

Web版本

Web1.0 静态网页

Web2.0 动态网页

1995年PHP诞生，1996年JSP、ASP诞生，2002年ASP.NET诞生，这些服务端页面技术实现了web页面的动态化

动态化实现

以JSP(Java Server Pages)为例，介绍Web页面动态化的具体流程

浏览器向服务器发送一个 HTTP 请求，请求一个JSP页面。

将JSP网页的请求传递给 JSP 引擎

JSP 引擎从磁盘中载入 JSP 文件，然后将它们转化为 Servlet(客户端和服务器端的信息交互和处理的中间层)。

JSP引擎将Servlet编译成可执行类，并且将原始请求传递给 Servlet 引擎。

Web 服务器的某组件将会调用 Servlet 引擎，然后载入并执行 Servlet 类。在执行过程中，Servlet 产生 HTML 格式的输出并将其内嵌于 HTTP response 中上交给 Web 服务器。

Web 服务器以静态 HTML 网页的形式将 HTTP response 返回到您的浏览器中。

Web 浏览器处理 HTTP response 中动态产生的HTML网页，就好像在处理静态网页一样。

具体代码示例

<%@ page contentType="text/html; charset=utf-8" %> 
    <%@ page language="java" pageEncoding="utf-8" %> 
    <%@ page import="com.mysql.jdbc.Driver" %> 
    <%@ page import="java.sql.*" %> 
    <% 
                        //out.print("<center><h1><font color=blue>Matrix Word Cloud English Learning</h1></center>"); 
						//驱动程序名 
						String driverName="com.mysql.jdbc.Driver"; 
						//数据库用户名 
						String userName="root"; 
						//密码 
						String userPasswd="vis2021"; 
						//数据库名 
						String dbName="forest"; 
						//表名 
						String tableName1="gross"; 
						//String tableName2="majorgoods as t2";
						String tableName = "majorgoods";
						//联结字符串 
                        
                        //String SelecetStr = "2019年";
						//String SelecetStr = "t2.指标,t2.2019年 as 进口金额";
						String SelecetStr = "指标,2019年";

						String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd+"&characterEncoding=utf-8"; 
						Class.forName("com.mysql.jdbc.Driver").newInstance(); 
						Connection connection=DriverManager.getConnection(url); 
						Statement statement = connection.createStatement(); 

						double [] amount = new double[3];
						String [] index = new String[3];
                        
						String where = "(指标='原木进口金额(百万美元)' or 指标='锯材进口金额(百万美元)' or 指标='纸浆进口金额(百万美元)')";
                        
						
						//String [] columName = {"指标","进口金额"};
                        String sql = "SELECT "+SelecetStr+" FROM "+tableName+" WHERE "+where;
						//String sql = "SELECT * FROM "+tableName;
                        ResultSet rs = statement.executeQuery(sql);

						int i = 0;

						while(rs.next()){
							index[i] = rs.getString("指标");
							amount[i] = rs.getDouble("2019年");
							i++;
						}

						rs.close();
						statement.close(); 
						connection.close(); 
%>

上述过程使用JSP连接数据库，获取数据并将数据显示在HTML网页中。使用符号<% %>包裹的部分将转化为Java代码JSP引擎处理。out.print()中的内容将会作为HTML文档的一部分显示在页面中。

除了写入页面，JSP还可以和JS数组交互，将数据写入数组。(该jsp文件位于服务器中，因此执行时能够找到JS数组，如果JS数组位于客户端中，需要将该数组放在页面的隐藏控件中)

var dataset = new Array(26); 
<% for (int i=0; i < count.length; i++){ %>
    dataset[ <%=i%> ] =  "<% =count[i] %>";
<% } %>

JSP取MySQL数据执行过程

弊端

同步非异步刷新 (请求完需要一直等待)
服务器承受压力过大 (JSP中需要服务端返回完整网页，等待网页刷新时间长)
后台开发的任务量过大 (前端开发也需要用到后端语言例如Java)

Ajax时代

基于Ajax的异步渲染 Google的Gmail和Google Map最先使用大量的Ajax技术，使得获取后台数据无需刷新整个页面。后期，跨域策略请求方案（JSONP\IFRAME\CORS\DOMAIN\POXY\SOCKET）和FETCH等通信方案不断发展
浏览器兼容问题早期IE浏览器由于市场占比大，并不遵守W3C标准，形成IE标准。后面各种浏览器发展起来，W3C规范成为主流。然而浏览器的丰富导致了各浏览器兼容问题：同样的代码，在不同的浏览器中显示的效果不一样。JQuery等前端类库相继诞生。

Web3.0

App种类

Web App

移动端的网站，将页面部署在服务器上，用户使用浏览器访问，无法安装和发布。其开发成本较低，无需手动升级，不占用内存。但是无法获取系统级别的通知，提醒，动效等。用户留存率低，设计限制较多。
Native App

原生APP，包括IOS开发和安卓开发。其中Android基于JAVA语言，底层调用Google API，IOS基于Objective C ，底层调用Apple API。Native App依托于操作系统，交互性和性能比较好。但开发成本高，无法跨平台，门槛较高。
Hybrid App

混合应用程序，将APP的一部分需要动态变动的内容通过H5来实现，通过原生的网页加载控件来加载H5页面。开发成本较低，功能更加完善，支持跨平台。但是性能依然不如原生APP。

H5崛起

随着智能手机的普及，移动浏览器也逐步加强了对HTML5特性的支持力度，Hybrid技术结合了Native 和移动Web 的优势逐渐发展起来。目前市面上95%以上的APP都是Hybrid混合APP开发的。

Hybrid的实现原理可以分为两大类：

将HTML5代码放到NativeAPP的WebView控件中；
将HTML5代码针对不同平台编译成不同的原生应用，实现web开发，Native部署。(React Native/Flutter/uni-app)

Node.js

2009年，Ryan利用Chrome的V8引擎打造了基于事件循环的异步I/O框架 Node.js。基于事件循环的异步IO框架可以提供I/O的吞吐量，同时单线程运行，能够避免多线程同步变量的问题；使得JS可以编写后端代码，前后端编程语言统一。

事件循环：

EventLoop不断循环查看CallBack栈中是否存在回调函数，如果有则执行。

参考文档

JSP教程 | 菜鸟教程

76张脑图带你彻底搞懂原生JS

移动端开发必备知识-Hybrid App

事件循环机制（Event Loop）的基本认知

JS自学笔记 | 前端发展史