(1)扩展:如何在网页中拖拽显示客户端的图片
(2)WebWorker
(3)WebStorage
1.面试题:如何在服务器端下载的网页中显示客户端图片?
一般情况下,网页只能显示服务器上的图片;
HTML5中,可以实现用户拖拽一张本地的图片显示在服务器端下载的网页中。
container.ondrop = function(e){
var f0 = e.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(f0);
reader.onload = function(){
///读取完成,数据在reader.result中
}
}
HTML5中提供的用于文件输入输出(I/O)的对象: File:代表一个文件/目录对象 FileList:代表一个文件列表(类数组对象) FileReader:用于从文件中读取内容 FileWriter:用于向向文件写出内容 |
2.面试题:Chrome浏览器的线程模型是怎样的?
程序:计算机可以执行的代码,存在于磁盘中——静止的
进程:把程序调入到内存中,等待被CPU执行——活动的
线程:是CPU执行进程代码的基本单位——生产任务
面试题:进程和线程间的关系? 进程是操作系统分配内存的基本单位。 线程处于进程内部,是CPU执行代码的基本单位。 一个进程中至少有一个线程,也可以有多个。 多个线程间并发执行——宏观上看是“同时”执行,微观上看是“轮流”执行。 |
Chrome中的线程模型:
(1)Chrome中发起HTTP请求最多可以使用6个并发的线程;
(2)Chrome中负责向页面中执行绘制任务(执行HTML/CSS/JS/事件处理等代码)的只有1个线程——UI主线程。
碰到如下的代码,就有问题了:
<button οnclick="console.log(111)">1</button>
<script src="耗时.js"></script>
<button οnclick="console.log(222)">2</button>
根本解决之道:
创建一个新的线程,去执行耗时的JS任务——与UI主线程并发执行。new Thread('x.js') —— 其它语言中的类似代码。
3.HTML5新特性之八——Web Worker
HTML5提供了一种类似创建新线程的机制:
new Worker('x.js'); //工人线程,与UI主线程并发执行
注意:Worker线程天然缺陷!!
浏览器禁止Worker线程操作任何的BOM和DOM对象!!!——浏览器只允许UI主线程进行页面内容的渲染!——不能使用Worker加载类似jquery.js文件!! 项目中,必需用到Worker的场景不多,比如有非常复杂耗时的且与DOM无关的运算时。
UI主线程可以给Worker线程传递数据——发消息:
UI线程:
var w = new Worker('x.js');
w.postMessage('StringMsg');
Worker线程:
onmessage = function(e){ //e.data //UI主线程发来的消息数据 }
Worker线程可以给UI主线程传递数据——发消息:
UI主线程:
var w = new Worker('x.js');
w.onmessage = function(e){ //e.data //Worker线程发来的消息数据 }
Worker线程:
.....
postMessage('StringMsg');
总结:Worker本质是一个线程,在UI主线程之外并发执行的线程;用于执行耗时的JS任务;缺陷:不能操作BOM和DOM,只能和UI主线程发消息。 |
4.数据存储方案
Web项目中需要存储多种数据,大体上有两种存储方法:
(1)服务器端存储:
1)数据库技术:存储项目中的核心数据
2)Session技术:存储当前用户的信息
(2)客户端存储:不太紧要的与客户端有关的数据,如浏览记录、内容定制、样式定制
1)Cookie技术:使用比较繁琐、大小不能超过4KB
2)Flash技术:逐渐被淘汰
3)HTML5WebStorage技术:使用简单,大小不超过8MB
4)IndexedDB技术:客户端直接存储对象,目前还不是HTML标准技术
Web会话:指客户端浏览器从连接到某个Web服务器开始,一系列的请求-响应过程。直到客户端关闭浏览器,会话结束。 |
5.HTML5新特性之九——WebStorage
HTML5的WebStorage技术,提供了两个对象,用于在浏览器中存储客户端的访问数据:
window.sessionStorage——会话级存储:
在浏览器的内存中存储的与某个服务器间的一系列请求-响应过程中产生的数据——都是Key-Value对形式。当会话结束时(用户关闭了浏览器),会话级数据即消失。
sessionStorage['key'] = 'value'; //存储一个数据
var v = sessionStorage['key']; //读取一个数据
sessionStorage.length //获取数据的个数
sessionStorage.setItem('key', 'value') //存储一个数据
var v = sessionStorage.getItem('key') //读取一个数据
sessionStorage.removeItem('key') //删除一个数据
sessionStorage.clear() //清除所有的数据
window.localStorage——本地/跨会话级存储:
在客户端文件系统/硬盘中存储客户端与服务器间的访问数据——都是Key-Value对形式。即使关闭浏览器,甚至关闭计算机仍然存在,否则会永久存在。
localStorage['key'] = 'value'; //存储一个数据
var v = localStorage ['key']; //读取一个数据
localStorage.length //获取数据的个数
localStorage.setItem('key', 'value') //存储一个数据
var v = localStorage.getItem('key') //读取一个数据
localStorage.removeItem('key') //删除一个数据
localStorage.clear() //清除所有的数据