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