网页解析的全过程

   1、用户输入网址,浏览器发起DNS查询请求

用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址

域名解析服务器是基于UDP实协议实现的一个应用程序,通常通过监听53端口来获取客户端的域名解析请求。DNS查找过过程如下:

浏览器缓存-浏览器会缓存DNS记录一段时间。有趣的是操作系统没有告诉浏览器存储DNS记录的时间,这样不同浏览器会记录他们各自固定的一个时间(2分钟到30分钟不等)

系统缓存-如果在浏览器缓存中没有找到需要的记录,浏览器会做一个系统调用(gethostbyname)。这样便可获得系统缓存中的记录。

路由器缓存-接着前面的查询请求发向路由器,他一般会有自己的DNS缓存

ISP DNs缓存-接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

递归搜索-你的ISP的DNS服务器从域名服务器开始进行递归搜索,从com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。

   2、建立TCP连接

浏览器通过DNS获取到web服务器真的IP地址后,便向服务器发起TCP连接请求,通过tcp的三次握手建立好连接后,浏览器便可以将http请求数据通过发送给服务器了。

   3、浏览器向web服务器发送一个http请求

http请求时基于tcp协议之上的应用层协议--超文本传输协议。一个http事务由一条(从客户端发往服务器的)请求命令和一个(从服务器发回客户端的)响应结果组成。

GET http://www.cricode.com/ HTTP/1.1

Host: www.cricode.com

Connection: keep-alive

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

Accept-Encoding: gzip,deflate,sdch

Accept-Language: zh-CN,zh;q=0.8

   4、发送响应数据给客户端

web服务器通过监听80端口,来获取客户端的http请求。与客户端建立好TCP连接后,web服务器开始接受客户端发来的数据,并通过http解码,从接收到的网络数据中解析出请求的url信息以前其他诸如Accept-Encoding、Accept-Language等信息。Web服务器根据http请求头的信息,得到响应数据返回给客户端。一个典型的http响应头数据报如下:

HTTP/1.1 200 OK

Date: Fri, 24 Oct 2014 13:55:18 GMT

Server: Apache

X-Powered-By: PHP/5.4.32

Keep-Alive: timeout=5, max=10000

Connection: Keep-Alive

Transfer-Encoding: chunked

Content-Type: text/html; charset=UTF-8

a0f6

<</span>!DOCTYPE HTML>

<</span>html>

<</span>head>

<</span>meta charset="UTF-8">

<</span>meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">

<</span>meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<</span>title><</span>/title>

<</span>body class="home"><</span>/body>

<</span>/html>

至此,一个http通信过程完成。web服务器会根据http请求头中的Connection字段值决定是否关闭TCP链接通道,当Connection字段值为keep-alive时,web服务器不会立即关闭此链接。

   5、浏览器解析http response

(1)html文档解析(DOM Tree)

在浏览器没有完整的接收全部HTML文档时,它就已经开始显示这个页面了。生成解析树解析即dom树,是由dom元素及属性节点组成,树的根是docunment对象。

(2)浏览器发送获取嵌入在html中的对象

加载过程中遇到外部css文件,浏览器另外发出一个请求,来获取css文件。遇到图片资源,浏览器也会另发出一个请求,来获取图片资源。这是异步请求,并不会影响html文档进行加载。

但是当文档加载过程中遇到js文件,html文档会挂起渲染的线程,不仅要等待文档中的js文件加载完毕,还要等待解析执行完毕,才能恢复html文档的渲染线程。

(3)css解析

浏览器下载css文件,将css文件解析为样式表对象,并来用渲染dom tree。该对象包含css规则,该规则包含选择器和声明对象。

css元素遍历的顺序,是从树的低端向上遍历。

(4)js解析

浏览器UI线程:单线程,大多数浏览器让一个单线程共用于执行JavaScript和更新用户界面

js阻塞页面:浏览器里的http请求被阻塞一般都是由js所引起,具体原因是js文件在下载完毕之后会立即执行,而js执行时候会阻塞浏览器的其他行为,有一段时间是没好网络请求被处理的,这段空闲时间就是所谓的http请求被阻塞。

js被阻塞的原因:之所以会阻塞U线程的执行,是因为js能控制UI的展示,而页面加载的规则是要顺序执行,所以在碰到js代码时候UI线程会首先执行他。

