关于范启凤
范启凤老师，麦子学院金牌讲师，曾参与华为大数据研发，网站优化等大型项目，5年web前端开发工作经验，对HTML5和CSS3有独特见解；多次在腾讯课堂授课，精通HTML，CSS网页重构、Java应用编程开发及页面交互等，所讲授课程获得学生的一致好评!
我们都知道，前端开发工程师需要保证我们的页面兼容各大浏览器，因此对于前端新人来说，深度了解浏览器的工作原理还是很有必要的。
浏览器打开网页时发生了什么？
021yin.com ，然后敲回车键，浏览器接下来就会把这个UIL里面的域名拿出来然后做DNS解析，这个DNS解析先会在浏览器的缓存里面找，因为这是一个加速的过程，然后是在本机的操作系统里面，然后在局域网的路由器，然后在公司网的路由器，然后运行。
那么解析完DNS找到这个目标，就需要在去请求资源，请求资源在上节这些内容。
浏览器在解析里面有几个比较细的步骤，浏览器会构建DOM数，这里面会根据等。
在DOM的构建过程中，浏览器会同时去构造CSSOM，就是说它会根据浏览器默认的样式和用户引用的样子，然后根据这个CSS的优先级规则来构建一个跟DOM树很类似的一个对象模型的一个树，然后在接下来的一步浏览器会把DOM树跟CSSOM树合并起来，就这个里面也有一个比较复杂的算法，然后生成一个Render树，这个Render树里面就包括每一个节点，它有什么样式，它的布局是什么样的，它应该在页面的什么位置，这个里面就涉及到有一个必须跟前端了解的，就是CSS的匹配规则，就是说把CSSOM树和DOM树合并的时候，就生成Render树的时候，哪一条CSSOM树对应DOM树的节点，就是怎么能匹配上，一个CSS它的匹配是从右往左的。
那么在Render构建完成之后，这个时候对于浏览器来说，基本就处于文档的状态了，这个时候在大家的页面上有时候会用js去操作一些，在浏览器整个运行过程中，文档怎么变化，什么时候做什么事情都有很明确的规定。
脚本是因为它本身是有可能会修改dam的，所以脚本放在Render树构建完之后的这个步骤，可能不是很合适，但是放在前面的任何一个位置也不合适，这个里面涉及到的内容就是，这个脚本是阻塞的还是非阻塞的，一般来说，默认的脚本都是阻塞的，也就是说浏览器在解析标签，如果没有显示的标明，标签的可以延迟的，如果是外联的标签，那需要先下载，后面的工作先暂停，然后下载完在执行下一步。
然后，基于这种行为，就是在页面上有一种优化手段，就是要把外部js加载，把它放在页面的底部，然后等它DOM树构建完成之后在去下载。还有一种就是延迟你的js加载，关于脚本的介绍就到这里。
像CSSOM树和DOM树合并在一起，变成一个Render树，然后算好布局之后，接下来浏览器就可以渲染页面了。
渲染页面
也就是说把这个页面在屏幕上输出来，用户可以看到。
如图，这个图是跟大家讲解DOM树构建的过程，浏览器就是通过开始的标签。
CSSOM树的构造跟这个也非常的类似，只不过它这个就相当于tokenizer的来源，包含了外联和内联的样式，它实际上构建CSSOM树的时候，应该是没有使用浏览器默认的样式，应该是构造渲染数的时候，才会把默认的加上。
如图，DOM树、CSSOM树和Render树的关系，那么浏览器拿到DOM之后，如果发现里面有引用body的资源，它会把这些都归到CSSOM，让它构造成一个这样的树（如图中橙色部分），然后DOM结构就是图中蓝色部分的，那么render树就是把CSSOM树和DOM树合并起来，因为CSSOM里面有继承的规则，那么section1它也有这种字体，然后它的color是black，那么section2它也有种字体，它的color是while，那么对于section1里面的container和section2里面的container，section1里面的它是visibility hidden。
这个就是说它实际是说这三个数之间的关系，就是上面的蓝色和橙色构造成下面这个白色的，然后在CSS里面，也就是在渲染数里面，displaynone和visibility的区别就是在这里，就是一个出现在里面一个没出现在里面，那么关于浏览器工作的基本过程就介绍到这里。
Repaint+Reflow
上一张图里面引发了一个很有趣的话题就是“Repaint+Reflow”那么他们究竟是什么含义，因为这两个概念对于前端的同学来说是非常的重要，也就是说天天跟浏览器打交道，你必须要知道它的含义以及他们的影响和如何让规避它。
首先我们来看“Repaint”，准确的来说它应该是页面上的元素，皮肤类的外观改变引发的重新渲染，如背景色，这些东西的改变并不会引发元素在页面的位置、大小、它的盒模型发生变化，就是只需要重新渲染，不需要重新计算这个元素的复元素或者是它的子元素在什么位置，因为这种计算相当于是把整个DOM里面的东西从头在来了一遍，所以这种计算是非常耗时的，这个会非常严重的影响页面的性能，也就是说是页面性能的一个非常重要的影响因素。
那么“Reflow”是一个比“Repaint”更严重的这样一个现象，也就是说以页面元素的位置、大小、盒模型等发生变化，那么就需要重新布局，就是你的CSSOM可能就已经发生变化了，或者你的DOM树本身也已经发生变化了，那么你就需要重新生成一个render，然后在页面上全新的进行渲染。
那么“Repaint”和“Reflow”通常在哪些情况下会发生呢？
比如说页面滚动的时候，有一些元素会变得不可见，有一些元素会变得可见，那么你在页面滚动的时候就要做一些设计，那么你可以给它加一个函数节流，还有一个就是页面的缩放，这个跟页面滚动非常的相似。
还有就是添加样式，如果在页面上添加了新的样式，比如不管是inland还是外部引用的，它都会引发CSSOM树的变化。
还有一个就是添加样式里面有一个比较重要的，就是有人会认为修改字体不会引发，但是实际上会引发，因为不同字体在页面上输出的实际渲染的模式肯定是不一样的。
除了添加样式还有一个非常重要的就是操作DOM，这个操作DOM就主要是指用js去操作DOM，包括节点的增加、删除，还有DOM节点的属性的改变，因为有一些属性的改变会影响元素的样式。
还有一种就是直接修改元素的style，那么操作DOM的这一类操作怎么最小化，就是尽量减少页面的重复，一个常见的做法就是说把你的操作批量化，就是不应该是这种顺序的每一条语句都去修改一下DOM结构，而是批量的去操作。
还有另外一个就是去计算某一个元素的宽高还有元素所处的位置，这个会影响是因为相当于把元素重新排版一遍，然后来计算它的宽高位置。