Js利用console計(jì)算代碼運(yùn)行時(shí)間的方法示例

更新時(shí)間：2017年09月24日 08:43:05 作者：專注前端30年

最近看了一本書(shū)，發(fā)現(xiàn)了個(gè)計(jì)算代碼執(zhí)行時(shí)間的方法，感覺(jué)還挺有用的，所以這篇文章主要給大家介紹了關(guān)于Javascript利用console計(jì)算代碼運(yùn)行時(shí)間的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。

前言

本文主要給大家介紹了關(guān)于Js用console計(jì)算代碼運(yùn)行時(shí)間的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

需求

如果學(xué)習(xí)前端一定時(shí)間以后，就會(huì)考慮性能方面的問(wèn)題。那么問(wèn)題來(lái)了，我們?cè)趺从?jì)算出一段代碼的運(yùn)行時(shí)間呢？

使用console.log配合Date對(duì)象計(jì)算

比如，我們計(jì)算sort方法排序十萬(wàn)個(gè)隨機(jī)數(shù)組成的數(shù)組需要用多長(zhǎng)時(shí)間的話，可以這么寫(xiě)：

    var arr = [];
    for(var i=0; i<100000; i++){
      arr.push(Math.random());
    }
    var beginTime = +new Date();
    arr.sort();
    var endTime = +new Date();
    console.log("排序用時(shí)共計(jì)"+(endTime-beginTime)+"ms");

最后在控制臺(tái)會(huì)顯示：

排序用時(shí)共計(jì)552ms

下面，再介紹一種更靈活更準(zhǔn)確的方法。

使用console.time進(jìn)行時(shí)間計(jì)算

這種方法比上一種更準(zhǔn)確，而且專門(mén)為性能產(chǎn)生的方法：
測(cè)試案例：

    var arr = [];
    for(var i=0; i<100000; i++){
      arr.push(Math.random());
    }
    console.time("sort");
    arr.sort();
    console.timeEnd("sort");

控制臺(tái)會(huì)打印出：

sort: 542.668701171875ms

這種方法在需要測(cè)試的開(kāi)始位置寫(xiě)上console.time，并且括號(hào)內(nèi)傳一個(gè)字符串。在結(jié)束的位置使用console.timeEnd方法，并再次把字符串傳入。

個(gè)人推薦第二種方式。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

H5微信公眾號(hào)授權(quán)的簡(jiǎn)單實(shí)現(xiàn)步驟
如果用戶在微信客戶端中訪問(wèn)第三方網(wǎng)頁(yè),公眾號(hào)可以通過(guò)微信網(wǎng)頁(yè)授權(quán)機(jī)制,來(lái)獲取用戶基本信息,進(jìn)而實(shí)現(xiàn)業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)授權(quán)的相關(guān)資料,需要的朋友可以參考下
2021-07-07
JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【矩形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了游戲算法中針對(duì)碰撞檢測(cè)的包盒矩形情況下的相關(guān)算法原理與操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12
Bootstrap滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件詳解
滾動(dòng)監(jiān)聽(tīng)插件是用來(lái)根據(jù)滾動(dòng)條所處在的位置自動(dòng)更新導(dǎo)航項(xiàng)目，顯示導(dǎo)航項(xiàng)目高亮顯示。這篇文章主要介紹了Bootstrap滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件的相關(guān)資料,需要的朋友可以參考下
2016-04-04
JS+CSS實(shí)現(xiàn)3D切割輪播圖
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)3D切割輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目5
這篇文章主要為大家分享了Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
JS實(shí)現(xiàn)簡(jiǎn)單日歷特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單日歷特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
raphael.js繪制中國(guó)地圖地圖繪制方法
在本文中給大家分享如何使用raphael.js來(lái)完成地圖交互,raphael.js是一個(gè)很小的javascript庫(kù)，它可以在網(wǎng)頁(yè)中實(shí)現(xiàn)繪制各種矢量圖、各類圖表、以及圖像裁剪、旋轉(zhuǎn)、運(yùn)動(dòng)動(dòng)畫(huà)等等功能,需要的朋友可以參考下
2014-02-02
javascript實(shí)現(xiàn)拖動(dòng)層效果代碼(符合標(biāo)準(zhǔn)且兼容IE,chrome,firefox)
javascript實(shí)現(xiàn)拖動(dòng)層，原理很簡(jiǎn)單，就是根據(jù)鼠標(biāo)的位置實(shí)時(shí)設(shè)置層的left和top
2013-06-06
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng)附源碼下載
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng)，9張圖告訴你，C羅欲哭無(wú)淚，另附源碼下載，方便學(xué)習(xí)
2014-06-06
談?wù)則arget=_new和_blank的不同之處
這篇文章主要介紹了target="_new"和"_blank"的區(qū)別實(shí)例詳解,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10