• 1. HTML 全局属性(global attribute)有哪些
• 2. 什么是 Web 语义化，有什么好处
• 3. 空元素定义
• 4. window.onload和DomContentLoaded的区别
• 5. 懒加载与预加载的基本概念
• 6. HTML 规范中为什么要求引用资源不加协议头http或者https？
• 7. 响应式开发
• 8. class和id命名规范
• 9. HTML5的Audio
  • 9.1. 当音频/视频处于加载过程中时，会依次发生以下事件
  • 9.2. 元数据和数据的区别？
  • 9.3. 动态的创建<audio>元素
  • 9.4. 判断浏览器支持的编码方式
• 10. 两个标签页的sessionstorage共享吗
• 11. iframe的优缺点
  • 11.0.1. iframe 的优点
  • 11.0.2. iframe 的缺点
• 12. img标签的title与alt区别
• 13. b 与 strong 的区别和 i 与 em 的区别？
• 14. 如何检测页面是否有卡顿

1. HTML 全局属性(global attribute)有哪些

• accesskey:设置快捷键，提供快速访问元素如aaa在 windows 下的 firefox 中按alt + shift + a可激活元素
• class:为元素设置类标识，多个类名用空格分开，CSS 和 javascript 可通过 class 属性获取元素
• contenteditable: 指定元素内容是否可编辑
• contextmenu: 自定义鼠标右键弹出菜单内容
• data-*: 为元素增加自定义属性
• dir: 设置元素文本方向
• draggable: 设置元素是否可拖拽
• dropzone: 设置元素拖放类型： copy, move, link
• hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
• id: 元素 id，文档内唯一
• lang: 元素内容的的语言
• spellcheck: 是否启动拼写和语法检查
• style: 行内 css 样式
• tabindex: 设置元素可以获得焦点，通过 tab 可以导航
• title: 元素相关的建议信息
• translate: 元素和子孙节点内容是否需要本地化

2. 什么是 Web 语义化，有什么好处

web 语义化是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 css 命名的语义化。

HTML 标签的语义化是指：通过使用包含语义的标签（如 h1-h6）恰当地表示文档结构。

css 命名的语义化是指：为 html 标签添加有意义的 class，id 补充未表达的语义，如Microformat (opens new window)通过添加符合规则的 class 描述信息。

为什么需要语义化：

• 去掉样式后页面呈现清晰的结构
• 盲人使用读屏器更好地阅读
• 搜索引擎更好地理解页面，有利于收录
• 便团队项目的可持续运作及维护

3. 空元素定义

标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。

常见的空元素有：br hr img input link meta

4. window.onload和DomContentLoaded的区别

window.addEventListener('load', function() {
  // 页面的全部资源加载完之后才会执行，包括图片、视频等。
})
window.addEventListener('DomContentLoaded', function() {
  // DOM渲染完即可执行，此时图片、视频等可能没加载完。
})

5. 懒加载与预加载的基本概念

• 懒加载也叫延迟加载： 延迟加载图片或符合某些条件时才加载某些图片。
• 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载的意义：

• 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

懒加载的实现方式：

1. 第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2. 第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3. 第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

预加载的意义：

• 预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

预加载的实现方式：

• 实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。
• 常用的是new Image()，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

6. HTML 规范中为什么要求引用资源不加协议头http或者https？

如果用户当前访问的页面是通过 HTTPS 协议来浏览的，那么网页中的资源也只能通过 HTTPS 协议来引用，否则浏览器会出现警告信息，不同浏览器警告信息展现形式不同。

为了解决这个问题，我们可以省略 URL 的协议声明，省略后浏览器照样可以正常引用相应的资源，这项解决方案称为protocol-relative URL，暂且可译作协议相对 URL。

如果使用协议相对 URL，无论是使用HTTPS，还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，避免弹出类似的警告信息，同时还可以节省5字节的数据量。

7. 响应式开发

响应式开发：弹性网格布局+弹性图片+媒体查询

• 优点：减少工作量、节省时间
• 缺点：会加载更多的样式和脚本资源、老版本浏览器兼容不好

8. class和id命名规范

class一般都是小写加横杠的方式命名，如first-button，id一般是用驼峰的方式命名，如firstButton

