快捷導(dǎo)航

淺談頁(yè)面裝載js及性能分析方法

更新時(shí)間：2014年12月09日 11:47:42 投稿：hebedich

這篇文章主要簡(jiǎn)單介紹了頁(yè)面裝載js及性能分析方法的相關(guān)資料,需要的朋友可以參考下

一、裝載

先裝載靜態(tài)頁(yè)面的引用js文件，然后查找引用文件中是否包含onload函數(shù)，比如main.js中包含onload函數(shù)，在main.js中查找是否有對(duì)其他js文件的引用，優(yōu)先裝載引用js文件，被引用中文件的裝載順序和main.js的順序一致。
裝載完畢后，開(kāi)始執(zhí)行onload函數(shù)。由于js執(zhí)行順序是順序執(zhí)行的，為提高頁(yè)面相應(yīng)速度，一般做法是在onload中只畫(huà)頁(yè)面，一些事件的綁定函數(shù)，ajax方法等可延后書(shū)寫(xiě)。

二、響應(yīng)速度分析

1.借助工具進(jìn)行分析

各大瀏覽器的開(kāi)發(fā)者工具（最喜歡使用火狐）可以方便的查看各個(gè)js文件、html文件、css文件及圖片的裝載及執(zhí)行時(shí)間。

2.硬編碼分析

在第一步中我們基本能定位到瓶頸js文件了，在瓶頸js中，可以使用console.time('test')和console.Endtime('test')語(yǔ)句對(duì)js函數(shù)及代碼塊掐取執(zhí)行時(shí)間。不過(guò)console語(yǔ)句只在非IE瀏覽器中執(zhí)行有效，而在IE下會(huì)報(bào)錯(cuò)。如果你偏愛(ài)使用IE，那就使用時(shí)間戳吧。在掐取時(shí)，比較方便的方法是，直接掐住整個(gè)js文件，然后使用火狐瀏覽器，按F12可以在控制臺(tái)中看到目標(biāo)js中所有函數(shù)及代碼塊的耗時(shí)，即可定位到瓶頸代碼處。

您可能感興趣的文章:

相關(guān)文章

javascript html5實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了javascript html5實(shí)現(xiàn)表單驗(yàn)證的具體代碼，感興趣的小伙伴們可以參考一下
2016-03-03
微信小程序使用同聲傳譯實(shí)現(xiàn)語(yǔ)音識(shí)別功能
語(yǔ)音識(shí)別可以將語(yǔ)音精準(zhǔn)識(shí)別為文字，在很多場(chǎng)景中都可以使用，本文主要介紹了微信小程序使用同聲傳譯實(shí)現(xiàn)語(yǔ)音識(shí)別功能，分享給大家，感興趣的可以了解一下
2021-06-06
JavaScript 事件監(jiān)聽(tīng)實(shí)例代碼[兼容IE,firefox] 含注釋
JavaScript事件監(jiān)聽(tīng)完整實(shí)例含注釋，非常的不錯(cuò)，大家可以直接使用。
2009-08-08
動(dòng)態(tài)加載、移除js/css文件的示例代碼
本文簡(jiǎn)單介紹動(dòng)態(tài)加載、移除、替換js/css文件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒加載，需要的朋友參考下吧
2018-03-03
javascript實(shí)現(xiàn)數(shù)組中的內(nèi)容隨機(jī)輸出
本文實(shí)例講述了javaScript數(shù)組隨機(jī)排列實(shí)現(xiàn)隨機(jī)洗牌功能的方法。分享給大家供大家參考。
2015-08-08
基于Bootstrap框架實(shí)現(xiàn)圖片切換
這篇文章主要介紹了基于Bootstrap框架實(shí)現(xiàn)圖片切換的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
微信小程序開(kāi)發(fā)實(shí)現(xiàn)的IP地址查詢功能示例
這篇文章主要介紹了微信小程序開(kāi)發(fā)實(shí)現(xiàn)的IP地址查詢功能,可實(shí)現(xiàn)基于第三方接口的IP地址查詢功能,需要的朋友可以參考下
2019-03-03
JavaScript中常見(jiàn)的高階函數(shù)總結(jié)
JavaScript的函數(shù)其實(shí)都指向某個(gè)變量,既然變量可以指向函數(shù),函數(shù)的參數(shù)能接收變量,那么一個(gè)函數(shù)就可以接收另一個(gè)函數(shù)作為參數(shù),這種函數(shù)就稱之為高階函數(shù),這篇文章主要給大家介紹了關(guān)于JavaScript中常見(jiàn)的高階函數(shù),需要的朋友可以參考下
2022-02-02
解決axios會(huì)發(fā)送兩次請(qǐng)求,有個(gè)OPTIONS請(qǐng)求的問(wèn)題
這篇文章主要介紹了解決axios會(huì)發(fā)送兩次請(qǐng)求,有個(gè)OPTIONS請(qǐng)求的問(wèn)題,需要的朋友可以參考下
2018-10-10
詳解javascript表單的Ajax提交插件的使用
本文主要介紹了javascript表單的Ajax提交插件的使用，具有一定的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2016-12-12