初识WEB：输入URL以后的故事【转】

　　转载一篇文章，分析的是浏览器输入url后所执行的一系列操做！写得很是清晰易懂，分享给你们！

做者：Jesse 出处： http://jesse2013.cnblogs.com/

本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。若是以为还有帮助的话，能够点一下右下角的【推荐】，但愿可以持续的为你们带来好的技术文章！想跟我一块儿进步么？那就【关注】我吧。

 

原博文以下：

　　1. 概述
　　2. HTTP请求过程
　　3. 相关性能检测及优化手段
　　4. 浏览器的呈现过程
　　5. 浏览器的呈现引擎
　　6. 引用及延伸阅读

概述

　　为何输入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

------------------------------------------------

　　博主经营一家发饰淘宝店，都是纯手工制做哦，开业冲钻，只为信誉！须要的亲们能够光顾一下！谢谢你们的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制做）
网店：
　　http://shop117066935.taobao.com/

  ---------------------------------------------------------------------