一、装载
先装载静态页面的引用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的过程与策略 页面加载过程中,JavaScript(简称JS)的加载与执行是至关重要的环节之一。为了优化用户体验,了解并掌握JS的加载机制是非常必要的。 ##### ...
下面,我们将详细探讨页面装载JS的关键知识点以及性能分析的方法。 首先,页面装载过程中,JS文件的加载可以分为几个步骤: 1. 静态页面加载完毕后,会接着装载引用的JS文件。这些JS文件的装载顺序通常取决于它们在...
【标题】:“基于Three.js实现室内模型的动态装载源码(智慧楼宇).zip”涉及到的是在WebGL技术基础上,利用Three.js库构建智慧楼宇的3D可视化系统,并通过动态加载来优化性能的关键技术。 【Three.js简介】: Three....
在用户与网页交互时,浏览器响应时间包括服务器响应时间、页面装载时间和页面渲染时间。为了优化整体性能,我们需要对这些部分进行详尽的分析。 1. **页面渲染时间** 页面渲染时间由脚本执行时间和浏览器引擎渲染...
一种常见的方法是通过JavaScript库,如jQuery Masonry或Pure JavaScript的Isotope。这些库提供了一套灵活的API,可以方便地设置布局参数,处理元素的动态加载和布局更新。 对于这个"瀑布流demo",我们可以推测它...
.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 ...
.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-1.8.0.min.js`是jQuery的核心库,它是压缩和优化过的版本,用于提高页面加载速度。在网页中引入这个文件,就为使用jQuery的各种功能提供了基础。 `jquery-QuinnSlideshow-1.0.js` 和 `jquery-...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象...
Vue.js是一款轻量级的前端JavaScript框架,用于构建用户界面。它具有组件化、虚拟DOM、响应式数据绑定等特性,使得开发人员可以轻松构建复杂的单页应用程序。在本项目中,Vue将用于实现前端页面的交互和展示,提供...
Sybase 12.5.0.3 引入了一组全新的系统性能监测系统表,这为用户提供了极大的便利,能够帮助用户更高效地分析和监控ASE服务器的性能。这些性能监测系统表不仅包含了大量有关服务器运行状态的信息,还作为DB-XRAY工具...
定义了两个JavaScript函数:`newwin`用于打开新窗口,`submit10`用于重新加载当前页面。这两个函数在实际分页过程中并不直接相关,但提供了额外的交互功能。 ##### 3. Java变量声明与初始化 ```jsp // 变量声明 ...
发布基本报表时,可以采用多种方法来实现,包括file方式、defineBean方式以及自定义context方式。 - **示例代码1:file方式发布** 使用`<report:html>`标签并指定`srcType`为`file`,再给出报表模板文件的具体...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,...
#### 同步与异步装载冲突的分析和解决方法(SEUG) - **概述**:分析了同步和异步加载资源时可能出现的问题,并提供了解决方案。 - **主要内容**:避免同步加载导致页面阻塞的方法。 #### 国际化(SEUG) - **概述*...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics...