从浏览器的渲染到性能优化的几个问题

1.处理 HTML 标记并构建 DOM 树。
2.处理 CSS 标记并构建 CSSOM 树。
3.将 DOM 与 CSSOM 合并成一个渲染树。
4.根据渲染树来布局，以计算每个节点的几何信息。
5.将各个节点绘制到屏幕上。

从 DOM 树的根节点开始遍历每个可见节点。

某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，例如，上例中的 span 节点---不会出现在渲染树中，---因为有一个显式规则在该节点上设置了“display: none”属性。
对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。

发射可见节点，连同其内容和计算的样式。

<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>

#div1 .c .d {}
.f .c .d {}
.a .c .e {}
#div1 .f {}
.c .d{}

解析HTML【遇到标签加载图片】 —> 构建DOM树
加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树
加载javascript —> 执行javascript代码
把DOM树和样式规则树匹配构建渲染树【遍历DOM树时加载对应样式规则上的背景图片】
计算元素位置进行布局
绘制【开始渲染图片】

#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" />');
    
    document.write('<link rel="preload" href="//res.hc-cdn.com/cpage-pep-discount-area-v6/2.0.24/m/index.js" 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" />');
    
    document.write('<link rel="preload" href="//res.hc-cdn.com/cpage-pep-discount-area-v6/2.0.24/pc/index.js" 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);
    },
});

<div class="list">
<img class="lazyload" data-src="http://www.placehold.it/375x200/eee/444/1" src="占位图片URL" />
<img class="lazyload" data-src="http://www.placehold.it/375x200/eee/444/2" src="占位图片URL" />
<img class="lazyload" data-src="http://www.placehold.it/375x200/eee/444/3" src="占位图片URL" />
<div class="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';