H5十大新特性(前端面试新手必背)(12)

简介: H5十大新特性(前端面试新手必背)(12)

1 先检测文件是否存在


 if(typeof(w)=="undefined")
   {
   w=new Worker("myworkers.js");
   }


2 然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器。


 w.onmessage=function(event){
 document.getElementById("result").innerHTML=event.data;
 }; 


3 终止web worker

当我们创建 web worker 对象后,它会持续监听消息(即使在外部脚本完成之后)直到其被终止为止。如需终止 web worker,并释放浏览器/计算机资源,可以用terminate() 方法。


 worker.terminate(); 


Web Worker有五个限制

(1)同源限制:分配给Worker线程运行的脚本文件,必须与主线程的脚本文件同源。

(2)DOM限制:worker只能读取navigator对象和location对象,无法使用window,document,parent对象。因为woker线程所在的全局对象与主线程的不一样,所以也无法读取主线程所在页面的DOM对象。

(3)通信联系:主线程和子线程无法直接通信,因为它们不在同一个上下环境。

(4)脚本限制:woker线程不能执行alert()方法和confirm()方法,但可以使用XMLHttpRequst对象发出AJAX请求。

Q1:什么是XMLHttpRequst对象?

A1:用户在后台和服务器交换数据的对象。


Q2:功能是什么?

A2:不重新加载页面的情况下更新页面;在页面加载后从服务器请求数据和接收数据;在后台向服务器发送数据。


(5)文件限制:worker线程不能读取本地文件(file://),加载的脚本必须来源于网络。


2.9 Web Storage

看到stoage就可以猜测到这个是存储,那是什么东西的存储呢。当然是数据的存储。这些数据可以是临时的也可以是永久的。


Q1:它什么要出现,相比HTML4它优势是什么?

A1:HTML4中用cookie,在用户端保存用户数据。但是存在弊端。内存大小不够大只有4kb;浪费带宽,因为数据发送的时候是连HTTP事务一起发送,造成资源浪费;操作cookie复杂麻烦困难。所以HTML5用Web Storage在客户端本地保存用户数据。


Q2:cookie和Web Storage有什么区别?

A2:Web Storage存储的空间大小更大,一般有5MB;用户数据存储在本地(浏览器)不与服务器发生通信;Web Storage本身自带方法setletm(),getletm(),removeletm(),clean()等,不需要cookie复杂的封装setCookie,getCookie。操作简单。


web Storage分类

1 localStorage

2 sessionStorage


Q1:什么是sessiionStorge?

A1:user进入页面浏览至关闭浏览器的时间。页面在,数据在,页面无,数据无。重新加载页面的时候,数据仍然存在。


Q2:localStorage和sessionStorage有什么区别?

A2:相同点

(1)数据都保存在浏览器客户端

(2)同源,即同域名,同端口,同协议。

(3)操作方法相同。

不同点

(1)生命周期不同。localStorage是永久保存,除非用户手动清除数据。sessionStorage是临时保存。

(2)作用域不同。浏览器有很多种,所以无法共享用户数据,也就是不同源的页面无法共享数据。localStorage信息可以在相同浏览器中同源的不同页面,不同标签,不同窗口中共用。sessionStorage不可以在不同页面,不同标签,不同窗口中共用,即使是同源。


相关文章
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
494 91
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
508 156
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
446 2
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
295 1
前端基础(十七)_HTML5新特性
|
缓存 前端开发 JavaScript
前端小白也能掌握的高级技巧:如何让你的网页支持PWA特性?
【10月更文挑战第30天】随着互联网技术发展,渐进式网页应用(PWA)成为提升用户体验的重要手段。本文通过一个案例,介绍如何为在线问答社区网页应用添加PWA特性。从创建基本结构、添加Service Worker、创建Manifest文件到测试PWA特性,详细展示了每一步的操作方法。适合前端小白学习参考。
342 2
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
318 1
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
483 2
|
存储 JavaScript 前端开发

热门文章

最新文章