用户端请求步骤: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到页面加载的过程的更多相关文章

  1. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  2. 经典面试题: 从输入URL到页面加载的过程发生了什么?

    可以分为这几个大的过程: DNS解析 TCP连接 客户端发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 结束 其中(1)DNS解析可以理解为主寻找这个IP地址的过程,其中如果找 ...

  3. 从输入URL到页面加载的过程?由一道题完善自己的前端知识体系!

    出处:http://mp.weixin.qq.com/s/qMsf4DcMhn2cf0fXC-PLVA 强缓存与弱缓存 缓存可以简单的划分成两种类型: 强缓存( 200fromcache)与 协商缓存 ...

  4. http --- 从输入URL到页面加载的过程发生了什么?

    可以分为这几个大的过程: DNS解析 TCP连接 客户端发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 结束 其中(1)DNS解析可以理解为主寻找这个IP地址的过程,其中如果找 ...

  5. 从输入URL到页面加载发生了什么

    大体过程 浏览器的地址栏输入URL并按下回车 浏览器检查当前URL是否存在缓存,并比较缓存是否过期 DNS解析URL对应的IP 根据IP建立TCP连接(三次握手) HTTP发起请求 服务器处理请求,浏 ...

  6. 从输入URL到页面加载到底发生了什么

    很多初学网络或者前端的初学者大多会有这样一个疑问:从输入URL到页面加载完成到底发生了什么?总的来说,这个过程分为下面几个步骤:1.DNS解析2.与服务器建立连接3.服务器处理并返回http报文4.浏 ...

  7. 从输入 URL 到页面加载完成的过程中都发生了什么事情?

    这个问题是老生常谈的问题啦,虽然说到处百度都有的答案,还是希望自己能总结一下. 如今有很多答案,都是从硬件开始讲起,比如键盘的响应或者触屏的响应,然后CPU处理到OS的内核等等.这里不作为重点来讲,要 ...

  8. 从输入 URL 到页面加载完成的过程中都发生了什么

    从输入 URL 到页面加载完成的过程中都发生了什么 过程描述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理 ...

  9. 一个页面从输入url到页面加载显示完成,中间都经历了什么

    第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...

随机推荐

  1. django-ORM复习补充

    建表 class Author(models.Model): name = models.CharField(max_length=32) age = models.IntegerField() # ...

  2. 简单的menu和点击(包括alertDialog定制)

    import android.app.Activity;import android.app.AlertDialog;import android.app.Dialog;import android. ...

  3. python识别验证码

    1.tesseract-ocr安装 tesseract-ocr windows下载地址 http://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr- ...

  4. PL/SQL编程—分页功能(存储过程)

    SQL),bookname ),publish )); Table created SQL> SQL> create or replace procedure sp_add_book(bo ...

  5. 并查集模板 && 带权并查集模板

    不带权: ]; void init(void) { ;i<=n;i++) f[i]=i; } int fd(int x) { return f[x]==x?x:fd[x]=fd(f[x]); } ...

  6. websocket redis实现集群即时消息聊天

    websocket与redismq实现集群消息聊天 1.application.properties server.port=8081 #thymeleaf配置 #是否启用模板缓存. spring.t ...

  7. sql 中 in 与 exist 的区别

    可以 通过 where 条件 把 null的情况 筛选掉,已避免出现上述的情况. 1, exist 返回 true or  false:  in 返回  true  unknow. not之后 not ...

  8. 《Language Implementation Patterns》之 语言翻译器

    语言翻译器可以从一种计算机语言翻译成另外一种语言,比如一种DSL的标量乘法axb翻译成java就变成a*b:如果DSL里面有矩阵运算,就需要翻译成for循环.翻译器需要完全理解输入语言的所有结构,并选 ...

  9. 在阿里云centos7上搭建openvpn(未成功)

    1.环境: 运行环境:阿里云 系统:centos 内核版本:-.el7.x86_64 各软件版本: iptables--.el7.x86_64 openvpn--.el7.x86_64 easy-rs ...

  10. android studio 连接 华为手机真机

    1.手机开启开发者模式(Honor V10) 设置->关于手机->连续点击版本号5次就能出现开发者模式->返回上一级出现开发者选项->打开选项(开发者选项,USB调试) 2.a ...