关于javascript:前端性能优化

性能优化的目标

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个同时加载实现，不是某一个加载实现并填补空缺