HTML

从输入 URL 到页面加载完成,发生了什么?

  1. 浏览器根据 DNS 服务器得到域名的 IP 地址

    • DNS:负责解析域名,返回正确的IP。
    • DNS的用法:A解析,CNAME解析
    • DNS污染
  2. 向这个 IP 的机器建立TCP连接
  3. 向服务器发送 HTTP 请求
  4. 服务器收到、处理并返回 HTTP 请求
  5. 浏览器得到返回内容
  6. 浏览器渲染页面

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

为何要将 CSS 放在 HTML 头部?为何要将 JS 放在 HTML 底部?

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

渲染过程中,如果遇到<script>就停止渲染,执行 JS 代码。因为浏览器渲染和 JS 执行共用一个线程,而且这里必须是单线程操作,多线程会产生渲染 DOM 冲突。待<script>内容执行完之后,浏览器继续渲染。

JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容,让用户先看到内容,体验好。另外,JS 执行如果涉及 DOM 操作,得等待 DOM 解析完成才行,JS 放在底部执行时,HTML 肯定都解析成了 DOM 结构。JS 如果放在 HTML 顶部,JS 执行的时候 HTML 还没来得及转换为 DOM 结构,可能会报错。

DOM 和 HTML 区别和联系

DOM BOM 和XML

DOM,全称Document Object Model。DOM的本质(MDN里写的很明确了)是API。树形数据结构的XML和HTML,符合DOM规范,就能被DOM API操作。

树形结构是属于XML和HTML等这样结构化的东西,DOM只是提供一种方法去操纵他。

什么是HTML语义化

不要滥用

标签,而是转而使用
最后修改:2022 年 07 月 15 日
如果觉得我的文章对你有用,请随意赞赏