文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点

Reader 引擎线程与模块分析首先是网页内容，加载完输入到HTML解释器，解释后构成DOM树，这期间如果遇到JavaScript代码就交给JavaScript引擎去处理，如果网页中包含CSS，就交给CSS...解释器；DOM树简历的时候，渲染引擎接收来自CSS解释器的样式信息，构建一个新的你日不会吐模型，该模型由布局模块计算模型内部各个元素的位置和大小信息渲染流程有四个主要步骤：解析HTML生成DOM树 -...这种绘制方式的好处是，使用tranforms来实现移动效果的元素将会被正常绘制，同时不会触发对其他元素的绘制。...减少绘制区域通常需要对动画效果进行精密设计，以保证各自的绘制区域之间不会有太多重叠，或者想办法避免对页面中某些区域执行动画效果。...从性能方面考虑，最理想的渲染流水线是没有布局和绘制环节的，只需要做渲染层的合并即可：之前也参看：《关于css3之transform一些坑的总结－transform对普通元素的N多渲染》对用户输入事件的处理去抖动避免使用运行时间过长的输入事件处理函数

1.2K20

浏览器渲染原理及流程

这种绘制方式的好处是，使用transform来实现移动效果的元素将会被正常绘制，同时不会触发其他元素的绘制。 2....减少绘制区域，简化绘制的复杂度 浏览器会把相邻区域的渲染任务合并在一起进行，所以需要对动画效果进行精密设计，以保证各自的绘制区域不会有太多重叠。...使用transform/opacity实现动画效果 使用transform/opacity实现动画效果，会跳过渲染流程的布局和绘制环节，只做渲染层的合并。...提升动画效果中的元素 应用动画效果的元素应该被提升到其自有的渲染层，但不要滥用。...避免使用运行时间过长的输入事件处理函数 理想情况下，当用户和页面交互，页面的渲染层合并线程将接收到这个事件并移动元素。这个响应过程是不需要主线程参与，不会导致JavaScript、布局和绘制过程发生。

