HTML ​

如何理解 HTML 语义化？ ​

HTML 语义化是指使用正确的 HTML 标签来标记内容，使内容结构清晰，便于开发者理解和维护，同时也有助于搜索引擎（SEO）理解和索引页面内容。HTML 语义化的关键在于选择最能代表其含义的标签。

HTML 语义化的优点包括： ​

• 提升可访问性：屏幕阅读器和其他辅助技术能够更有效地解析和呈现内容。
• 有利于 SEO：搜索引擎能更好地理解页面内容，从而可能提高搜索引擎排名。
• 增强代码的可读性和可维护性：使用合适的标签，使代码结构清晰，易于理解和修改。
• 减少 CSS 和 JavaScript 的依赖：通过合理的 HTML 结构，可以简化或减少对 CSS 和 JavaScript 的需求。

script 标签中 defer 和 async 的区别？ ​

在 HTML 中，<script>标签用于嵌入或引用 JavaScript 代码。defer 和 async 属性都是用来异步加载 JavaScript 文件的，但它们之间有几个关键区别：

defer 属性 ​

执行时机： defer 脚本会延迟到整个文档解析完成后、DOMContentLoaded 事件触发前执行。多个 defer 脚本会按照它们在文档中出现的顺序执行。

兼容性： 所有现代浏览器都支持 defer 属性。

用途： 适用于那些不依赖于 DOM 元素，但需要在文档解析完成后立即执行的脚本。

async 属性 ​

执行时机： async 脚本会在下载完成后立即执行，不会等待文档解析完成，也不会按照它们在文档中出现的顺序执行。

兼容性： 所有现代浏览器都支持 async 属性。

用途： 适用于那些不依赖于其他脚本或 DOM 元素，且可以独立执行的脚本。

总结： ​

script ： 会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。

async script ： 解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。

defer script： 完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

从浏览器地址栏输入 url 到请求返回发生了什么 ​

当用户在浏览器地址栏输入URL并按下回车键后，会发生以下一系列步骤：

• URL解析：浏览器会解析输入的URL，包括协议（如http、https）、域名、端口（默认80或443）、路径和查询字符串等。
  • 强缓存
  • 协商缓存
• DNS查询：如果URL中的域名不是IP地址，浏览器会进行DNS查询，将域名解析为对应的IP地址。
• 建立TCP连接：浏览器通过TCP/IP协议与服务器建立连接，通常使用HTTP或HTTPS协议。
• 发送HTTP请求：浏览器向服务器发送HTTP请求，请求中包含请求方法（如GET、POST）、URL、请求头等信息。
• 服务器处理请求：服务器接收到请求后，根据请求的内容进行相应的处理，如读取文件、执行数据库查询等。
• 服务器响应：服务器处理完请求后，会向浏览器发送HTTP响应，响应中包括状态码（如200 OK）、响应头和响应体（如HTML、JSON等）。
• 浏览器解析渲染：浏览器接收到响应后，会解析HTML文档，构建DOM树，然后根据CSS和JavaScript进一步渲染页面。
• 断开 TCP 连接
• 页面显示：最终，用户会在浏览器窗口中看到渲染完成的网页。

这个过程涉及到多个网络协议和浏览器内部机制，是现代Web开发中不可或缺的一部分。