当我们输入URI，按下回车发生了什么？

发表于   |   分类于 ，   |  

       当我们输入URL，按下回车发生了什么？ 这个题目很俗套- -但是貌似想不到其他更好的题目了。今天看完阿里大神一篇关于介绍从URI到浏览器呈现给我们页面发生了什么的视频。感觉收获颇多。索性就翻阅了一些其他资料。在此总结下。这一晚上也算是没白白浪费。

当我们输入URL，发生了什么？

用一个例子来说明把。当我们打开http://liruihaod.github.io这个网页的时候发生了什么？

通过URI定位到主机。

当我们在浏览器输入url后，浏览器通过DNS服务器，将网站中的URl中的主机域名解析为，web服务器中所对应的IP地址。
顺序差不多是：

  • 先在浏览器缓存中查询，如果浏览器缓存中有就直接使用。
  • 浏览器缓存中找不到 在系统缓存中查询。
  • 系统缓存中没有在路由器缓存中查询。
  • 路由器找不到在web服务器中查询，直到找到这个IP地址。

打包HTTP请求

好了,经过一番查询，我们找到了我博客的IP地址：103.245.222.133:80
后面的80是默认端口,这是我们打包的HTTP请求：
打包http请求

通过TCP协议，向服务器发送请求

通过TCP协议与Web服务器创建连接。(俗称三次握手)，想服务器发送请求

web服务器接收请求，交给相关进程处理，

这里要根据后台语言不同而分情况处理，我这个是HTML类型文件。web服务器接收接收请求后 找到服务器上相对应的html文件(一般是index.html)

  • 如果后台语言是PHP类型，则web服务器在接收到用户的请求后将请求转交给PHP应用服务器来处理，（web服务器本身不能处理PHP动态语言文件）

    服务器响应请求，通过TCP协议回传响应

    这里因为博客就是一个静态HTML。就直接找到HTML文件就会通过TCP协议回传了。如果是php文件。则还需要PHP应用服务器将PHP文件，翻译成HTML静态代码，传回Web服务器，然后再通过TCP协议回传响应。
    这是回传的响应head截图
    响应的头部

浏览器接收响应，开始下载并渲染，将页面呈现在我们面前

1
2
3
4
5
6
1.解析HTML生成DOM树，
2.解析CSS文件生成CSSOM树，并解析Javascript代码
3.CSS和DOM组合形成渲染树，
4.进行布局，在浏览器中绘制渲染树中节点的属性(位置，宽度，大小等)
5.绘制元素，绘制各个节点的可视属性(颜色背景等，此时可能会形成多个图层)
6、合并图层，将页面呈现给用户面前

额外提一点

在服务器接收响应请求的时候，会因为一些不同的因素呈现出不同的页面主要是：

影响服务器结果的因素

  • 请求方式（例：get、post当然请求方式不知这两种。）的不同
  • 路径的不同：（url不同服务器结果当然不同！！）
  • query string 传参的不同
  • cookie ————用于用户身份识别的
  • 服务器自生的配置
  • 后台语言的逻辑（java和php）

状态码

状态码常见的大致可分为以下几种：

  • 200 （正常OK）
  • 304 （请求的网页与上次比没有更新）刷新的时候出现
  • 301 （重定向）换域名
  • 403 （配置服务器没权限）
  • 404 （没找到文件（找到了服务器））
  • 502 （没找到服务器）

关于浏览器渲染页面的一些细节

JS加载阻塞的原因

JS加载阻塞主要是因为浏览器需要一个稳定的DOM树，而JS本质就是操作DOM元素，就很有可能改变DOM树的机构，为了防止出现修改DOM树的情况后重铸DOM树的情况，先等JS下载并解析完之后 再渲染DOM树

CSS与JS一般情况下的放置位置

一般来说css放置在Head，JS放置在底部
主要原因有：

  • 上面提过到JS的加载阻塞
  • 因为HTML的下载和解析是从上到下的顺序解析的，如果CSS不都放在HEAD里面，有的放前面后的放后面就会造成 放在前面的CSS元素渲染一次之后，后面如果出现重复（这里涉及到一个优先级，假设优先级一致）后面的CSS样式也会重新覆盖前面的样式，再讲前元素再渲染一边(包括已经渲染过的) 就会造成重复渲染。而全放在HEAD里面 CSS文件会先合并，只会形成CSSDOM，进行渲染。
    从性能和用户体验来看 一般CSS放置在HEAD，JS放置在底部

参考：重温DOM渲染树
CSS规则树和HTML的DOM树