- 浏览: 494092 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
浏览器内部工作原理
浏览器的主要功能
浏览器的主要功能是将用户选择的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
浏览器的主要功能
浏览器的主要功能是将用户选择的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
发表评论
-
indexedDb TEST
2021-03-24 08:36 504<!DOCTYPE html> <html& ... -
test11223
2019-11-08 17:35 303nginx 的启动、停止与重 ... -
longKey
2019-12-05 17:23 290<!DOCTYPE html> <html ... -
jQuery Validate 校验
2019-09-25 21:16 322https://www.runoob.com/jquery/j ... -
移动端调试神器
2019-09-23 22:55 272<!DOCTYPE html> <html ... -
textarea 特殊字符串处理
2019-07-04 22:56 1141<!DOCTYPE html> <html ... -
web 前端技术点
2018-01-05 18:17 397prototype为类定义的方法要先定义后使用,跟js运行原理 ... -
WebSocket
2016-09-22 09:59 508WebSocket 1.WebSocket protocol ... -
postman POST 中文乱码问题解决方法
2016-09-10 14:31 7933postman POST 中文乱码问题解决方法 代码方式: ... -
HTTP 方法:GET与POST的区别
2016-08-31 00:07 481HTTP 方法:GET 对比 POST GET 方法 参数 ... -
WEB服务器和WEB应用服务器的区别
2016-08-19 10:29 605WEB服务器和WEB应用服务器的区别: WEB服务器提供的是网 ... -
动态页面和静态页面的区别
2016-08-19 10:21 852静态页面:就是所有页面显示的内容都是写在HTML文件当的。如 ...
相关推荐
### 前端必读:浏览器内部工作原理 #### 一、引言 浏览器作为互联网时代最为普及的应用之一,其内部工作原理对于前端开发者来说至关重要。本文将深入探讨浏览器的基本功能、主流浏览器介绍以及浏览器的主要构成等...
一篇2011年国外关于浏览器的文章
目录 一、介绍 二、渲染引擎 三、解析与DOM树构建 四、渲染树构建 五、布局 六、绘制 七、动态变化 八、渲染引擎的线程 九、CSS2可视模型
例如,优化CSS选择器、减少HTTP请求数量和合并资源文件都是基于浏览器内部工作原理的最佳实践。 总的来说,浏览器是一个复杂的软件系统,它需要处理各种网络请求,解析和渲染不同的内容,同时提供友好的用户界面。...
在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据,并花了很多时间来研读网络浏览器的源代码。她写道: 在 IE 占据 90%市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了。但是现在...
### 浏览器的工作原理:...通过深入了解浏览器的内部工作原理,开发者可以更好地理解网页的加载过程,从而优化网页性能,提升用户体验。无论是WebKit还是Gecko,它们都在不断进步,以满足日益复杂和多样化的网络需求。
整个文档内容反映了浏览器内部机制的基本理论和技术实现,对于前端开发者以及对网页性能优化有兴趣的人员来说,这些信息极其宝贵。通过理解浏览器的工作方式,开发者可以更好地编写代码,优化网站性能,提供更流畅的...
在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码。她写道:在 IE 占据 90% 市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做...
### Firefox浏览器结构分析 #### 一、引言 随着互联网技术的发展,浏览器作为人们访问互联网的重要工具之一,其...对于那些希望深入了解浏览器内部工作原理的研究人员来说,Firefox无疑是一个值得深入探索的对象。
源代码的公开为技术爱好者提供了一个深入研究浏览器内部工作原理的宝贵机会。在这款源代码中,我们可以找到以下几个关键的知识点: 1. **浏览器架构**:亿简浏览器的源码会揭示其整体架构,通常包括渲染引擎、网络...
在IT行业中,C++ MFC(Microsoft Foundation Classes)是一种基于Windows平台的应用程序开发框架,它为程序员提供了...通过实践和探索,你将不仅掌握MFC的基础,还能增强对Windows编程和Web浏览器内部工作原理的理解。
此源码提供了深入了解Android应用程序开发、Web浏览技术以及Chrome浏览器内部工作原理的宝贵资源。通过分析这份源码,我们可以学习到以下几个关键知识点: 1. **跨平台开发**:Chromium是跨平台的,它在Android上...