浏览器渲染原理

lpjustdoit 发布于2019-08-23 12:07 / 2669人阅读

摘要：浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。如果文件代码不合法，那么浏览器解析时便会出一些差错。浏览器的工作流程解析，生成树，解析生产根据生成的和构建渲染树根据渲染树，计算每个节点在屏幕上的位置，尺寸等信息。

什么是DOCTYPE及作用
DTD是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的作用是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。
浏览器的工作流程

解析HTML，生成DOM树，解析CSS生产CSSOM

根据生成的DOM和CSSOM构建渲染树Render tree

根据渲染树，计算每个节点在屏幕上的位置，尺寸等信息。

将渲染树绘制到屏幕上

注意：渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。
重排(reflow)和重绘(repaint)
当页面元素的几何属性发生改变时会发生重排，当元素的属性的该变没有影响到几何属性时发生重绘。重排一定会发生重绘，但重绘不一定会引起重排。
什么时候发生重排

添加或删除可见的DOM元素

元素位置发生该变

元素的尺寸发生该变（包括：外边距，内边距，边框厚度，宽度，高度等属性）

内容改变，例如文本内容该变，或图片被另外一张不同尺寸的图片代替

页面渲染器初始化

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程，获取布局信息的操作会导致队列刷新，如下面的这些属性和方法需要返回最新的布局信息，所以浏览器会刷新渲染队列并引发重排，应尽量避免使用。

clientWidth、clientHeight、clientTop、clientLeft

offsetWidth、offsetHeight、offsetTop、offsetLeft

scrollWidth、scrollHeight、scrollTop、scrollLeft

scrollIntoView()、scrollIntoViewIfNeeded()

getComputedStyle()

getBoundingClientRect()

scrollTo()

什么时候发生重绘
当页面中元素样式的该变不影响布局时，发生重绘。比如：该变color,background,visibility等
思考下面两段代码：
代码一：

var foo = document.getElementById("fooBar");
foo.style.color = "blue";
foo.style.marginTop = "30px";

代码二：

var foo = document.getElementById("fooBar");
foo.style.color = "blue";
var margin = parseInt(foo.style.marginTop);
foo.style.marginTop = (margin + 10) + "px";

上面两端代码分别发生多少次重排和重绘？
代码一：一次重排和重绘；代码二：一次重排和一次重排和重绘
为什么会这样呢？
当修改一个DOM节点时，修改的操作会先缓存到队列，队列中的修改会在下次UI线程执行时批量更新。修改过的节点会被标记为‘脏’（Dirty），获取脏节点的属性会导致队列中的更新操作立刻执行。所以第二段代码的不同之处在于var margin = parseInt(foo.style.marginTop);引发了一次重排。
如何减少重排和重绘的次数

避免对同一个DOM节点进行读和写操作的交叉进行。

使用display:none临时从文档中移除，添加完元素后在显示它

使用document fragment

为需要修改的节点创建一个备份，然后对副本进行操作，修改完后用其代替旧节点（cloneNode）

使用position为absolute或fixed的元素创建动画

window.requestAnimation()

虚拟DOM库

参考资料：
How browsers work
《高性能JavaScript》

云服务器服务器托管 jsp 浏览器渲染浏览器原理云渲染平台视频渲染代渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97950.html

从渲染原理到性能优化（一）

摘要：有人会说，会用就行了，知道渲染原理有必要么其实渲染原理决定着性能优化的方法，只有在了解原理之后，才能完全理解为什么这样做可以优化性能。性能优化结合渲染原理，通过实际例子，看看如何优化组件。前言以下，是我在2018 React Conf 的分享内容，希望对大家有所帮助。可以先在官网下载我的ppt对照看，效果更佳哦~。很多人都使用过React，但是很少人能说出它内部的渲染原理。有人会...

heartFollower 2019-08-23 11:50 评论0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧

摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。 ...

GraphQuery 2019-08-02 16:03 评论0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧

摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。 ...

Allen 2019-08-22 18:07 评论0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧

摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。 ...

RyanQ 2019-08-30 15:53 评论0 收藏0
用WEB技术栈开发NATIVE应用（二）：WEEX 前端SDK原理详解

摘要：依旧采取传统的开发技术栈进行开发，同时在终端的运行体验不输。首先来看下前端开发框架目前与构成了三大最流行的前端开发框架，具有组件化以及三大特性，还学习的，引入了状态管理模块。摘要： WEEX依旧采取传统的web开发技术栈进行开发，同时app在终端的运行体验不输native app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的？目前WEEX已经完全开...

ls0609 2019-08-22 15:00 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0