首页 » 文章 » 文档 » 开发运行环境 » 从输入 url 到渲染出页面的整个过程

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

加载资源的形式

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

加载资源的过程

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

渲染页面的过程

  • 根据 HTML 代码生成 DOM Tree
  • 根据 CSS 代码生成 CSSOM
  • 将 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 最后

»开发运行环境

发表评论

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

Scroll to Top