HTML页面渲染及优化详解
概括的说，关键路径绘制包括：了解网页渲染过程，有助于我们优化网页，提示渲染速度。
渲染树是DOM和CSSOM的组合。它是一棵树，代表最终将在页面上呈现的内容。这意味着它仅捕获可见的内容，并且不包括例如使用CSS被CSS隐藏的元素 display： none 。
浏览器解析 浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。
构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）\x0d\x0a这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。
还有css、js等一类文本文件也可以用一些软件进行压缩。服务端可以用gzip模块进行压缩传输。第三，优化页面相关的HTML、css、js代码，主要还是js代码，这样能够加速浏览器的渲染速度，也能起到加快页面加载的作用。
浏览器加载和渲染html的顺序 IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
dom渲染原理
两个相同组件产生类似的 DOM 结构，不同的组件产生不同的 DOM 结构； 对于同一层次的一组子节点，它们可以通过唯一的 id 进行区分。算法上的优化是 React 整个界面 Render 的基础，保证了整体界面渲染的性能。
虚拟DOM的解决方式是，通过状态生产一个虚拟状态Dom，然后根据虚拟节点进行渲染，假如是首次渲染的就会直接渲染，但是二次往后的话就是进行虚拟状态树的对比，只更新不同的地方。
原理 当dom渲染时，会createElm创建元素，创建元素后会进行初始化，初始化组件的时候内部还有组件，会不停的去渲染，所以它的渲染顺序是先父后子，完成的顺序是先子后父。
网页渲染过程
1、这个过程中有两个重要的过成是回流和重绘。计算盒模型的大小位置还有解析颜色字体等 属性，这些都确定下来的时候开始repain，合成一个rendertree渲染树，render-tree中必须同时存在dom和cssom，浏览器开始布局并渲染到屏幕上。
2、一个完整的渲染流程一般都经历如下过程：定义： 当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫 重排 。
3、web-socket、ajax等，这个过程通常是为了获取数据 setTimeout、setInterval、Promise等宏任务、微任务队列 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
4、渲染树中的每一个节点都存储有对应的css属性。一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。