初识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 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

基于vue.js的渐进式组件尝试

我们有个内部运营系统,是基于keenthemes的一个主题进行开发的,而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制...

21110
来自专栏phodal

前端程序员必知:单页面应用的核心

这几年里,单页面应用的框架令人应接不暇,各种新的概念也层出不穷。从过去的 jQuery Mobie、Backbone 到今天的 Angular 2、React、...

2199
来自专栏腾讯AlloyTeam的专栏

Node 直出理论与实践总结

直出是什么?到底是怎样的性能优化?本文将结合从在浏览器输入url,到展示最终页面的过程来对其进行一步步分析,并将在手Q web 中的实际应用实践进行总结。

6520
来自专栏思考的代码世界

Python网络数据采集之采集JavaScript|第09天

客户端脚本语言是运行在浏览器而非服务器上的语言。客户端语言成功的前提是浏览器拥有正确地解释和执行这类语言的能力。

4126
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:开学篇

Vue 是国人写的,技术文档也妥妥的是中文,想到这我就有学习的动力。

42.7K52
来自专栏别先生

Intellij Idea中Backspace无法使用,Ctrl+c/Ctrl+d等等快捷键无法使用的问题的解决

1:作为一个强迫症的我使用习惯了Eclipse,可能是对快捷键的依赖性,都说Idea是开发Java的最好工具,下载,安装等等(过程省略,百度很多方法),这里说一...

2976
来自专栏魏艾斯博客www.vpsss.net

国外免费 Linux 面板-VestaCP 安装及建站教程

2322
来自专栏听雨堂

JQuery笔记(三) jquery的用途

  近期jquery的学习经历了一些反复:开始时觉得非常强大,比js好用,和css关系密切,一句话:完美。等到把《锋利的JQuery》看完,又有点不知道用它来干...

2439
来自专栏Python专栏

用Python给程序加个进度条

1803
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板新增一键部署源码扩展功能

2764

扫码关注云+社区