上一篇讲了前三步,本篇从第四步开始。下面是正文:

四、进行tcp三次握手,建立tcp连接。

简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址。此时浏览器就会请求和服务器连接,用来传输数据。tcp 是稳定双向面向连接的,断开时也会分两边分别断开。面向连接不是说tcp一个双方一直开着的通道,而是维持一个连接的状态,让它看起来有连接。

五、浏览器发送数据,等待服务器响应。第四步已经建立了连接,此时就要发送数据了。浏览器会对请求进行包装,包装成请求报文。请求报文的格式如下:起始行:如 GET / HTTP/1.0 (请求的方法  请求的URL 请求所使用的协议)

头部信息:User-Agent  Host等成对出现的值

主体

请求头部和主体之间有一个回车换行。如果是get请求,则没有主体部分,post请求有主体部分。当然里面还有些请求头部比较重要。

六、服务器处理请求,并对请求做出响应。浏览器请求报文到达服务器之后,服务器接口会对请求报文进行处理,执行接口对应的代码,处理完成后响应客户端。由于http是无状态的,正常情况下,客户端收到响应后就会直接断开连接,然后一次http事物就完成了。但是http1.0有一个keep-alive的请求字段,可以在一定时间内不断开连接(有时时间甚至很长)。http1.1直接就默认开启了keep-alive选项。这导致了一个后果是服务器已经处理完了请求,但是客户端不会主动断开连接,这就导致服务器资源一直被占用。这时服务器就不得不自己主动断开连接,而主动断开连接的一方会出现TIME_WAIT,占用连接池,这就是产生SYN Flood攻击的原因。此时有三种处理方式,第一是客户端主动断开连接,第二是服务器主动断开连接,第三是对tcp连接经行设置。第一种情况,如果服务器返回的数据都有确定的content-length属性,或者客户端知道服务器返回的内容终止,则客户端主动断开连接。第二种情况,服务器可以通过设置一个最大超市时间,可以主动断开tcp连接。第三种情况,调整t三个tcp参数,第一个是:tcp_synack_retries 可以用他来减少重试次数;第二个是:tcp_max_syn_backlog,可以增大syn连接数;第三个是:tcp_abort_on_overflow 处理不过来干脆就直接拒绝连接了。

七、浏览器收到服务器响应,得到html代码。其实你心里有疑问,这一步有什么好说的。其实这里面有很多需要注意的点。浏览器发出请求时,请求报文如下:你需要关注一个报文头--accept。accept代表发送端(客户端)希望接受的数据类型,这是浏览器自动封装的请求头。如果服务器返回的content-type是accept中的任何一个,浏览器都能解析,并直接展示在网页上。如果服务器返回的content-type是其他类型,此时浏览器有三种处理状态:

1、正常显示。例如返回类型为text/javascript,浏览器能直接处理并展示。2、下载。例如返回类型为application/octet-stream(二进制流,不知道下载文件类型),这种浏览器不能直接处理的,会被下载。3、报错。当我们返回一个字符串hello world,却使用text/xml,格式时,浏览器不能正确解析,就会报错,并把报错信息呈现在网页中。浏览器能直接处理很多种格式,并直接呈现在网页中,并不限于accept中规定的字段,具体有哪些,就需要自己亲自动手试试了。

八、渲染页面。获取到服务器相应之后,浏览器会根据相应的content-type字段对响应字符串进行解析。能够解析并成功解析就显示,能够解析但解析错误就报错,不能解析就下载。由于浏览器采用至上而下的方式解析,所以会先解析html,直到遇到外部样式和外部脚本。这时会阻塞浏览器的解析,外部样式和外部脚本(在没有async、defer属性下)会并行加载,但是外部样式会阻塞外部脚本的执行,dom加载完毕,js脚本执行成功后dom树构建完成(DOMContentLoaded),之后就加载dom中引用的图片等静态资源。即:html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析->dom树构建完成->加载图片->页面加载完成。  情况一:如果是动态脚本(即内联脚本)则不受样式影响,在解析到它时会执行。  情况二:外部样式后续外部脚本含有async属性(IE下为defer),外部样式不会阻塞该脚本的加载与执行在外部样式执行完毕后,css附着于DOM,创建了一个渲染树(渲染树是一些被渲染对象的集)。每个渲染对象都包含了与之对应的计算过样式的DOM对象,对于每个渲染元素来说,位置都经过计算,所以这里被叫做“布局”。然后将“布局”显示在浏览器窗口,称之为“绘制”。接着脚本的执行完毕后,DOM树构建完成。这时,可以触发DOMContentLoaded事件。DOMContentLoaded事件的触发条件是:在所有的DOM全部加载完毕并且JS加载执行后触发。 情况一:如果脚本是动态加载,则不会影响DOMContentLoaded时间的触发,浏览器会等css加载完成后再加载图片,因为不确定图片的样式会如何。   要点一:CSS样式表会阻塞图片的加载,如果想让图片尽快加载,就不要给图片使用样式,比如宽高采用标签属性即可。  要点二:脚本不会阻塞图片的加载  最后页面加载完成,页面load。=====end====

