前端面试题总结
racy 2019-06-27
1.请实现，鼠标点击页面中的任意标签，alert该标签的名称.(注意兼容性)
//事件的有捕获类型和冒泡类型,在这里我们可以利用冒泡解决该问题
var el=document.getElementsByTagName('body')
el[0].onclick=function(event){
var evt=event||window.event;
var selected=evt.target||evt.srcElement;
alert(selected.tagName);
}2.异步加载js的几种方式
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
(1)defer，只支持IE
defer属性的定义和用法（我摘自w3school网站）
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前文档内容，其他脚本就不一定是了。
(2)async：
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
注释：有多种执行外部脚本的方法：
•如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
•如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
•如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
(3)创建script，插入到DOM中，加载完毕后callBack。
3.Html5有哪些类型的存储
Cookies：缺点有在请求头上带着数据，大小是4k之内。主Domain污染。
本地存储localStorage:以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。
IE9 localStorage不支持本地文件，需要将项目署到服务器，才可以支持！
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
本地存储sessionstorage： sessionStorage 在关闭页面后即被清空。
离线缓存（application cache）：本地缓存应用所需的文件
Web SQL：关系数据库，通过SQL语句访问
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
IndexedDB：索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。
4.HTML5 应用缓存和常规的 HTML 浏览器缓存有何差别？
HTML5 的应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
<!doctype html>
<html manifest="example.appcache">
.....
</html>
Application Cache的三个优势：① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力
