前端面试题总结

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的三个优势:① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hbba00jahkj

上一篇:Go语言示例 --19关于defer的使用


下一篇:Go 面试每天一篇(第 1 天)