前端从浏览器的渲染到性能优化

目录

• 问题前瞻
• 浏览器渲染
• 1.浏览器渲染图解
• 2.css解析规则
• 3.js加载和执行机制
• 4.图片的加载和渲染机制
• 性能优化
• css优化
• 使用
• 减少资源请求
• 延迟加载图像
• 大促活动实践
• 2.1 懒加载与异步加载
• 2.2.资源整合
• 2.3预解析与预加载
• 总结

<div id="div1">    
    <div class="a">    
        <div class="b">    
            ...    
        </div>    
        <div class="c">    
            <div class="d">    
                ...    
            </div>    
            <div class="e">    
                ...    
            </div>    
        </div>    
    </div>    
    <div class="f">    
        <div class="c">    
            <div class="d">    
                ...    
            </div>    
        </div>    
    </div>    
</div>

#div p.class {    
    color: red;    
}    
    
.class {    
    color: red;    
}

(function(){    
    window.gConfig =  window.gConfig || {};    
    window.gConfig.isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);    
    var hClassName;    
    if(window.gConfig.isMobile){    
        hClassName = ' phone';    
    
        document.write('<link rel="stylesheet" href="https://res.hc-cdn.com/cpage-pep-discount-area-v6/2.0.24/m/index.css" rel="external nofollow"  />');    
        document.write('<link rel="preload" href="//res.hc-cdn.com/cpage-pep-discount-area-v6/2.0.24/m/index.js" rel="external nofollow"  crossorigin="anonymous" as="script" />');    
    
    }else{    
        hClassName = ' pc';    
    
        document.write('<link rel="stylesheet" href="https://res.hc-cdn.com/cpage-pep-discount-area-v6/2.0.24/pc/index.css" rel="external nofollow"  />');    
        document.write('<link rel="preload" href="//res.hc-cdn.com/cpage-pep-discount-area-v6/2.0.24/pc/index.js" rel="external nofollow"  crossorigin="anonymous" as="script" />');    
    
    }    
    var root = document.documentElement;    
    root.className += hClassName ;    
    
})();

document.addEventListener("DOMContentLoaded", function() {    
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));    
    let active = false;    
    
    const lazyLoad = function() {    
        if (active === false) {    
            active = true;    
    
            setTimeout(function() {    
                lazyImages.forEach(function(lazyImage) {    
                    if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {    
                    lazyImage.src = lazyImage.dataset.src;    
                    lazyImage.srcset = lazyImage.dataset.srcset;    
                    lazyImage.classList.remove("lazy");    
    
                    lazyImages = lazyImages.filter(function(image) {    
                    return image !== lazyImage;    
                    });    
    
                    if (lazyImages.length === 0) {    
                    document.removeEventListener("scroll", lazyLoad);    
                    window.removeEventListener("resize", lazyLoad);    
                    window.removeEventListener("orientationchange", lazyLoad);    
                    }    
                }    
                });    
    
                active = false;    
            }, 200);    
        }    
    };    
    
    document.addEventListener("scroll", lazyLoad);    
    window.addEventListener("resize", lazyLoad);    
    window.addEventListener("orientationchange", lazyLoad);    
});

$.ajax({    
    url: url, async: false, timeout: 10000,    
    success: function (data) {    
        container.innerHTML = data;    
        var appendHtml = $('<div class="footer-wrapper">' + container.querySelector('#footer').innerHTML + '</div>');    
        var tempHtml = '<div style="display:none;">' + '<script type="text/html" id="header-lazyload-html-drop" class="header-lazyload-html" data-holder="#holder-drop">' + appendHtml.find('#header-lazyload-html-drop').html() + '<\/script><script type="text/html" id="header-lazyload-html-mbnav" class="header-lazyload-html" data-holder="#holder-mbnav">' + appendHtml.find('#header-lazyload-html-mbnav').html() + '<\/script></div>';    
        $('#footer').append(tempHtml);    
            feloader.onLoad(function () {    
            feloader.use('@cloud/common-resource/header', function () {    
            });    
            $('#footer').css('display', 'block');    
        });    
    },    
    error: function (XMLHttpRequest, textStatus, errorThrown) {    
        console.log(XMLHttpRequest.status, XMLHttpRequest.readyState, textStatus);    
    },    
});

