提高资源的请求速度
减少资源请求量
浏览器渲染的优化

前端一次渲染多条数据的思路

使用DocumentFragment分批渲染

适用于简单dom结构如li的渲染

DocumentFragment：表示一个没有父级的最小文本对象，作为轻量的document使用，有dom结构但不属于真实dom树节点，DocumentFragment内部修改的时候不会引起回流重绘。

写一个函数递归调用接受参数为currentTotal currentIndex 为当前渲染的总数和索引
通过document.createDocumentFragment()创建一个新的DocumentFragment
计算每页要渲染的数据量通过for循环创建新的li append到刚刚创建的DocumentFragment中
循环结束后将Fragmentappend到真实dom里
递归调用下一轮loop（递归结束条件是currentTotal<=0）

//需要插入的容器
let ul = document.getElementById('container');
// 插入十万条数据
let total = 100000;
// 一次插入 20 条
let once = 20;
//总页数
let page = total/once
//每条记录的索引
let index = 0;
//循环加载数据
function loop(curTotal,curIndex){
    if(curTotal <= 0){
        return false;
    }
    //每页多少条
    let pageCount = Math.min(curTotal , once);
    window.requestAnimationFrame(function(){ 
        let fragment = document.createDocumentFragment();
        for(let i = 0; i < pageCount; i++){
            let li = document.createElement('li');
            li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)
            fragment.appendChild(li)
        }
        ul.appendChild(fragment)
        loop(curTotal - pageCount,curIndex + pageCount)
    })
}
loop(total,index);

虚拟列表

针对长列表虚拟列表只对可见区域的列表项进行渲染

虚拟列表容器里面渲染的项数是固定的

懒加载按需加载（针对网络请求）真实dom会越来越多

虚拟列表的实现：juejin.cn/post/684490…

首页白屏

单页页面初次加载很大的js文件出现白屏

通过图片懒加载 /路由懒加载可以优化

前端性能优化（面试用）

前端一次渲染多条数据的思路

使用DocumentFragment分批渲染

虚拟列表

首页白屏