《浏览器渲染基本原理解析课件.ppt》由会员分享，可在线阅读，更多相关《浏览器渲染基本原理解析课件.ppt（33页珍藏版）》请在三一办公上搜索。
1、,浏览器渲染基本原理解析与前端性能优化,浏览器渲染基本原理解析与前端性能优化1.浏览器主要组成与浏览器线程宣染过程关键渲染路径与阻塞渲染4优化渲染性能,1.浏览器主要组成与浏览器线程,1浏览器组件浏览器大体上由以下几个组件组成,各个浏览器可能有一点不同用户界面( User Interface):用户所看到及与之交互的功能组件,如地址栏,返回,前进按钮等,书签菜单等窗口上除了网页显示区域以外的部分2浏览器引擎( Browser engine):负责控制和管理下一级的渲染引擎;渲染引擎( Rendering engine):负责显示请求的内容。比如请求到HTML,它会负责解析HTML、CS并将结果
2、显示到窗口中网络( Networking):用于网络请求,如HTP请求。它包括平台无关的接口和各平台独立的实现U后端( Ul backend):绘制基础元件,如组合框与窗口。它提供平台无关的按口,内部使用操作系统的相应实现。,6 JavaScript!解释器 (JavaScript interpreter:用于解析执行 JavaScript代码数据存储( Data storage):负责持久存储诸如okie和缓存等应用数据注意: chrome浏览器与其他浏览器不同, chrome使用多个渲染引擎实例,每个Tab页一个,即每个Tab都是一个独立进程用户百浏览器引擎数据存储渲染引擎JavaScri
3、pt解析器U后端,12浏览器中的进程与线程Chrome浏览器使用多个进程来隔离不同的网页,在 Chrome中打开一个网页相当于起了一个进程,每个tab网页都有由其独立的渲染引擎实例。因为如果非多进程的话,如果浏览器中的一个tab网页崩溃,将会导致其他被打开的网页应用。另外相对于线程,进程之间是不共享资源和地址空间的,所以不会存在太多的安全问题,而由于多个线程共享着相同的地址空间和资源,所以会存在线程之间有可能会恶意修改或者获取非授权数据等复杂的安全问题。,1.2,1GUl渲染线程GU渲染线程负责渲染浏览器界面HTML元素,当界面需要重绘( Repaint)或由于某种操作引发回流( reflow
4、 ) h时,该线程就会执行。在 Javascript引擎运行脚本期间GU渲染线程都是处于挂起状态的,也就是说被冻结了,1.21 avaScript)擎线程JS为处理页面中用户的交互,以及操作DOM树、CS样式树来给用户呈现一份动态而丰富的交互体验和服务器逻辑的交互处理。GU渲染线程与S引擎线程互斥的,是由于lSrt是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即 avaScrip线程和U线程同时运行),那么渲染线程前后获得的元素数据貮可能一致。当aapt引擎执行时GU线程会被挂起,GU更新会被保存在一个队列中等到引擎线程空三闲时立即被执行。由于GU渲染线程与执行线程是互斥的关系,当浏览
5、器在执行s程序的时候,GUi渲染线程会被保存在一个队列中,直到JS程序执行完成,才会接着执行。因此如果S执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉,1.2.3定时触发器线程浏览器定时计数器并不是由S引擎计数的,因为S引擎是单线程的,如果处于阻塞线程状态就会影响记计时的准确,因此通过单独线程来计时并触发定时是更为合理的方案。,事件触发线程当一个享件祓触发时该线程会把事件添加到待处理队列的队尾,等待丿S引擎的处理。这些事件可以是当前执行的代码块如定时任务、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于S的单线程关系所有这些事件都得排队等待JS引擎处理。,125异步hp请求线程在 XmlHttprEquEst在连接后是通过浏览器新开一个线程请求,将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件放到S引擎的处理队列中等待处理,
