浏览器加载解析渲染(浏览器的工作原理)

浏览器的主要功能:将用户选择的web资源呈现出来。而这,它需要从服务器请求资源,并将其显示在浏览器窗口中。资源的格式通常是html,也包括PDF,image等其他格式。用户用URL(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置,通过DNS(域名系统(英文:DomainNameSystem,缩写:DNS))查询,将网址转换为IP地址。整个浏览器的工作流程如下:

1.输入URL

2.浏览器查找域名的IP地址

3.浏览器给web服务器发送一个http请求

4.网站服务的永久重定向响应

5.浏览器跟踪重定向地址,现在,浏览器知道了要访问的正确地址,所以它会发送另一个获取请求

6.服务器“处理”请求,服务器接收到获取请求,然后处理并返回一个响应

7.服务器发回一个html响应

8.浏览器开始显示html

9.浏览器发送请求,以获取嵌入在html中的对象。在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源,这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等等…

1.DNS的定义:

域名系统(DomainNameSystem)是互联网的一项服务。它作为将域名和ip地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。

2.域名的定义:

域名:(英语:Domain Name)是由一串用点分割的名字组成的nternet上某一台计算机或计算机组的名称,用于在数据传输表示计算机的电子方位(有时也指地理位置)。

3.IP地址

IP地址是Internet主机的作为路由寻址用的数字体标识,人不容易记忆。因而产生了域名这一种字符型标识。

例如,www.wikipedia.org是一个域名,和IP地址208.80.152.2相对应。DNS就像是一个自动的电话号码簿,我们可以直接拨打wikipedia的名字来代替电话号码(IP地址)。我们直接调用网站的名字以后,DNS就会将便于人类使用的名字(如www.wikipedia.org)转化成便于机器识别的IP地址(如208.80.152.2)。

那么,一个页面,究竟是如何从我们输入一个网址到最后完整的呈现在我们面前的呢?还需要了解一下浏览器是如何渲染的:

原文地址:https://www.cnblogs.com/yyn120804/p/11074556.html

时间: 2024-10-06 15:03:44

浏览器加载解析渲染(浏览器的工作原理)的相关文章

浏览器加载解析渲染网页原理

浏览器加载网页资源的原理 JS与CSS阻塞 重排与重绘 一.浏览器加载网页资源的原理 1.HTML支持的组要资源类型 在浏览器内核有一个管理资源的对象CachedResource类,在CachedResource类下有很多子类来分工不同的资源管理,这些资源管理子类分别是:  资源  资源管理类  HTML  MainResource ===> CachedRawResource  JavaScript  CachedScript  CSS  CachedCSStyleSheet  图片  Cac

浏览器页面加载解析渲染机制(一)

mark一下zhq[2]. 前言:首先这个标题对我来说有不甚了解,这里引用了一些好的技文内容,分享一下我的一些理解,如果有说错的望评论里狠狠打脸,以共勉之. 一:为什么要了解浏览器渲染页面和加载页面机制,主要还是性能的优化. 了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以最快的速度将文件加载完毕. 了解浏览器如何进行解析,我们可以在构建DOM结构,组织css选择器时,选择最优的写法,提高浏览器的解析速率. 了解浏览器如何进行渲染,明白渲染的过程,

浏览器加载和渲染html的顺序

浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完). 3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载. 4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染. 5. JS.CSS中如有重定义,后定义函

浏览器加载和渲染HTML的过程(标准定义的过程以及现代浏览器的优化)

先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 link 标签引用外部CSS或JS文件: 浏览器又发出CSS及JS文件的请求,服务器返回这个CSS,JS文件: 浏览器继续载入html中 body 部分的代码,并且CSS,JS文件已经拿到手了,可以开始渲染页面了: 浏览器在代码中发现一个 img 标签引用了一张图片,向服务器发出请求.此时浏览器不会等

浏览器加载、渲染机制

问题:为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的? 想写出一个最佳实践的页面,可以从浏览器的加载.解析.渲染来开始了解. 了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以最快的速度将文件加载完毕. 了解浏览器如何进行解析,我们可以在构建DOM结构,组织css选择器时,选择最优的写法,提高浏览器的解析速率. 了解浏览器如何进行渲染,明白渲染的过程,我们在设置元素属性,编写js文件时,可以减少"重

css基础篇(一)——浏览器加载和渲染网页

1.介绍 虽然这篇是css笔记,但是做为web开发,天天和浏览器打交道,有必要先理理我目前了解的浏览器加载和渲染页面的过程. 2.页面加载和渲染流程 如图:(该篇重点是css,所以该图重点说明css渲染) 1.重建DOM树:渲染引擎开始解析html文档,转换树中的标签到DOM节点 2.构建渲染树:解析css,根据css选择器找到节点的样式,创建另外一个树———渲染树 3.布局渲染树:从根节点开始,计算出每一个元素的大小和位置 4.绘制渲染树:遍历渲染树将每个节点都绘制出来 整个流程简易描述:用户

浏览器加载解析过程

为了搞清楚js  css到底在页面加载的哪个环节中被执行使用了,就找了一些文章看了下,感觉没有理解的很透彻,但也比之前有更近一步认识. 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 上面这个流程是最基本的了,但实际上从文档被请求回来之后,一步步的执行,结合几个比较重要的点,我自己理解如下,若有问题,望指正: 重要点: 最重要的:渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局rend

浏览器加载、解析、渲染的过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序.所以就花了时间去了解浏览器的工作,有一篇经典的文章<how browsers work> ,讲的很详细,也有中文译本 .不过就是文章有点太长,也讲了一堆东西,还是自己总结一下. 为什么要了解浏览器加载.解析.渲染这个过程? 好,我们先说一下,为什么要了解这些呢?如果想写出一个最佳实践的页面,就要好好了解. 了解浏览器如何进行加载

浏览器~加载,解析,渲染

昨天为了 了解浏览器是怎么处理(.html..css..js)这些文件,我看了网上的好多资料,这好多资料中,有很多是通过转载.或是转载后加之自己的理解,但是因为自己对专业的词汇理解不好,还有一些作者将不同浏览器的处理过程混着说,总之,看完了,还是有很多疑虑的地方.我先根据昨天了解到的内容总结一下,日后随着学的深了,再回过来补充.2014.11.6 why 为什么要了解浏览器加载.解析.渲染这个过程? 了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以