`

页面装载js及性能分析方法

    博客分类:
  • js
 
阅读更多
一、装载

   先装载静态页面的引用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及性能分析方法介绍

    ### 页面装载JS及性能分析方法详解 #### 一、页面装载JS的过程与策略 页面加载过程中,JavaScript(简称JS)的加载与执行是至关重要的环节之一。为了优化用户体验,了解并掌握JS的加载机制是非常必要的。 ##### ...

    浅谈页面装载js及性能分析方法

    下面,我们将详细探讨页面装载JS的关键知识点以及性能分析的方法。 首先,页面装载过程中,JS文件的加载可以分为几个步骤: 1. 静态页面加载完毕后,会接着装载引用的JS文件。这些JS文件的装载顺序通常取决于它们在...

    基于threejs实现室内模型的动态装载源码(智慧楼宇).zip

    【标题】:“基于Three.js实现室内模型的动态装载源码(智慧楼宇).zip”涉及到的是在WebGL技术基础上,利用Three.js库构建智慧楼宇的3D可视化系统,并通过动态加载来优化性能的关键技术。 【Three.js简介】: Three....

    全面提升Web2.0应用程序的性能3[整理].pdf

    在用户与网页交互时,浏览器响应时间包括服务器响应时间、页面装载时间和页面渲染时间。为了优化整体性能,我们需要对这些部分进行详尽的分析。 1. **页面渲染时间** 页面渲染时间由脚本执行时间和浏览器引擎渲染...

    瀑布流demo

    一种常见的方法是通过JavaScript库,如jQuery Masonry或Pure JavaScript的Isotope。这些库提供了一套灵活的API,可以方便地设置布局参数,处理元素的动态加载和布局更新。 对于这个"瀑布流demo",我们可以推测它...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1

    .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 ...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 ...

    原创jQuery焦点图插件demo(含插件)

    `jquery-1.8.0.min.js`是jQuery的核心库,它是压缩和优化过的版本,用于提高页面加载速度。在网页中引入这个文件,就为使用jQuery的各种功能提供了基础。 `jquery-QuinnSlideshow-1.0.js` 和 `jquery-...

    java源码包---java 源码 大量 实例

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字  Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象...

    SpringBoot+Vue码头船只货柜管理系统任务书.docx

    Vue.js是一款轻量级的前端JavaScript框架,用于构建用户界面。它具有组件化、虚拟DOM、响应式数据绑定等特性,使得开发人员可以轻松构建复杂的单页应用程序。在本项目中,Vue将用于实现前端页面的交互和展示,提供...

    Sybase 12.5各版本新功能完全展示

    Sybase 12.5.0.3 引入了一组全新的系统性能监测系统表,这为用户提供了极大的便利,能够帮助用户更高效地分析和监控ASE服务器的性能。这些性能监测系统表不仅包含了大量有关服务器运行状态的信息,还作为DB-XRAY工具...

    jSP分页代码.doc

    定义了两个JavaScript函数:`newwin`用于打开新窗口,`submit10`用于重新加载当前页面。这两个函数在实际分页过程中并不直接相关,但提供了额外的交互功能。 ##### 3. Java变量声明与初始化 ```jsp // 变量声明 ...

    润乾报表应用开发教程

    发布基本报表时,可以采用多种方法来实现,包括file方式、defineBean方式以及自定义context方式。 - **示例代码1:file方式发布** 使用`<report:html>`标签并指定`srcType`为`file`,再给出报表模板文件的具体...

    Dorado7研发文档

    #### 同步与异步装载冲突的分析和解决方法(SEUG) - **概述**:分析了同步和异步加载资源时可能出现的问题,并提供了解决方案。 - **主要内容**:避免同步加载导致页面阻塞的方法。 #### 国际化(SEUG) - **概述*...

    java源码包2

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字  Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics...

    java源码包3

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字  Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics...

    java源码包4

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字  Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,...

Global site tag (gtag.js) - Google Analytics