一、装载

先装载静态页面的引用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. bootstrap 多元素共用 popover

    <div class="popover fade bottom in small" role="tooltip" id="gPopover&qu ...

  2. Python 列表 sort() 方法

    描述 Python 列表 sort() 方法对列表进行排序. 语法 sort() 方法语法: L.sort([key=None][,reverse=False]) 参数 key-- 可选参数, 如果指 ...

  3. CTPN - 训练

    源码地址:https://github.com/eragonruan/text-detection-ctpn 该地址提供了 CTPN 的 tf 版本的实现,代码文档写得很详细,issue 里面也帮助解 ...

  4. Spring的@Required注解

    该@Required注解适用于bean属性setter方法,并表示受影响的bean属性必须在XML配置文件在配置时进行填充.否则,容器会抛出一个BeanInitializationException异 ...

  5. linux的fork()函数具体解释 子进程复制父进程什么

    #include<stdio.h>   #include<string.h>   #include<stdlib.h>   #include<unistd.h ...

  6. 解决Linux(ubuntu),windows双系统重装后恢复开机选单

    1 重装ubuntu后恢复开机选单十分简单.直接更新grub就能够了: sudo update-grub 2  重装windows后显得麻烦一点.需用u盘写入ubuntu镜像重新启动使电脑从u盘启动, ...

  7. js获取当前页面url网址等信息

    使用js获取当前页面的url网址信息. 1.设置或获取整个 URL 为字符串: window.location.href 2.设置或获取与 URL 关联的端口号码: window.location.p ...

  8. 【Android】16.3 带Intent过滤器的Services

    分类:C#.Android.VS2015: 创建日期:2016-03-01 一.简介 这一节演示带Intent过滤器的Services的基本用法. 1.配置Intent Filter 不论是本地解决方 ...

  9. ARM中LDR伪指令与LDR加载指令

    ARM指令集中,LDR通常都是作加载指令的,但是它也可以作伪指令. LDR伪指令的形式是“LDR Rn,=expr”.下面举一个例子来说明它的用法. COUNT EQU       0x4000310 ...

  10. 超烂的ELK之filebeat读取【已解决】

    搞了无数次的filebeat-->logstash今天栽了跟头 filebeat在读取如下文件的时候,openchgw.log 软连接speechgw.log.20170703183729文件 ...