从键盘输入URL到网页呈现发生了什么
日期: 2018-08-31 分类: 个人收藏 324次阅读
1、在浏览器中输入url
2、浏览器查找域名的 IP 地址
现在我们已经输入了相应的 URL,但浏览器本身并不能识别 URL 是什么,因此从我们输入 URL 开始,浏览器就要进行域名解析来找到对应 IP——DNS 解析是浏览器的实际寻址方式:
(a) 查找浏览器缓存——近期浏览过的网站,浏览器会缓存 DNS 记录一段时间 (如果没有则往下) ;
(b) 查找系统缓存——从 C 盘的 hosts 文件查找是否有存储的 DNS 信息,查找是否有目标域名和对应的 IP 地址 (如果没有则往下);
(c) 查找路由器缓存 (如果没有则往下);
(d) 查找 ISP DNS 缓存——从网络服务商(比如电信)的 DNS 缓存信息中查找(如果没有则往下);
(e) 经由以上方式都没找到对应 IP 的话,就会向根域名服务器查找目标 URL 对应的 IP,根域名服务器会向下级服务器转达请求,层层下发,直到找到对应的 IP 为止。
3、客户端向web服务器发送http请求
TCP/IPsanci
4、服务器处理收到的请求,将数据返回至浏览器
5、浏览器显示HTML
在上边的第4步中,服务器返回了 html 字符串给浏览器,此时,浏览器将会对其进行加载、解析、渲染并最终绘制网页:
(1) 加载:
· 浏览器对一个 html 页面的加载顺序是从上而下的;
· 浏览器在加载的过程中,同时进行解析、渲染处理;
· 在这个过程中,遇到 link 标签、image 标签、script 标签时,浏览器会再次向服务器发送请求以获取相应的 css 文件、图片资源、js 文件,并执行js代码,同步进行加载、解析。
(2) 解析、渲染:
· 解析的过程,其实就是生成 dom 树(Document Object Model 文档对象模型);
· dom 树是由 dom 元素及属性节点组成,并且加上 css 解析的样式对象和 js解析后的动作实现;
· 渲染:就是将 dom 树进行可视化表示。
(3) 绘制网页:
· 浏览器通过渲染,将 dom 树可视化,得到渲染树;
· 构建渲染树使页面以正确的顺序绘制出来,浏览器遵循一定的渲染规则,实现网站页面的绘制,并最终完成页面的展示。
除特别声明,本站所有文章均为原创,如需转载请以超级链接形式注明出处:SmartCat's Blog
精华推荐