html

夏天的风抚过耳膜
299 阅读5分钟

一、标签

1、HTML 语义化的理解？

用正确的标签做正确的事情。

html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析； 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2、title 与 alt 属性的区别是什么

alt 是给搜索引擎识别，在图像无法显示时的替代文本；

title 是关于元素的注释信息，主要是给用户解读。

当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。

在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

3、说一下 label 标签的用法

label 标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验：如下 实现点击 “ 密码 ” 光标也能锁定输入框

<label>密码: <input type="password" /></label>

4、iframe 的优缺点？

优点：
解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本

缺点：
iframe会阻塞主页面的Onload事件
即时内容为空，加载也需要时间
没有语意

5、href 与 src？

src 主要是指向外部资源的位置，当浏览器解析到元素的 src 属性时，会暂停其他资源的下载和 html 文档的解析，直到将 src 指向外部资源加载、编译、执行完毕，img 和 script 等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部

<script src =”js.js”></script>

href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加 样式， 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前 html 文档的解析。 这也是为什么建议使用 link 方式来加载 css，而不是使用 @import 方式

<link href=”common.css” rel=”stylesheet”/>

6、script 标签中的 async 和 defer 属性

在 HTML 中会遇到以下三类 script：

  • <script src='xxx'></script>
  • <script src='xxx' async></script>
  • <script src='xxx' defer></script>

那么这三类 script 有什么区别呢？

A、script

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示：

script

可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。

B、async script

async 表示异步，例如七牛的源码中就有大量的 async 出现：

七牛

当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析，图示如下：

script

当然，如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就啥事没有，立即执行 JS 代码，如下图所示：

defer2

所以async 是不可控的，因为执行时间不确定，你如果在异步 JS 脚本中获取某个 DOM 元素，有可能获取到也有可能获取不到。而且如果存在多个 async 的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。

defer script

defer 表示延迟，例如掘金的源码中就有大量的 defer 出现：

掘金

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码，图示如下：

script

如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

最后，根据上面的分析，不同类型 script 的执行顺序及其是否阻塞解析 HTML 总结如下：

script 标签JS 执行顺序是否阻塞解析 HTML
<script>在 HTML 中的顺序阻塞
<script async>网络请求返回顺序可能阻塞，也可能不阻塞
<script defer>在 HTML 中的顺序不阻塞

二、dom

1、document.write 和 innerHTML

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

2、遍历A节点的父节点下的所有子节点

<script>
    var b = document.getElementById("a").parentNode.children;
    console.log(b)
</script>

3、js 放在 html 的不同位置有什么区别吗?

如果使用 window.onload函数，将 js 代码放在其中，则放在哪里都是一样的，因为都是在body 加载完再执行的

如果不使用window.onload 函数,放在 head 中的话，代码不会被执行，这是因为html 执行顺序，确切的说是 js 的执行顺序，HTML从上运行到的时候进入test.js文件。前面的不会运行，也就是被function包起来的不会被运行，这个时候就执行最后一句。去页面中取元素。但是这个时候，HTML页面并没有加载完。所以找不到元素，就会报错。

avatar
文章
阅读
粉丝