Attachment 371285 Details for Bug 198530 – Patch

[patch] Patch

bug-198530-20190604084116.patch (text/plain), 6.94 KB, created by Jon Davis on 2019-06-04 08:41:17 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Jon Davis

Created: 2019-06-04 08:41:17 PDT

Size: 6.94 KB

patch

obsolete

>Subversion Revision: 246062
>diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog
>index 5e3dc29b5dc252405153d1ab961ba988a5926f86..b788fe68472a53367ab4dfda5a96a5f846827559 100644
>--- a/Websites/webkit.org/ChangeLog
>+++ b/Websites/webkit.org/ChangeLog
>@@ -1,3 +1,22 @@
>+2019-06-04  Jon Davis  <jond@apple.com>
>+
>+        Improved the performance of the lazy image loader
>+        https://bugs.webkit.org/show_bug.cgi?id=198530
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * wp-content/themes/webkit/scripts/global.js:
>+        (enableScrollableTables):
>+        (lazyLoadImages):
>+        (findParentMenu): Deleted.
>+        (i.m.menus.m.targetMenu.targetMenuClass.indexOf): Deleted.
>+        (inView): Deleted.
>+        (): Deleted.
>+        (loadImage.else.img.onload): Deleted.
>+        (loadImage): Deleted.
>+        (onMovement): Deleted.
>+        (updateImages): Deleted.
>+
> 2019-05-06  Justin Fan  <justin_fan@apple.com>
> 
>         [Web GPU] Add demos to webkit.org
>@@ -98,9 +117,9 @@
>         https://bugs.webkit.org/show_bug.cgi?id=194393
> 
>         Reviewed by Devin Rousso.
>-        
>+
>         The short viewport breakpoint styles should apply for small width
>-        windows as well, and pagination styles need to accommodate wrapped 
>+        windows as well, and pagination styles need to accommodate wrapped
>         text labels.
> 
>         * wp-content/themes/webkit/style.css:
>diff --git a/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js b/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js
>index 96be5410081d148dca2a9571024069a16c40e912..c8a515d566bb194d68277b204e08dd833c5766c9 100644
>--- a/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js
>+++ b/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js
>@@ -1,118 +1,40 @@
> document.addEventListener('DOMContentLoaded', function () {
>-    var openClass = ' open-menu',
>-        menuClass = 'menu-item-has-children',
>-        menus = document.querySelectorAll('#site-nav > div > .menu > .menu-item'),
>-        menuLinks = document.querySelectorAll('#site-nav > div > .menu > .menu-item > a'),
>-        menuitems = document.querySelectorAll('#site-nav .menu-item-has-children .menu-item > a');
>-
>-    function findParentMenu (element, className) {
>-        while ( (element = element.parentElement) && ! element.classList.contains(className) );
>-        return element;
>-    }
>-
>-    for (var i = 0; i < menuLinks.length; ++i) {
>-        menuLinks[i].addEventListener('focus', function (e) {
>-            var openMenus = findParentMenu(e.target, 'menu').getElementsByClassName(openClass.trim());
>-            for (var m = 0; m < openMenus.length; ++m) {
>-                openMenus[m].className = openMenus[m].className.replace(openClass, "");
>-            }
>-        });
>-    }
>-
>-    for (var i = 0; i < menuitems.length; ++i) {
>-        menuitems[i].addEventListener('focus', function (e) {
>-            var targetMenu = findParentMenu(e.target, menuClass),
>-                targetMenuClass = null;
>-
>-            if ( targetMenu != undefined )
>-                targetMenuClass = targetMenu.className;
>-
>-            for (var m = 0; m < menus.length; ++m) {
>-                menus[m].className.replace(openClass, "");
>-                if (menus[m] == targetMenu) {
>-                    if (targetMenuClass.indexOf(openClass) == -1) {
>-                        targetMenu.className += openClass;
>-                    }
>-                } else {
>-                    menus[m].className = menus[m].className.replace(openClass, "");
>-                }
>-            }
>-        });
>-    }
>-
>-    var latest = [], updating = false;
>-    function inView(element) {
>-        var box = element.getBoundingClientRect();
>-        return ( (box.top >= 0 && box.left >= 0 && box.top) <= (window.innerHeight || document.documentElement.clientHeight));
>-    }
>-
>-    function stageImage(element, src) {
>-        element.style.backgroundImage = 'url(' + src + ')';
>-        if (!element.parentElement.classList.contains('loaded'))
>-            element.parentElement.classList.add('loaded');
>-    }
>-
>-    function loadImage(element) {
>-        var src = element.getAttribute('data-url');
>-
>-        if (sessionStorage.getItem(src)) {
>-            setTimeout(function () { stageImage(element, src); }, 1);
>-        } else {
>-            var img = new Image();
>-            img.src = src;
>-            img.onload = function() {
>-                stageImage(element,src);
>-
>-                try {
>-                    sessionStorage.setItem(src, true);
>-                } catch (error) {
>-                    return false; // private browsing
>-                }
>-                img = undefined;
>-            }
>-        }
>-
>-    }
>-
>-    function onMovement() {
>-        if (!updating)
>-            requestAnimationFrame(updateImages);
>-        updating = true;
>-    }
>-
>-    function updateImages() {
>-        updating = false;
>-
>-        for (var i = 0; i < imgs.length; i++) {
>-            if ( inView(imgs[i]) )
>-                loadImage(imgs[i]);
>-        }
>-
>-    }
> 
>     function enableScrollableTables () {
>-        var tables = document.querySelectorAll('.bodycopy > table');
>-        var tableCount = tables.length;
>+        let tables = document.querySelectorAll('#content .bodycopy > table');
> 
>-        for (var i = 0; i < tableCount; i++) {
>-            var scrollableDiv = document.createElement('div');
>-            var paddingDiv = document.createElement('div');
>+        for (let table of tables) {
>+            let scrollableDiv = document.createElement('div');
>+            let paddingDiv = document.createElement('div');
> 
>             scrollableDiv.classList.add('scrollable');
>             paddingDiv.classList.add('scrollable-padding');
> 
>             scrollableDiv.appendChild(paddingDiv);
>-            tables[i].parentNode.insertBefore(scrollableDiv, tables[i]);
>+            table.parentNode.insertBefore(scrollableDiv, table);
> 
>-            paddingDiv.appendChild(tables[i]);
>+            paddingDiv.appendChild(table);
>         }
>     }
> 
>-    var imgs = document.querySelectorAll('div[data-url]');
>-    document.addEventListener('scroll', onMovement);
>-    document.addEventListener('resize', onMovement);
>+    function lazyLoadImages () {
>+        let backgroundImages = document.querySelectorAll('#content div[data-url]');
>+        if (backgroundImages.length == 0)
>+            return;
>+        let lazyloadImageObserver = new IntersectionObserver(function (changes) {
>+            for (let change of changes) {
>+                if (!change.isIntersecting)
>+                    return;
>+                change.target.style.backgroundImage = 'url(' + change.target.getAttribute('data-url') + ')';
>+                change.target.parentElement.classList.add('loaded');
>+                lazyloadImageObserver.unobserve(change.target);
>+            }
>+        });
>+        for (let element of backgroundImages)
>+            lazyloadImageObserver.observe(element);
>+    }
> 
>-    updateImages();
>+    lazyLoadImages();
>     enableScrollableTables();
> 
> });

Actions: View | Formatted Diff | Diff

Attachments on bug 198530: 371285 | 371301