从输入 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 最后

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注