文档章节

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

adamduan
 adamduan
发布于 2015/12/01 16:05
字数 943
阅读 84
收藏 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);
}



© 著作权归作者所有

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

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

吞吞吐吐的 ⋅ 2017/11/09 ⋅ 0

大型分布式网站架构技术总结

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

陶邦仁 ⋅ 2016/03/15 ⋅ 0

大型分布式网站架构技术总结

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

umgsai ⋅ 2017/09/26 ⋅ 0

高性能网站建设读书笔记(2)Ajax

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

adamduan ⋅ 2015/12/01 ⋅ 0

7个最实用的JavaScript开发工具

在web前端开发中,JavaScript是必备的全能脚本语言,可以创建更加友好的用户交互式网站和应用。但也正是由于JS代码在前端运行,所以很多初学者在刚开始写JS代码的时候,基本上都不会太考虑网...

小懒人23 ⋅ 2016/05/20 ⋅ 2

HTTP读书笔记(三)

第六章 HTTP与网关 1.网关有:HTTP/*:服务器端web网关,将HTTP请求转换为其他协议。Eg:HTTP/FTP。HTTP/HTTPS:服务器端安全网关,通过网关对web请求加密,客户端还是普通的HTTP请求。HTTPS/H...

年少爱追梦 ⋅ 2016/02/23 ⋅ 0

大型网站架构演化

《大型网站技术架构》读书笔记: 1.1大型网站软件系统的特点 与传统企业应用系统相比,大型互联网应用系统有以下特点。 高并发,大流量 高可用 海量数据 用户分布广泛,网络情况复杂 安全环境...

断舍离 ⋅ 2014/07/24 ⋅ 0

读书笔记_Index

第1章 Java性能调优概述 第2章 设计优化 第3章 Java程序优化 第4章 并行程序开发及优化 第5章 JVM调优 第6章 Java性能调优工具 第1章 简介 第2章 线程安全性 第3章 对象的共享 第1章 走近Jav...

陶邦仁 ⋅ 2014/03/19 ⋅ 0

架构学习资料汇总

知名网站架构分析 探索Google App Engine背后的奥秘(1)–Google的核心技术 探索Google App Engine背后的奥秘(2)–Google的整体架构猜想 探索Google App Engine背后的奥秘(3)- Google App Eng...

peter8015 ⋅ 2016/04/22 ⋅ 0

D瓜哥分享的架构资料

扯扯蛋 以前见过零零散散地介绍一些知名网站架构的分析文章。最近D瓜哥也想研究一下各大知名网站的架构。所以,就搜集了一下这方面资料。限于时间问题,这篇文章分享的文章并没有都看完,所以...

hejunbinlan ⋅ 2015/09/06 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout基于内存的DataMode 推荐引擎Demo2

Mahout基于内存的DataMode 推荐引擎Demo2 //注释的部分是基于文件也可以理解为基于日志文件的, //DataModel 可以有很多种,实现abstractDataMode的子类,原则上都可以作为数据源,个人觉得,...

xiaomin0322 ⋅ 24分钟前 ⋅ 0

Docker部署Tomcat及Web应用

一、在线下载docker yum install -y epel-releaseyum install docker-io # 安装dockerchkconfig docker on # 加入开机启动service docker start # 启动docker服务 1 ...

Jeam_ ⋅ 24分钟前 ⋅ 0

研发运营一体化能力成熟度模型

研发运营一体化是指在 IT 软件及相关服务的研发及交付过程中,将应用的需求、开发、测试、部 署和运营统一起来,基于整个组织的协作和应用架构的优化,实现敏捷开发、持续交付和应用运营的无...

stars永恒 ⋅ 29分钟前 ⋅ 0

jQuery缩小放大触发事件

jquery的resize()方法使用 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> var i = 0; $(document).ready(function(){ ......

RobertZou ⋅ 30分钟前 ⋅ 0

eclipse python 搭建

https://jingyan.baidu.com/article/9113f81b68ebce2b3214c7e0.html https://www.cnblogs.com/ZhangRuoXu/p/6397756.html https://blog.csdn.net/zhangphil/article/details/78962159 字符集......

之渊 ⋅ 30分钟前 ⋅ 0

weex,react native,flutter

weex: 一次编写,处处运行 RN: 学一次,到处写(针对安卓,IOS平台特性 各自写,会有很大一部分是一样的代码) 这些方案是否真正的解决了跨平台问题呢?从目前的状况来看,很显然是没有的,因...

东东笔记 ⋅ 36分钟前 ⋅ 0

Spring Cloud微服务分布式云架构-集成项目

Spring Cloud集成项目有很多,下面我们列举一下和Spring Cloud相关的优秀项目,我们的企业架构中用到了很多的优秀项目,说白了,也是站在巨人的肩膀上去整合的。在学习Spring Cloud之前大家必...

明理萝 ⋅ 41分钟前 ⋅ 1

SpringMVC图片上传问题解决

当我们上传图片时一直发现: MultipartFile file = null; if (request instanceof MultipartHttpServletRequest) 匹配不上, 解决方案: 在前端xml加入如下配置代码即可 <!-- 图片上传bean --...

泉天下 ⋅ 43分钟前 ⋅ 0

Spring表达式语言(SpEL)

1、SpEL引用 Spring EL在bean创建时执行其中的表达式。此外,所有的Spring表达式都可以通过XML或注解的方式实现。下面将使用Spring表达式语言(SpEL),注入字符串,整数,Bean到属性。 SpEL的...

霍淇滨 ⋅ 59分钟前 ⋅ 0

Gradle使用阿里云镜像

gradle 生命周期中有一个初始化( Initialization )的过程,这个过程运行在 build script 之前,我们可以在这个地方做一点系统全局的设置,如配置仓库地址。 你可以在以下几个位置实现仓库地址...

明MikeWoo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部