从输入URL过程到页面加载过程完善前端体系结构（未完结，后续会有补充）

前几天将部分内容拿出来单独学习，今天再将内容系统地整合到一块1. 从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）这里请参考浏览器的多进程以及js异步编程

2. 开启网络线程到出发一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）这里请参考DNS查询，tcp/ip请求
3. 从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
通服务器的处理能力只能达到每秒几万个到几十万个请求，无法在一秒钟内处理上百万个甚至更多的请求。但若能将多台这样的服务器组成一个系统，并通过软件技术将所有请求平均分配给所有服务器，那么这个系统就完全拥有每秒钟处理几百万个甚至更多请求的能力。这就是负载均衡最初的基本设计思想。
基于DNS的负载均衡---- DNS负载均衡技术是最早的负载均衡解决方案，它是通过DNS服务中的随机名字解析来实现的，在DNS服务器中，可以为多个不同的地址配置同一个名字，而最终查询这个名字的客户机将在解析这个名字时得到其中的一个地址。因此，对于同一个名字，不同的客户机会得到不同的地址，它们也就访问不同地址上的Web服务器，从而达到负载均衡的目的。---- 这种技术的优点是，实现简单、实施容易、成本低、适用于大多数TCP/IP应用;但是，其缺点也非常明显，首先这种方案不是真正意义上的负载均衡，DNS服务器将Http请求平均地分配到后台的Web服务器上，而不考虑每个Web服务器当前的负载情况;如果后台的Web服务器的配置和处理能力不同，最慢的Web服务器将成为系统的瓶颈，处理能力强的服务器不能充分发挥作用;其次未考虑容错，如果后台的某台Web服务器出现故障，DNS服务器仍然会把DNS请求分配到这台故障服务器上，导致不能响应客户端。最后一点是致命的，有可能造成相当一部分客户不能享受Web服务，并且由于DNS缓存的原因，所造成的后果要持续相当长一段时间(一般DNS的刷新周期约为24小时)。所以在国外最新的建设中心Web站点方案中，已经很少采用这种方案了。折叠交换负载.基于四层交换技术的负载均衡---- 这种技术是在第四层交换机上设置Web服务的虚拟IP地址，这个虚拟IP地址是DNS服务器中解析到的Web服务器的IP地址，对客户端是可见的。当客户访问此Web应用时，客户端的Http请求会先被第四层交换机接收到，它将基于第四层交换技术实时检测后台Web服务器的负载，根据设定的算法进行快速交换。常见的算法有轮询、加权、最少连接、随机和响应时间等。折叠七层负载基于七层交换技术的负载均衡---- 基于第七层交换的负载均衡技术主要用于实现Web应用的负载平衡和服务质量保证。它与第四层交换机比较起来有许多优势:第七层交换机不仅能检查TCP/IP数据包的TCP和UDP端口号，从而转发给后台的某台服务器来处理，而且能从会话层以上来分析Http请求的URL，根据URL的不同将不同的Http请求交给不同的服务器来处理(可以具体到某一类文件，直至某一个文件)，甚至同一个URL请求可以让多个服务器来响应以分担负载(当客户访问某一个URL，发起Http请求时，它实际上要与服务器建立多个会话连接，得到多个对象，例如.txt/.gif/.jpg文档，当这些对象都下载到本地后，才组成一个完整的页面)。---- 以上几种负载均衡技术主要应用于一个站点内的服务器群，但是由于一个站点接入Internet的带宽是有限的，因此可以把负载均衡技术开始应用于不同的网络站点之间，这就是站点镜像技术，站点镜像技术实际上利用了DNS负载均衡技术。
后台的处理一般后台都是部署到容器中的，所以一般会先是容器接受到请求（如tomcat容器）， 然后对应容器中的后台程序接收到请求（如java程序）， 然后就是后台会有自己的统一处理，处理完后响应响应结果概括下： 一般有的后端是有统一的验证的，如安全拦截，跨域验证， 如果这一步不符合规则，就直接返回了相应的http报文（如拒绝请求等）， 然后当验证通过后，才会进入实际的后台代码， 此时是程序接收到请求，然后执行（譬如查询数据库，大量计算等等）， 等程序执行完毕后，就会返回一个http响应包（一般这一步也会经过多层封装）， 然后就是将这个包从后端发送到前端，完成交互
这部分内容我也只是大致学习了一下，有兴趣的同学可以深入了解哦
4. 后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
这里请参考HTTP协议以及cookie
5. 单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）
这里请参考浏览器的缓存机制
6. 浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）
这里请参考浏览器渲染
7. CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）这里大致了解下BFC:
一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。绝对定位 (absolute positioning)
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定二、BFC 概念Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。那么 BFC 是什么呢？BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。三、触发 BFC只要元素满足下面任一条件即可触发 BFC 特性：body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
四、BFC 特性及应用1. 同一个 BFC 下外边距会发生折叠如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。2. BFC 可以包含浮动的元素（清除浮动）<div style="border: 1px solid #000;overflow: hidden"> <div style="width: 100px;height: 100px;background: #eee;float: left;"></div></div>3. BFC 可以阻止元素被浮动元素覆盖<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div><div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，
这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)。
8. JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
这里部分内容请参考作用域以及作用域链以及垃圾回收机制9.其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）
（大体结构参考：https://www.tuicool.com/articles/eMNBnme，自己将部分重要内容拿出来单独学习，如有错误，欢迎指正~~）