HTML的解析和css的回流与重绘的本身初略理解

时间 2019-11-11

标签 html 解析 css 回流本身理解栏目 HTML 繁體版

原文原文链接

在别人的博客上看到了一篇讲的很生动的网页解析HTML的原理，而且还初步的说了一下css在渲染时候出现的reflow（回流）和repaint（重绘）。如下为引用他人博客中的内容。渲染就是浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程。简单的说说本身对浏览器解析HTML时的基本过程吧。 css

1. 用户输入网址（假设是个html页面，而且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 　　2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件； 　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 　　4. 浏览器继续载入html中<body>部分的代码，而且CSS文件已经拿到手了，能够开始渲染页面了； 　　5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 　　6. 服务器返回图片文件，因为图片占用了必定面积，影响了后面段落的排布，所以浏览器须要回过头来从新渲染这部分代码； 　　7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它； 　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，忽然就少了这么一个元素，浏览器不得不从新渲染这部分代码； 　　9. 终于等到了</html>的到来，浏览器泪流满面…… 　　10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径； 　　11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得从新来过……”，浏览器向服务器请 　　求了新的CSS文件，从新渲染页面。

从上面的过程能够看出，当页面的布局发生变化时，浏览器会回过头来从新渲染，这就是页面为何会慢的一个缘由，当一个点的变化影响了布局，这就会使得要倒回去从新渲染，这个倒回去的过程称为 reflow（回流）。

reflow几乎是没法避免的，页面上有树状折叠和展开效果时，当咱们鼠标滑过或者是点击只要影响了页面的布局，让某些元素改变了占位面积，定位，边距等属性时，就会引发某个部分或者整个页面从新渲染。一般咱们是不能预计浏览器是会reflow哪一个部分的代码。 html

reflow问题也是能够优化的，减小reflow是颇有必要的，好比给图片设定好宽度和高度，这样就能够把图片的占位面积预约好。浏览器

另外还有一个是repaint（重绘），当只改变背景颜色，文字颜色，边框颜色而不改变页面布局时，浏览器就会repaint。repaint的速度明显比reflow的速度快。服务器

最后说一下，浏览器的不一样，解析的方式也会有差异。布局