resourcetiming-compression - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

@@ -6,3 +6,3 @@ {
   "author": "Nic Jansma",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
@@ -22,2 +22,3 @@ "type": "git",
     "eslint": "^3.12.2",
+    "eslint-config-nicjansma": "^1.0.2",
     "expect.js": "^0.3.1",
@@ -24,0 +25,0 @@ "gulp": "^3.9.1",

README.md

 # resourcetiming-compression.js
 
-v0.4.0
+v1.0.1
 
@@ -256,8 +256,11 @@ [http://nicj.net](http://nicj.net)
 
+* v1.0.1 - 2018-04-13:
+    * Make hostname reversal configurable (#20)
+    * Add `naturalHeight` and `naturalWidth` to dimensionData (#20)
 * v1.0.0 - 2017-08-29:
     * **Breaking Changes**:
-        * Reverses hostnames in Trie entries (#10) for better compression
+        * Reverses hostnames in Trie entries ([#10]) for better compression
         * `getResourceTiming()` now returns an object of `{ restiming, servertiming }`
             instead of just `restiming` (#17)
-    * **New Features**:`
+    * **New Features**:
         * Adds ServerTiming data if available (#17)
@@ -272,6 +275,6 @@ * Adds new initiator types (#15): `beacon`, `fetch`
 * v0.3.4 - 2016-10-20:
-    * Better `src` attribute capture and HREF handling (3796c2ae3de087cad957d594ee3376fb694a6bee)
-    * Look at `rect.height|width` for dimensions (3796c2ae3de087cad957d594ee3376fb694a6bee)
+    * Better `src` attribute capture and HREF handling (3796c2ae)
+    * Look at `rect.height|width` for dimensions (3796c2ae)
 * v0.3.3 - 2016-10-20:
-    * Handle SVG:image elements (0177ee6ef4ad0bcd0d4b050deaeff4fd8d47c168)
+    * Handle SVG:image elements (0177ee6e)
 * v0.3.2 - 2016-10-20:
@@ -282,20 +285,20 @@ * Decodes resource dimensions (#6)
 * v0.3.0 - 2016-07-11:
-    * Captures dimensions (px) of resources (d54d5be493620bac5ff17542e5209859d7094c8e)
-    * Captures resource sizes (bytes) from ResourceTiming2 (d54d5be493620bac5ff17542e5209859d7094c8e)
-    * Breaks certain URLs up slightly so they don't trigger XSS filters (d54d5be493620bac5ff17542e5209859d7094c8e)
-    * Limits URLs to 500 characters, and adds the ability to trim other URLs (d54d5be493620bac5ff17542e5209859d7094c8e)
-    * Don't go more than 10 IFRAMEs deep (to avoid recursion bugs) (d54d5be493620bac5ff17542e5209859d7094c8e)
-    * Fixes browser bugs with incorrect timings (d54d5be493620bac5ff17542e5209859d7094c8e)
+    * Captures dimensions (px) of resources (d54d5be4)
+    * Captures resource sizes (bytes) from ResourceTiming2 (d54d5be4)
+    * Breaks certain URLs up slightly so they don't trigger XSS filters (d54d5be4)
+    * Limits URLs to 500 characters, and adds the ability to trim other URLs (d54d5be4)
+    * Don't go more than 10 IFRAMEs deep (to avoid recursion bugs) (d54d5be4)
+    * Fixes browser bugs with incorrect timings (d54d5be4)
 * v0.2.2 - 2016-06-01:
-    * Add 'html' initiatorType for root page (91a91404aadbdb7892a4b2b4b8a4f08c0893301a)
+    * Add 'html' initiatorType for root page (91a91404)
 * v0.2.1 - 2016-04-04:
-    * Protect against X-O frame access that crashes some browsers (f48c1915a7191a88dbb21df61f73f92172577c2c)
+    * Protect against X-O frame access that crashes some browsers (f48c1915)
 * v0.2.0 - 2015-11-23:
     * Adds a CLI (#2)
-    * Export both ResourceTimingCompression and ResourceTimingDecompression from main module (567682b75478ecc89e34522e8c2c15c9ffa92d75)
+    * Export both ResourceTimingCompression and ResourceTimingDecompression from main module (567682b7)
 * v0.1.2 - 2015-02-25:
     * Fixed initiatorType parsing (#1)
 * v0.1.1 - 2015-02-13:
-    * Fixed how redirectStart and fetchStart are calculated (567682b75478ecc89e34522e8c2c15c9ffa92d75)
+    * Fixed how redirectStart and fetchStart are calculated (567682b7)
 * v0.1.0 - 2014-10-17:
     * Initial version

src/resourcetiming-compression.js

@@ -39,2 +39,7 @@ //
     /**
+     * Should hostnames in the compressed trie be reversed or not
+     */
+    ResourceTimingCompression.HOSTNAMES_REVERSED = true;
+
+    /**
      * Initiator type map
@@ -148,10 +153,8 @@ */
                     cur = cur[letter] = { "|": node };
+                } else if (i === (letters.length - 1)) {
+                    // this is the end of our key, and we've hit an existing node.  Add our timings.
+                    cur[letter]["|"] = value;
                 } else {
-                    if (i === (letters.length - 1)) {
-                        // this is the end of our key, and we've hit an existing node.  Add our timings.
-                        cur[letter]["|"] = value;
-                    } else {
-                        // continue onwards
-                        cur = cur[letter];
-                    }
+                    // continue onwards
+                    cur = cur[letter];
                 }
@@ -216,13 +219,13 @@ }
                 return topNode;
-            } else {
-                // other nodes we return name and value separately
-                return { name: node, value: cur[node] };
             }
+
+            // other nodes we return name and value separately
+            return { name: node, value: cur[node] };
         } else if (top) {
             // top node with more than 1 child, return it as-is
             return cur;
-        } else {
-            // more than two nodes and not the top, we can't compress any more
-            return false;
         }
+
+        // more than two nodes and not the top, we can't compress any more
+        return false;
     };
@@ -262,2 +265,3 @@
     ResourceTimingCompression.getNavStartTime = function(frame) {
+        /* eslint no-unused-vars: ["error", { "varsIgnorePattern": "frameLoc" }] */
         var navStart = 0, frameLoc;
@@ -467,5 +471,5 @@
             return n.toString(36);
-        } else {
-            return typeof n === "string" ? n : "";
         }
+
+        return typeof n === "string" ? n : "";
     };
@@ -506,3 +510,3 @@
                     // xlink:href = svg:IMAGE
-                    src = el.src || el.getAttribute("src") || el.getAttribute("xlink:href");
+                    src = el.currentSrc || el.src || el.getAttribute("src") || el.getAttribute("xlink:href");
 
@@ -526,2 +530,26 @@ // change src to be relative
                             ];
+
+                            // If this is an image, it has a naturalHeight & naturalWidth
+                            // if these are different from its display height and width, we should report that
+                            // because it indicates scaling in HTML
+                            // If the image came from a srcset, then the naturalHeight/Width will be density corrected.
+                            // We get the actual physical dimensions by assigning the image to an uncorrected Image
+                            // object.
+                            // This should load from in-memory cache, so there should be no extra load.
+                            var realImg = new Image();
+                            realImg.onload = function() {
+                                if (
+                                    (realImg.naturalHeight || realImg.naturalWidth)
+                                    &&
+                                    (
+                                        entries[src][0] !== realImg.naturalHeight
+                                        ||
+                                        entries[src][1] !== realImg.naturalWidth
+                                    )
+                                ) {
+                                    entries[src].push(realImg.naturalHeight, realImg.naturalWidth);
+                                }
+                            };
+                            realImg.src = el.src;
+
                         }
@@ -670,5 +698,5 @@ }
             return sizes.map(this.toBase36).join(",").replace(/,+$/, "");
-        } else {
-            return "";
         }
+
+        return "";
     };
@@ -836,3 +864,5 @@
             url = this.trimUrl(e.name, this.trimUrls);
-            url = this.reverseHostname(url);
+            if (ResourceTimingCompression.HOSTNAMES_REVERSED) {
+                url = this.reverseHostname(url);
+            }
 
@@ -842,18 +872,16 @@ // if this entry already exists, add a pipe as a separator
                 results[url] += "|" + data;
+            } else if (visibleEntries[url] !== undefined) {
+                // For the first time we see this URL, add resource dimensions if we have them
+                // We use * as an additional separator to indicate it is not a new resource entry
+                // The following characters will not be URL encoded:
+                // *!-.()~_ but - and . are special to number representation so we don't use them
+                // After the *, the type of special data (ResourceTiming = 0) is added
+                results[url] =
+                    SPECIAL_DATA_PREFIX +
+                    SPECIAL_DATA_DIMENSION_TYPE +
+                    visibleEntries[url].map(this.toBase36).join(",").replace(/,+$/, "")
+                    + "|"
+                    + data;
             } else {
-                // for the first time we see this URL, add resource dimensions if we have them
-                if (visibleEntries[url] !== undefined) {
-                    // We use * as an additional separator to indicate it is not a new resource entry
-                    // The following characters will not be URL encoded:
-                    // *!-.()~_ but - and . are special to number representation so we don't use them
-                    // After the *, the type of special data (ResourceTiming = 0) is added
-                    results[url] =
-                        SPECIAL_DATA_PREFIX +
-                        SPECIAL_DATA_DIMENSION_TYPE +
-                        visibleEntries[url].map(this.toBase36).join(",").replace(/,+$/, "")
-                        + "|"
-                        + data;
-                } else {
-                    results[url] = data;
-                }
+                results[url] = data;
             }
@@ -860,0 +888,0 @@ }

src/resourcetiming-decompression.js

@@ -114,2 +114,7 @@ //
     /**
+     * Are hostnames in the compressed trie reversed or not
+     */
+    ResourceTimingDecompression.HOSTNAMES_REVERSED = true;
+
+    /**
      * Initiator type map
@@ -323,2 +328,7 @@ */
 
+        // If x is 0, and the last dimension, then it will be excluded, so initialize to 0
+        // If x & y are 0, and the last dimensions, then both will be excluded, so initialize to 0
+        dimensionData.y = 0;
+        dimensionData.x = 0;
+
         // Base 36 decode and assign to correct keys of dimensionData.
@@ -333,2 +343,10 @@ for (i = 0; i < dimensions.length; i++) {
 
+        // If naturalHeight and naturalWidth are missing, then they are the same as height and width
+        if (!dimensionData.hasOwnProperty("naturalHeight")) {
+            dimensionData.naturalHeight = dimensionData.height;
+        }
+        if (!dimensionData.hasOwnProperty("naturalWidth")) {
+            dimensionData.naturalWidth = dimensionData.width;
+        }
+
         return dimensionData;
@@ -468,4 +486,4 @@ };
         // Find indices of cells that were affected by our resource.
-        var low = this.searchSortedFirst(cells, {ts: startTime}, getTs);
-        var up = this.searchSortedLast(cells, {ts: responseEnd}, getTs);
+        var low = this.searchSortedFirst(cells, { ts: startTime }, getTs);
+        var up = this.searchSortedLast(cells, { ts: responseEnd }, getTs);
 
@@ -532,5 +550,5 @@ var tot = 0.0;
             return this.REV_INITIATOR_TYPES[index];
-        } else {
-            return "other";
         }
+
+        return "other";
     };
@@ -553,3 +571,6 @@
 
-        url = ResourceTimingDecompression.reverseHostname(url);
+        if (ResourceTimingDecompression.HOSTNAMES_REVERSED) {
+            url = ResourceTimingDecompression.reverseHostname(url);
+        }
+
         var initiatorType = parseInt(data[0], 10);
@@ -556,0 +577,0 @@ data = data.length > 1 ? data.split(SPECIAL_DATA_PREFIX) : [];

No alert changes

Improved metrics

Total package byte prevSize

86463

increased by1.35%

Lines of code

1783

increased by2.12%

Number of lines in readme file

302

increased by1%

Worsened metrics

Dev dependency count

17

increased by6.25%

No dependency changes