前言

工作了也快一年多了，在能够完成工作的基本需求之余，发现自己有点小安逸了。但是最近在看了下一些面试题之后，又发现自己其实了解的东西其实非常少，甚至可以说入门都达不到,想着记录下自己了解知识的过程，也算是对自己的一个督促，希望自己也能坚持下去。

下面以问答的形式编写吧

网页被解析的过程？

   一个网页url从输入到浏览器中，到显示经历了什么呢?首先浏览器会向服务器请求静态资源，实际上请求下来的是一个index.html文件，然后了浏览器会对这个文件进行从头到尾的解析，当解析到link元素（css）的时候，会去请求相应的css文件（下载css文件），解析到script（js）元素的时候，会去请求相应的js文件（下载javascript文件）。
   

渲染引擎如何解析页面？

默认情况下服务器会给浏览器返回index.html文件，先解析HTML，在解析的过程中就会构建DOM Tree。遇到link元素后，浏览器下载对应的css文件和解析css文件，解析出相应的规则树（不会阻塞html解析）。当有了DOM Tree和CSS Tree后，两者结合构建Render Tree。 注意点:link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程？因为Render Tree在构建时，需要对应的CSSOM Tree； Render Tree和DOM Tree并不是一一对应的关系，例如display：none的时候，就不出现在Render Tree。 然后是在渲染树（Render Tree）上运行布局以计算每个节点的几何体,最后是将每个节点绘制到屏幕上。

回流和重绘

三个概念：1.布局：第一次确定节点的大小和位置。
         2.之后对节点的大小，位置修改重新计算称之为回流。（reflow）
引起回流的情况：1.DOM结构发生改变（添加新的节点或者移除节点）2.改变了布局（修改了width，height，padding，font-size等）3.窗口resize（修改窗口的尺寸）4，调用getComputedStyle方法获取尺寸，位置信息等。
重绘repaint：
    第一次渲染内容称之为绘制，之后重新渲染称之为重绘。例如修改背景色，文字颜色,边框颜色，样式等。

总结：回流一定会引起重绘，所以回流是一件很消耗性能的事情，开发中要尽量避免回流。 方式：1.修改样式尽量一次性修改.2.尽量避免频繁操作DOM。3.避免通过getComputedStyle获取尺寸，位置等信息。4.对某些元素使用position的absolute或者fixed。