JavaScript性能优化:度量、监控与可视化1

HTTP事务所需要的步骤:

接下来,浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接,类似对讲机的Over(完毕) Roger(明白)

TCP/IP模型

TCP即传输控制协议(Transmission Con-trol Protocol)

一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求

远程服务器找到资源并使用HTTP响应返回该资源,常用的有:

•200表示来自服务器的成功响应; •404意味着服务器没有找到请求的资源;•500表示执行请求时发生了错误。

IPv4和IPv6协议规定一个IP包的最大值为65535字节,将你的总页面大小转化为字节数,再除以最大IP包的字节值得到服务器的响应次数

页面中的每一项资源——每一个图片、外部JavaScript文件和CSS文件,都需要从服务器到本地走个来回。每项资源的请求都会开启一个新的线程和一个新流程(flow)实例,而每一个实例又会产生DNS查询、TCP连接、HTTP请求和响应

1.2 解析与渲染

浏览器解析和呈现Web页面架构(下图) 浏览器架构处理UI(用户界面)的代码(包括了地址栏和回退(history)按钮),用于解析和绘制页面中所有对象的渲染引擎,解释Javascript的JavaScript引擎,以及一个处理HTTP请求的网络层

浏览器是自上而下读取内容的,因此放置资源的位置会影响网站的访问速度,如果将JavaScript标签放在HTML内容的前边,浏览器就会先调用JavaScript解释器对JavaScript进行解析,完成之后才会渲染其余的HTML内容

1.2.1 渲染引擎

浏览器架构可以划分为多个模块,一直以来,浏览器制造商也是通过组合模块来构造浏览器的

Chrome和Safari使用Webkit渲染引擎http://www.webkit.org/

1.2.2 JavaScript引擎

JavaScript解释器也应用了模块化这一概念,也可以嵌入到其他工具中

Firefox的SpiderMonkey

Chrome的V8

1.3 运行时性能

所谓运行时(runtime)是指应用程序执行或运行的时长。运行时性能是指应用程序运行时对用户输入的响应速度(比如保存特性或访问DOM中的元素时)

第2章 测量和影响性能的工具与技术

2.1 Firebug

2.2 YSlow

若要更深入地分析网页性能,可以使用YS-low,可以移植到大多数浏览器上http://yslow.org/,Google曾经开发了Page Speed类似于YSlow的产品

2.3 WebPagetest

http://www.webpagetest.org/

WebPagetest是一款Web应用程序,它将一个URL以及一系列配置参数作为输入,并对那个URL运行性能测试。WebPagetest可配置参数的数量非常多,范围非常广

2.4 缩减

需要缩减JavaScript

2.4.1 Minify

http://code.google.com/p/minify/

Minify,读入JavaScript文件的URL。Minify剔除掉不必要的字符,并设置响应头(response header)为gzip编码格式,返回结果给script标签,并将结果加载到浏览器,要使用Minify,只需要从http://code.google.com/p/minify/网站上将它下载下来,将其解压缩至/min文件夹并放到Web网站根目录下,然后到/min/builder/目录下打开Minify控制面板。在控制面板中,可以添加你想要缩减的JavaScript文件,页面生成可链接到JavaScript文件缩减后的脚本标签

2.4.2 YUI Compressor

另一个用于缩减的工具是Yahoo的YUI Com-pressor,可以在这里找到它:http://yuili-brary.com/download/yuicompressor/

2.4.3 Closure Compiler https://developers.google.com/closure/com-piler/ 它不仅缩减了JavaScript,而且通过重写进一步压缩了JavaScript 优化策略——它将函数展开,重写变量名,删除从不会调用的函数(只要它能判断)

2.5 R入门

http://cran.r-project.org/ 使用R进行数据可视化准

以后再填这个坑

时间: 2024-10-21 20:55:39

JavaScript性能优化:度量、监控与可视化1的相关文章

JavaScript性能优化

1.使用局部变量 在函数中,总是使用var来定义变量.无论何时使用var都会在当前的范围类创建一个局部变量.如果不使用var来定义变量,那么变量会被创建在window范围内,那么每次使用这个变量的时候,解释程序都会搜索整个范围树.同时全局变量要在页面从浏览器中卸载后才销毁,而局部变量在函数执行完毕即可销毁,过多的全局变量增加了不必要的内存消耗.只要有可能就应该用局部变量或者数字索引的数组来替代命名特性.如果命名特性要多次使用,就先将它的值存储在局部变量中,以避免多次使用线性算法请求命名特性的值.

JavaScript性能优化小知识总结(转)

JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个

javascript性能优化-repaint和reflow

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显. 何时发生: 1. DOM元素的添加.修改(内容).删除( Reflow + Repa

[转]JavaScript性能优化

如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍JavaScript性能优化的技巧,并提供相应的测试用例,供大家在自己使用的浏览器上验证, 同时会对特定的JavaScript背景知识做一定的介绍. 变量声明带上var 如果声明变量忘记了var,那么js引擎将会遍历整个作用域查找这个变量,结果不管找到与否,都是悲剧. 如果在上级作用域找到了这个变量,

Linux性能优化和监控系列(一)——top工具

解释服务器发生了什么——top工具 在检查服务器的详细工作性能状态前,系统管理员需要对当前服务器状态有总体的了解. top是检查服务器总体状态的强有力工具, 通过top可以获取CPU, Memory, Process运行信息, 如下是运行top命令后的数据显示: top - 20:08:09 up 10 min,  1 user,  load average: 0.00, 0.02, 0.01 Tasks: 104 total,  1 running, 103 sleeping,  0 stop

摘:JavaScript性能优化小知识总结

原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太

JavaScript性能优化小窍门实例汇总

JavaScript性能优化小窍门实例汇总在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多. 但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题. 因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上下文.解析.编译.执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识. 什么是高性能的 JavaScript 代码? 尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型,可以用作参考:RAIL模型. 响应 如果你的应用程序能在1

JavaScript强化教程——javascript性能优化

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——数据存取 数据的存取位置也影响着JavaScript的运行速度,我们来总结一下如能分配存取位置最合理,能够高效的运行JavaScript数据存取位置 分为 1.字面量(如true.false.null等) 2.本地变量(var a=5;) 3.数组元素(var arr=[]; arr[0]=5;) 4.对象成员 以上这些都可以存储数据根据不同浏览器进行的200 000次读取数据所需时间得出,由快到慢为