初识WEB:输入URL之后的故事

概述

  为什么输入www.cnblogs.com之后敲一个回车,浏览器就会显示我们所看到的内容?这家伙在背后到底偷偷的干了哪些事情?今天我们就来挖掘一下这背后的故事。

HTTP请求过程

  为直观明了,先上一张图:

  画完之后,才发现原来我的字写的这么难看,别喷我,小伙伴们!

  下面是详细的步骤以及说明:

  1. 输入URL,敲回车。
  2. 针对当前URL检查是否存在本地缓存, 如果存在,则会加载本地缓存进行呈现。如图,经过 (1)-> (2) ->(9) ->(10)。 ( 感谢“我是你的猪”的纠错 :) )
  3. 根据URL找到对应的IP地址。这一步通常被称为DNS轮询,这里面是有缓存机制的。缓存的顺序依次为:浏览器缓存->操作系统缓存->路由器缓存->DNS提供商缓存->DNS提供商轮询。
  4. 建立TCP连接到上一步找到的机器
  5. 用上一步建立的连接发送http request
  6. 等待并接收http response
  7. 关闭TCP连接,视情况而定,http1.1已经支持keep-alive。那么这个TCP请求是可以被后面的request利用的,这样就可以减少不断建立连接而造成的损失。
  8. 检查状态码,如果response的状态码出现3XX(跳转),未授权(401),错误(4XX和5XX)会有不同的处理。
  9. 准备呈现,如果response status 为304(内容未更改)浏览器则会从本来缓存加载内容进行呈现。
  10. 呈现

相关性能检测及优化手段

  在很多浏览器的辅助工具中,大都将上述步骤分为了以下5 个:

  1. DNS轮询
  2. 建立连接
  3. 发送请求
  4. 等待响应
  5. 接受请求

  我们通过查看这个时间线,就可以粗略知道我们的网站是否有性能问题以及问题出在哪里?然后我们就可以针对性的解决。

  拿上图举例,第4步“等待响应”所花的时间为3.03秒。所谓等待响应主要是页面的处理时间,比如说查询数据库、业务逻辑处理计算等等直接最后把html代码封装成response返回。(关于IIS的请求处理过程我们后面再探讨)如果这一步的时间过长,那我们就要考虑从后台动态代码处理逻辑,以及数据查询方面下手去找问题了。另外需要监控并发量,是否服务器同时处理的请求过多导致处理时间过长等。

  第3步第5步如果时间过长,我们可以通过以下方式来解决。

  1. Request会携带cookie传输,这就是除了安全性考虑以外为什么我们建议限制cookie数据和大小的原因。
  2. Response 如果是html代码我们可以考虑代码压缩和gzip压缩。
  3. 静态资源可以采用其它的方式直接压缩。
  4. 建立CDN网络服务不同地域的用户。

浏览器的呈现过程

  这里有一个略虚的问题,当我们输完www.cnblogs.com之后,到底是一个http请求,还是多个?

  我们或许可以说,只有一个请求是直接产生的,而后面一堆的请求是取绝于我们所输入的URL。我们可以看到第一个请求的Path就是我们输入的URL,当这个请求的类型为text/html的时候,也就是说这个请求返回给我们的是html代码。那么浏览器会去呈现这个页面。

      但是如果我们直接输入:http://common.cnblogs.com/script/jquery.js 这个时候当然浏览器不会去发起其它请求(前提条件是这个JS里面没有主动去请求其它资源的情况下)。而浏览器对于每一种请求类型的处理方式是不一样的,像text/html、application/JavaScript、text/plain等等这些是可以直接呈现的,而对于不能呈现的类型,浏览器会将该资源下载到本地。

  总的来说,实际的请求数量是1+这个请求资源里面所包含其它资源的数量。

  接下来,我们主要看一下,浏览器如果呈现text/html类型的请求。上面我们讲到的http的请求过程中的第6步浏览器已经拿到了返回结果即response。

      那么浏览器在确认这个response的状态不是301(跳转)或者401(未授权)或其它需要做特殊处理的状态,之后开始进入呈现过程。

