从输入 url 到渲染出页面的整个过程

参考：https://www.cnblogs.com/liutianzeng/p/10456865.html

1、浏览器的地址栏输入URL并按下回车
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期
3、DNS解析URL对应的IP
4、根据IP建立TCP连接（三次握手）
5、HTTP发起请求
6、服务器处理请求，浏览器接收HTTP响应
7、渲染页面，构建DOM树
8、关闭TCP连接（四次挥手）

加载资源的形式

• html 代码
• 媒体文件，如图片，视频等
• javascript css 等

加载资源的过程

• DNS 解析：域名 -> IP 地址
• 浏览器根据 IP 地址向服务器发起 http 请求
• 服务器处理 http 请求，并返回给浏览器

渲染页面的过程

• 根据 HTML 代码生成 DOM Tree（文档对象化模型树）
• 根据 CSS 代码生成 CSSOM（CSS 对象模型）
• 将 DOM Tree 和 CSSOM 整合形成 Render Tree（渲染树）
• 根据 Render Tree 渲染页面
• 遇到 <script /> 则暂停渲染，优先加载并执行 JS 代码，完成再继续
• 直至把 Render Tree 渲染完成

举例

<div id="container">default</div>
<script>
    // 暂时渲染，先执行 js 代码
    document.getElementById('container').innerHTML = 'update by js'
</script>
<p> test </p>

建议把 css 放在 head 中，把 js 放在 body 最后