浏览器渲染基本原理剖析.pptVIP

浏览器渲染基本原理解析 与前端性能优化 浏览器渲染基本原理解析与前端性能优化 1.浏览器主要组成与浏览器线程 2.渲染过程 3.关键渲染路径与阻塞渲染 4优化渲染性能 1.浏览器主要组成与浏览器线程 浏览器组件 浏览器大体上由以下几个组件组成,各个浏览器可能有一点不同 用户界面( User Interface):用户所看到及与之交互的功能组件,如地址栏,返回,前进按 钮等,书签菜单等窗口上除了网页显示区域以外的部分 浏览器引擎( Browser engine):负责控制和管理下一级的渲染引擎; 3.渲染引擎( Rendering engine):负责显示请求的内容。比如请求到HTM,它会负责解析 HTML、CS5并将结果显示到窗口中 4网络( Networking):用于网络请求,如HTP请求。它包括平台无关的接口和各平台独立 的实现 U后端( Ul backend):绘制基础元件,如组合框与窗口。它提供平台无关的接口,内部 使用操作系统的相应实现。 6 javaScript解释器( JavaScript interpreter:用于解析执行 JavaScript代码 7数据存储( Data storage):负责持久存储诸如 cookie和缓存等应用数据 注意: chrome浏览器与其他浏览器不同, chrome使用多个渲染引擎实例,每个Tab 页一个,即每个Tab都是一个独立进程。 用户界 浏览器引攀 数据存储 2浏览器中的进程与线程 Chrome浏览器使用多个进程来隔离不同的网页,在 Chrome中打开一个网页 相当于起了一个进程,每个tb网页都有由其独立的渲染引擎实例。因为如果非 多进程的话,如果浏览器中的一个tab网页崩溃,将会导致其他被打开的网页应 用。另外相对于线程,进程之间是不共享资源和地址空间的,所以不会存在太多 的安全问题,而由于多个线程共享着相同的地址空间和资源,所以会存在线程之 间有可能会恶意修改或者获取非授权数据等复杂的安全问题。