本文主要介绍访问一个网站时的流程，页面渲染过程，包括其中涉及到的概念。
以及，我们如何去优化前端页面，让它访问速度更快。（critical rendering path最佳渲染路径）
打开浏览器，输入URL
DNS解析
完成TCP握手
发送HTTP请求
接收HTTP响应结果
浏览器解析HTML，CSS
构建对象模型，DOM tree 和 CSSOM tree，组成render tree
浏览器渲染页面(布局)
HTTP1.x和HTTP2
在 HTTP/1.x 中，如果客户端要想发起多个并行请求以提升性能，则必须使用多个 TCP 连接。 这是 HTTP/1.x 交付模型的直接结果，该模型可以保证每个连接每次只交付一个响应（响应排队）。 更糟糕的是，这种模型也会导致队首阻塞，从而造成底层 TCP 连接的效率低下。
也就是说在目前的HTTP1.X的协议下，浏览器对资源的并发请求个数是有限制的。
等到HTTP2到来的时候，通过二进制分帧层进行优化。
HTTP/2 中新的二进制分帧层突破了这些限制，实现了完整的请求和响应复用：客户端和服务器可以将 HTTP 消息分解为互不依赖的帧，然后交错发送，最后再在另一端把它们重新组装起来。
优势：
并行交错地发送多个请求，请求之间互不影响。
并行交错地发送多个响应，响应之间互不干扰。
使用一个连接并行发送多个请求和响应。
但这些并不是我们能够优化的部分。
基于现在的网络条件，我们可以采用多个CDN地址，进行不同源的并发改善优化。
这篇文章主要介绍，第六步开始我们可以优化的部分，也就是解析HTML，CSS。
浏览器是如何构建对象模型的？
字节 → 字符 → 令牌 → 节点 → 对象模型。
HTML标记与CSS标记都会经历上述过程，HTML变为DOM，CSS变为CSSOM
render tree构建，布局以及绘制
构建好render tree之后，会过滤掉display:none 这种无需渲染的节点。将tree渲染到页面。
值得注意的是，每一次的dom或者造成布局影响的变动，都会触发 reflow(回流/重排)，会消耗很大的页面资源。
reflow是由于dom或者布局的变动而触发，如修改了dom位置，或是宽高，margin, padding等。
repaint是样式风格修改，不影响布局时触发，如改了颜色之类的
提高网页渲染速度，主要可以减少
DOM, CSSOM处理， 合并render tree，以及 减少reflow的次数
前端页面优化，减少reflow的方法这里可以看看如何减少reflow的次数
对CSS的优化
根据上面的内容我们知道了，想要渲染页面必须有render tree，而render tree是由DOM tree以及CSSOM tree组成的。
默认下，CSS会阻塞渲染页面
我们通过@media等，可以让CSS标记为不阻塞渲染
不论是否阻塞渲染，浏览器都会将CSS资源下载到客户端
所以，为了让页面更快的渲染，*我们必须要尽早的将CSS资源下载到我们的客户端。*以及使用@media进行优化
为了获得最佳性能，你可以使用一些inline css，这样不会去CDN获取资源，从而造成多次往返
对JS的优化
当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，将控制权移交给 JavaScript 引擎；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建。
这也就是为什么我们需要将script tag放在页面的底部。
/React APP一般会如此使用。因为React需要将整个APP 渲染到一个DOM节点上，如果放置在DOM之上，会造成React找不到该渲染的节点，从而报错/
而我们一般不建议在render tree刚刚建立的时候，就使用JS去操作DOM，从而造成reflow，也就是说，希望JS不要成为render tree的一部分。这个时候，我们将