浏览器加载页面和渲染过程

参考：Web 前端面试指南与高频考题解析 浏览器相关
加载过程：

• 浏览器根据DNS服务器得到域名的IP地址
• 向这个IP的机器发送HTTP请求
• 服务器收到、处理并返回HTTP请求
• 浏览器得到返回内容

返回内容其实就是一堆HTML格式的字符串。

渲染过程：

• 根据HTML结构生成DOM树
• 根据CSS生成CSSOM
• 将DOM和CSSOM整合形成RenderTree
• 根据RenderTree开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染

为何要把CSS放在HTML头部？可以让浏览器尽早拿到CSS尽早生成CSSOM，然后在解析HTML之后可一次性生成最终的RenderTree，渲染一次即可。如果CSS放在HTML底部，会出现渲染卡顿的情况，影响性能和体验。

渲染过程中，如果遇到script就停止渲染，执行JS代码。因为浏览器渲染和JS执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染DOM冲突。

为何要把script放在HTML底部？JS放在底部可以保证让浏览器优先渲染完现有的HTML内容，让用户先看到内容，体验好。另外，JS执行如果涉及DOM操作，得等待DOM解析完成才行，JS放在底部执行时，才不会因为操作DOM而报错。

关于浏览器的整个流程，可以参考百度的多益大神的从输入 URL 到页面加载完成的过程中都发生了什么事情？