浏览器的呈现引擎

  呈现引擎:负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。默认情况下,呈现引擎可显示 HTML 和 XML 文档与图片。通过插件(或浏览器扩展程序),还可以显示其它类型的内容;例如,使用 PDF 查看器插件就能显示 PDF 文档。这里我们主要讨论它的主要功能:显示使用 CSS 格式化的 HTML 内容和图片。

  呈现引擎的处理步骤包括4个:

  1. 解析html转换成DOM树。浏览器有一个内置组件叫HTML解析器,会遍历HTML代码去生成DOM树。
  2. 结合部分CSS样式将DOM树转换成呈现树(这里面的样式包括颜色尺码等)。这里有浏览器的另外一个内置组件叫CSS解析器会遍历所有的CSS内容行成一组样式规则。这里面的CSS解析器和上一步的HTML解析器是同时进行的,之后会将样式规则附加到DOM树上就形成了我们的呈现树。
  3. 通过呈现树构建布局树,主要是为每一个DOM元素分配了一个应出现在屏幕上的确切坐标。
  4. 遍历呈现树,绘制每一个节点。

  为了缩短整个呈现的过程,浏览器不会等到所有的DOM树和所有的样式规则都准备好再进行显示。而是一边解析一边显示,如果后面有JavaScript改变了某一些元素的样式属性则会导致重流(Reflow)和重绘(Repaint)。关于什么是重流和重绘这里就不详述了,网上有很多相关的资料,有兴趣的同鞋可以戳这里:重流和重绘

这是我的第一篇博客,主要是想对自己所掌握的知识有一个总结,也查看了很多网上的资料以及前辈们的博客J。当然也是想跟大家分享关于web方面的知识,我的侧重点主要在于web的一些运行机制,后面还会继续,下一篇将讨论一下关于IIS以及ASP.NET的运行机制,欢迎大家拍砖。

引用及延伸阅读

1. 浏览器工作原理:http://ux.sohu.com/topics/50972d9ae7de3e752e0081ff 2. What happens when you navigate to a URL: http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/  3. 前端必读之Best Practices for Speeding Up Your Web Site:http://developer.yahoo.com/performance/rules.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我是攻城师

如何使用scala+spark读写hbase?

3317
来自专栏七夜安全博客

新版知乎登录之post请求

1862
来自专栏谈补锅

http协议笔记

1、连接(Connection):浏览器和服务器之间传输数据的通道。一般请求完毕就关闭,http不保持连接,不保持连接会降低处理速度(因为建立连接速度很慢),保...

1084
来自专栏大数据挖掘DT机器学习

python模拟新浪微博登陆功能(新浪微博爬虫)

有些网站设置了权限,只有在登录了之后才能爬取网站的内容,如何模拟登录,目前的方法主要是利用浏览器cookie模拟登录。 浏览器访问服务器的过程 在用户访问网页时...

5345
来自专栏PHP技术

3种web会话管理的方式

http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的。当然它知道是哪个客户端地址发过来的,但是对于我们的应用来...

883
来自专栏小巫技术博客

App更新策略课程-实现通知栏进度更新

813
来自专栏北京马哥教育

实战:基于Python构建运维自动化平台

导语: 今天与大家一起探讨如何基于Python构建一个可扩展的运维自动化平台,也希望能与大家一起交流,共同成长。 此次分享将通过介绍OMServer、OMana...

5045
来自专栏noteless

springmvc 项目完整示例03 小结

一般一个项目,主要有domain,dao,service,controller这几个层次,具体的真不清楚的话可以百度一下

612
来自专栏葡萄城控件技术团队

Spread Studio中文支持图解

Spread Studio for .NET是一个跨平台的Spread表格控件工具集,支持Windows Forms, ASP.NET, WPF, WinRT以...

19510
来自专栏有趣的Python

4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍

使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(...

3138

扫码关注云+社区