这就是在浏览器地址栏输入地址到页面渲染完成的全过程,整个过程比较复杂,涉及到很多东西。总结一下:运维人员需要处理页面缓存、cdn及keep-alive引起的连接池占用等问题;后端人员需要处理代码逻辑、缓存、传输优化、报错等问题;前段人员需要做好前端性能优化和配合运维、后端做好借口调试,缓存处理等问题。所以无论是前端、后台、运维都应该很清楚整个流程中的每一步,才能在配合时,得心应手,才能在出现问题时,快速准确的定位问题解决问题,才能在需要优化时,迅速完整的给出方案。本篇文章到这里就结束了。ps:本篇文章之介绍了http事物,如果是https事物,整个流程和http事物大致相同,唯一不同的就是在http层和tcp层多了一个ssl层,所以在发送数据前会有个ssl握手,发送数据时会有个ssl层的加密。ssl涉及到的东西也不少,例如ssl握手,加密技术,还要ssl层到底在tcp/ip四层协议哪一层的问题等等。

后端数据成功返回 页面不渲染_在浏览器地址栏输入地址到页面渲染完成发生了什么?(下)...相关推荐

  1. jquery 当页面图片加载之后_在浏览器地址栏输入地址到页面渲染完成发生了什么?(下)...

    上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...

  2. 在浏览器地址栏输入地址,到浏览器显示页面的过程

    作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...

  3. 后端数据成功返回 页面不渲染_如何统计页面访问量,看这一篇就够了

    大家好我是CloudCoder,译为云时代的码农,专注分享linux/go/java等相关技术. 如何使用前后端统计页面的访问量? 这是我的一个github项目 链接为:https://github. ...

  4. vue 后端数据成功返回 页面不渲染_vue能获取到数据数据却渲染不到页面上,为什么?...

    问题描述 从后台可以拿到数据,并打印在控制台但是就是渲染不到页面,我也不知道是为什么,感觉都正常 问题出现的环境背景及自己尝试过哪些方法 尝试用let _this = this来代替this但是还是没 ...

  5. java 重定向到某个页面并弹出消息_前端面试100问之浏览器从输入URL到页面展示发生了什么...

    点击蓝字,关注我们 『浏览器从输入URL到页面渲染发生了什么』作为一个经典题目,在前端面试中高频出现,很多大厂的面试都会从这个面试题出发,考察候选人对知识的掌握程度,这其中涉及到了网络.操作系统.We ...

  6. 浏览器从输入URL到页面渲染过程 ——页面渲染流程

    之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程 ,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程 系列文章: (一):浏览器从输入URL到页面渲染过程 -- ...

  7. 浏览器从输入URL到页面渲染过程 —— 浏览器的进程与线程

    之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程 系列文章: (二):浏览器从输入URL到页面渲染过程 --页 ...

  8. java url地址不变_页面跳转后,浏览器地址栏地址保持不变

    有两个方法,一个使用JS实现,一个是用iframe实现. 首先是JS实现,废话就不多说了,上代码 function createXMLHttpRequest(){ if(window.XMLHttpR ...

  9. 从浏览器地址栏输入url到请求返回发生了什么(深问)

    问题: 从浏览器地址栏输入url到请求返回发生了什么 你一看这种烂掉牙的问题,小case,但996面试大佬由此延展的问题已经远远超越了这个问题本身了,不信你就接着看. 我回答了首先会进行 url 解析 ...

最新文章

  1. LeetCode 1 两数之和
  2. python快速编程入门课后程序题答案-Python 入门编程题:1~10(答案)
  3. 大规模的服务器如何管理--批量管理工具
  4. makefile使用宏及用法$(宏标识符) $(cc)_宏编程的艺术
  5. 1342. 断开的项链【难度: 一般 / 破环成链】
  6. ACdream 1061(abs用法)
  7. 聚焦数字化智慧安防的新型社区
  8. 思科IOS新命名规范详细图解(IOS 12.3) 各版本区别
  9. Java系列之雪花算法和原理
  10. yum安装php f,yum安装LNMP
  11. win7+vs2008+windows mobile6.5.3
  12. java基础—对象转型
  13. CentOS增加用户到sudo用户组
  14. mysql 输入密码后闪退_iPhone抹除还原后需要输入账号密码怎么办?
  15. C语言arduino密码锁实验报告,Arduino密码锁设计
  16. webservice 教程学习系列(八)——wsdl文档深入分析
  17. 单片机和嵌入式系统的区别
  18. JAVA过滤机制——过滤器的概念、工作原理、生命周期
  19. 机器学习中样本不平衡,怎么办?
  20. 实时即未来,车联网项目之远程诊断实时故障分析【七】

热门文章

  1. 即插即打!教你快速上手数码复合机USB打印
  2. 案例分析:FICO如何从VMware迁移到OpenStack
  3. AptitudeSystem 2.0
  4. synchronized方法与synchronized代码块的区别
  5. fedora安装pyenv实现python的版本管理
  6. javascript 理解对象--- 定义多个属性和读取属性的特性
  7. 20135337——Linux内核分析:第十七章 模块与设备
  8. 25条提高iOS App性能的建议和技巧
  9. Oracle 密码过期问题
  10. 21位美国名校学生领袖在湖北了解中国媒体情况