浏览器渲染基本原理解析.pptxVIP

浏览器渲染基本原理解析与前端性能优化;浏览器渲染基本原理解析与前端性能优化;1.浏览器主要组成与浏览器线程;注意：chrome浏览器与其他浏览器不同，chrome使用多个渲染引擎实例，每个Tab页一个，即每个Tab都是一个独立进程。;1.2 浏览器中的进程与线程;1. 2.1 GUI 渲染线程;1.2.2 JavaScript引擎线程;1.2.3 定时触发器线程;1.2.4 事件触发线程;1.2.5 异步http请求线程;2. 渲染过程; 以上步骤是一个渐进的过程，为了提高用户体验，渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。;2.2 渲染细节;假设浏览器获取返回的如下HTML文档： !doctype html html head link rel=stylesheet href=./theme.css/link script src=./config.js/script title关键渲染路径/title /head body h1 class=title关键渲染路径/h1 p关键渲染路径介绍/p footer@copyright/footer /body /html ;首先浏览器从上到下依次解析文档构建DOM树，如下：;2.2.2 生成Render树 浏览器在碰到 link 和 style 标签时，会解析css生成cssom ， 当然，link标签需要先将css文件加载完成才能解析。 生成DOM树的同时会生成样式结构体CSSOM（CSS Object Model）Tree，再根据CSSOM和DOM树构造渲染树Render Tree，渲染树包含带有颜色，尺寸等显示属性的矩形，这些矩形的顺序与显示顺序基本一致。 js 代码会阻塞cssom的构建，在webkit内核中有所优化，只有js访问css才会阻塞 cssom的构建与dom树的构建是并行的 减少css的嵌套层级和合理的定义css选择器可以加快解析速度 ;构建CSSOM树;2.2.3. DOM树与Render树; 在cssom 和dom 树都构建完成后，浏览器会将他们结合，生成渲染对象树，渲染树的每一个节点，包含了可见的dom节点和节点的样式 。需要注意的是： renderObject树 与 dom树不是完全对应的，不可见的元素如 display：none 是不会放入渲染树的。 visibility:hidden的元素在Render Tree中 2.2.4. 布局与绘制 上面确定了renderer的样式规则后，然后就是重要的显示元素布局了。当renderer构造出来并添加到Render树上之后，它并没有位置跟大小信息，为它确定这些信息的过程，接下来是布局(layout)。 这一步是浏览器遍历渲染对象树，并根据设备屏幕的信息，计算出节点的布局、位置，构建出渲染布局树（render layout）。渲染布局树输出的就是我们常说的盒子模型，需要注意的是： float， absolute ， fixed 的元素的位置会发生偏移 我们常说的脱离文档流，其实就是脱离布局树;在绘制(painting)阶段，渲染引擎会遍历Render树，并调用renderer的 paint() 方法，将renderer的内容显示在屏幕上。绘制工作是使用UI后端组件完成的。 2.2.5. 回流与重绘 因为js代码可以访问和修改dom节点和css，所以在解析js的过程中会导致页面重新布局和渲染，这就是回流(reflow)和重绘（repaint） 。 回流(reflow)：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染。比如元素的大小、位置发生了改变，而导致了布局的变化，从而导致了布局树的重新构建和渲染。 回流的触发： dom元素的位置和尺寸大小的变化 dom元素的增加和删除 伪类的激活 窗口大小的变化 增加和删除class样式 动态计算修改css样式; 重绘(repaint)：重绘是指css样式的改变，但元素的大小和尺寸不变，而导致节点的重新绘制。 重绘的触发： 任何对元素样式，如 background-color、 border-color、 visibility 等属性的改变。css 和 js 都可能引起重绘。;3. 关键渲染路径与阻塞渲染;3