性能优化的目标

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