web前端开发及web标准学习 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第4天
1.前端开发的发展流程及应用领域
1.1发展流程
通过HTML、CSS、Javascript展示的静态页面进行开发，可以展示与跳转，供用户阅读；
通过jquery等框架的引入实现动态交互；
后来一些Vue、React等框架的出现，使得前端开发变得更加规范，功能也更加强大。
1.2应用领域
面向企业级的应用，便于企业的组织与发展；
面向大众的应用，适应于不同的平台：pc端、移动端等等；
面向开发者的应用：协作平台、开源网站及工具等。
2.web标准
是由W3C组织和其他标准化组织制定的一系列标准的集合，规范、语言、开发工具、字符集、语法等都有一个标准，使得不同平台不同浏览器的展示内容可以兼容，提高开发的速度以及用户体验。
3.学习路线
4.两大小山
4.1.浏览器是如何渲染页面的
- 解析HTML，将标签作为一个节点构建DOM树
- 解析CSS并计算样式，构建 CSSOM 树
- 将DOM 树与CSSOM 树结合，构建出渲染树/ Render 树
- 根据渲染树计算出每一个节点在页面中的位置，将结果渲染到页面上
4.2.浏览器输入url到页面展示经历了怎样的过程展示
概述：DNS解析、TCP三次握手、HTTP请求、服务端处理请求并返回响应、浏览器渲染
细节：
- DNS解析：对浏览器输入的URL解析，将域名和IP地址相互映射。首先查看浏览器缓存、系统缓存、路由器缓存，如果缓存中存在就展示，没有就继续下一步
- TCP三次握手：这一步目的是将浏览器与服务器建立连接
- 浏览器发送HTTP请求：握手成功后向服务器发送HTTP请求，请求数据包
- 服务端处理请求并返回响应：服务的处理请求，并将结果返回给浏览器
- 浏览器渲染：浏览器收到请求响应后关闭HTTP连接；开始解析构造DOM树进行渲染；如果还有资源等未收到就继续请求；请求完成后就展示到页面中；
- 最后如果不是长连接就四次挥手关闭连接
- TCP三次握手、HTTP请求、服务端处理请求并返回响应、浏览器渲染
