一、装载

先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main.js中包含onload函数,在main.js中查找是否有对其他js文件的引用,优先装载引用js文件,被引用中文件的装载顺序和main.js的顺序一致。 
装载完毕后,开始执行onload函数。由于js执行顺序是顺序执行的,为提高页面相应速度,一般做法是在onload中只画页面,一些事件的绑定函数,ajax方法等可延后书写。 
二、响应速度分析 
1.借助工具进行分析 
各大浏览器的开发者工具(最喜欢使用火狐)可以方便的查看各个js文件、html文件、css文件及图片的装载及执行时间。 
2.硬编码分析 
在第一步中我们基本能定位到瓶颈js文件了,在瓶颈js中,可以使用console.time('test')和console.Endtime('test')语句对js函数及代码块掐取执行时间。不过console语句只在非IE浏览器中执行有效,而在IE下会报错。如果你偏爱使用IE,那就使用时间戳吧。在掐取时,比较方便的方法是,直接掐住整个js文件,然后使用火狐浏览器,按F12可以在控制台中看到目标js中所有函数及代码块的耗时,即可定位到瓶颈代码处。

页面装载js及性能分析方法的更多相关文章

  1. Android APP性能分析方法及工具

    近期读到<Speed up your app>一文.这是一篇关于Android APP性能分析.优化的文章.在这篇文章中,作者介绍他的APP分析优化规则.使用的工具和方法.我觉得值得大家借 ...

  2. js 动画性能分析 transfrom

    1.动画实现代码 (1)使用定位实现: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  3. mysq常用l性能分析方法

    orzdba查看读写./orzdba.pl --mysql -S /data/mysql30001/mysql.sock 语句查看读写命令数量,以及数据库TPS,传输的大小 查看processlist ...

  4. php代码性能分析方法

    1.用到的函数 microtime() ,函数返回当前 Unix 时间戳和微秒数,本函数以 "msec sec" 的格式返回一个字符串,其中 sec 是自 Unix 纪元(0:00 ...

  5. Java性能分析方法

    Java调优经验 http://www.rowkey.me/blog/2016/11/02/java-profile/

  6. MiniProfiler性能分析工具— .Net Core中用法

    前言: 在日常开发中,应用程序的性能是我们需要关注的一个重点问题.当然我们有很多工具来分析程序性能:如:Zipkin等:但这些过于复杂,需要单独搭建. MiniProfiler就是一款简单,但功能强大 ...

  7. 多个JS文件性能优化

    页面中引入的JS文件是阻塞式加载的,这样会影响页面性能.以下是JS文件性能优化方法: 一:将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在 ...

  8. SQL2005性能分析一些细节功能你是否有用到?

    原文:SQL2005性能分析一些细节功能你是否有用到? 我相信很多朋友对现在越来越大的数据量而感到苦恼,可是总要面对现实啊,包括本人在内的数据库菜鸟们在开发B/S程序时,往往只会关心自己的数据是否正确 ...

  9. mongodb .explain('executionStats') 查询性能分析(转)

    mongodb性能分析方法:explain() 为了演示的效果,我们先来创建一个有200万个文档的记录.(我自己的电脑耗了15分钟左右插入完成.如果你想插更多的文档也没问题,只要有耐心等就可以了.) ...

随机推荐

  1. PLSQL_统计信息系列07_数据字典统计信息的导出和导入

    2014-05-05 Created By BaoXinjian

  2. Linux内核(14) - 二分法与printk

    人生就是一个茶几,上面摆满了杯具.内核也是一个大茶几,不过它上面的杯具是一个个的bug.确定bug什么时候被引入是一个很关键的步骤,在这个定位bug的过程中,不论有意或无意,都会很自然地用到二分查找的 ...

  3. Linux内核“问题门” - 学习问题、经验集锦

    陈宪章说:“学贵有疑,小疑则小进,大疑则大进.疑者,觉悟之机也,一番觉悟一番长进.” 培根说:“多问的人将多得.” 还在学校的时候导师在激情讲演之后对着会议室里形态各异但均静默不语的我们痛心疾首的说: ...

  4. python标准库介绍——3 stat 模块详解

    == stat 模块 == [Example 1-50 #eg-1-50] 展示了 ``stat`` 模块的基本用法, 这个模块包含了一些 ``os.stat`` 函数中可用的常量和测试函数. === ...

  5. 关于spring xml文件中的xmlns,xsi:schemaLocation(转)

    使用spring也有一段时间了,配置文件也见了不少了,但是发现配置文件的beans里面有很多链接,一开始也很迷惑,所以抽了一点时间整里了一下. 首先我们看到的一个spring的配置文件大概如下面这个样 ...

  6. ubuntu下gcc-avr安装

    ubuntu下研究arduino时发现,原来可以不用arduino IDE开发,linux下还有gcc-avr直接开发avr系列的控制器. 于是,迫不及待的查看了下相关资料,总结一下安装gcc-avr ...

  7. linux io ports io memory

    http://m.blog.csdn.net/article/details?id=7204458

  8. Oracle数据库操作类及连接方法

    创建DataBaseAccess引用库下面包括DBConnectionString.cs,DBType.cs ,SysName.cs 三个类 DBConnectionString: using Sys ...

  9. C++ 11 auto关键字

    熟悉脚本语言的人都知道,很多脚本语言都引入了“类型自动推断”技术:比如Python,可以直接声明变量,在运行时进行类型检查.随着C++11标准的发布,C++语言也引入了类型自动推断的功能,这就是我们今 ...

  10. python引用,浅拷贝,深拷贝

    1.引用 传递的是引用,原始列表改变,被赋值列表会同样改变,因为他们指向的是同一个地址. alist = [1,2,3,["a","b"]] blist = a ...