9. HTML5的Audio

Audio的使用：

• audio = new Audio()，先设置src，后play或pause，自动支持断点续播

Audio的属性：

• currentTime：当前播放时间
• duration：时长

Audio的事件：

• timeupdate，当播放位置更改时触发，播放的时候监听此事件。
• loadedmetadata，加载完音频的元数据时，元数据包括：时长、尺寸（仅视频）以及文本轨道

9.1. 当音频/视频处于加载过程中时，会依次发生以下事件

• loadstart
• durationchange
• loadedmetadata
• loadeddata
• progress
• canplay
• canplaythrough

loadeddata在loadedmetadata之后，先知道元数据，后知道真正的数据

9.2. 元数据和数据的区别？

• 元数据是用来描述数据的数据，比如“年龄"、"身高"、"相貌"、"性格”，数码照片的EXIF信息，何文件系统中的数据分为数据和元数据。
• 数据是指普通文件中的实际数据，而元数据指用来描述一个文件的特征的系统数据，诸如访问权限、文件拥有者以及文件数据块的分布信息(inode...)等。

9.3. 动态的创建<audio>元素

//方式1
var audio = document.createElement("audio");
audio.src = "hangge.mp3";
audio.play();
 
//方式2
var audio = new Audio("hangge.mp3");
audio.play();

9.4. 判断浏览器支持的编码方式

通过canPlayType()方法可以判断浏览器支持的编码方式，从而设置对应的音频文件。

if (audio.canPlayType("audio/mp3")) {
    audio.src = "hangge.mp3";
}else if(audio.canPlayType("audio/ogg")) {
    audio.src = "hangge.ogg";
}

10. 两个标签页的sessionstorage共享吗

• 这取决于标签页如何打开。
• 通过点击链接（或者用了 window.open）打开的新标签页之间是属于同一个 session 的，但新开一个标签页总是会初始化一个新的 session，即使网站是一样的，它们也不属于同一个 session。
• 刷新当前页面，或者通过location.href、window.open、或者通过带target="_blank"的a标签打开新标签，之前的sessionStorage还在，但是如果你是主动打开一个新窗口或者新标签，对不起，打开F12你会发现，sessionStorage空空如也。
• 也就是说，sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页，通过其它方式新开的窗口或标签不认为是同一个session。

11. iframe的优缺点

11.0.1. iframe 的优点

• iframe能够原封不动地把嵌入的网页展现出来。
• 如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。
• 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。
• 如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决。

11.0.2. iframe 的缺点

• 会产生很多页面，不容易管理。
• 在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。
• 使用框架结构时，必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下会导致链接死循环。
• 很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
• iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

12. img标签的title与alt区别

1. title属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。在显示的内容被省略的时候，可以加一个title属性，快速实现提示文本。
2. alt属性alt定义有关图形的短的描述。在图片加载失败了的时候，会显示该描述。

13. b 与 strong 的区别和 i 与 em 的区别？

从页面显示效果来看，被 <b> 和 <strong> 包围的文字将会被加粗，而被 <i> 和 <em> 包围的文字将以斜体的形式呈现。

但是 <b> <i> 是自然样式标签，分别表示无意义的加粗，无意义的斜体，表现样式为 { font-weight: bolder}，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在 HTML4.01 中并不被推荐使用。

而 <em>和 <strong> 是语义样式标签。<em> 表示一般的强调文本，而 <strong> 表示比 <em> 语义更强的强调文本。

使用阅读设备阅读网页时：<strong> 会重读，而 <b> 是展示强调内容。

详细资料可以参考： 《HTML5 中的 b/strong，i/em 有什么区别？》 (opens new window)

14. 如何检测页面是否有卡顿

每秒中计算一次网页的 FPS 值，获得一列数据，然后分析。通俗地解释就是，通过 requestAnimationFrame API 来定时执行一些 JS 代码，如果浏览器卡顿，无法很好地保证渲染的频率，1s 中 frame 无法达到 60 帧，即可间接地反映浏览器的渲染帧率。

FPS （每秒传输帧数(Frames Per Second)）

FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。

理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60 frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。

参考资料：

1. Performance — 前端性能监控利器 (opens new window)
2. 如何监控前端页面FPS (opens new window)