谈及最朴素意义的前端，是浏览器呈现的页面。它是针对浏览器的开发，在浏览器进行。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写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变
3014
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
