前端面试系列（二）：面试常问的几个HTML5特性

最新推荐文章于 2023-03-15 09:52:08 发布

一天一颗蛋的开心

最新推荐文章于 2023-03-15 09:52:08 发布

阅读量520

点赞数

分类专栏：前端面试文章标签：前端面试 html5

本文链接：https://blog.csdn.net/Chenkaixin0512/article/details/77879171

版权

前端面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

更多文章请参加我的个人网站：chenkaixin.cn
更多网站实战源码可以在我的github上找到：https://github.com/KaixinChen0512

一、应用程序缓存（Application Cache）

通过创建cache manifest文件来创建Web应用的离线版本
使用方法：

首先在页面声明中使用App Cache：

<!DOCTYPE HTML>
<html manifest="index.manifest">

然后再清单文件中写明资源，例如：

CACHE MANIFEST
theme.css
logo.gif
main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html

代码解释：
1. 首行必须是 CACHE MANIFEST。
2. 其后，每一行列出一个需要缓存的资源文件名。
3. 可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。
4. 如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。
5. 如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。
6. 注释要另起一行，以 # 号开头。

更新缓存：
应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。
* 自动更新：浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
* 手动更新：开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update()更新缓存。示范代码如下。

if (window.applicationCache.status == window.applicationCache.UPDATEREADY)
｛
 window.applicationCache.update();
｝

在线状态检测
如果 Web 应用程序仅仅是一些静态页面的组合，那么通过 cache manifest 缓存资源文件以后，就可以支持离线访问了。但是随着互联网的发展，特别是 Web2.0 概念流行以来，用户的提交的数据渐渐成为互联网的主流。那么在开发支持离线的Web应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存储在本地；在线以后，再把数据同步到服务器上。为了做到这一点，开发者首先必须知道浏览器是否在线。HTML5提供了两种检测是否在线的方式：navigator.online 和 online/offline 事件。
* navigator.onLine：navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false,表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。
* online/offline 事件：当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline事件来获悉网络状态。
应用程序缓存的三个优势：
* 离线浏览：用户可在应用离线时使用它们
* 速度：已缓存资源加载得更快
* 减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。

存在的坑（导致应用不多）
* 使用了App Cache的页面在清单文件更新之后去更新页面资源，但是只在下次打开页面才能生效，这意味着，我们需要使用代码判断是不是最新版本，不是的话，刷新一次页面。这种体验很不好。
* 使用了App Cache的页面也会被缓存，这对于需要动态更新的页面来说，几乎是个噩梦。用户访问到的页面不是最新的，会导致非常多的问题。
* App cache与browser cache混合在一起会使更新机制变得更加复杂，主要有以下几个因素:
- App cache在各浏览器平台实现上存在差异；
- 各浏览器又提供了不同的页面刷新机制；
- app cache还与传统的browser cache有着千丝万缕的联系；对于它俩如何协同工作，HTML5的相关规范没有对app cache的细节给出非常明确的规定; 浏览器官方文档有没有给出非常明确的说明。
- browser cache的更新机制本身就已经很复杂。
- 如果manifest文件本身就有缓存时间，或设置为永远都可用，那你的网页永远都不会被更新了。

二、本地存储（Local Storage）

本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。大小大概为5M。比Cookie的4KB好得多。存储数据的方法就是给window.localStorage添加一个属性，属性都是以键值对的方式存在：

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

推荐使用getItem()和setItem()，清除键值对使用removeItem()，一次性清除所有键值对使用clear()。此外还有key()方法在不知道有哪些键值的时候进行使用。
Note: HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。

三、文件接口（File API）

之前我们操作一个图片文件，都是先将图片上传到服务器端，然后再使用一个img标签指向到服务器的url地址，然后再进行一个使用第三方插件进行图片处理，而现在这一切都不需要服务器端了，因为FileReader对象提供的几个读取文件的方法变得异常简单，而且全部是客户端js的操作。
简单的用法：HTML中定义一个src为空的img和value为空的textarea，以及一个type为file的input按钮，绑定一个点击事件readLocalFile()，然后在js中编写function readLocalFile()

function readLocalFile() {
  var localFile = document.getElementById("uploadFile").files[0]; //取得input按钮中获取的一个本地文件的相关信息保存至变量localFile，localFile中有name、type、size等文件的属性
  var reader = new FileReader();//定义一个FileReader
  var content;
  content = reader.readAsDataURL(localFile, "UTF-8");//readAS…完成后会将相对应的结果保存至result属性中，例如readAsDataURL、readAsText等，随后会调用onload或者onerror事件处理程序
  reader.onload = function (event) {
    content = event.target.result;
    document.getElementById("img").src = content;
    document.getElementById("fileContent").value = content;
  }
  reader.onerror = function (event) {
    alert('error');
  }
}

四、网页多媒体特性（MULTIMEDIA）

