浏览器输入网址之后加载原理

最新推荐文章于 2021-07-07 14:47:29 发布

不带刺仙人球

最新推荐文章于 2021-07-07 14:47:29 发布

阅读量872

点赞数

分类专栏： WEB开发文章标签：浏览器加载

WEB开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

参考wuhenliushui的博客专栏，网址：http://blog.csdn.net/wuhenliushui/article/details/20038819

参考Tali Garsiel的博客园，网址：http://kb.cnblogs.com/page/129756/

1 输入网址后，浏览器根据域名查找IP地址

DNS查找过程如下：

*先是浏览器缓存，浏览器会缓存DNS记录一段时间。

*系统缓存，如果没有在浏览器缓存中查到，则会做一个系统调用（windows里是gethostbyname）。

*路由器缓存

*ISP DNS缓存

*递归搜索，你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com到下面的搜索。

***********************大的网站，如facebook.com看上去如一个ip，其实，有几个IP，CDN托管，解决办法：

循环DNS，是DNS查找时返回多个IP的解决方案，facebook.com就有4个IP

负载平衡器，是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。

地址DNS，根据地理位置，通过把域名映射到多个不同IP地址提高可扩展性。

Anycast是一个IP地址映射多个物理主机的路由技术，不足时它与tcp协议不是很好兼容。

2 浏览器给web服务器发送一个HTTP请求

注意，像"http://facebook.com/"中斜杠是至关重要的，在这种情况下，浏览器能安全的添加斜杠，而像"http://example.com/folderorFile"这样的网址，

因为浏览器不清楚folderorFile到底是文件夹还是文件，所以，不能自动加斜杠，这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，造成一次不必要的握手。

3 facebook服务的301永久重定向响应

4 浏览器跟中重定向地址

5 服务器处理请求

处理请求返回一个响应

6 服务器返回一个HTML响应

200响应，之后浏览器进行构造，具体过程如下：

6.1 主要构件（HTML容错性很强）

用户界面，浏览器引擎，渲染引擎，网络，UI后端，JS解释器，数据存储

webkit渲染主流程：解析html以构件dom树，构建render树，布局render树，绘制render树。

而Gecko以frame树代替render树。

解析、文法、词法分析器（语法分析及词法分析）、

CSS的解析属于上下文无关文法---Webkit使用Flex和Bison解析生成器从CSS语法文件中自动生成解析器。Bison创建一个自底向上的解析器，Firefox使用自顶向下解析器

web的模式是同步的，开发者希望解析到一个script标签时立即解析执行脚本，
并阻塞文档的解析直到脚本执行完。如果脚本是外引的，
则网络必须先请求到这个资源——这个过程也是同步的
，会阻塞文档的解析直到资源被请求到。这个模式保持了很多年，
并且在html4及html5中都特别指定了。开发者可以将脚本标识为defer
，以使其不阻塞文档解析，并在文档解析结束后执行。Html5增加了标记脚本为异步的选项
，以使脚本的解析执行使用另一个线程。

当Dom树构建完成时，浏览器开始构建另一棵树——渲染树。
Firefox将渲染树中的元素称为frames，WebKit则用renderer或渲染对象来描述这些元素。

不可见的Dom元素不会被插入渲染树，
display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）

select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮。

Firefox用两个树用来简化样式计算－规则树和样式上下文树，WebKit也有样式对象，但它们并没有存储
在类似样式上下文树这样的树中，只是由Dom节点指向其相关的样式。

6.2 布局

当渲染对象被创建并添加到树中，它们并没有位置和大小，计算这些值的过程称为layout或reflow。

Html使用基于流的布局模型，意味着大部分时间，可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面元素的几何特性，
所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外，比如html tables。
所有的渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的children的layout方法。