文档章节

高性能网站建设读书笔记(3)创建快速响应的Web应用

adamduan
 adamduan
发布于 2015/12/01 16:05
字数 943
阅读 84
收藏 6

创建快速响应的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);
}



© 著作权归作者所有

共有 人打赏支持
adamduan
粉丝 10
博文 83
码字总数 8447
作品 0
大连
程序员
《高性能网站建设指南》读书笔记

规则1-减少HTTP请求 请求网页时只有10%-20%的最终用户响应时间花在接收请求的HTMl文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组建(图片,脚本,样式表,Flash等)进行的H...

吞吞吐吐的
2017/11/09
0
0
用骆驼祥子读书笔记来解答ZBLOG博客写作的3个技巧[图]

建设博客已经半年了,准确的说应该是7个月了吧,虽然没有取得什么好的进展,但毕竟一直在努力,主要是内容建设上比较麻烦,很难像大站一样获得大量的内容,这是非常头疼的问题。 总之,个人也...

原创小博客
07/11
0
0
大型分布式网站架构技术总结

大型分布式网站架构 大型分布式网站架构技术总结 本文是学习大型分布式网站架构的技术总结。对架构一个高性能,高可用,可伸缩,可扩展的分布式网站进行了概要性描述,并给出一个架构参考。一...

陶邦仁
2016/03/15
632
0
高性能网站建设读书笔记(2)Ajax

理解Ajax性能 权衡 过早的优化是万恶之源--Donald Knuth 时间,质量,成本,三选二。(Project Triangle) 增量式开发(incremental development) 迭代式开发,瀑布式开发 大爆炸集成方式(...

adamduan
2015/12/01
30
0
大型分布式网站架构技术总结

原文出处: ITFLY8 本文是学习大型分布式网站架构的技术总结。对架构一个高性能,高可用,可伸缩,可扩展的分布式网站进行了概要性描述,并给出一个架构参考。一部分为读书笔记,一部分是个人...

umgsai
2017/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java Web--增删改查之二界面后台java代码(转载参考)

/** *  *//** * @author Administrator * */package dao; import java.sql.*;public class DBConn {/** * 链接数据库 * @return */  ...

小橙子的曼曼
7分钟前
0
0
Redis源码阅读笔记-对象及其类型和编码

总结之《Redis设计与实现》 对象 Redis中是使用对象来便是数据库中的键和值。 结构 // server.h...#define LRU_BITS 24...typedef struct redisObject { unsigned type:4; ...

Jian_Ming
20分钟前
0
0
laravel框架常用目录路径

laravel框架常用目录路径 app_path()app_path函数返回app目录的绝对路径:$path = app_path();你还可以使用app_path函数为相对于app目录的给定文件生成绝对路径:$path = app_p...

高处胜寒
21分钟前
0
0
记一次winserver2003系统,https无法访问,内存占用持续增加,解决办法

先交代一下环境: win server2003系统,系统装在hyper-v虚拟机里 大概2016年底的镜像,距离今天两年左右 病症:大概9月10号左右用这个镜像还可以访问https,但是今天用这个镜像新装的系统,就...

阳阳露
36分钟前
3
0
Vue学习资料

一直以为Vue是依赖nodejs的。 作为前端也可以耦合性就很低了。 //npm包管理器 进行管理npm install vue//初始化一个项目vue init//本地调试npm run dev//编译完成 ...

大灰狼wow
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部