前端面试题之HTML篇

1、src 和 href 的区别

具有src的标签有:script、img、iframe
具有href的标签有:link、a

区别
src 是source的缩写。表示源的意思,指向资源的地址并下载应用到文档中。会阻塞文档的渲染,也就是为什么js脚本放在底部而不是头部的原因。

<script src="./index.js"></script>
<img src="./cat.jpeg" alt="">
<iframe src="./iframe-page.html"></iframe>

href 是hypertext reference 的缩写。表示超文本引用。用来引用外部的资源。不会阻塞文档的渲染。

<link rel="stylesheet" href="./index.css">
<a href="https://baidu.com">跳转</a>

@import 和 link 的区别

  1. link 在文档加载的时候一并加载,@import在页面完全加载之后加载。
  2. @import 只能加载css,link还可以定义RSS等其他事务;
  3. link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  4. link 支持使用js控制dom改变样式,而@import不支持。

2、DOCTYPE(文档类型)的作用

必须写在HTML文件的第一行,例如:,用来告诉浏览器应该以什么方式(html或者xhtml)解析页面,不同的渲染方式会影响css甚至Javascript的解析。

浏览器渲染页面有两种模式(可用通过document.compatMode获取):

  • CSS1Compat(HTML strick mode 标准模式):大多数网页都是这个模式,浏览器使用W3C的标准来渲染页面,在标准模式中,浏览器使用其支持的最高标准来渲染页面。
  • BackCompat(XHTML Quirk mode 怪异模式):浏览器使用自己的怪异模式来渲染页面,在怪异模式中,浏览器使用比较宽松的向后兼容的方式显示。

3、script 中defer 和 async的区别

    <script src="./index.js"></script>
    <script async src="./index-async.js"></script>
    <script defer src="./index-defer.js"></script>

如果没有defer或者async,浏览器会立即加载并执行js脚本,会阻塞页面的渲染,如果文件比较大或者脚本比较耗时的话,页面就会出现卡顿的情况。

下面这张图可以直观看出它们的区别:
前端面试题之HTML篇_第1张图片

绿色:表示页面渲染。蓝色:表示资源加载。红色:表示js脚本执行。

从图中不难看出,

你可能感兴趣的:(前端面试,前端,html,html5)