web全栈架构师[笔记] — 03 html5新特性

2023-06-20,,

HTML5新特性

一、geolocation

PC端

精度比较低
通过IP库定位
移动端
通过GPS
window.navigator.geolocation
单次 getCurrentPosition(成功,失败,参数)

参数:

enableHighAccuracy 高精度模式——更慢、更费电
timeout 超时
maximumAge 缓存时间
结果:
latitude/longitude 经度/纬度
altitude 海拔高度
accuracy 精确度
altitudeAccuracy 高精度精确度
heading 朝向
speed 速度
监听 watchPosition

二、video、audio

video

scr
autoplay
loop
poster
controls
video支持的格式
IE wmv、mp4
Chrome webq、mp4
FireFox ogv、mp4
audio
支持格式 mp3
js接口
方法

play() 播放
pause() 暂停
属性
currentTime 当前播放时间 (s)
duration 长度(s)
volume 音量(0-100)
muted 静音(bool)

三、localStorage

本地存储:大(5M)/cookie(4K)

1.大:1280倍
2.localStorage不会被发往服务器
3.方便
localStorage/sessionStorage
localStorage 永久存储
sessionStorage 会话期存储(浏览器关了就没了)
localStorage的用法跟json一模一样
localStorage.a=xxx 设置
localStorage.a 读取
delete localStorage.a 删掉
for in 遍历
sessionStorage用法和localStorage一模一样

四、WebWorker

浏览器上实现的多进程
主机 > 程序 > 进程 > 线程 > 纤程
对比:

进程线程对比
  多进程(重) 多线程(轻)
开销 创建、销毁开销大 创建、销毁开销小
安全性 进程之间是隔离 线程之间是共享
资源 每个进程独立资源 同一个进程的所有线程共享资源
共享资源 麻烦 方便
编程难度 低(资源是独享的) 高(资源是共享的)

总结:

多进程:性能低,编写简单
多线程:性能高,编写复杂
Web端:
主进程 UI进程
子进程(工作进程) 看不见的;只能完成计算、数据请求这些操作
优点:
1.充分利用资源(多个进程同时工作)
2.防止主进程卡住
缺点:
不能执行任何UI操作,子进程只能执行计算型任务
结论:WebWorker在工作中用的很少——Web中计算型任务就不多

五、文件操作、拖拽

事件

进入 .ondragenter
离开 .ondragleave
悬停 .ondragover
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法
放置 .ondrop
同悬停阻止默认事件,调用 event.preventDefault() 方法
FileReader:对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果
属性

error
onload
readyState
result
方法
abort()
readAsArrayBuffer():原始二进制数据,用于编辑(不常用)
readAsBinaryString():二进制的文本形式数据,用于上传
readAsDataURL():base64,用于图片
readAsText():文本,用于文本文件
继承
EventTarget
Events
onabort
onerror
onload
onloadstart
onloadend
onprogress

六、manifest

文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
参考地址:
HTML 5 应用程序缓存

七、canvas

HTML 5 Canvas 参考手册
学习HTML5 Canvas这一篇文章就够了

八、WebSQL/IndexedDB

web全栈架构师[笔记] — 03 html5新特性的相关教程结束。

《web全栈架构师[笔记] — 03 html5新特性.doc》

下载本文的Word格式文档,以方便收藏与打印。