简要地了解浏览器的渲染机制是前端开发人员的必修课之一。明白浏览器的渲染机制不仅能够帮助我们避免部分程序错误，还能够使我们开发的应用更快速、流畅，提升用户体验。
浏览器的整个渲染机制大致上可以通过上面这张图来简单表示。
1、在浏览器中输入URL。
2、浏览器向相应的服务器发送请求，接受响应。
3、HTML解析器自上而下地将HTML文件解析成一棵DOM树，树上的节点就是相应的元素。
4、CSS解析器将CSS解析成CSSOM树。
5、根据DOM树和CSSOM树构建相应的Render树（渲染树）。
6、Layout（布局）：计算出每个节点在屏幕中的位置。
7、Paint（绘制）：将内容显示在屏幕上。
补充：
1、DOM（Document Object Model）和CSSOM（CSS Object Model）是一种树形的数据结构。
2、渲染树不止是简单的DOM树+CSSOM树，DOM树中的head等节点和不需要渲染在页面上的节点（display:none）都不会出现在Render树中。
3、加载资源，如img、CSS文件等都是以异步请求的方式实现的，不会影响到元素的渲染。而请求JavaScript文件是先将渲染进程挂起，等加载完毕再继续渲染（又称渲染阻塞）。这是因为JS文件中可能出现很多DOM操作，这样能够提高性能。另外，加载JS文件最好写在HTML文件底部，否则容易导致对DOM的操作时，DOM还未生成。
除了渲染的流程之外，还有两个十分重要的概念：Reflow和Repaint
Reflow（回流）：当浏览器上某个位置的布局发生了变化，浏览器会重新从根部开始计算该节点的布局，重新验证并计算Render树。
Repaint（重画）：只改变页面元素的颜色、字体等不影响布局的属性时，浏览器会重新渲染Render树，进行重画操作。
两者的区别就是页面布局是否改变，比如：display:none会触发reflow，而visibility:hidden只会触发repaint。两者虽然都会降低页面加载速率，但是都是不可避免的，我们在设计的过程中应该减少两者发生的次数。
关于浏览器的渲染机制就简单的讲完了，不过这些都是毕竟基础、浅层的东西，我只是简单地一笔带过，只能算得上了解了一下，还有很多东西像元素是怎么成为DOM树的、增量异步reflow、DTD（Document Type Definition）等等更深层次的东西，以后有机会再讲吧！
另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog