从输入url到页面加载的过程
用户端请求步骤:DNS解析URL地址、生成HTTP请求报文、构建TCP连接、使用IP协议选择传输路线、数据链路层保证数据的可靠传输、物理层将数据转换成电子、光学或微波信号进行传输

网络传输: 从客户机到服务器需要通过许多网络设备, 一般地,包括集线器、交换器、路由器等

服务器处理及反向传输:
服务器接收到这个比特流,把比特流转换成帧格式,上传到数据链路层,服务器发现数据帧中的目的MAC地址与本网卡的MAC地址相同,服务器拆除数据链路层的封装后,把数据包上传到网络层。服务器的网络层比较数据包中的目的IP地址,发现与本机的IP地址相同,服务器拆除网络层的封装后,把数据分段上传到传输层。传输层对数据分段进行确认、排序、重组,确保数据传输的可靠性。数据最后被传到服务器的应用层
HTTP服务器,如nginx通过反向代理,将其定位到服务器实际的端口位置,如8080。比如,8080端口对应的是一个NodeJS服务,生成响应报文,报文主体内容是google首页的HTML页面
接着,通过传输层、网络层、数据链路层的层层封装,最终将响应报文封装成二进制比特流,并转换成其他信号,如电信号到网络中传输
反向传输的过程与正向传输的过程类似,就不再赘述
浏览器渲染:
客户机接受到二进制比特流之后,把比特流转换成帧格式,上传到数据链路层,客户机发现数据帧中的目的MAC地址与本网卡的MAC地址相同,拆除数据链路层的封装后,把数据包上传到网络层。网络层比较数据包中的目的IP地址,发现与本机的IP地址相同,拆除网络层的封装后,把数据分段上传到传输层。传输层对数据分段进行确认、排序、重组,确保数据传输的可靠性。数据最后被传到应用层
1、如果HTTP响应报文是301或302重定向,则浏览器会相应头中的location再次发送请求
2、浏览器处理HTTP响应报文中的主体内容,首先使用loader模块加载相应的资源
loader模块有两条资源加载路径:主资源加载路径和派生资源加载路径。主资源即google主页的index.html文件 ,派生资源即index.html文件中用到的资源
主资源到达后,浏览器的Parser模块解析主资源的内容,生成派生资源对应的DOM结构,然后根据需求触发派生资源的加载流程。比如,在解析过程中,如果遇到img的起始标签,会创建相应的image元素HTMLImageElement,接着依据img标签的内容设置HTMLImageElement的属性。在设置src属性时,会触发图片资源加载,发起加载资源请求
这里常见的优化点是对派生资源使用缓存
从输入url到页面加载的过程的更多相关文章
- 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- 经典面试题: 从输入URL到页面加载的过程发生了什么?
可以分为这几个大的过程: DNS解析 TCP连接 客户端发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 结束 其中(1)DNS解析可以理解为主寻找这个IP地址的过程,其中如果找 ...
- 从输入URL到页面加载的过程?由一道题完善自己的前端知识体系!
出处:http://mp.weixin.qq.com/s/qMsf4DcMhn2cf0fXC-PLVA 强缓存与弱缓存 缓存可以简单的划分成两种类型: 强缓存( 200fromcache)与 协商缓存 ...
- http --- 从输入URL到页面加载的过程发生了什么?
可以分为这几个大的过程: DNS解析 TCP连接 客户端发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 结束 其中(1)DNS解析可以理解为主寻找这个IP地址的过程,其中如果找 ...
- 从输入URL到页面加载发生了什么
大体过程 浏览器的地址栏输入URL并按下回车 浏览器检查当前URL是否存在缓存,并比较缓存是否过期 DNS解析URL对应的IP 根据IP建立TCP连接(三次握手) HTTP发起请求 服务器处理请求,浏 ...
- 从输入URL到页面加载到底发生了什么
很多初学网络或者前端的初学者大多会有这样一个疑问:从输入URL到页面加载完成到底发生了什么?总的来说,这个过程分为下面几个步骤:1.DNS解析2.与服务器建立连接3.服务器处理并返回http报文4.浏 ...
- 从输入 URL 到页面加载完成的过程中都发生了什么事情?
这个问题是老生常谈的问题啦,虽然说到处百度都有的答案,还是希望自己能总结一下. 如今有很多答案,都是从硬件开始讲起,比如键盘的响应或者触屏的响应,然后CPU处理到OS的内核等等.这里不作为重点来讲,要 ...
- 从输入 URL 到页面加载完成的过程中都发生了什么
从输入 URL 到页面加载完成的过程中都发生了什么 过程描述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理 ...
- 一个页面从输入url到页面加载显示完成,中间都经历了什么
第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...
随机推荐
- pyplot基本绘制
pyplot实现的功能与Matlab中的绘制方式很相似. 先看一个绘制折线的例子: import matplotlib.pyplot as plt plt.plot([1, 17, 8, 9]) pl ...
- angularjs中directive声明scope对象的用法
总的来说用法 分三种: >1: scope: false --> 继承父域,实现 双向数据绑定 示例代码 可自测: <!DOCTYPE html> <html lang ...
- hadoop27---netty中handler的执行顺序
Netty是基于Java NIO的网络应用框架. Netty是一个NIO client-server(客户端服务器)框架,使用Netty可以快速开发网络应用,例如服务器和客户端协议.Netty提供了一 ...
- @RequestBody和@ResponseBody的使用情形以及RestTemplate的http报文转换
@RequestBody和@ResponseBody两个注解,分别完成请求报文到对象和对象到响应报文的转换. @RequestBody 1.@requestBody注解常用来处理content-typ ...
- Dispose 与 close 方法 的区别
Dispose : 释放 托管 与 非托管资源. Finalize : 释放 非托管资源. Close: 关闭资源后,可以再次使用资源.
- CSS 3 中的多列属性
.column-count <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- java类执行顺序
1. 静态初始化块 > 初始化块 > 构造器 2. 父类 > 子类 综合下来顺序就是: 父类静态初始化块和静态成员变量 子类静态初始化块和静态成员变量 父类初始化块和普通成员变量 父 ...
- Spring Boot 快速入门(IDEA)
从字面理解,Boot是引导的意思,因此SpringBoot帮助开发者快速搭建Spring框架:SpringBoot帮助开发者快速启动一个Web容器:SpringBoot继承了原有Spring框架的优秀 ...
- 自己写的JS排序算法
这学期刚刚学完数据结构,之前就自己写了一点东西,现在整理一下. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- VUE 结合 vue-resource 进行ajax操作
有意思的! 初始化需要ajax获取数据! 搜索商品需要ajax获取数据! 提交数据需要ajax传递数据! 有了 vue-resource ,操作挺方便的. 这是html <form class= ...