创建快速响应的Web应用-20130826

188 篇文章 0 订阅
7 篇文章 0 订阅
对于前端的事件主要分为5大块

1、鼠标移动事件

2、鼠标按下事件

3、鼠标释放事件

4、键盘按下事件

5、键盘释放事件

所有的输入是要通过以上5个大项来进行输入的指令并让电脑执行

一个重要的概念是在处理过程中实质上是单线程的,也就是说,游览器使用单线程从队列中取出事件,然后对事件本身进行处理或者执行javascript阴齿,游览器每次只能处理这些任务中的一个,并且任意一个任务都能阻止其他任务的执行。

游览器在执行页面的javascript期间无法响应其他的用户事件。因此,尽可能快的执行完页面中所有的javascript是极其重要的,否则页面和游览器本身可能变得非常慢甚至完全冻结。

什么是单线程

单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。

它们只会按照事件的先后顺序来执行事件一次只能执行一个事件无法多个同事进行处理,这样就让得解决页面中的javascript用去了很多的时间

用对页面的感觉

如果javascript代码执行超过0.1秒,页面带给用户的的感觉就是不够平滑,执行超过1秒就会觉得应用程序缓慢,超过10秒用户就会觉得非常烦恼,这些其实换个角度来说就是界定“足够快”的标准。

线程处理

在这种情况下,传统的解决方案是使用多线程来把开销很大的代码从与用户交互的线程中剥离开来。在设想中,这可以使游览器持续处理来自队列中的事件从而保持界面的快速响应,与此同时,长时间运行的代码在另一个不同的线路上流畅的执行。

然而,javascript并不支持多线程,所以无法使用javascript代码创建一个后代线程来实行开销很大的代码。

什么是多线程

在一个程序中,这些独立运行的程序片断叫作“线程”(Thread),利用它编程的概念就叫作“多线程处理”。多线程处理一个常见的例子就是用户界面。利用线程,用户可按下一个按钮,然后程序会立即作出响应,而不是让用户等待程序完成了当前任务以后才开始响应。

好处

使用线程可以把占据时间长的程序中的任务放到后台去处理,程序的运行速度可能加快,在一些等待的任务实现上如用户输入、文件读写和网络收发数据等,线程就比较有用了。在这种情况下可以释放一些珍贵的资源如内存占用。

缺点

如果有大量的线程,会影响性能,因为操作系统需要在它们之间切换,更多的线程需要更多的内存空间,线程的中止需要考虑其对程序运行的影响。

确保响应的速度

就是google在游览器里插入了Gears中实现了游览器的主javascript线程创建后台的“Worker”,在这些Worker启用时从游览器线程中接收到一些简单的“信息”,并且在完成时返回一条信息。

什么是Gears

原称Google Gears,是一款Google开发的软件,让使用者可以离线上网,但目前仍处于beta阶段。这套软件透过SQLite 数据库让本地端能够把资料暂存起来。所以网页是透过暂存区取得的,而不是从实际的网络上取得。而且,Web 相关的程式可以周期性的透过 Gears 将本地暂存的资料与网络上的资料做同步。如果网络暂时无法使用,这个同步过程将会延后,直到网络恢复为止。因此,Gears 的 Web 相关应用并不是即时的。

什么是Worker

worker线程中的代码具有独立的执行环境,Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果


<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js");
//创建一个Worker对象并向它传递将在新线程中执行的脚本的URL worker.postMessage("hello world");
//向worker发送数据
worker.onmessage =function(evt){
//接收worker传过来的数据函数
console.log(evt.data);
//输出worker发送来的数据 }
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值