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

前端优化的积累

作者: 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、使用懒加载,其实我并没有看出他的优点,当网速差的时候,可能性能上去了,但是用户体验并不佳。

相关文章

  • 前端优化的积累

    1、关于reflow与repaint的解释:http://www.jianshu.com/p/2a85de4240...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端性能优化-开篇

    前端性能优化问题是每个前端需要掌握的技术。这篇文章从渲染优化、代码优化、资源优化、构建优化、传输加载优化、更多流行...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • JavaScript

    前端 优化策略-自查表 前端性能优化常用总结鸟瞰前端 , 再论性能优化 跨域,你需要知道的全在这里内存分析与内存泄...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

网友评论

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

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