官网的cui套件中已经有lazyload的插件支持图片懒加载,使用方法页非常简单：
<divclass="list">
<imgclass="lazyload"data-src="http://www.placehold.it/375x200/eee/444/1"src="占位图片URL"/>
<imgclass="lazyload"data-src="http://www.placehold.it/375x200/eee/444/2"src="占位图片URL"/>
<imgclass="lazyload"data-src="http://www.placehold.it/375x200/eee/444/3"src="占位图片URL"/>
<divclass="lazyload"data-src="http://www.placehold.it/375x200/eee/444/3"></div>
    ...
</div>

/**    
* load image    
* @param {HTMLElement} el - the image element    
* @private    
*/    
    _load(el) {    
        let source = el.getAttribute(ATTR_IMAGE_URL);    
        if (source) {    
            let processor = this._config.processor;    
            if (processor) {    
            source = processor(source, el);    
            }    
    
            el.addEventListener('load', () => {    
            el.classList.remove(CLASSNAME);    
        });    
        // 判断是否是什么元素    
            if (el.tagName === 'IMG') {    
                el.src = source;    
            } else {    
                // 判断source是不是一个类名，如果是类名的话，则加到class里面去    
                if (/^[A-Za-z0-9_-]+$/.test(source)) {    
                    el.classList.add(source);    
                 } else {    
                    let styles = el.getAttribute('style') || '';    
                    styles += `;background-image: url(${source});`;    
                    el.setAttribute('style', styles);    
                    el.style.backgroundImage = source; // = `background-image: url(${source});`;    
                }    
            }    
    
            el.removeAttribute(ATTR_IMAGE_URL);    
        }    
    }

<div class="nov-c6-cards j-content">    
</div>

public render(){    
    this.$el.find('.j-content').html(new Xtemplate(tpl).render(mockData))    
    ...    
}

import './common/js/AGrid';    
import './common/js/jquery.base64';    
import './common/js/lang-tips';    
import './common/js/setLocaleCookie';    
import './common/js/pepDialog';

feloader.onLoad(function () {    
  feloader.use([    
    '@cloud/link-to/index',    
    '@cloud/common-resource/uba',    
    '@cloud/common-resource/footer',    
    '@cloud/common-resource/header',    
    '@cloud/common-resource/common',    
    '@cloud/common-resource/prompt.css',    
    '@cloud/common-resource/footer.css',    
  ]);    
});

<link rel="dns-prefetch" href="//res.hc-cdn.com" rel="external nofollow" >
<link rel="dns-prefetch" href="//res-static1.huaweicloud.com" rel="external nofollow" >
<link rel="dns-prefetch" href="//res-static2.huaweicloud.com" rel="external nofollow" >
<link rel="dns-prefetch" href="//res-static3.huaweicloud.com" rel="external nofollow" >

<link rel="preload" href="//res.hc-cdn.com/cnpm-feloader/1.0.6/feloader.js" rel="external nofollow"  as="script"/>
<link rel="preload" href="//polyfill.alicdn.com/polyfill.min.js?features=default,es6" rel="external nofollow"  as="script"/>
<link rel="preload" href="https://res-static3.huaweicloud.com/content/dam/cloudbu-site/archive/commons/3rdlib/jquery/jquery-1.12.4.min.js" rel="external nofollow"  as="script"/>
<link rel="preload" href="//res.hc-cdn.com/cnpm-wpk-reporter/1.0.6/wpk-performance.js" rel="external nofollow"  as="script"/>

<link rel="preload" href="" rel="external nofollow"  as="image" media="(max-width: 767px)">