前端性能优化

Posted →_→空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化相关的知识,希望对你有一定的参考价值。

性能优化的目的

  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个同时加载完成,不是某一个加载完成并填补空缺

以上是关于前端性能优化的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化

如何对前端性能进行优化

前端代码性能优化

如何进行前端优化

前端性能优化jQuery性能优化

前端性能优化