1、HTML5 的离线储存怎么使⽤，⼯作原理能不能解释⼀下？
离线缓存有2种方法：
- HTML5 的离线存储
.appcache文件【废弃】 service-worker的标准
方法一：使用.appcache 机制
原理：
HTML5 的离线存储是基于⼀个新建的 .appcache ⽂件的缓存机制(不是存储技术)，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下来。
之后当⽹络在处于离线状态下时，浏览器会通过被离线存储的数据进⾏⻚⾯展示。
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是第⼀次访问 app ，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏离线存储。
已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做任何操作，
如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储。
如果离线，浏览器就直接使⽤离线存储的资源。
方法二：service-worker
原理：
service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。
它的特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），拦截和处理网络请求。
使用方法：
1.特性检查，在注册之前确保 service worker 是支持的。
if('serviceWorker' in navigator) {
// Has support!
}
2.注册
navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(){
// 注册需要缓存的文件 目录
})
3.在你的 service worker 注册之后，浏览器会尝试为你的页面或站点安装并激活它。
install 事件会在注册完成之后触发。install 事件一般是被用来填充你的浏览器的离线缓存能力。
在安装事件内，我们使用了 caches.open() 方法来创建了一个叫做 v1 的新的缓存，将会是我们的站点资源缓存的第一个版本。
/* 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 */
this.addEventListener('install', function (event) {
/* 通过这个方法可以防止缓存未完成，就关闭serviceWorker */
event.waitUntil(
/* 创建一个名叫V1的缓存版本 */
caches.open('v1').then(function (cache) {
/* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
return cache.addAll([
'./index.html'
]);
})
);
});
4./* 注册fetch事件，拦截全站的请求 */
this.addEventListener('fetch', function(event) {
event.respondWith(
// magic goes here
/* 在缓存中匹配对应请求资源直接返回 */
caches.match(event.request)
);
});
appCatch 与 worker-service的区别？
APP Cache 的的主要问题是坑比较多，而且其被设计为只适合于单页 web 应用程序，对于传统的多页网站则不适合。service worker 的设计规避了这些痛点。
2、怎么在页面上实现一个圆形的可点击区域？
三种解决方案： html标签、css实现、 纯js实现.
方法一：map+area
<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" /> </map>
注解：
map标签定义map，href定义点击跳转的地址，area标签定义可点击的热点，area属性：
shape：定义热点形状，可选参数 rect(矩形)、circle(圆形)、poligon(自定义形状)。 coords：定义形状路径： 当shape=rect时，四个数字依次为：起点X、起点Y、终点X、终点Y 当shape=circle时，三个数字依次为：中心点X、中心点Y、半径
当shape=poligon时，可定义多个路径点，依次为：起点X、起点Y、路径1X、路径1Y、路径2X、路径2Y......
方案二：利用border-radius
<style>
.disc{
width:100px;
height:100px;
background-color:dimgray;
border-radius: 50%;
cursor: pointer;
position: absolute;
left:50px;
top:50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<div class="disc">点击区域</div>
方案三：利用js实现
<script>
document.onclick = function(e){
var r = 50; //圆的半径
var x1 = 100, y1 = 100;
var x2 = e.clientX,
y2 = e.clientY;
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
if(len<=50){
console.log("Inner");
}else{
console.log("Outer");
}
}
</script>
