前端性能优化

Posted 2021-09-16 →_→空

性能优化的目的

1. 首屏时间
2. 首次交互时间
3. 首次有意义内容渲染时间

手段

1.只请求当前需要加载的资源

减少http请求，懒加载，异步加载，polyfill(为旧浏览器提供他原生没有支持的较新的功能)

2.缩减资源体积

打包压缩，webpack4 内置
gzip（减小js，css资源，压缩。1.2M->300kb）
图片格式的优化，压缩（tinypng.com），根据分辨率展现不同的图片
控制cookie大小，header头会带上cookie

3.时序优化

ssr（在服务端做好渲染，输出到服务端，可以做缓存,方便seo）
promise.all()
prefetch,preload,prerender

4.合理利用缓存

cdn     
http缓存
localStorage, sessionStorage

如果一段js执行事件很长，如何分析

装饰器

阿里云支持链接进行图片格式转换，转成webp 如何操作？

//转成webp格式，需要注意：webp在浏览器中的适配，url的合法性
function checkWebp(){
    try{
        return (document.createElement(\'canvas\').toDataURL(\'image/webp\').indexOf(\'image/webp\')===0)
            //转成base64，尝试转化格式，如果支持转化，则为0
    }catch(e){
        return false
    }
}
const supportWebp=checkWebp()
function getWebpImageUrl(url){
    if(!url) return url;//url是否为空
    if(!supportWebp) return url//是否支持
    if(url.startsWith(\'data:\')){return url}//是否是base64格式
    return url+\'?/x-oss-process=image/format,webp\'
}

如果页面上有巨量图片，除了懒加载，有没有其他方法限制同时加载的数量

promise实现并发控制

function limitLoad(urls,handlers,limit){
    const sequence=[].concat(urls)//拷贝另一个数组
    let promises=[]
    promises=sequence.splice(0,limit).map((url,index)=>{
        return handlers(url).then(()=>{
            return index
        })
    })
    let p=Promise.race(promises)
    for(let i=0;i<sequence.length;i++){
        p=p.then(res=>{
            promises[res]=handlers(sequence[i]).then(()=>{
                return res
            })
            return Promise.race(promises)
        })
    }
    //链式调用
}
const urls=[{
    time:1000,
    info:\'link1\',
},{
    time:2000,
    info:\'link2\',
},{
    time:3000,
    info:\'link3\',
},{
    time:4000,
    info:\'link4\',
},{
    time:3000,
    info:\'link5\',
},{
    time:2000,
    info:\'link6\',
},{
    time:1000,
    info:\'link7\',
},{
    time:3000,
    info:\'link8\',
},{
    time:1000,
    info:\'link9\',
},{
    time:1000,
    info:\'link10\',
},]
function loadImg(url){
    return new Promise((resolve,reject)=>{
        console.log("----"+url.info+"start!")
        setTimeout(()=>{
            console.log(url.info+"ok!")
            resolve()
        },url.time)
    })
}
limitLoad(urls,loadImg,3)
//目的：为了实现限制同时加载的只有3个图片，如果一个加载完成，则立即引入下一个
//不能.all 原因：是等3个同时加载完成，不是某一个加载完成并填补空缺