前端三件套系列漫谈（1）--前端变迁和浏览器-优快云博客

谈及最朴素意义的前端，是浏览器呈现的页面。它是针对浏览器的开发，在浏览器进行。HTML描述了框架、CSS美化了页面样式、JavaScript从交互角度描述了页面行为，浏览器将这三个小伙伴的内容解析并渲染，呈现在了用户面前。这个系列文章将结合浏览器浅谈HTML、CSS、JavaScript这三件套的基础内容（作为近期的学习总结(✿◡‿◡)…

从变迁史讲起

最开始接触前端项目是React项目, 其中的JSX语法、函数组件还有一系列的脚手架让仅有静态页面和jQuery概念的我感到很繁琐，不禁疑惑，这些框架和工程化的东西是怎么形成和推广应用的？
如果你也有相同的疑惑，不如一起了解一下前端开发变迁史
参考：https://zhuanlan.zhihu.com/p/68030183
总结一下大致的发展过程：

90年，第一个Web浏览器诞生，91年WWW（万维网）诞生。浏览器的出现，提供了访问信息的窗口；WWW的出现则提供了管理信息的系统。这个时期用的是纯静态页面
93年，CGI(Common Gateway Interface)的出现，人们可以在后端动态生成页面。但这时的问题在于每次都要刷新整个页面
94年，PHP诞生，PHP能将动态的内容嵌入到HTML中（通过替换变量）；W3C小组成立，负责HTML的发展路径
95年，JavaScript诞生，它提升了“函数”的地位，使用“原型”（Prototype)的继承机制
94-05年：浏览器之争
05-09年：Prototype基础类库
05年：Ajax->前端不再是后端的模板，可以独立得到各种数据
09-12年：jQuery时期以DOM为核心，开发者可以选择一个或多个DOM, 变成jQuery对象，然后进行链式操作；页面交互越来越复杂->web page向web app变化，新的趋势带来了新的开发方式
12-16年：工具链的出现，用于解决工程应用中性能、全局污染、大段HTML等一系列问题
16~：三大框架、移动端的发展、小程序的出现

可以看出，随着交互内容的不断丰富和互联网的发展，考虑到开发效率和质量，前端开发不断地工程化，对于复杂的系统遵循某些的开发规则进行规范化的架构，并在实践中不断优化和改进。虽然有些框架的提出乍一看很抽象还连带着引入一系列工具，在实际发中增加了一些学习成本，不过底层承载的HTML、CSS、JavaScript的运用以及浏览器解析和渲染的逻辑还是没有大变动的。

浏览器和网站访问过程

在正式谈及html等之前，先聊聊密切相关的浏览器
浏览器分为两部分：渲染引擎（浏览器内核）+ JavaScript引擎
渲染引擎：读取网页内容，计算网页的显示方式并显示在页面上
JS引擎：解析和执行网页中的JavaScript代码

网站访问过程

基本过程：

浏览器向服务器发送HTTP请求
服务器从数据库查询数据
数据库返回数据
服务器返回http响应
- 状态码表示请求的内容有没有
- content-type表示发过来的内容是什么
浏览器拿到浏览器拿到HTML内容（body里面的内容）进行解析
- HTML5提供一个标准规定标签
- 表示内容和语义的HTML，表示样式的CSS，添加动态效果的JS

具体过程:

用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求
服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面
服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；
解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变