<strike id="sqmuk"></strike>

<ul id="sqmuk"></ul>

<fieldset id="sqmuk"></fieldset>

<strike id="sqmuk"></strike>

解讀生產環境為何避免使用console.log

OBKoro1 發布于2019-08-21 17:55 / 2126人閱讀

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

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

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

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





  
  
  
  Leaker

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

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

開啟【Performance】項的記錄

執行一次CG，創建基準參考線

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

執行一次CG

停止記錄

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

!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);語句。重復上述的操作步驟，分析結果如下：

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

GPU云服務器云服務器 console.log console.log() 生產環境測試環境測試環境生產環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90197.html

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

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

qieangel2013 2019-08-22 15:19 評論0 收藏0
【underscore 源碼解讀】Array Functions 相關源碼拾遺 & 小結

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

SimpleTriangle 2019-08-19 18:31 評論0 收藏0
【用故事解讀 MobX源碼（二）】 computed

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

Ethan815 2019-08-22 16:06 評論0 收藏0
redux源碼解讀--compose源碼解析

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

lk20150415 2019-08-21 17:28 評論0 收藏0
細談JavaScript中的一些設計模式

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

30e8336b8229 2019-08-19 17:47 評論0 收藏0