不同浏览器的工作方式不完全一样,大体上,浏览器的核心是浏览器引擎,目前市场占有率最高的几种浏览器几乎都使用了不同的浏览器引擎:IE使用的是Trident、Firefox使用的是Gecko、Safari和Chrome使用的是Webkit。不同的浏览器引擎对W3C的规范支持不尽相同。下面讲诉浏览器从输入URL地址开始到页面完全可用的大致过程。

1.连接到URL所在服务器

用户在地址栏中输入一个URL,并单击GO按钮要求浏览器打开该URL后,浏览器做的第一件事情是寻找该URL所在服务器,通过向DNS服务器查询,浏览器可以获得该URL所在网站的IP地址。然后,浏览器向该地址发起连接请求,建立到服务器的连接。

2.获取页面对应的HTML文档

当连接建立后,浏览器向服务器发送HTTP请求,请求URL对应的HTML文档。不管请求的URL是一个静态的HTML文件,还是一个动态脚本(ASPX、PHP或JSP),服务器返回给浏览器的一定是HTML文档。该HTML文档就是浏览器需要呈现的页面

3.解析文档并获取所需要的资源

浏览器在获取HTML文档后会对文档进行解析,目的是知道该页面需要哪些资源以及生成DOM树。生成DOM树的工作与下载页面上需要的其它资源同时进行。大致来说,浏览器会逐行分析HTML文档,一旦发现一个标签,就会根据标签的要求分配对指定资源的下载。当DOM树生成后,DOMContentLoaded事件被触发。

首先,理论上浏览器并行下载页面需要的所有资源会带来最好的性能体验,但由于服务器要保证对尽可能多的用户的支持,因此HTTP/1.1规定了每个客户端只能与每个服务器建立2个连接。

其次,并非所有的元件都可以被并行下载。一般情况下,页面中包含两类需要被执行的JavaScript脚本,一类是直接用<script>标签标识的内嵌的JS语句;另一类则是引用外部的JS文件

4.页面上的JS文件与CSS文件

5.Onload事件

当HTML文档解析完成,生成了DOM树,所有页面需要的资源文件都已经成功下载和执行后,浏览器会发出Onload事件并回调HTML文档中的onload函数。

浏览器打开URL的方式和加载过程的更多相关文章

  1. delphi http 403 获取不到服务器返回的错误消息 用浏览器打开url可以返回

    用delphi的idhttp Get一个url如下: http://117.135.237.4:9090/agent/api/treatmentModeUpdate?userName=VDAwMIMQ ...

  2. quick 用系统浏览器打开url

    需求描述: 在我们的游戏里面增加一个链接,直接用浏览器打开,进入到对应网站,进行一些支付活动. 解决: 于是我去百度了一下,发现了这篇文章,http://blog.csdn.net/teng_onth ...

  3. ELF文件的格式和加载过程

    http://blog.csdn.net/lingfong_cool/article/details/7832896 (一) ELF 文件的格式       ELF 文件类型 (1) 可重定位文件(  ...

  4. Qt 调用本地浏览器打开URL

    点击Qt某些控件,查找本地浏览器打开前端传递的URL. 方法一:直接写死本地浏览器地址 QString programAdress = "C:\Program Files (x86)\Goo ...

  5. Android 用Chrome浏览器打开url 自定义样式

    1.效果预览 1.1.真实效果就是从某一个APP,打开一个url,跳转到谷歌浏览器,返回之后,又回到之前的APP      1.2.说明一下条件 1.手机上必须要安装谷歌浏览器 2.手机上的默认浏览器 ...

  6. 从浏览器输入url到页面加载完成都发生了什么

    一个http请求的过程 简要介绍一下一个http请求的网络传输过程: DNS Lookup先获得URL对应的IP地址 Socket Connect浏览器和服务器建立TCP连接 Send Request ...

  7. 输入URL到页面加载过程

    URL(uniform resource location) : 统一资源定位符,用来作为互联网上各种资源的标识符,可理解为身份证号 . 注意点:浏览器为了保证安全性,设定了跨域保护策略, 即窗口之间 ...

  8. 从浏览器输入URL到页面渲染的过程

    零.背景 一个web安全工程师在学习web安全和web渗透时候,非常有必要了解整个WEB工作过程. 一.输入URL 这里是最基本的知识:URL是URI的一种实际应用,URI统一资源表示符,URL统一资 ...

  9. SpringMVC DispatcherServlet 启动和加载过程(源码调试)

    在阅读本文前,最好先阅读以下内容(当然,如果对 Servlet 已经有所了解,则可跳过): http://www.cnblogs.com/cyhbyw/p/8682078.html http://ww ...

随机推荐

  1. Python类的继承演示样例

    class Pet: __name = "" def __init__(self, name): self.__name = name def bark(self): return ...

  2. 感觉Release有时比Debug要健壮

    评估文件夹大小的时候,直接跨线程操作UI界面,Debug崩溃,Release不崩溃. 更多的一种情况是,本机DEBUG下不崩溃,把RELEASE版本到别的机子上,立刻崩溃(登录框的进度条的对象为空,仍 ...

  3. redis(二)redis+TCMALLOC高性能的缓存服务器的安装配置

    安装  1准备编译环境    yum -y install gcc gcc+ gcc-c++ openssl openssl-devel pcre pcre-devel  2 下载源码包(由于goog ...

  4. HDU 1025 DP + 二分

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1025 求最长递增子序列,O(n^2)的复杂度超时,需要优化为O(n*logn) f[i]存储长度为i的最小 ...

  5. Pencil OJ 02 安装

    Mongo 官方的安装方法 官方教程已经很好啦,这里就不罗嗦了. 源码编译 待补.我是从这里看到的. 遇到的问题 启动时的警告信息 2015-03-06T21:01:15.526-0800 I CON ...

  6. CodeIgniter 应用开发笔记 - 3

    使用migration建数据表 一.新建migrations文件夹 在application新建一个文件夹migrations,存放建表类. 建表类使用用户手册中的代码作为模板(user_guide/ ...

  7. 为Cocos2d-x的Android平台加入Protobuffer支持

    为Cocos2d-x的Android平台加入Protobuffer支持 分类: 工作2013-11-27 18:00 386人阅读 评论(1) 收藏 举报 cocos2d-xandroid平台交叉编译 ...

  8. Objective-C KVC 自己主动转换类型研究

    ## Objective-C KVC 自己主动转换类型研究 apple非常厚道,kvc的时候帮我们做了一些类型转换,规律贴出来,给大伙參考參考 @interface Entity : NSObject ...

  9. webform之session传值(临时数据的存储)与扩展属性 --(购物车练习)

    页面传值:1.QueryString传值在源页面写:Response.Redirect("Main.aspx?uid="+uid+"&pwd="+pwd ...

  10. 离散傅立叶变换与快速傅立叶变换(DFT与FFT)

    自从去年下半年接触三维重构以来,听得最多的词就是傅立叶变换,后来了解到这个变换在图像处理里面也是重点中的重点. 本身自己基于高数知识的理解是傅立叶变换是将一个函数变为一堆正余弦函数的和的变换.而图像处 ...