https://www.zjgtgld.com/

点球体育JavaScript是如何工作的:渲染引擎和优化

  当你构建 Web 应用程序时,你不只是编写单独运行的 Java 代码,你编写的 Java 正在与环境进行交互。了解这种环境,它的工作原理以及它的组,这些有助于你够构建更好的应用程序,并为应用程序发布后可能出现的潜在问题做好充分准备。

  包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

  用来显示请求的内容,例如,如果请求内容为 html,它负责解析 html 及 css,并将解析后的结果显示出来

  用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作

  用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口

  属于持久层,浏览器需要在硬盘中保存类似 cookie 的各种数据,HTML5定义了 Web Database 技术,这是一种轻量级完整的客户端存储技术,支持的存储机制类型包括 localStorage、indexDB、WebSQL和 FileSystem。

  在这篇文章中,将重点讨论渲染引擎,因为它处理 HTML 和 CSS 的解析和可视化,这是大多数 Java 应用程序经常与之交互的东西。

  渲染引擎可以显示 HTML 和 XML 文档和图像。如果使用其他插件,渲染引擎还可以显示不同类型的文档,如 PDF。

  与 Java 引擎类似,不同的浏览器也使用不同的渲染引擎。以下是一些最受欢迎的:

  渲染现引擎的第一步是解析 HTML文档,并将解析后的元素转换为DOM 树中的实际 DOM 节点。

  CSSOM 指的是CSS 对象模型。 当浏览器构建页面的 DOM 时,它在 head 标签下如遇到了一个 link 标记且引用了外部 theme.css CSS 样式表。 浏览器预计可能需要该资源来呈现页面,它会立即发送请求。 假设 theme.css 文件内容如下:

  与 HTML一样,渲染引擎需要将 CSS 转换成浏览器可以使用的东西—— CSSOM。CSSOM 结构如下:

  你想知道为什么 CSSOM 是一个树形结构? 在为页面上的任何对象计算最终样式集时,浏览器以适用于该节点的最常规规则开始(例如,如果它是 body 元素的子元素,点球体育则应用所有 body 样式),然后递归地细化,通过应用更具体的规则来计算样式。

  来看看具体的例子。包含在 body 元素内的 span 标签中的任何文本的字体大小均为 16 像素,并且为红色。这些样式是从 body 元素继承而来的。 如果一个 span 元素是一个 p 元素的子元素,那么它的内容就不会被显示,因为它被应用了更具体的样式(display: none)。

  另请注意,上面的树不是完整的 CSSOM 树,只显示我们决定在样式表中覆盖的样式。 每个浏览器都提供一组默认样式,也称为“user agent stylesheet”。这是我们在未明确指定任何样式时看到的样式,我们的样式会覆盖这些默认值。

  不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在 CSS 的最开始要写 *{padding:0;marging:0};,也就是我们要重置CSS默认样式的。

  CSSOM 树和 DOM 树连接在一起形成一个 render tree,渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。

  一些节点是完全不可见的(比如 标签,meta标签等),这些节点会被忽略,因为他们不会影响渲染的输出

  一些节点是通过 CSS 样式隐藏了,这些节点同样被忽略——例如上例中的 span 节点在 render tree 中被忽略,因为 span 样式是 display:none

  将元素设置为不可见,但是同样在布局上占领一定空间(例如,它会被渲染成为空盒子),但是

  的元素是将节点从整个 render tree 中移除,所以不是布局中的一部分 。

  每个渲染器代表一个矩形区域,通常对应于一个节点的 CSS 盒模型。它包含几何信息,例如宽度、高度和位置。

  代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具Fundebug。

  HTML使用基于流的布局模型,这意味着大多数时间它可以一次性计算几何图形。坐标系统相对于根渲染器,使用左上原点坐标。

  布局是一个递归过程 - 它从根渲染器开始,它对应于 HTML 文档的 html 元素。 布局以递归方式继续通过部件或整个渲染器层次结构,为每个需要它的渲染器计算几何信息。

  根渲染器的位置为0,0,其尺寸与浏览器窗口的可见部分(即viewport)的大小相同。开始布局过程意味着给每个节点在屏幕上应该出现的确切坐标。

  在此绘制,遍历渲染器树并调用渲染器的 paint() 方法以在屏幕上显示内容。

  总的来说,重要的中要理解绘图是一个渐进的过程。点球体育为了更好的用户体验,渲染引擎将尽可能快地在屏幕上显示内容。它不会等到解析完所有 HTML 后才开始构建和布局渲染树,而是解析和显示部分内容,同时继续处理来自网络的其余内容项。

  当解析器到达 标记时,将立即解析并执行脚本。文档的解析将暂停,直到执行脚本为止。这意味着这个过程是同步的。

  如果脚本是外部的,那么首先必须从网络中获取它(也是同步的)。所有解析都停止,直到获取完成。HTML5 新加了async 或 defer 属性,将脚本标记为异步的,以便由不同的线程解析和执行。

  如果你想优化自己的应用,则需要关注五个主要方面,这些是你自己可以控制的:

  — 在之前的文章中,讨论了如果编写优化代码的主题抱包括如果编写代码才不会阻止UI,和提高内存利用等等。在渲染时,需要考虑 Java 代码与页面 上DOM 素交互的方式。 Java 可以在 UI中创建大量更改,尤其是在 SPA 中。

  — 这是根据匹配选择器确定哪个 CSS 规则适用于哪个元素的过程。点球体育 定义规则后,将应用它们并计算每个元素的最终样式。

  — 一旦浏览器知道哪些规则适用于某个元素,它就可以开始计算后者占用多少空间以及它在浏览器屏幕上的位置。Web 的布局模型定义了一个元素可以影响其他元素。例如,的宽度会影响其子元素的宽度,等等。这意味着布局过程是计算密集型的,该绘图是在多个图层完成的。

  —— 这是实际像素被填充的地方,这个过程包括绘制文本、颜色、图像、边框、阴影等——每个元素的每个可视部分。

  — 由于页面部分可能被绘制成多个层,因此它们需要以正确的顺序绘制到屏幕上,以便页面渲染正确。这是非常重要的,特别是对于重叠的元素。

  通过添加和删除元素,更改属性等来修改 DOM 将使浏览器重新计算元素样式,并且在许多情况下,重新计算整个页面的布局或至少部分布局。

  *减少必须进行样式计算的元素的数量。本质上,直接对一些元素进行样式更改,而不是使整个页面无效。

  尽可能减少布局的数量。当你更改样式时,浏览器会检查是否有任何更改需要重新计算布局。对宽度、高度、左、顶等属性的更改,以及通常与几何相关的属性的更改,都需要布局。所以,尽量避免改变它们。

  尽量使用 flexbox 而不是老的布局模型。它运行速度更快,可为你的应用程序创造巨大的性能优势。

  避免强制同步布局。需要记住的是,在 Java 运行时,前一帧中的所有旧布局值都是已知的,可以查询。如果你访问 box.offsetHeight,那就不成问题了。但是,如果你在访问 box 之前更改了它的样式(例如,通过动态地向元素添加一些 CSS 类),浏览器必须先应用样式更改并执行布局过程,这是非常耗时和耗费资源的,所以尽可能避免。

  这通常是所有任务中运行时间最长的,因此尽可能避免这种情况非常重要。 以下是我们可以做的事情:

  Fundebug专注于Java、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!返回搜狐,查看更多

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。