从浏览器输入url后引发的一系列思考

这样的问题一搜一大串，也是经常命中率比较高的一道题，要想拿高分，还需多问自己几个为什么

自问自答搜索模式开启

List1: 这个中间有哪些步骤(常见的模板答案如下）？

1. DNS域名解析
2. TCP连接
3. 发送HTTP请求
4. 服务器处理请求并返回内容
5. 浏览器解析渲染页面
6. 连接结束

List2: 时代在改变，这个模板就没增加点料（稍稍改变后的样纸）？

DNS域名解析 ==> TCP连接 ==> 浏览器发送请求 ==> web服务器反向代理 ==> 应用服务器处理请求返回内容 ==> 浏览器解析渲染页面

List3: 反向代理是什么鬼，加了干啥用的？

是什么鬼:

• 反向代理的过程，它隐藏了真实的响应服务端，客户端不知道真实的服务端是谁
• 就像我们平时拨打10086电话，一个地区的客服总有那么几十个，当我们转接人工时，你不知道这个客户是瘦的，胖的，漂亮的还是帅气的，你只知道这个客户可以解答你需要了解的问题，那么这个10086总机号码就是反向代理，我们是不知道真正为我们提供服务的人是谁（抄来的故事 -  -）

干啥用：

• 某个讨嫌的客服推荐我们买了好贵八鬼的套餐，想找他麻烦，可是你不知道他是谁现在在哪（保护客服遭受毒打，现编的故事，即保护的服务端的安全）
• 10086会为我们转接至空闲状态的客服人员，避免某个客服接电话不赢（负载均衡）

List4: 既然有反向代理，那什么又是正向代理了？

• 正向代理的过程，它隐藏了真实的请求客户端，服务端不知道真实的客户端是谁
• 最明显的案例就是我们平时访问国外站点, 然后我们就得借助翻墙的工具，通过在墙外搭建一台服务器B, 通过B去访问国外站点

List5: 那来说说浏览器解析渲染有哪几个步骤(常见模板如下）？

1. HTML解析出DOM Tree
2. CSS解析出Style Rules
3. DOM Tree与Style Rules两者合并成一个渲染树Render Tree
4. 根据渲染树来布局，以计算每个节点的几何信息
5. Painting 根据计算好的信息绘制整个页面

List6: js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？

• DOM解析和CSS解析是两个并行的进程，所以CSS加载不会阻塞DOM树的解析
• Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的

List7: 那CSS加载会阻塞JS运行吗？

由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行

List8: 为什么都提倡CSS放头部，JS放底部?

• CSS加载不会影响DOM的解析，CSS的加载解析是可以和DOM的解析同步进行的，放到尾部，要花费额外时间来解析CSS，并且浏览器会先渲染出一个没有样式的页面，等CSS加载完后会再渲染成一个有样式的页面。
• JS影响DOM树的解析与渲染，如果外部脚本加载时间很长， 就会造成网页长时间失去响应，使得页面挂起，导致白屏时间过长

List9: 头部中JS和CSS需要有先后顺序么？

• JS脚本最好放在外链CSS前面

• 因为如果脚本的内容是获取元素的样式，宽高等CSS控制的属性，浏览器是需要计算的，也就是依赖于CSS。浏览器无法感知脚本内容到底是什么，为避免样式获取错误，因而只好等前面所有的样式下载完后，再执行JS。也就是说，如果有外链css，那么js的执行时需要等待外链css下载完
• 补充： 现在的浏览器如chrome, 会进行prefetch 优化，它会在解析 HTML 时收集外链，并在后台并行下载，由于会并行下载，那么头部中外链js和css的位置其实就没有什么很大影响。

参考资料： 

1) https://www.zhihu.com/question/24723688(正反向代理）

2) https://juejin.im/post/5b88ddca6fb9a019c7717096#heading-8(CSS加载会造成阻塞吗）

3) https://juejin.im/post/5de5cd1951882573135415fd(为什么外链CSS要放在头部，JS要放在尾部)