认识达内从这里开始

一般情况下用户只关心网站是否能打开，至于打开网页的原理与过程并不关心，而对于程序员来说，只有掌握网页打开的原理才能更好的优化网站，下面我们就通过案例分析来简单了解一下具体情况吧。

对于线程化的解释器，字符流后的整个解释、布局和渲染过程基本会交给一个单独的渲染线程来管理(不是绝对的)。由于DOM树只能在渲染线程上创建和访问，所以构建DOM树的过程只能在渲染线程中进行。但是，从字符串到词语这个阶段可以交给单独的线程来做，Chrome浏览器使用的就是这个思想。在解释成词语之后，Webkit会分批次将结果词语传递回渲染线程。

这个过程中，如果遇到的节点是JS代码，就会调用JS引擎对JS代码进行解释执行，此时由于JS引擎和GUI渲染线程的互斥，GUI渲染线程就会被挂起，渲染过程停止，如果JS代码的运行中对DOM树进行了修改，那么DOM的构建需要从新开始

如果节点需要依赖其他资源，图片/CSS等等，就会调用网络模块的资源加载器来加载它们，它们是异步的，不会阻塞当前DOM树的构建

如果遇到的是JS资源URL(没有标记异步)，则需要停止当前DOM的构建，直到JS的资源加载并被JS引擎执行后才继续构建DOM

解析CSS构建CSSOMTree

CSS解释器会将CSS文件解释成内部表示结构，生成CSS规则树，这个过程也是和DOM解析类似的，CSS字节转换成字符，接着词法解析与法解析，后构成CSS对象模型(CSSOM)的树结构

构建渲染树(RenderTree)

等DOMTree与CSSOMTree都构建完毕后，接着将它们合并成渲染树(RenderTree)，渲染树只包含渲染网页所需的节点，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。

渲染(布局，绘制，合成)

计算CSS样式;

构建渲染树;

布局，主要定位坐标和大小，是否换行，各种positionoverflowz-index属性;

绘制，将图像绘制出来。

这个过程比较复杂，涉及到两个概念:reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

这里Reflow和Repaint的概念是有区别的：

(1)Reflow：即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树。

(2)Repaint：即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候(例如，背景色，边框颜色，文字颜色等)，此时只需要应用新样式绘制这个元素就可以了。

回流的成本开销要高于重绘，而且一个节点的回流往往回导致子节点以及同级节点的回流，所以优化方案中一般都包括，尽量避免回流。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。