HTML语义化

💡 Tips：html语义化就是让页面内容结构化。

  • 增加代码可读性，让人更容易读懂。
  • 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息。爬虫依赖标签来确定上下文和各个关键字的权重（SEO）

  • 在没有css样式的情况下，页面依然能很好地呈现内容与代码结构。

    script标签中defer与async的区别

    💡 Tips：下述的script标签所处的位置为HTML文档上方，当script标签处于文档底部时，defer可有可无。

  • script

    • 阻碍HTML解析，当代码运行时遇到 script标签时，会立即下载JS脚本并执行，直到执行完毕后，再重新解析HTML。
    • 如果获取JS脚本的网络请求响应时间或者执行时间过长，会导致白屏，即用户看不到页面内容。
  • async script
    • 异步下载，同步执行。当代码运行时遇到 <script async>标签时，异步下载JS脚本，HTML继续解析，当脚本下载完毕后立即执行，此时可能会中断HTML的解析。
    • async不可控。在异步JS脚本中获取到DOM元素与否取决于执行时间，并且，当存在多个async时，它们的执行时间不确定，完全依赖于网络传输结果，即谁先到先执行谁。
  • defer script :
    • 异步下载与执行。当代码运行时遇到 <script defer>标签时，HTML继续解析，脚本异步下载，当HTML解析完毕后执行JS脚本。
    • 如果存在多个 <script defer>标签，浏览器会按照在HTML中出现的顺序执行，不会破坏JS脚本之间的依赖关系。

下图清晰展示了三种 script 的过程 ：
script.png