ie浏览器的渲染原理

IE下载或者渲染顺序大致如下：

IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

并且在下载后进行解析，解析（JS、CSS中如有重定义，后定义函数将覆盖前定义函数）过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

Firefox处理下载和渲染顺序大体相同，只是在细微之处有些差别，例如：iframe的渲染

时间： 2024-08-04 07:53:40

ie浏览器的渲染原理的相关文章

【转】浏览器的渲染原理简介

How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览器工作大流程 先看个图 从图中,可以看到: 1) 浏览器会解析三个东西 * 一个 HTML/SVG/XHTML,事实上,Webkit 有三个C++的类对应这三类文档.解析这三种文件会产生一个DOM Tree * CSS,解析CSS会产生CSS规则树 * JavaScript 脚本,主要是通过

浏览器的渲染原理简介

原文转自:http://kb.cnblogs.com/page/178445/ 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文.为什么我还想写一篇呢?因为两个原因, 1)这篇文章太长了,阅读成本太大,不能一口气读完. 2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助. 所以,我准备写下这篇文章来解决上述两个问题.希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览

浏览器的渲染原理

看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文.为什么我还想写一篇呢?因为两个原因, 1)这篇文章太长了,阅读成本太大,不能一口气读完. 2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助. 所以,我准备写下这篇文章来解决上述两个问题.希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览器工作大流程 废话少说,先来看个图: 从上面这个图中,我们可以看到那么几个事:

浏览器渲染原理及流程

我们可能都知道浏览器含有一个渲染引擎,用来渲染窗口所展示的内容.默认情况下,渲染引擎可以显示html.xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件,用于显示PDF格式.但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧.这些天研究了一下浏览器的渲染原理,有了些心得,在这里跟大家分享一下,这里只讨论渲染引擎最主要的用途--显示应用了CSS之后的html及图片. 渲染引擎简介 本文所讨论的浏览器--Firefox.Chrome和Safari

浏览器渲染原理解析

作者:贝程学院 浏览器内核分为两部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎.早期渲染引擎和 JS 引擎并没有明显区分,随着 JS 引擎越来越独立,内核逐渐变成了渲染引擎的代名词.渲染引擎包括: HTML 解释器 CSS 解释器 布局 网络 存储 图形 音视频 图片解码器 等等 渲染引擎简介 浏览器——Firefox.Chrome和Safari是基于两种渲染引擎构建的,Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safa

[转载]浏览器的工作原理：新式网络浏览器幕后揭秘

原文地址 序言 这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果.在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码.她写道: 在 IE 占据 90% 市场份额的年代,我们除了把浏览器当成一个"黑箱",什么也做不了.但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候来揭开神秘的面纱,一探网络浏览器的内幕了.呃,里面只有数以百万行计的 C++ 代码.

浏览器的渲染顺序

直接上代码 1 <style> 2 div{ 3 width: 500px; 4 height: 400px; 5 border: 1px solid #ff0000; 6 background: url(./images/11.jpg); //css里的图片11.jpg 7 } 8 </style> 9 <script> 10 new Image().src = "./images/22.jpg": //js里的图片22.jpg 11 </s

深入学习页面优化之页面渲染原理

拾人牙慧理解并整理之 直奔主题,要考虑到页面性能优化,必须得理解浏览器的渲染机制才行. 1.原理 渲染引擎在这里就不展开了,可自行搜索解决.下面说说渲染流程,大致是这样的: 浏览器在接收到服务器返回的html页面后, 浏览器开始构建DOM TREE,遇到CSS样式会构建CSS RULER TREE, 遇到javascript会通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree,解析完成后, 浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来

不同内核的浏览器，以及渲染原理

一. "Rendering Engine"渲染引擎,也可以叫做浏览器内核(这个部分要扩展一下,原本的浏览器内核分为渲染引擎和Js引擎,后来Js引擎越来越独立,内核就倾向于只指渲染引擎了),是浏览器最核心的部分,浏览器内核的不同对于网页的语法解释会有不同,所以渲染出来的效果也不同,简单说就是不同的内核决定了浏览器如何显示页面,也是因为这个原因导致了浏览器兼容性问题的出现. 下面是5种浏览器分别采用的不同引擎: - IE内核 Trident- 谷歌内核 WebKit / Blink(由we