登录  /  注册
首页 > web前端 > js教程 > 正文

前端浏览器渲染的步骤介绍

不言
发布： 2019-01-14 09:40:10
转载
1908人浏览过

本篇文章给大家带来的内容是关于前端浏览器渲染的步骤介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

2401373595-5c3b1c035a2fe_articlex.png

浏览器渲染一共有五步

  • 处理 HTML 并构建 DOM 树

  • 处理 CSS构建 CSSOM 树

  • 将 DOM 与 CSSOM 合并成一个渲染树

  • 根据渲染树来布局，计算每个节点的位置

  • 调用 GPU 绘制，合成图层，显示在屏幕上

第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染

重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大

重绘（Repaint）

重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘。

常见的引起重绘的属性:

color
border-style
visibility
background
text-decoration
outline
box-shadow
登录后复制

回流（Reflow）

回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

常见引起回流属性和方法:

添加或者删除可见的DOM元素；
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值

回流影响的范围

全局范围：从根节点html开始对整个渲染树进行重新布局。
局部范围：对渲染树的某部分或某一个渲染对象进行重新布局

以上就是前端浏览器渲染的步骤介绍的详细内容，更多请关注php中文网其它相关文章！

相关标签：
浏览器渲染
来源：segmentfault网
上一篇：JavaScript中异步编程的方法有哪些？JavaScript异步编程的方法介绍 下一篇：JavaScript中防抖节流的详细介绍（代码示例）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
根据用户输入从数据集中筛选数据的问题 以下是我迄今为止尝试过的概述：我有一个searchInput元素，用户可以在其中输入他们的搜索查询。当searchInput的值发生变化时，我使用一个函数来处理过滤过程。过滤函数循...
P粉903969231来自于2023-09-20 09:37:52
0 1 257
Axios GET 请求被前端中的某些内容修改 在这个动作中，我在URL“api/media/action”上有一个基本的GET响应exportconstlistWorks=async(dispatch)=>{try{di...
P粉195200437来自于2023-09-20 08:39:45
0 1 197
如何正确使用计算器？ :root{--offset:30px;}.grid-cols-custom{/*使用自定义属性和calc()计算列宽*/grid-template-columns:calc((4...
P粉046878197来自于2023-09-19 23:56:39
0 1 272
这节课的意思是依赖注入等于脱了裤子放屁？ 这节课的意思是依赖注入等于脱了裤子放屁？
小多来自于2023-09-20 22:24:24
0 0 40
使用WebRTC和Javascript录制多个标签页 我目前能够录制一个标签页，并从其流创建一个媒体录制器。我希望能够切换到另一个标签页并在另一个标签页上继续进行同样的录制，然后最后提供一个拼接好的视频。我该如何实现这个？
P粉571233520来自于2023-09-19 23:07:01
0 1 189
重置“startButtonGame”的可见性是唯一的问题；其他一切都正常工作 我正在开发一个21点游戏。到目前为止，除了这个小细节之外，一切都正常。基本上，开始游戏按钮只应在游戏之前和游戏之后可见。我没有问题，可以将其设置为隐藏，但是当我完成一局游戏时，它不...
P粉614840363来自于2023-09-19 22:02:31
0 1 253
作为主要部分使用的图片的最佳实践是什么？ 我有一个使用图片作为主要部分的部分。问题是图片对于手机、平板电脑和台式机来说太大了，有1MB。我担心图片太大了。我想知道在使用图片作为主要部分背景时的最佳实践。谢谢您的友善建议和意...
P粉727416639来自于2023-09-19 20:54:07
0 1 211
PHP：比较数组的数组并在值匹配时创建新数组 这里是一个示例数据集$all_items=array($a1=array(name=>"item1",description=>"item...
P粉323224129来自于2023-09-19 19:48:02
0 1 222
关闭：MySQL更新查询以增加特定值 如何使用相同的值增加更新mysql列Id名称更新A（期望）更新B（期望）1AAAAA112AAAAA123AAAAA134BBBBB215BBBBB226CCCCC317CCCCC...
P粉129275658来自于2023-09-19 18:36:24
0 1 275
页面像React开发 我只是想要一个像react.dev一样的文档页面来记录我的个人项目，但问题是我找不到任何教程等。我该如何构建这样的网页。现在大多数科技公司都使用相同的设计。我计划在左侧有一个导航菜...
P粉309989673来自于2023-09-19 18:04:28
0 1 233
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部