主要是<audio>标签和<video>标签。
audio标签
video标签
标签属性中src为文件的URL，preload为预加载，autoplay为自动播放，loop为循环播放，controls为加上浏览器自带的控制条，对于video还有额外的宽高的设定，width和hight，以及没有播放时显示的视频封面poster。
包含的常用方法有：load()重新加载，play()开始，pause()暂停
audio通常支持：Ogg Vorbis、MP3、Wav
video通常支持：Ogg、MPEG 4、WebM( 以 Matroska（就是我们熟知的 MKV）容器格式为基础开发的新容器格式，里面包括了 VP8 视频和 Ogg Vorbis 音轨)
具体的还要看浏览器的支持情况。
Note：HTML5的音频处理接口让我们可以直接操作原始的音频流数据。一段音频到达扬声器进行播放之前，半路对其进行拦截，于是我们就得到了音频数据了，这个拦截工作是由window.AudioContext来做的，我们所有对音频的操作都基于这个对象。通过AudioContext可以创建不同各类的AudioNode，即音频节点，不同节点作用不同，有的对音频加上滤镜比如提高音色(比如BiquadFilterNode)，改变单调，有的音频进行分割，比如将音源中的声道分割出来得到左右声道的声音（ChannelSplitterNode），有的对音频数据进行频谱分析。

五、画布（Canvas）

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
使用：
首先创建canvas元素：

<canvas id="myCanvas" width="200" height="100"></canvas>

然后再js中进行绘制：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Canvas 与 SVG 的比较
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用

六、网页后台任务（Web Workers）

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。AJAX向服务器端发送请求，是异步接收响应的。不然页面会卡住。
Web Workers 是运行在浏览器后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 Web Workers 在后台运行。
Note：setInterval和setTimeout是单线程执行的。
在html5规范中引入了web workers概念，解决客户端JavaScript无法多线程的问题，其定义的worker是指代码的并行线程，不过web worker处于一个自包含的环境中，无法访问主线程的window对象和document对象，和主线程通信只能通过异步消息传递机制。
我们需要把希望单独执行的javascript代码放到一个单独的js文件中，然后在页面中调用Worker构造函数来创建一个线程，参数是该文件路径，参数存放如果是相对地址，那么要以包含调用Worker构造函数语句所在脚本为参照，如果是绝对路径，需要保证同源（协议+主机+端口）。这个文件不需要我们在页面使用script标签显示引用。
webworkers
Web Worker的限制：
- Web Worker无法访问DOM节点；
- Web Worker无法访问全局变量或是全局函数；
- Web Worker无法调用alert()或者confirm之类的函数；
- Web Worker无法访问window、document之类的浏览器全局变量；

即Web Worker并没有改变JS单线程的本质！
不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数，也可以使用XMLHttpRequest对象来做Ajax通信。
七、新的AJAX（XMLHttpRequest 2）
XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。也就是AJAX。
上一代AJAX有以下缺点。
* 只支持文本数据的传送，无法用来读取和上传二进制文件。
* 传送和接收数据时，没有进度信息，只能提示有没有完成。
* 受到”同域限制”（Same Origin Policy），只能向同一域名的服务器请求数据，不能跨域。

XMLHttpRequest 2也就是新的AJAX。针对老版本的缺点，做出了大幅改进，有下面的特点。
* 可以设置HTTP请求的时限。
* 可以使用FormData对象管理表单数据。
* 可以上传文件。
* 可以请求不同域名下的数据（跨域请求）。
* 可以获取服务器端的二进制数据。
* 可以获得数据传输的进度信息。

Note：主要通过判断window.FormData是否存在来判断浏览器是否支持XHR 2。
本节内容详解请参加系列博客：前端面试系列（三）：新老AJAX（XHR1和XHR2）
八、新增的几个常用的语义化的标签

<article>定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<aside>定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
<audio><video><canvas>
<command> 定义命令按钮，比如单选按钮、复选框或按钮。
<datalist> 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
<details> 定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend>一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
<footer> 定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
<header> 定义 section 或 document 的页眉。
<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
<nav> 定义导航链接的部分。
<output> 定义不同类型的输出，比如脚本的输出。
<progress> 运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
举例：<progress value="22" max="100"></progress>
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<source> 为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<summary> 包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
<time> 定义日期或时间，或者两者。
举例：直接使用<time>9:00</time>或者<time datetime="2010-02-14">情人节</time>

一天一颗蛋的开心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试系列（二）：面试常问的几个HTML5特性

更多文章请参加我的个人网站：chenkaixin.cn 更多网站实战源码可以在我的github上找到：https://github.com/KaixinChen0512一、应用程序缓存（Application Cache）通过创建cache manifest文件来创建Web应用的离线版本使用方法：首先在页面声明中使用App Cache： <!DOCTYPE HTML><ht
复制链接

扫一扫