前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从输入一个URL到页面完全显示发生了什么?

从输入一个URL到页面完全显示发生了什么?

作者头像
用户1149564
发布2018-07-31 16:35:13
4190
发布2018-07-31 16:35:13
举报
文章被收录于专栏:Micro_awake webMicro_awake web

这是经典的前端问题,主要是对浏览器的工作原理有个理解!


网络通信走的一般是五层因特网协议,详见下图。图片来自于https://images2018.cnblogs.com/blog/882926/201711/882926-20171127181032128-471806615.png

clipboard.png
clipboard.png

大致步骤如下:

1.域名解析

浏览器查找域名的IP地址,这一步包括DNS的具体查找过程,DNS属于应用层协议。客户端会检查本地是否有对应的IP地址,若存在则返回,否则请求上级DNS服务器,一直到找到为止或者最终到根节点。 显然这一过程可能非常耗时,所以很多网站都会采用dns-prefetch,使浏览器在空闲时间就将这些域名转化为ip地址,这样就能有效减少时间。以淘宝网为例:

clipboard.png
clipboard.png

其实DNS的查找过程包括:浏览器缓存-》系统缓存-》路由器缓存...

2.TCP三次握手,客户端向服务器发送http请求

服务器可能会有永久服务器重定向相应,客户端随之继续追踪重定向地址。

3.服务器返回一个http响应

clipboard.png
clipboard.png

4.客户端得到html代码

clipboard.png
clipboard.png

5.客户端解析HTML代码,并请求html代码中的资源(图片,音频,css,js等)

clipboard.png
clipboard.png

6.浏览器对页面进行渲染,展现给用户

主要是解析html构成dom树,解析css构成render树,dom树和render树结合进行布局和绘制!


参考链接:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.域名解析
  • 2.TCP三次握手,客户端向服务器发送http请求
  • 3.服务器返回一个http响应
  • 4.客户端得到html代码
  • 5.客户端解析HTML代码,并请求html代码中的资源(图片,音频,css,js等)
  • 6.浏览器对页面进行渲染,展现给用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档