前端工程师必备：从浏览器的渲染到性能优化

1. 为什么css需要放在头部？
2. js为什么要放在body后面？
3. 图片的加载和渲染会阻塞页面DOM构建吗？
4. dom解析完才出现页面吗？
5. 首屏时间根据什么来判定？

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);    
    },    
});

官网的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">
<link rel="dns-prefetch" href="//res-static1.huaweicloud.com">
<link rel="dns-prefetch" href="//res-static2.huaweicloud.com">
<link rel="dns-prefetch" href="//res-static3.huaweicloud.com">

<link rel="preload" href="//res.hc-cdn.com/cnpm-feloader/1.0.6/feloader.js" as="script"/>
<link rel="preload" href="//polyfill.alicdn.com/polyfill.min.js?features=default,es6" 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" as="script"/>
<link rel="preload" href="//res.hc-cdn.com/cnpm-wpk-reporter/1.0.6/wpk-performance.js" as="script"/>

<link rel="preload" href="//res.hc-cdn.com/cpage-pep-2019nov-promotion/1.1.15/components/activity-banner/images/banner_mb.jpg" as="image" media="(max-width: 767px)">