JavaScript是如何工作的:渲染引擎和优化其性能的技巧
|
从 DOM 树根节点开始，遍历每一个可见的节点
“visibility:hidden” 和 “display：none” 之间的不同， “visibility:hidden” 将元素设置为不可见，但是同样在布局上占领一定空间（例如，它会被渲染成为空盒子），但是 “display:none” 的元素是将节点从整个 你可以在这里查看 RenderObject 的源代码（在 WebKit 中）：https://github.com/WebKit/web... 我们来看看这个类的一些核心内容：
每个渲染器代表一个矩形区域，通常对应于一个节点的 CSS 盒模型。它包含几何信息，例如宽度、高度和位置。 渲染树的布局创建渲染器并将其添加到树中时，它没有位置和大小，计算这些值称为布局。 HTML使用基于流的布局模型，这意味着大多数时间它可以一次性计算几何图形。坐标系统相对于根渲染器，使用左上原点坐标。 布局是一个递归过程 - 它从根渲染器开始，它对应于 HTML 文档的 根渲染器的位置为 在此绘制，遍历渲染器树并调用渲染器的 绘图可以是全局的或增量式的（与布局类似）：
总的来说，重要的中要理解绘图是一个渐进的过程。为了更好的用户体验，渲染引擎将尽可能快地在屏幕上显示内容。它不会等到解析完所有 HTML 后才开始构建和布局渲染树，而是解析和显示部分内容，同时继续处理来自网络的其余内容项。 处理脚本和样式表的顺序当解析器到达 如果脚本是外部的，那么首先必须从网络中获取它(也是同步的)。所有解析都停止，直到获取完成。HTML5 新加了async 或 defer 属性，将脚本标记为异步的，以便由不同的线程解析和执行。 优化渲染性能（编辑：网站开发网_安阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
