页面装载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中所有函数及代码块的耗时，即可定位到瓶颈代码处。

赞 (0)

相关推荐

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

    一.装载 先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main.js中包含onload函数,在main.js中查找是否有对其他js文件的引用,优先装载引用js文件,被引用中文件的装载顺序和main.js的顺序一致. 装载完毕后,开始执行onload函数.由于js执行顺序是顺序执行的,为提高页面相应速度,一般做法是在onload中只画页面,一些事件的绑定函数,ajax方法等可延后书写. 二.响应速度分析 1.借助工具进行分析 各大浏览器的开发者工具(最喜欢使用火狐

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

    一.装载 先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main.js中包含onload函数,在main.js中查找是否有对其他js文件的引用,优先装载引用js文件,被引用中文件的装载顺序和main.js的顺序一致. 装载完毕后,开始执行onload函数.由于js执行顺序是顺序执行的,为提高页面相应速度,一般做法是在onload中只画页面,一些事件的绑定函数,ajax方法等可延后书写. 二.响应速度分析 1.借助工具进行分析 各大浏览器的开发者工具(最喜欢使用火狐

  • js 函数性能比较方法

    在学习js过程中,经常会遇到同样一个功能点 这样实现也可以,那样实现也可以.但是哪个方式最优呢?自己写了一个简短的proferencesCompare 函数.代码如下: /** * 函数性能比较 * @param fns 要比较的函数数组 * @args 每个要比较函数在执行的时候传入的参数,可以是数组,或者 被调用后 返回数组类型 * @repeatCount 每个函数重复执行的次数,多次执行 拉开差距.默认值10000 * * @return [{runTime:执行repeatCount次

  • javascript(js) join函数使用方法介绍

    数组对象本身提供了许多方法用于对象本身的操作,join是其中一个方法. 格式: objArray.join(seperator) 用途:       以seperator指定的字符作为分隔符,将数组转换为字符串,当seperator为逗号时,其作用和toString()相同. 例子:       比如我们有个字符串"a","b","c"我们要输出为a,b,c这样的格式,那么我们可以这样: var a = ["a","

  • JS操作XML中DTD介绍及使用方法分析

    本文实例讲述了JS操作XML中DTD介绍及使用方法.分享给大家供大家参考,具体如下: 什么是DTD,为什么需要DTD? DTD为英文Document Type Definition,中文意思为"文档类型定义".DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码. 一个HTML文档的基本结构可分为两个主要部分: <html> <head> 头部信息 </head> <body> 可视内容 </bod

  • 利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

    利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读. 分析面板介绍 上图是 Chrome Dev Tools 的一个截图,其中,我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能,这里简单介绍一下: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...).

  • Vue.js 应用性能优化分析+解决方案

    Vue.js 应用性能优化分析+解决方案

    目录 一.介绍 二.为什么我们需要 Vue JS 性能优化? 三.Vue 性能不佳背后的主要原因 1. 生成报告 2. 运行命令和npm 运行生成 四.如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 2. 基于路线的代码拆分 3.Vue js预加载组件 4. 优化第三方库 5. 使用浏览器缓存 6. 优化和压缩图像 前言: 假设我们在开发整个 Vue 应用程序方面非常努力.js.但没有优先考虑其性能:现在,我们的应用程序需要一段时间来加载.导航.提交或执行任何用户操作

  • JS常用的几种数组遍历方式以及性能分析对比实例详解

    JS常用的几种数组遍历方式以及性能分析对比实例详解

    本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比.分享给大家供大家参考,具体如下: 前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,fo

  • js实现同一页面多个运动效果的方法

    本文实例讲述了js实现同一页面多个运动效果的方法.分享给大家供大家参考.具体分析如下: 实现原理,就是在调用的时候,给这五个元素,循环加上事件.需要注意的是,每个元素的定时器需要分开. 要点一: var speed = (target - obj.offsetWidth)/8; 缓冲运动效果,一开始速度很快,然后越来越慢,直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0,则向上取整,如果速度小于0,则向下取整. 要点

  • JS实现Ajax的方法分析

    本文实例分析了JS实现Ajax的方法.分享给大家供大家参考,具体如下: 一.什么是Ajax 不刷新的情况下读取数据或提交数据 (最早出现ajax:谷歌地图,拖动一下出现一片新的视野) 应用:用户注册.在线聊天.微博 特性:只能从服务器上去读取数据(所以我们需要配置自己的服务器程序AMP) 二.使用Ajax 1.基础:请求并显示静态TXT文件 btn.onclick=function(){ ajax('abc.txt',function(str){ alert(str); }); } ①Ajax里

随机推荐