成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解讀生產(chǎn)環(huán)境為何避免使用console.log

OBKoro1 / 2133人閱讀

摘要：向開發(fā)控制臺打印一條消息，常用來在開發(fā)時調(diào)試分析。所以最好不要在生產(chǎn)環(huán)境中任何對象。因此最好不要在頁面中任何大對象，這樣可能會影響頁面的整體性能，特別在生產(chǎn)環(huán)境中。

console.log：向web開發(fā)控制臺打印一條消息，常用來在開發(fā)時調(diào)試分析。有時在開發(fā)時，需要打印一些對象信息，但發(fā)布時卻忘記去掉console.log語句，這可能造成內(nèi)存泄露。

在傳遞給console.log的對象是不能被垃圾回收 ??，因為在代碼運行之后需要在開發(fā)工具能查看對象信息。所以最好不要在生產(chǎn)環(huán)境中console.log任何對象。

實例------>demos/log.html





  
  
  
  Leaker

這里結(jié)合Chrome的Devtools–>Performance做一些分析，操作步驟如下：

??注：最好在隱藏窗口中進行分析工作，避免瀏覽器插件影響分析結(jié)果

開啟【Performance】項的記錄

執(zhí)行一次CG，創(chuàng)建基準參考線

連續(xù)單擊【click】按鈕三次，新建三個Leaker對象

執(zhí)行一次CG

停止記錄

可以看出【JS Heap】線最后沒有降回到基準參考線的位置，顯然存在沒有被回收的內(nèi)存。如果將代碼修改為：

!function () {
  function Leaker() {
    this.init();
  };
  Leaker.prototype = {
    init: function () {
      this.name = (Array(100000)).join("*");
    },

    destroy: function () {
      // do something....
    }
  };
  document.querySelector("input").addEventListener("click", function () {
    new Leaker();
  }, false);
}()

去掉console.log("Leaking an object %o: %o", (new Date()), this);語句。重復上述的操作步驟，分析結(jié)果如下：

從對比分析結(jié)果可知，console.log打印的對象是不會被垃圾回收器回收的。因此最好不要在頁面中console.log任何大對象，這樣可能會影響頁面的整體性能，特別在生產(chǎn)環(huán)境中。除了console.log外，另外還有console.dir、console.error、console.warn等都存在類似的問題，這些細節(jié)需要特別的關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90197.html

相關(guān)文章

  • 【用故事解讀 MobX源碼（一）】 autorun

    摘要：隨后，執(zhí)行官給出一張當張三存款發(fā)生變化之時，此機構(gòu)的運作時序圖的確，小機構(gòu)靠人力運作，大機構(gòu)才靠制度運轉(zhuǎn)。第一條語句創(chuàng)建觀察員第一條語句張三我們調(diào)用的時候，就創(chuàng)建了對象，對象的所有屬性都將被拷貝至一個克隆對象并將克隆對象轉(zhuǎn)變成可觀察的。 ================前言=================== 初衷：網(wǎng)上已有很多關(guān)于 MobX 源碼解讀的文章，但大多閱讀成本甚高。...

    qieangel2013 評論0 收藏0

  • 【underscore 源碼解讀】Array Functions 相關(guān)源碼拾遺 & 小結(jié)

    摘要：最近開始看源碼，并將源碼解讀放在了我的計劃中。將轉(zhuǎn)為數(shù)組同時去掉第一個元素之后便可以調(diào)用方法總結(jié)數(shù)組的擴展方法就解讀到這里了，相關(guān)源碼可以參考這部分。放個預告，下一篇會暫緩下，講下相關(guān)的東西，敬請期待。 Why underscore 最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀 放在了我的 2016 計劃中。 閱讀一些著名框架類庫的源碼，就好...

    SimpleTriangle 評論0 收藏0

  • 【用故事解讀 MobX源碼（二）】 computed

    摘要：場景為了多維度掌控嫌疑犯的犯罪特征數(shù)據(jù)，你警署最高長官想要獲取并實時監(jiān)控張三的貸款數(shù)額存貸比存款和貸款兩者比率的變化。 ================前言=================== 初衷：以系列故事的方式展現(xiàn) MobX 源碼邏輯，盡可能以易懂的方式講解源碼； 本系列文章： 《【用故事解讀 MobX源碼（一）】 autorun》 《【用故事解讀 MobX源碼（二）】...

    Ethan815 評論0 收藏0

  • redux源碼解讀--compose源碼解析

    摘要：源碼解析模塊的代碼十分簡練，但是實現(xiàn)的作用卻是十分強大。只傳遞一個參數(shù)的時候，就直接把這個函數(shù)返回返回組合函數(shù)這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試例子可以關(guān)注源碼解讀倉庫 compose源碼解析 compose模塊的代碼十分簡練，但是實現(xiàn)的作用卻是十分強大。redux為何稱為redux？有人說就是reduce和flux的結(jié)合體，而reduce正是comp...

    lk20150415 評論0 收藏0

  • 細談JavaScript中的一些設(shè)計模式

    摘要：注意事項聲明函數(shù)時候處理業(yè)務(wù)邏輯區(qū)分和單例的區(qū)別，配合單例實現(xiàn)初始化構(gòu)造函數(shù)大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實例。 @(書籍閱讀)[JavaScript, 設(shè)計模式] 常見設(shè)計模式 一直對設(shè)計模式不太懂，花了一下午加一晚上的時間，好好的看了看各種設(shè)計模式，并總結(jié)了一下。 設(shè)計模式簡介 設(shè)計模式概念解讀 設(shè)計模式的發(fā)展與在JavaScript中的應(yīng)用 ...

    30e8336b8229 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<