关于浏览器加载页面
2013-11-26 16:52
211 查看
当用户在浏览器中打开一个页面时,浏览器就会自动创建文档对象模型中的一些对象,这些对象存放了HTML页面的属性和其他的相关信息,因为这些对象在浏览器上运行,所以我们有时也称之为浏览器对象BOM。
![](http://www.phpweblog.net/images/phpweblog_net/fzm010/image001.gif)
浏览器接受数据流,进行加载,预加载。通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)浏览器引擎布局的过程,类似于树的前序遍历,是一个从上到下从左到右的过程。(在Dom这个层次化的节点树中,获取某个元素其属性this.attributes['XXX'].nodeValue)。当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,再根据渲染树节点的样式属性绘制出页面,并且还可以根据不同的文档流(文档流是文档中可显示对象在排列时所占用的位置包括:常规流,绝对定位流,浮动流)先渲染常规流再渲染其他两种,所以使用absolute绝对定位,fixed(与前者不同之处是始终显示在窗口上)会将对象从常规流中脱出,此类js操作会引起浏览器重排,就是浏览器根据新的渲染树重新绘制事件元素的子元素,兄弟元素等,带来效率问题。所以建议将改变属性操作尽量和归一处(使用类似于document.getElementById(‘changeDiv’).className = ‘changeDiv’操作类的方式,来减少重排次数)。另,已经设置position属性设为absolute或fixed的的重排操作不会影响其他元素,所以要将可能会出现事后js操作的元素事先设置为absolute或者fixed。
DOM是整个网页的核心,包含window.document这是与BOM的交集部分,BOM(Unicode规范中有一个BOM的概念,具体参考http://www.kuqin.com/webpagedesign/20081105/25815.html)的主要用途是浏览器窗口以及窗口之间的操作,与窗口有关的操作首先考虑window下的属性(目前各大浏览器已经屏蔽非点击产生的window.open(),如果您有好的方法请告知我)。页面如果包含框架iframe,则每个框架都有自己的window对象,可以通过window.frames['name名']来访问子级窗口,也可以通过parent.functionName()或者parent.document来访问父级对象(top与parent不在赘述)。DOM则是页面内容的操作。DOM其实是一个基于XML树的API,作为最终渲染树和传输流之间的解释语言。而javascript是被广泛认可的DOM操作语言,但DOM并不与javascript一一绑定,Dart等语言亦可操作。
参考:/article/5835966.html
http://www.aliued.cn/2012/11/12/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E9%87%8D%E7%BB%98repaints%E4%B8%8E%E9%87%8D%E6%8E%92reflows.html
http://www.cnblogs.com/taoze/archive/2011/03/19/1988635.html
![](http://www.phpweblog.net/images/phpweblog_net/fzm010/image001.gif)
浏览器接受数据流,进行加载,预加载。通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)浏览器引擎布局的过程,类似于树的前序遍历,是一个从上到下从左到右的过程。(在Dom这个层次化的节点树中,获取某个元素其属性this.attributes['XXX'].nodeValue)。当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,再根据渲染树节点的样式属性绘制出页面,并且还可以根据不同的文档流(文档流是文档中可显示对象在排列时所占用的位置包括:常规流,绝对定位流,浮动流)先渲染常规流再渲染其他两种,所以使用absolute绝对定位,fixed(与前者不同之处是始终显示在窗口上)会将对象从常规流中脱出,此类js操作会引起浏览器重排,就是浏览器根据新的渲染树重新绘制事件元素的子元素,兄弟元素等,带来效率问题。所以建议将改变属性操作尽量和归一处(使用类似于document.getElementById(‘changeDiv’).className = ‘changeDiv’操作类的方式,来减少重排次数)。另,已经设置position属性设为absolute或fixed的的重排操作不会影响其他元素,所以要将可能会出现事后js操作的元素事先设置为absolute或者fixed。
DOM是整个网页的核心,包含window.document这是与BOM的交集部分,BOM(Unicode规范中有一个BOM的概念,具体参考http://www.kuqin.com/webpagedesign/20081105/25815.html)的主要用途是浏览器窗口以及窗口之间的操作,与窗口有关的操作首先考虑window下的属性(目前各大浏览器已经屏蔽非点击产生的window.open(),如果您有好的方法请告知我)。页面如果包含框架iframe,则每个框架都有自己的window对象,可以通过window.frames['name名']来访问子级窗口,也可以通过parent.functionName()或者parent.document来访问父级对象(top与parent不在赘述)。DOM则是页面内容的操作。DOM其实是一个基于XML树的API,作为最终渲染树和传输流之间的解释语言。而javascript是被广泛认可的DOM操作语言,但DOM并不与javascript一一绑定,Dart等语言亦可操作。
参考:/article/5835966.html
http://www.aliued.cn/2012/11/12/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E9%87%8D%E7%BB%98repaints%E4%B8%8E%E9%87%8D%E6%8E%92reflows.html
http://www.cnblogs.com/taoze/archive/2011/03/19/1988635.html
相关文章推荐
- 关于pjax 如何设置不缓存加载页面里面的js文件和不修改浏览器中的URL地址
- 关于浏览器加载和渲染页面的过程
- Selenium关于等待页面元素加载的解决方案
- 关于加载cocos2dx动画问题,跳转页面后回来不显示,报错找不到资源
- 浏览器页面加载解析渲染机制
- 关于在js中关闭浏览器页面的问题
- 关于@requestMapping跳转页面静态资源无法加载问题
- 浏览器预加载器如何使页面加载更快
- 浏览器的加载与页面性能优化
- 关于动态加载的页面实现任意位置拖动
- html5 audio标签在ios 微信内置浏览器中页面加载完成后自动播放声音
- 41 关于请求被挂起页面加载缓慢问题的追查
- QT 使用QWebEngineView 加载浏览器页面
- 浏览器的加载与页面性能优化
- 安卓开发_关于WebView加载页面空白问题
- selenium server在页面加载超时浏览器与driver通信失败时的妙用
- 关于页面动态加载控件当页面回发后控件消失的问题
- 关于运行本地web页面浏览器出现安全拦截提示问题
- 关于asp.net中页面事件加载的先后顺序
- 关于 第三方接口支付的时候 采用post提交的方式,有两种 一种是通过 curl来进行,一种是通过js当页面加载完后跳转