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进行数据可视化准

以后再填这个坑

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

  1. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  2. javascript性能优化-repaint和reflow

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...

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

    原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...

  4. Javascript 性能优化的一点技巧

    把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.

  5. JavaScript 性能优化技巧分享

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...

  6. javascript性能优化:创建javascript无阻塞脚本

    javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使 ...

  7. javascript性能优化总结一(转载人家)

    一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于 ...

  8. JavaScript 性能优化1

    一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于 ...

  9. JavaScript性能优化 DOM编程

    最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...

随机推荐

  1. 我为NET狂官方面试题-数据库篇答案

    题目:http://www.cnblogs.com/dunitian/p/6028838.html 汇总:http://www.cnblogs.com/dunitian/p/5977425.html ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. Oozie调度报错——ORA-00918:未明确定义列

    Oozie在执行sqoop的时候报错,同样的SQL在sqoop中可用,在oozie中不可用: Caused by: java.sql.SQLSyntaxErrorException: ORA-0091 ...

  4. Java项目往数据库中插入数据,出现中文乱码

    项目环境: JSP+Servlet+Mysql数据库 需要检查的地方: 1. java项目整体的编码格式为utf-8.并且将数据传递给数据库之前,数据是否依旧是正常的(可以通过打断点的方式一步步跟踪查 ...

  5. vs.net2008工具栏上找不到debug/release选项

    使用vs.net多年,以前不时会用到release发布,近几年几乎不用的.近来生成时感觉有些项目使用了release选项,因为生成的dll的位置变了.于是想调整回bebug,发现vs.net2008的 ...

  6. IO流-ZIP文档

    java中通常使用ZipInputStream来读ZIP文档 ZIP文档(通常)以压缩格式存储了一个或多个文件,每个ZIP文档都有一个包含诸如文件 名字和所使用的压缩方法等信息的头.在Java中,可以 ...

  7. hadoop怎么读?怎么发音

    hadoop不是一个英文单词,是作者发明的词,hadoop名称来源作者小孩的一个}h毛填充黄色大象玩具. 它的发音是:[hædu:p]

  8. html+css复习之第3篇 | jquery | bootstrap

    html+css复习之第3篇 | jquery  | bootstrap

  9. 城堡 (spfa+cheng)

    [问题描述] 给定一张?个点?条边的无向连通图,每条边有边权.我们需要从?条边中选出? − 1条, 构成一棵树. 记原图中从 1 号点到每个节点的最短路径长度为? ? ,树中从 1 号点到每个节点的最 ...

  10. apue第七章学习总结

    apue第七章学习总结 1.main函数 程序是如何执行有关的c程序的? C程序总是从main函数开始执行.main函数的原型是 int main(int argc,char *argv[]); 其中 ...