`
huangyongxing310
  • 浏览: 496446 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

浏览器内部工作原理

    博客分类:
  • WEB
阅读更多
浏览器内部工作原理


浏览器的主要功能
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,
资源的格式通常是HTML,也包括PDF、image及其他格式。

用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置

HTML和CSS规范中规定了浏览器解释html文档的方式,由W3C组织对这些规范进行维护,W3C是负责制定web标准的组织。


浏览器的主要构成(High Level Structure)
浏览器的主要组件包括:
1. 用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2. 浏览器引擎 - 用来查询及操作渲染引擎的接口。
3. 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。
4. 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。
5. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。
6. JS解释器 - 用来解释执行JS代码。
7. 数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术





解析与DOM树[b]构建(Parsing and DOM tree construction)[/b]
将HTML文档解析成DOM树(DOM元素及属性节点组成)。
DOM是文档对象模型的缩写,它是html文档的对象表示,作为html元素的外部接口供js等调用。
树的根是“document”对象。

解析结束时的处理(Action when the parsing is finished)
文档状态将被设置为完成,同时触发一个load事件。


CSS解析(CSS parsing)
在解析文档的过程中会进行CSS的解析,并会生成另一个CSS的DOM树(样式树)(猜测),这个树并与HTML的DOM树有关联


渲染树
HTML的DOM树与CSS的DOM树进行了关联的对象


绘制(Painting)
绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件,这在UI的章节有更多的介绍。


动态变化
浏览器总是试着以最小的动作响应一个变化,所以一个元素颜色的变化将只导致该元素的重绘,元素位置的变化将
大致元素的布局和重绘,添加一个Dom节点,也会大致这个元素的布局和重绘。一些主要的变化,比如增加html元
素的字号,将会导致缓存失效,从而引起整体的布局和重绘。



渲染引擎的线程
事件循环
浏览器主线程是一个事件循环,它被设计为无限循环以保持执行过程的可用,等待事件(例如layout和paint事件)并执行它们。



渲染引擎
渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。
渲染引擎最主要的用途——显示应用了CSS之后的html及图片

渲染主流程
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树



渲染引擎开始解析html,并将标签转化为内容树中的dom节点。接着,它解析外部CSS文件及style标签中的样式信息。
这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

Render树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后,将会执行布局过程,它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制,
即遍历render树,并使用UI后端层绘制每个节点。

值得注意的是,这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,
并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,
同时,可能还在通过网络下载其余内容。



javascript执行
浏览器是至上而下解析html文档中的代码的

html文档中script越靠前通常越先执行

外部js文件中的代码 比 内嵌的js代码先执行

通过设置script元素的defer属性,可以设置包围其内的js代码是在html文档加载完后才执行该js代码,
还是html代码加载到该js代码时,就执行。

设置defer属性值为true后,script中没有包含在函数中(并该函数没被调用)的代码会立即执行,在其函数中则不会。

onload事件函数是指html文档加载结束后执行的函数,当需要操作HTMl的DOM树时,通常应该在onload事件函数中操作,
防止html还没加载完就执行js代码时,找不到指定的元素(标签)和内容。

onload标准来说与匿名函数配合使用:window.onload=function(){ html加载后做的事;}



参考原文:http://kb.cnblogs.com/page/129756/
参考原文:http://zhidao.baidu.com/link?url=-e35RP0YDbqugpRZBln7tdn3Tk_8DBFEQM2Z0c6394QNtTi5BEM0iE3r95_M_3gYBOKnVIW9Y0CCwrlbgGDzeq
  • 大小: 20.1 KB
  • 大小: 40.1 KB
分享到:
评论

相关推荐

    前端必读:浏览器内部工作原理

    前端必读:浏览器内部工作原理 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入 google.com 到你看到 google 主页过程中都发生了什么。 浏览器的主要功能是将用户...

    前端必读:浏览器内部工作原理.pdf

    ### 前端必读:浏览器内部工作原理 #### 一、引言 浏览器作为互联网时代最为普及的应用之一,其内部工作原理对于前端开发者来说至关重要。本文将深入探讨浏览器的基本功能、主流浏览器介绍以及浏览器的主要构成等...

    浏览器内部工作原理.txt

    一篇2011年国外关于浏览器的文章

    浏览器工作原理(图)_内部工作原理.doc

    目录  一、介绍  二、渲染引擎  三、解析与DOM树构建  四、渲染树构建  五、布局  六、绘制  七、动态变化  八、渲染引擎的线程  九、CSS2可视模型

    浏览器的工作原理:新式网络浏览器幕后揭秘.

    例如,优化CSS选择器、减少HTTP请求数量和合并资源文件都是基于浏览器内部工作原理的最佳实践。 总的来说,浏览器是一个复杂的软件系统,它需要处理各种网络请求,解析和渲染不同的内容,同时提供友好的用户界面。...

    浏览器的工作原理:现代网络浏览器幕后揭秘

    在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据,并花了很多时间来研读网络浏览器的源代码。她写道: 在 IE 占据 90%市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了。但是现在...

    浏览器的工作原理

    ### 浏览器的工作原理:...通过深入了解浏览器的内部工作原理,开发者可以更好地理解网页的加载过程,从而优化网页性能,提升用户体验。无论是WebKit还是Gecko,它们都在不断进步,以满足日益复杂和多样化的网络需求。

    浏览器原理pdf

    整个文档内容反映了浏览器内部机制的基本理论和技术实现,对于前端开发者以及对网页性能优化有兴趣的人员来说,这些信息极其宝贵。通过理解浏览器的工作方式,开发者可以更好地编写代码,优化网站性能,提供更流畅的...

    浏览器的工作原理:现代网络浏览器幕后揭秘.pdf

    在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码。她写道:在 IE 占据 90% 市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做...

    firefox 浏览器结构分析

    ### Firefox浏览器结构分析 #### 一、引言 随着互联网技术的发展,浏览器作为人们访问互联网的重要工具之一,其...对于那些希望深入了解浏览器内部工作原理的研究人员来说,Firefox无疑是一个值得深入探索的对象。

    最新亿简浏览器源代码下载

    源代码的公开为技术爱好者提供了一个深入研究浏览器内部工作原理的宝贵机会。在这款源代码中,我们可以找到以下几个关键的知识点: 1. **浏览器架构**:亿简浏览器的源码会揭示其整体架构,通常包括渲染引擎、网络...

    C++ MFC 浏览器设计

    在IT行业中,C++ MFC(Microsoft Foundation Classes)是一种基于Windows平台的应用程序开发框架,它为程序员提供了...通过实践和探索,你将不仅掌握MFC的基础,还能增强对Windows编程和Web浏览器内部工作原理的理解。

    android应用源码---浏览器源码(AndroidChromium).rar

    此源码提供了深入了解Android应用程序开发、Web浏览技术以及Chrome浏览器内部工作原理的宝贵资源。通过分析这份源码,我们可以学习到以下几个关键知识点: 1. **跨平台开发**:Chromium是跨平台的,它在Android上...

Global site tag (gtag.js) - Google Analytics