4.6K32
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    解读新一代 Web 性能体验和质量指标

    LCP 考虑哪些元素 LCP 目前并不会计算所有元素，因为这样会使这个指标变得非常复杂，它现在只关注下面的元素： 元素 元素内的元素 元素 通过 url...页面上最大的元素即绘制面积最大的元素，所谓绘制面积可以理解为每个元素在屏幕上的 “占地面积”，如果元素延伸到屏幕外，或者元素被裁切了一部分，被裁切的部分不算入在内，只有真正显示在屏幕里的才算数。...如果元素被删除，LCP算法将不再考虑该元素，如果被删除的元素刚好是 “绘制面积” 最大的元素，则使用新的 “绘制面积” 最大的元素创建一个新的性能条目。...例如，以下所有 HTML 元素都需要在响应用户交互之前等待主线程上正在进行的任务完成： 文本输入框，复选框和单选按钮（，） 选择下拉菜单（） 链接（<a...，所以回调函数中提供了下面三个参数： name：指标名称 id：本地分析的id delta：当前值和上次获取值的差值 因此你只需要每次上报 delta (当前值和上次获取值的差值)，而不需要报告新值。

    2.1K31

    深度剖析浏览器渲染性能原理，你到底知道多少

    为了保证页面的渲染效果，需要充分了解浏览器是如何处理HTML/JavaScript/CSS的。 渲染流程分为几步？ ?...优化 JavaScript 的执行效率 降低样式计算的范围和复杂度 避免大规模、复杂的布局 简化绘制的复杂度、减少绘制区域 优先使用渲染层合并属性、控制层数量 对用户输入事件的处理函数去抖动（移动设备）...这种绘制方式的好处是，使用transform来实现移动效果的元素将会被正常绘制，同时不会触发其他元素的绘制。...减少绘制区域 浏览器会把相邻区域的渲染任务合并在一起进行，所以需要对动画效果进行精密设计，以保证各自的绘制区域不会有太多重叠。...这个响应过程是不需要主线程参与，不会导致JavaScript、布局和绘制过程发生。 ?

    1.4K20

    看不完的那种！前端170面试题+答案学习整理（良心制作）

    它有三个属性： 1. border-box表示背景从边框开始绘制 2. padding-box表示背景在边框内部绘制 3. content-box表示背景从内容部分绘制 background-origin...27.如何用原生JavaScript实现jquery的ready方法 $(document).ready()在dom绘制完毕后就执行，而不必等到页面加载完毕。...BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。...重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 触发重绘的条件：改变元素外观属性。...它和async的区别是，同样在HTML解析期间下载外部的js文件，但是下载完成后不会立即执行js脚本文件，而是等到HTML解析完成后才执行它。

    11.5K50

    前端性能优化之谈谈常见的性能指标及上报策略

    /dom/mutationobserver.html 注意 FP与FCP这两个指标之间的主要区别是：FP是当浏览器开始绘制内容到屏幕上的时候，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻...相比之下，FCP指的是浏览器首次绘制来自DOM的内容。例如：文本，图片，SVG，canvas元素等，这个时间点叫FCP。 FP和FCP可能是相同的时间，也可能是先FP后FCP。...然后，自定义一个计算公式，比如根据元素的类型进行权重取值(div 权重1，img 权重2等), 然后取元素与可视区域的交叉区域面积、可见度、 权重值之间的乘积为元素评分。...FID 含义 FID，全称 First Input Delay，翻译为首次输入延迟，是测量用户首次与您的站点交互时的时间（即当他们单击链接/点击按钮/使用自定义的JavaScript驱动控件时）到浏览器实际能够回应这种互动的时间...(click/touch/keydown)绑定通用统计逻辑事件,开始调用时从event.timeStamp取开始处理的时间(这个时间就是首次输入延迟时间)，在事件处理中注册requestIdleCallback

    2.8K10

    CSS animation和transition的性能探究

    这两个线程一起工作完成绘制页面的任务： 主线程 合成线程 主线程需要做的任务如下： 运行Javascript 计算HTML元素的CSS样式 layout (relayout) 将页面元素绘制成一张或多张位图...在很长的一段时间内，主线程都在忙于运行Javascript和绘制大型元素。...当它忙碌的时候，它就没空响应用户的输入了。 换个角度说，合成线程一直在尝试保证对用户输入的响应。它会在页面改变时每秒绘制60次页面，即使页面还不完整。...那么为什么transform的动画会和height的动画差别这么大呢？ 依据规范，CSS transform属性并不会触发当前元素或附近元素的relayout。...设计意图 所以这是否意味着我们不应该使用height的动画呢？ 当然不是。有时这就是设计的需求，并且动画也可以足够快。可能你的元素是隔离的，并且不会导致其他部分的页面触发relayout。

    1.4K10

    要实现60FPS动画, 你需要了解这些

    JavaScript: 执行 JavaScript 来触发一些视觉变化的效果 Style: 计算元素匹配的 css 选择器, 应用各规则计算元素的最终样式 Layout: 根据元素的样式, 计算元素占据的空间大小和在屏幕中所处的位置...Paint: 向元素的可视部分填充像素, 包括文本 / 图像 / 边框 / 阴影, 绘制一般是在多个层上完成的 Composite: 将不同的层按正确的顺序绘制到屏幕上 要保证60FPS, 需要在 16ms...CSS 动画省略了 JavaScript 执行耗时, 只用了 0.49ms 的时间就完成了一帧的绘制 接下来思考一个问题, 如果主线程被阻塞了, CSS动画会有什么表现呢?...image 利用硬件加速优化 CSS 动画 使用硬件加速是很简单的, 只需要把动画中变化的属性, 从 margin-left 改为 transform 即可 @keyframes animate {...使用硬件加速后, 绘制过程将不再占用主线程, 直接在 GPU 上完成 因此, 点击按钮阻塞主线程, 也并不会影响动画, 你可以亲自试一试 使用 JS 动画 首先使用 setInterval 实现动画循环

    1.3K10

    【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    绘制渲染树(Painting) 简单解释一下，通过请求得到的 HTML 经过解析（HTML parser）生成 DOM Tree。...如果内容不会改变，那么就没有必要重绘(repaint)层。 这样做的意义在于：花在重绘上的时间可以用来做别的事情，例如运行 JavaScript，如果绘制的时间很长，还会造成动画的故障与延迟。...层在第一次被绘制出来之后将不会被改变，但对于 Web 动画，页面的 DOM 元素是在不断变换的，如果层的内容在变换过程中发生了改变，那么层将会被重绘（repaint）。...总结 那么浏览器是如何从 DOM 元素到最终动画的展示呢？...改变元素的 width 可能比改变其 transform 要多一些开销。如 box-shadow 属性，从渲染角度来讲十分耗性能，原因就是与其他样式相比，它们的绘制代码执行时间过长。

    2.6K70

    面试题之从敲入 URL 到浏览器渲染完成

    它会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url ，找到同输入的地址很匹配的项，然后给出智能提示，让你可以补全 url 地址。...布局 render 树（ Layout / reflow ），负责各元素尺寸、位置的计算 5. 绘制 render 树（ paint ），绘制页面像素信息 6....2.5.1 构造 DOM 树 浏览器在解析html文件时, 是WebKit 中的 HTML 解释器的将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。具体过程如下 ： ?...当网页有用户交互或者动画等动作的时候，通过 CSSDOM 等技术，JavaScript 代码同样可以非常方便地修改 CSS 代码，WebKit 此时需要重新解释样式并重复以上这一过程。...布局计算是一个递归的过程，因为一个节点的大小通常需要先计算它的子女节点的位置，大小等信息。 当用户 网页的动画、翻滚网页、JavaScript 代码通过 CSSDOM 等操作时还会有重新布局。

    74710

    现代浏览器探秘(part3)：渲染

    HTML标准（https://html.spec.whatwg.org/）将HTML文档解析为DOM。 你可能已经注意到，将HTML提供给浏览器从不会引发错误。 例如，缺少结束标记是有效的HTML。...图8：页面元素按HTML标记的顺序出现，会导致错误的渲染图像，因为没有考虑z-index 在此绘制步骤中，主线程遍历布局树以创建绘制记录。...绘制记录是绘制过程的一个注释，如“背景优先，然后是文本，最后是矩形”。 如果你使用JavaScript绘制了元素，那么可能对此过程很熟悉。 ?...图10：DOM + Style，布局和绘制树的生成顺序 如果要为元素设置动画，则浏览器必须在每个帧之间运行这些操作。...图13：在动画帧的时间轴上运行的较小的JavaScript块 合成 你会如何绘制一个页面？ 现在浏览器知道文档的结构，每个元素的样式，页面的几何形状和绘制顺序，它是如何绘制页面的？

    1.4K10

    vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

    如何使用Vue：基本结构:1、引入Vue的核心JS文件2、准备Dom结构3、实例化组件通过el属性，挂载元素，绑定id为app的html元素通过data属性，定义数据，可以在html代码段中显示的数据4...==特色:1:内容提前判断为空的功能,红色字显示,且无法实现创建功能,只有全部符合要求才可以创建用户2:创建的用户自动追加到最后一行数据3:所有数据都存储在组件data中,body标签中没有任何数据,即都是从...挂载元素，绑定id为app的html元素 data:{ errorMsg:"", newPerson:{ name...>2.计算商品总价格特色:1:隔行换色2:数量为0时不会再减少,即不会出现负数3:删除某一行总金额钱数也会动态跟着改变4:初始表没有信息将不会显示表格,且左下方显示:暂无数据........《基础篇第4章》：使用vue脚手架创建项目5.vue2知识点：数据代理6.vue2知识点：事件处理7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理

    7900

    Canvas学习系列一：初识canvas

    1. canvas介绍 Canvas元素的出现，可以说开启的Web世界绘制动画，图形的大门，其功能非常强大 canvas 元素是HTML5中功能最强大的元素，它的能力主要是通过Canvas中的Context...该对象从canvas本身获取。...当我们用canvas的属性width，height时实际上我们同时修改了元素的大小与绘图表面的大小 当我们用CSS来设定时，是会修改canvas元素的大小，不会影响绘图表面的大小，这时浏览器就会对绘图表面缩放...，可以从 0 到 1 的区间内选择图片的质量。 　　...Chrome支持“image/webp”类型 尽管在默认情况下canvas对象是一副位图，但是并不是HTML中的img元素，所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲

    1.1K30

    IT课程 HTML基础 015_HTML5新特性

    、nav、section 新的表单控件，比如 calendar、date、time、email、url、search HTML5 元素用于在网页中绘制图形。... 元素基于 JavaScript 的绘图 API，可以用于创建各种图形，包括图表、图形、动画等。...SVG 图形还可以使用 CSS 和 JavaScript 进行操作和动画化。 Canvas 是基于 JavaScript 的绘图 API，可以创建位图图形。...这意味着 Canvas 图形不能无损缩放，但可以使用 JavaScript 创建更复杂的图形。Canvas 图形还可以使用 JavaScript 进行操作和动画化。...JavaScript 进行操作和动画化的图形 Canvas 适用于场景： 需要创建复杂图形的场景，例如游戏、动画 需要使用 JavaScript 进行复杂操作的场景 HTML5表单 HTML5 引入了一些新的输入类型和属性

    10710

    「一道面试题」输入URL到渲染全面梳理中-页面渲染篇

    绘制 或 栅格化 绘制 过程中有一种绘制叫 重绘，也就是下我们要说的 重绘(Repaint) 元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了...( Chrome ) 最常用的方式是 transform opacity 属性 / 过渡动画 (需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态) will-chang...最好用完后就释放) 等元素 还有以前的 flash 插件等等 通俗一点，假如我们给一个元素加了 transform 属性吧，那么该元素就不会影响也不会依赖文档流，也不会造成重绘...对您有帮助的话，动动小手，点个在看鼓励下吧，当然，个人理解，如有不正，欢迎指出，不胜感激 ❝参考 ( 参考了很多帖子，贴了三个认为比较好的，推荐大家看一看 ) 从输入URL到页面加载的过程？...hl=zh-cn#set-the-viewport [3]从输入URL到页面加载的过程？

    78220

    HTMLCSSJS 是如何在浏览器中，渲染成你看到的页面？【图解Chrome】

    将 HTML 文档解析成 DOM 是完全依照于 HTML 协议。并且在 HTML 协议中，浏览器不会对错误的 HTML 进行错误提示。例如，缺少结束的 标签时，这依然是一个有效的 HTML。...[image.png] 例如：z-index属性将改变元素的层级，在这种情况下，按 HTML 中编写的元素顺序进行绘制，将导致渲染结果和预期不符。...例如，如果布局树中的某些内容发生变动，则需要为文档中受影响的部分，重新生成“绘制记录”。 [image.png] 为元素设置的动画，浏览器必须在每一帧之间执行这些操作。...[image.png] 如图所示，在动画帧的时间轴上，运行较小的 JavaScript 块。 #合成（Compositing） #如何绘制一个页面？...如果需要再次计算不会或者重新绘制，则必须涉及到主线程。 小结 在这篇文章中，我们研究了从解析到合成的渲染流程，更多关于网站优化问题可以关注一下。

    4.9K50

    像素是怎样练成的

    也就是在上面架构图中的content ❞ 常见的类型包括文本、图像、HTML元素（包围文本的标记语言）、CSS（定义HTML元素的表现方式）和JavaScript（可以「动态修改上述所有内容」）。...❝可以看到「一个真实的网页是由数千行HTML、CSS和JavaScript代码的纯文本形式的所组成」 网页的「源代码是渲染器Renderer的输入」 ❞ ---- 何为像素Pixels ❝像素Pixels...色相的取值范围是0到360，饱和度和亮度的取值范围是0%到100% HSLA表示法 hsla(0, 100%, 50%, 0.5) 与HSL表示法类似，增加了一个Alpha通道来表示透明度，取值范围也是...0.0到1.0 ---- Chrome渲染过程是反复进行的 ❝渲染过程可以被描述为：将 HTML/CSS/JavaScript等数据类型进行转换，并且输入到 OpenGL 以被调用，以显示像素。...下面我们直接看看在页面中通过新增不同的动画效果而合成的视觉效果 通过移动构建的图层 通过滚动构建的视图 通过Zoom(缩放)构建的视图 ---- 合成线程接收输入事件 ---- 图层提升（Layer

    28420

    浏览器工作原理 - 页面

    动画依然能执行的原因） 分块 分层从宏观上提升了渲染效率，分块则是从微观层面提升了渲染效率。...利用分层技术优化代码 在于元素的几何形状变换、透明度或者缩放操作，如果使用 JavaScript 来写，会牵涉整个渲染流水线，所以 JavaScript 的绘制效率会非常低下。...这也是 CSS 动画比 JavaScript 动画高效的原因。...CSS 动画依然能继续执行 要尽量利用好 CSS 合成动画，如果能让 CSS 处理动画，就尽量交给 CSS 来操作 如果知道某个元素将来可能执行动画操作，也可以通过标记 will-change 将元素抽取单独图层...DOM 和 CSS 进行隔离，实现元素和样式的私有化 可以将影子 DOM 看做一个作用域，内部样式和元素不会影响到全局的样式和元素 在全局环境下，要访问影子 DOM 内部的样式或者元素需要通过约定好的接口

    86120

    浏览器原理学习笔记05—浏览器中的页面渲染

    布局树的结构是过滤不显示元素的 DOM 树结构，渲染引擎会进行样式计算和计算布局完成布局树的构建，最后进行绘制工作。...页面实现一些复杂的动画效果等，如果没有采用分层机制，从布局树直接生成目标图片，当每次页面有很小的变化时都会触发重排或重绘机制，"牵一发而动全身"严重影响页面的渲染效率。...即便如此，从计算机内存上传纹理到 GPU 内存的操作还是会比较慢，Chrome 在首次合成图块时会先使用一个低分辨率图片并显示，然后合成器继续绘制正常比例的网页内容，完成后替换当前显示的低分辨率内容。...[mq0vfh3g9w.png] 图片、音频、视频等文件不会阻塞页面的首次渲染，而 JavaScript、首次请求的 HTML 文件、CSS 文件会阻塞首次渲染(构建 DOM 需要 HTML 和 JavaScript...但是组件内的 JavaScript 是不会隔离的，因为 JavaScript 语言本身已经能够很好地实现组件化。

    1.5K199
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券