简介
前端三大件：由W3C（World Wide Web Consortium，万维网联盟）定义和维护
- HTML（Hyper Text Markup Language，超文本标记语言），定义网页结构和内容
- CSS（Cascading Style Sheets，层叠样式表），定义网页布局和样式
- JS（Java Script）：是一种脚本语言，用于控制网页行为
ECMAScript（ES）是标准，JavaScript是实现和扩展。由Ecma International（European Computer Manufacturers Association）定义。
三大件有具体的规范和协议，框架最终还是要转换成HTML、JS、CSS才能被浏览器识别，不过现在有些前端是直接入门Vue、React。
三大主流框架：Vue、React、AngularJS。
HTML、CSS、JS和不同组织（W3C、ECMA），以及浏览器公司等关系比较复杂，有兴趣的可以看看历史。
前端架构发展历程
介绍前端架构发展的大致历程，能够更好的理解网页运行原理。
纯静态页面
开发和部署：直接写HTML、CSS、JS发布。
运行：浏览器直接请求静态资源，解析和执行JS，没有后端。
缺点：
- 页面固定，交互能力弱
- html难以复用，当然也可以通过JS操作DOM
动态页面
开放和部署：传统的后端MVC模式，使用JSP、PHP、ASP等动态网页语言。前端负责写UI模版，后端往模版填充数据和逻辑。后端开发完之后统一打包部署。
运行：后端收到浏览器请求，处理数据，实时生成静态页面返回，根据url地址和参数返回不同页面。
缺点：
- 前后端不分离，开发和调试不便，前端和后端需要互相等待各自工作完成。
- 此时后端承接了大部分前端的工作。而前端大部分工作都是使用PS切图导出html元素，因此也被叫做”切图仔“。
- 需要返回整个静态页面，大部分情况下页面布局不变，只有内容是在变化的。
前后端分离
前端和后端单独开发、分开部署（前端服务、后端服务）。
运行：浏览器执行JS，在运行时动态请求数据，局部刷新页面。
前后端分离是经过好几个阶段的：
- 单页应用（SPA，Single Page Application）：Ajax的诞生，可以动态请求数据，局部刷新页面，初始返回不带数据的网页，浏览器执行JS脚本，使用Ajax请求数据，局部动态刷新页面。
- 前端模块化：NodeJS出现，可以本地执行JS脚本，不需要浏览器执行。NPM包管理，实现模块依赖和复用
- 前端工程化：webpack，工程化管理项目，提供编译打包、压缩、优化、部署等功能
- 前端MV*架构：Vue、React、Angular等，通过虚拟DOM渲染。
- 服务端渲染（SSR，Server-Side Rendering）：把一部分网络请求放到前端的服务端（浏览器<->前端服务<->后端服务），返回带数据的页面给浏览器，目的是优化首屏体验。后续页面更新通过浏览器请求后端数据
此时前端崛起，涌现出大量技术和框架，给自己加了很多活，卷出新高度。