【计算机网络基础——系列3】输入url后页面会遇到的问题

系列文章总结

【计算机网络基础——系列1】-matlab与python使用socket udp进行进程间通信
【计算机网络基础——系列2】-matlab与python使用socket tcp进行进程间通信
【计算机网络基础——系列3】输入url后页面会遇到的问题
【计算机网络基础——系列4】关于HTTP请求的相关内容
【计算机网络基础——系列5】前端遇到的三种网络攻击
【计算机网络基础——系列6】浏览器缓存之cookie、session、localstorage
【计算机网络基础——系列7】浏览器缓存之—http缓存
【计算机网络基础——系列8】前端优化总结
【计算机网络基础——系列9】restful规范；dns劫持
【计算机网络基础——系列10】osi网络结构；tcp协议保持传输的可靠性；SSL
【计算机网络基础——系列11】实现python作为服务端与qt进行udp通信

---

---

前言

从输入url网址到域名解析一直再到页面渲染成功涉及到的知识过于庞大，本文不做详细介绍，只讲一些小编在这个过程中遇到的问题

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、输入url后的各部分的反应

• 1、输入网址：
如：www.4399.com
• 2、DNS解析：
将你输入的网址解析为计算机能够识别的ip地址

• 3、浏览器会与服务器建立tcp连接：
这里会涉及到tcp的三次握手四次挥手，建立起可靠的连接
• 4、客户端发送HTPP请求：
http请求中包括请求行、请求头、请求体

• 5、服务器处理请求
服务器对tcp连接进行处理，对http协议进行解析，按照报文格式封装成http request对象供上层使用。
• 6、服务器响应请求
http响应也是和http请求一样，都是由请求行、请求头、请求体构成。
• 7、浏览器展示HTML

二、浏览器接收到http响应后渲染页面

1. DOM构造

通过html解析器解析构建为一颗DOM树。

2. CSSOM树

接着将接收到的css代码（如果有的话），通过css解析器构建出样式表规则将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。

3. 布局计算

渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

4. 渲染

布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

---

总的来说是从html-css-js，这也就有了另外一个问题：css文件引用为什么要放在body头部，而js文件则是放在尾部

三、css文件要放在body头部，而js文件则是放在尾部

前面讲到了，页面的渲染是从DOM树的构建再到CSS将DOM树进行装饰使其变为一颗有属性的DOM树。

1.css的角度

外联的css放在何处都不会影响html的解析，但是会影响html的渲染，就比如说如果css放在尾部的话，html会立即显示出来，但因为css在尾部，这就会导致显示出来的html没有装饰，只是一颗没有叶子的树干。

2.js的角度

因为js是单线程的，这也就意味着在没有异步的情况下，如果将js放在头部的话就会导致html的解析会被阻断，如果js的加载时间过长就会导致网页失去响应，浏览器就会出现“假死现象”，这就是“阻塞效应”。

3.css放置的位置造成的不同结果

css放在body标签尾部时：
DOM树构建完成之后便开始构建Render树, 并计算布局渲染网页, 等加载解析完css之后, 开始构建CSSOM树, 并和DOM树重新构建Render树, 重新计算布局渲染网页
css放在head标签中时：
先构建CSSOM树, 于此同时构建DOM树, CSSOM树和DOM树都构建完毕之后开始构建Render树, 计算布局渲染网页

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~