reflow_js reflow_reflow js - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

浏览器渲染流程

页面的设计与实现之后，前端工程师就需要关注性能优化了。其中浏览器渲染机制是前端性能优化的关键，弄浏览器在背后做了什么，才能在明白如何优化。

03

浏览器渲染原理

00

您找到你想要的搜索结果了吗？

是的

没有找到

浏览器渲染原理

03

精读《web reflow》

网页重排（回流）是阻碍流畅性的重要原因之一，结合 What forces layout / reflow 这篇文章与引用，整理一下回流的起因与优化思考。

01

浏览器渲染原理

一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

02

【前端词典】几个有益的 CSS 小知识

因为浏览器首先会找到所有 p 标签，然后再向上查找包含 class 为 div 的元素。这样一来如果代码中有很多 p 标签，无疑是会做很多重复工作的。

04

前端页面优化，减少 reflow 的方法

如你改变了一个div的位置，或者是改变了这个div的width, height, position 或者布局类的样式。

01

性能优化之reflow和repaint

本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们.　　一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建成DOM树，DOM树是以document对象为根节点，包含所有的html标签，包括display： none隐藏的，也包括js动态添加的元素。解析html的同时，将css文件或者样式元素中的样式解析成CSS Rule Tree，解析时会去掉浏览器不能识别的样式。根据DOM树和CSSOM来构造Ren

08

highcharts 自适应div的宽度

如果窗口变化时，highcharts图表是自带自适应的，但是切换折叠菜单时，highchats图表并不自适应外层div的宽度。如何实现适应div的宽度？

02

浏览器重绘与回流

重绘与回流是浏览器渲染的时候进行的操作，当页面内容发生改变的时候，就会触发重绘或者回流

02

HTML中的重绘与回流

在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？　　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style Rules一起构建出了Render Tree，对于Render Tree的理解：Render Tree和DOM Tree类似，但是Render Tree能够识别样式，在Render Tree上，每一个node（节点）都有自己的Style（样式），但隐藏的节点或是不会用于显示的部分不会包含在Render Tree上。

02

浏览器渲染原理解析建议收藏

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：　　1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；　　2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；　　4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；　　5. 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；　　6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；　　7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个

（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；　　9. 终于等到了</html>的到来，浏览器泪流满面…… 　　10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；　　11. 浏览器召集了在座的各位

们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请　　求了新的CSS文件，重新渲染页面。
02

reflow和repaint（摘录自张鑫旭的翻译）

//正文开始关于回流(reflows)与重绘(repaints)，我已经在twitter和delicious上发布，但是并没有在演讲中提到或是以文章形式发布。第一次让我开始思考关于回流(reflows)与重绘(repaints)的问题是在和ParisWeb上的Mr. Glazman做一个firey交换的时候。我可能有一些顽固，但是我确实听了他的一些理论。 Stoyan和我开始讨论如何量化这个问题。展望性能社区，除了一些典型的黑盒实验外，需要与浏览器厂商有更多的合作。对于性能，浏览器制造者知道哪些是重

04

web前端优化之reflow(减少页面的回流)

1、什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。以

07

table布局的坏处

不要用table布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

01

记一次网易前端实习面试

很幸运地能收到网易的面试通知，就毫不犹豫翘了课去面试了hhhh~三点的面试，因为从来没去过那个中关村西北旺区，吃完饭早早就去了,想象中那里应该是繁华的地方hhhh，到了发现都在建设中，很多还在建设中，看到了网易旁边的百度和搜狐，都是长长的大楼或者是高高的建筑，满满大企业的既视感~一进网易楼就没网= =，在里面也没事干，就呆在外面看看前端的东西准备下，到2点40的时候跟前台说了下，一个网易年轻姐姐就带我上去了~

02

图形添加文本-ggfittext

今天是大年初三，想必小伙伴们都放假在家陪着爸爸妈妈，吃着家乡的饭，和家人一起过节，小编在这里给大家拜个年~祝大家新年新气象，新年好运气有福气，工作顺利，身体健康~

03

一次完整的 Web 请求和渲染过程以及如何优化网页

本文主要介绍访问一个网站时的流程，页面渲染过程，包括其中涉及到的概念。以及，我们如何去优化前端页面，让它访问速度更快。（critical rendering path最佳渲染路径）

01

前端各种优化

1.　　请减少HTTP请求　　基本原理：　　在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将

08

Web前端性能优化解决方案

在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。

01