一个完整的URL 解析过程相关推荐

  1. URL解析过程和浏览器渲染机制【面试必问、深入解析 下一次再也不怕面试官问这个问题】

    步骤拆分 网络-请求和响应 缓存 DNS解析 建立TCP连接(三次握手和四次挥手) 服务端验证请求 响应文件类型(Content-Type) 浏览器-解析与渲染 浏览器进程和线程 构建Dom树 lay ...

  2. 一个完整的网络访问过程的分析(从计算机网络的角度)

    首先,我们要明确上网需要的四个参数(本机),分别是: 1.本机的ip地址 2.子网掩码 3.网关的ip地址 4.DNS的ip地址 这里,我以自己的电脑为例(我的电脑用的是配置ip,当然大多数用的都是动 ...

  3. 一个完整的URL地址包含什么

    假设这是一个url地址http://localhost:8080/a/b/c?a=1&b=2#abc,里面包含的部分: protocol: 'http:',//协议 host: 'localh ...

  4. 一个完整的gdb调试过程以及一些常用的命令

    1. 启动调试 <span style="color:#000000"><code>gcc -g test.c // 编译文件,生成可执行程序,并且给文件加 ...

  5. 一个完整的HTTP请求的详细过程

    整个流程 1.DNS解析 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址; 2.客户端连接到Web服务器 根据解析出 IP 地址与Web服务器的HTTP端口(默认为80)建立 ...

  6. 常用默认端口+URL解析+HTTP详解

    常用默认端口 http端口80 https端口443 tomcat端口8080 URL详解 http://www.aspxfans.com:8080/news/index.asp?boardID=5& ...

  7. 机器学习入门系列(2)--如何构建一个完整的机器学习项目(一)

    上一篇机器学习入门系列(1)–机器学习概览简单介绍了机器学习的一些基本概念,包括定义.优缺点.机器学习任务的划分等等. 接下来计划通过几篇文章来介绍下,一个完整的机器学习项目的实现步骤会分为几步,最后 ...

  8. Django模板语言-1:一个完整的数据获取例子

    一.Django表单(form)请求: 打开的时候默认是GET请求,获取form表单的内容. 点提交的时候是POST请求,提交form表单的内容. 根据以上区别来编写获取表单内容: from djan ...

  9. 一个完整的交互设计步骤有哪些

    本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 一个完整的交互设计步骤有哪些?很多朋友在问交互设计过程中的步骤有哪些?一般而言,交互设计师都遵循类似的步骤进行设计, ...

最新文章

  1. 【JVM】Java变量的种类(提高版)
  2. 产品经理其实是一种能力,而非职业
  3. TikTok推出招聘服务、 沃尔玛收购虚ekit、开源圆桌、AI新创Poised|拟试穿公司ZeDecode the Week...
  4. pdf.js浏览中文pdf乱码的问题解决
  5. python cx_oracle配置_python连接oracle的模块cx_Oracle安装和配置
  6. 商汤发布L4级接驳小巴和智能路侧感知解决方案,加速V2X产业创新
  7. JS缺失错误- Uncaught SyntaxError: Unexpected token
  8. 然后再带动更多的C++人逼起来
  9. ActiveMQ(4) ActiveMQ JDBC 持久化 Mysql 数据库
  10. Python得到字符的阿斯克码值 chr ord
  11. Firebug工具的介绍与安装
  12. Python基础学习资料视频下载链接
  13. python学期总结
  14. 基于 smart-config技术实现
  15. vs2015官方下载链接
  16. android 圆形头像方案,android圆形头像实现
  17. r5 7600x和r7 7700x差距
  18. python 生成词云
  19. 【BP靶场portswigger-服务端5】业务逻辑漏洞-11个实验(全)
  20. android 有关毫秒转时间的方法,及时间间隔等

热门文章

  1. cocos2d 解密ccbi_cocosBuilder使用总结
  2. 2023年团体程序设计天梯赛(含部分题解)
  3. 仅作笔记用:Windows 11 通过 VBS 打开 IE 浏览器
  4. iOS 获取手机的型号,系统版本,软件名称,软件版本
  5. LTC4056/TP4056国产替代DP4056锂电池充电保护芯片
  6. MFC使用TransparentBlt透明贴图
  7. 梦见在上计算机课,梦见在教室上英语课是什么意思
  8. 技术分享|优炫数据库基于WAL日志备份及恢复
  9. 微信小程序之滚动日期选择器
  10. Redis详解(一)冰叔带你了解Redis