美文网首页
前端优化的积累

前端优化的积累

作者: Ann_l | 来源:发表于2017-09-07 11:22 被阅读0次

    1、关于reflow与repaint的解释:http://www.jianshu.com/p/2a85de424034
    2、图片优化

    日常工作中,存放图片通常有2个途径:1、存在线上的云存储中。2、存于本地。
    具体操作建议:
    1、平台频繁使用的图片资源放在本地img文件夹里存储,反之请给data url
    有个比较典型的案例:例如实时通信中的表情包资源,请看代码

    let emojiBaseUrl = `https://files.XXXXX.com/web_im`
    
    let emojiList = {
      "emoji": {
        "[大笑]":{file:"emoji_0.png"},"[可爱]":{file:"emoji_01.png"},"[色]":{file:"emoji_02.png"},"[嘘]":{file:"emoji_03.png"},"[亲]":{file:"emoji_04.png"},"[呆]":{file:"emoji_05.png"},"[口水]":{file:"emoji_06.png"},"[呲牙]":{file:"emoji_07.png"},"[鬼脸]":{file:"emoji_08.png"},"[害羞]":{file:"emoji_09.png"}}
    
    for (let emoji in emojiList) {
      let emojiItem = emojiList[emoji]
      for (let key in emojiItem) {
        let item = emojiItem[key]
        item.img = `${emojiBaseUrl}/${emoji}/${item.file}`
      }
    }
    

    2、使用懒加载,其实我并没有看出他的优点,当网速差的时候,可能性能上去了,但是用户体验并不佳。

    相关文章

      网友评论

          本文标题:前端优化的积累

          本文链接:https://www.haomeiwen.com/subject/jiuvjxtx.html