通过js在ul中插入10000个li，点击li打印出li的序号

第一种 直接ul插入 花费了119ms-164ms

		window.onload = function () {
            let now = new Date()
            let ul = document.querySelector('.ul')
            for (let i = 0; i < 10000; i++) {
                let li = document.createElement('li')
                li.innerHTML = i
                ul.appendChild(li)
            }
            //事件委托
            ul.addEventListener('click', function (event) {
                let e = event || window.event  //兼容IE
                let target = e.target || e.srcElement  //兼容事件元素
                if (target.nodeName.toLowerCase() === 'li') {
                   console.log(target.innerHTML)
                }

            })
            console.log(new Date() - now);
        }

第二种方法文档碎片 花了119ms-138ms

        window.onload = function () {
            let now = new Date()
            let ul = document.querySelector('.ul')
            let frag = document.createDocumentFragment()
            for (let i = 0; i < 10000; i++) {
                let li = document.createElement('li')
                li.innerHTML = i
                frag.appendChild(li)
            }
            ul.appendChild(frag)
            ul.addEventListener('click', function (event) {
                let e = event || window.event
                let target = e.target || e.srcElement
                if (target.nodeName.toLowerCase() === 'li') {
                   console.log(target.innerHTML)
                }

            })
            console.log(new Date() - now);
        }

第三种str的方式 用了33ms-59ms

        window.onload = function () {
            let now = new Date()
            let ul = document.querySelector('.ul')
            let str = ''
            for (let i = 0; i < 10000; i++) {
                str += `<li>${i}</li>`
            }
            ul.innerHTML = str
            ul.addEventListener('click', function (event) {
                let e = event || window.event
                let target = e.target || e.srcElement
                if (target.nodeName.toLowerCase() === 'li') {
                   console.log(target.innerHTML)
                }

            })
            console.log(new Date() - now);
        }

结论：可见浏览器dom的操作是多么的昂贵，第三种方法时间是前两种方法的1/4