頁面裝載js及性能分析方法介紹
更新時(shí)間：2014年03月21日 16:18:08 作者：
這篇文章主要介紹了頁面裝載js及性能分析方法,需要的朋友可以參考下
一、裝載
先裝載靜態(tài)頁面的引用js文件，然后查找引用文件中是否包含onload函數(shù)，比如main.js中包含onload函數(shù)，在main.js中查找是否有對其他js文件的引用，優(yōu)先裝載引用js文件，被引用中文件的裝載順序和main.js的順序一致。
裝載完畢后，開始執(zhí)行onload函數(shù)。由于js執(zhí)行順序是順序執(zhí)行的，為提高頁面相應(yīng)速度，一般做法是在onload中只畫頁面，一些事件的綁定函數(shù)，ajax方法等可延后書寫。
二、響應(yīng)速度分析
1.借助工具進(jìn)行分析
各大瀏覽器的開發(fā)者工具（最喜歡使用火狐）可以方便的查看各個(gè)js文件、html文件、css文件及圖片的裝載及執(zhí)行時(shí)間。
2.硬編碼分析
在第一步中我們基本能定位到瓶頸js文件了，在瓶頸js中，可以使用console.time('test')和console.Endtime('test')語句對js函數(shù)及代碼塊掐取執(zhí)行時(shí)間。不過console語句只在非IE瀏覽器中執(zhí)行有效，而在IE下會(huì)報(bào)錯(cuò)。如果你偏愛使用IE，那就使用時(shí)間戳吧。在掐取時(shí)，比較方便的方法是，直接掐住整個(gè)js文件，然后使用火狐瀏覽器，按F12可以在控制臺(tái)中看到目標(biāo)js中所有函數(shù)及代碼塊的耗時(shí)，即可定位到瓶頸代碼處。
先裝載靜態(tài)頁面的引用js文件，然后查找引用文件中是否包含onload函數(shù)，比如main.js中包含onload函數(shù)，在main.js中查找是否有對其他js文件的引用，優(yōu)先裝載引用js文件，被引用中文件的裝載順序和main.js的順序一致。
裝載完畢后，開始執(zhí)行onload函數(shù)。由于js執(zhí)行順序是順序執(zhí)行的，為提高頁面相應(yīng)速度，一般做法是在onload中只畫頁面，一些事件的綁定函數(shù)，ajax方法等可延后書寫。
二、響應(yīng)速度分析
1.借助工具進(jìn)行分析
各大瀏覽器的開發(fā)者工具（最喜歡使用火狐）可以方便的查看各個(gè)js文件、html文件、css文件及圖片的裝載及執(zhí)行時(shí)間。
2.硬編碼分析
在第一步中我們基本能定位到瓶頸js文件了，在瓶頸js中，可以使用console.time('test')和console.Endtime('test')語句對js函數(shù)及代碼塊掐取執(zhí)行時(shí)間。不過console語句只在非IE瀏覽器中執(zhí)行有效，而在IE下會(huì)報(bào)錯(cuò)。如果你偏愛使用IE，那就使用時(shí)間戳吧。在掐取時(shí)，比較方便的方法是，直接掐住整個(gè)js文件，然后使用火狐瀏覽器，按F12可以在控制臺(tái)中看到目標(biāo)js中所有函數(shù)及代碼塊的耗時(shí)，即可定位到瓶頸代碼處。
相關(guān)文章
收藏Javascript中常用的55個(gè)經(jīng)典技巧
收藏Javascript中常用的55個(gè)經(jīng)典技巧...2007-08-08
JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)（三）仿微信應(yīng)用
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)（三）仿微信應(yīng)用的相關(guān)資料,需要的朋友可以參考下2015-12-12
Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
css3表現(xiàn)沖擊最大的就是動(dòng)畫了，因此很有必要去事先判斷瀏覽器是否支持，寫CSS3動(dòng)畫庫就只有部分瀏覽器支持2014-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
Javascript iframe交互并兼容各種瀏覽器的解決方法
這篇文章主要介紹了Javascript iframe交互并兼容各種瀏覽器的解決方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
本篇文章主要介紹了JS將unicode碼轉(zhuǎn)中文方法的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
函數(shù)和作用域是JavaScript的重要組成部分，我們在使用JavaScript編寫程序的過程中經(jīng)常要用到這兩部分內(nèi)容，借助此文一起來鞏固下學(xué)習(xí)的內(nèi)容吧。2016-12-12
url 里面的 #后面的部分 可以實(shí)現(xiàn)無刷新的改變url 的值。這個(gè)特點(diǎn)非常有用。比如視頻網(wǎng)站土豆中的豆單，你進(jìn)入視頻列表以后，點(diǎn)擊播放某個(gè)視頻。2010-04-04
另類網(wǎng)頁中添加運(yùn)行效果...2006-12-12