文档章节

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

adamduan
 adamduan
发布于 2015/12/01 16:05
字数 943
阅读 86
收藏 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
高性能网站建设读书笔记(2)Ajax

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

adamduan
2015/12/01
30
0
读书笔记网写作六年比卢松松博客的3个差距[图]

读书笔记网是坚持了6年才有所成绩的博客网站,也是采用zblog系统写作的,因为在十年前,zblog可谓相当的有名气,那时候有著名的科技类月光博客,还有知名的互联网类卢松松博客,都是行业佼佼...

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

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

陶邦仁
2016/03/15
632
0

没有更多内容

加载失败,请刷新页面

加载更多

深入解析JSON与XML优缺点对比

本文从各个方面向大家对比展示了json和xml的优缺点,十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 #1. 定义介绍 1.1 XML定义 扩展标...

前端攻城老湿
10分钟前
0
0
Vue 单页应用(spa)前端路由实现原理

一文搞懂单页应用原理Vue项目History模式路由机制 源码分析VueVueRouter Vue 单页应用(spa)前端路由实现原理 写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash...

前端攻城小牛
11分钟前
0
0
Vuex的初探与实战小结

1.概述 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同: 1.Vuex 的状态存储是响...

peakedness丶
13分钟前
0
0
CSS 背景图片全屏显示

<style> html { background: url(./static/login/xia.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; ......

SummerGao
16分钟前
0
0
Supplier函数式接口

Supplier接口的不传入参数,返回一个值。真是一个无私奉献的接口,还没有default方法。 下面就想用一个接口试试,其实我本来用的是IntSupplier,但是发现在使用方法引用的时候,不好把Math....

woshixin
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部