高性能网站建设读书笔记(3)创建快速响应的Web应用
博客专区 > adamduan 的博客 > 博客详情
高性能网站建设读书笔记(3)创建快速响应的Web应用
adamduan 发表于2年前
高性能网站建设读书笔记(3)创建快速响应的Web应用
  • 发表于 2年前
  • 阅读 74
  • 收藏 6
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

创建快速响应的Web应用

浏览器使用单线程从队列中取出事件,然后对事件本身进行处理或执行JavaScript。因此,浏览器每次只能处理这些任务中的一个,并且任意一个任务都能阻止其他任务执行。

怎样才算足够快

响应时间准则

0.1秒 :用户直接操作UI中对象的感觉极限。如,从用户选择表格中一列到该列高亮的时间间隔。理想情况下,也是对列进行排序的响应时间。

1秒:用户随意地在计算机指令空间进行操作而无需过度等待的感觉极限。超过一秒的延迟要提示用户计算机正在解决这个问题,如改变光标形状。

10秒:用户专注于任务的极限。超过十秒的任何操作需要一个百分比完成指示器,以及一个方便用户中断操作且有清晰标识的方法。假设用户遭遇超过10秒延迟后才返回原UI的情况,他们需要重新适应。在用户工作中,超过10秒的延迟仅在自然中断时可以接受,比如切换任务时。

测量延迟时间

手动代码检测

<div onclick="myJavaScriptFunction()">...</div>
function myJavaScriptFunction() {
    var start = new Date().getMilliseconds();
    //这是开销大的代码
    var executionTime = stop - start;
    alert("myJavaScriptFunction() executed in " + executionTime + 
        " milliseconds");
}

自动代码检测(性能分析)

Firefox的插件Firebug包含JavaScript代码性能分析器。

但事实上性能分析器也会受到外在的影响,观察代码性能的行为改变了代码的性能。

可以在网页界面上执行一个高级别的任务(如单击发送按钮),然后执行Firebug性能分析器去查看哪些函数消耗的执行时间最多,最后集中在这些函数上进行优化工作。

当延迟变得很严重时

如果JavaScript代码使浏览器线程停滞过长时间,大多浏览器会进行干预并给用户中断执行代码的机会。

what determine that a script is long running

结论:别把运行时间可能很长的低性能代码引入到网页中。

线程处理

JavaScript不支持多线程。

Brendan Eich JavaScript创立者,Mozilla首席技术官

确保响应速度

2.4.1 Web Workers

 

//创建并开始执行worker
var worker = new Worker("js/decrypt.js")
//注册事件处理程序,当worker给主线程发送信息时执行
worker.onmessage = function(e){
    alert("The decrpyted value is " + e.data);
}
//发送信息给worker,这里是指待解密的值
worker.postMessage(getValueToDecrypt());

js/decrypt.js

//注册用来接收自主线程信息的处理程序
onmessage = function(e){
    //获取传过来的数据
    var valueToDecrypt = e.data;
    //TODO: 这里实现解密功能
    
    //把值返回给主线程
    postMessage(decryptedValue);
}

在页面上任何开销大的(长时间运行)JavaScript操作都应该委托给Worker,这将使得应用程序快速运行。

2.4.2 Gears

如果发现浏览器不支持Web Worker API还有替代方案。

Google 的Gears插件,你可以利用他在IE、Firefox、Safari的早期版本上实现像Web Workers一样的功能。

Gears Worker API 与 Web Worker API相似但不完全一致。

//创建Worker Pool,他会生产Worker
var workerPool = google.gears.factory.create('beta.workerpool');
//注册事件处理程序,它接受来自Worker的信息
workerPool.onmessage = function(ignore1, ignore2, e){
    alert("The decrypted value is " + e.body);
}
//创建Worker
var workerId = workerPool.createWorkerFromUrl("js/decrypt.js")
//发送信息到这个Worker
workerPool.sendMessage(getValueToDecrypt(),workerId);

js/decrypt.js

var workerPool = google.gears.workerPool;
workerPool.onmessage = function(ignore1, ignore2, e){
    //获取传过来的数据
    var valueToDecrypt = e.body;
    //TODO: 这里实现解封功能
    
    //把值返回给主线程
    workerPool.sendMessage(decryptedValue, e.sender);
}



共有 人打赏支持
粉丝 10
博文 68
码字总数 8447
×
adamduan
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: