前端优化的积累

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比...
    rain_li阅读 385评论 1 2
  • 0. 为什么要了解浏览器是如何工作的 想要写出一个最佳实践的页面,要实现性能优化,就要好好了解了解浏览器的工作原理...
    千锋教育成都校区阅读 587评论 0 2
  • AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...
    KeKeMars阅读 9,448评论 5 89
  • 这里综合是指除了HTML、CSS、JS之外的部分,比如浏览器相关、资源文件优化等等…… 一. 浏览器内核(渲染引擎...
    初夏_summer阅读 975评论 0 4
  • 拉开窗帘,清晨的暖阳和照眼的光亮已不知去向,只有屋外雨雾濛濛,依旧隔着玻璃掌管着近几日的天气,阴沉中透着寒意。 已...
    蘼蝶音阅读 379评论 2 2

友情链接更多精彩内容