webapp开发实战_html5开发手机app实例

从事单页相关的开发一年有余，期间无比的推崇webapp的网站模式，也整理了很多移动开发的知识点，但是现在回过头来看，webapp究竟是好还是不好真是一言难尽哟！

02

深入探讨前端UI框架

07

从输入url到页面加载完成发生了什么详解

这是一道经典的面试题，这道题没有一个标准的答案，它涉及很多的知识点，面试官会通过这道题了解你对哪一方面的知识比较擅长，然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解，从前端的角度出发，我觉得首先回答必须包括几个基本的点，然后在根据你的理解深入回答。

04

浏览器渲染页面与DOM相关常见的面试题以及问题

1.DOM Tree：浏览器将HTML解析成树形的数据结构，构建一颗DOM树，同时进行第三步。

03

现代浏览器的渲染流程

当浏览器的网络线程收到html文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

webApp开发心得「建议收藏」

从事单页相关的开发一年有余，期间无比的推崇webapp的网站模式，也整理了很多移动开发的知识点，但是现在回过头来看，webapp究竟是好还是不好真是一言难尽哟！

04

深入探讨前端UI框架

最近看riot的源码，发现它很像angular的dirty check，每个component ( tag )都保存一个expressions数组，更新时，遍历expressions数组，重新求值，对比旧值，如果有变更则更新DOM。

02

什么是回流与重绘 (Reflow & Repaint)

在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。

01

Web渲染和虚拟Dom

创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

01

浏览器渲染原理

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

01

会用 Performance 工具，就能深入理解 Event Loop

网页加载后，浏览器会解析 html、执行 js、渲染 css，这些工作都是在 Event Loop 里完成的，理解了 Event Loop 就能理解网页的运行流程。

02

页面中元素的锚点定位

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 >>

07

知识点总结

2.内部的Box垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠。）

03

重绘与回流_html回流重绘

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。也就是我们各种各样的Dom标签

02

Resize Observer 介绍及原理浅析

响应式设计指的是根据屏幕视口尺寸的不同，对 Web 页面的布局、外观进行调整，以便更加有效地进行信息的展示。我们日常生活中接触的很多应用都遵循响应式的设计。

04

CSS魔法堂：Transition就这么好玩

前言以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。属性介绍首先先我们简单粗暴了解transition属性吧！ transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;

05

CSS魔法堂：Transition就这么好玩

以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。

03

Web 性能优化-页面重绘和回流（重排）

常见的优化网络请求的方法有：DNS Lookup，减少重定向，避免 JS、CSS 阻塞，并行请求，代码压缩，缓存，按需加载，前端模块化…

02

浏览器渲染原理及流程

大多数设备的刷新频率是60Hz，也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。前端的用户体验给了前端直观的印象，因此对B/S架构的开发人员来说，熟悉浏览器的内部执行原理显得尤为重要。

03

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局（重要）4. 重绘与重排（重要）5. paint（绘制）6. composite（重要）7. 浏览器加载

身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。

04

浏览器原理

身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。

02

从 URL 输入到页面展现发生了什么

总体来说分为以下几个过程: 1、DNS解析 DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到I

04

前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

01

前端硬核面试专题之 HTML 24 问

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站。

02

前端性能优化小结

一个老生常谈的问题，算是一项任重而道远的工程，总的来看优化范围很广，但我们可以从单个点逐步切入，养成自动代入优化思维才是目的，这里只做简单记录一下。

01

让你的EditText删除表情比微信更高效--记一次android性能分析优化实战

自己在做SpEditTool：一个支持表情，@mention，#话题#等功能的EditText控件，这个项目的时候出现了一个很奇怪的问题

03

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

承接上一篇：【CSS3进阶】酷炫的3D旋转透视。最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开

07

有关网页渲染，每个前端开发者都该知道的那点事

【编者按】其实，有关网页渲染的文章很多，但是相关信息比较分散，且论述并不是很完整。如果要想对这个主题有个大致的了解，我们还得学习很多知识。因此，Web开发者Alexander Skutin决定写一篇文章。他相信，这篇文章不仅能帮助初学者，也能对那些想要刷新知识结构的高级前端开发者有所裨益。以下为译文网页渲染必须在很早的阶段进行，可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧，从而避免在实践的过程中遇到性能问题。这篇文章不会研究浏览器内部的详细机制

08

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将一起深究它俩的恩怨情仇，下次面试时我们可以回答得更出彩！

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