js学习心得

2019/2/19

在学习js的时候，看到一些视频或者博客 觉得很有意思的地方 口述记下来

雪碧图 原先看到一些雪碧图的关键字 也没在意 直到前天发现一个很有趣的事，就是很多图标放在一个图片里 很纳闷 为啥把图标整合到一块呢 当时觉得有两种可能 第一 是为了方便展示，需要用到图片 直接用background-position:0px 0px; 可以控制显示的图标，第二 是为了节省资源 加载网页的时候速度快些。今天看了一个关于css background的视频 里面有讲到 图片属于外部资源 网页用的时候 需要加载外部资源 这个外部资源也不是一次加载完成的 什么时候用到 就什么时候加载 比如说 hover的时候 需要一张背景图片 那么没有触发hover 那么这张图片就不会加载。hover状态加载图片的时候 是需要时间的 哪怕0.00001毫秒 那也是有间隔，这个间隔没有图片展示 就会造成空白 直观上的感觉就是闪烁一下 这个体验很不好，所以把所有的图标放在一起， 一次加载完成。需要用的某个图标 不需要加载 直接用background-position 展示对应的图标 这样就不造成闪烁 第二 也验证了我的猜想 节省资源 提升网页加载速度。另外再说一下网页加载机制 加载整体网页是一次 加载外部资源一次。比如说 一个网页 只有一张图片 则需要加载两次 一次网页 一次是加载图片。

今天还发现一个有趣的事，js里面的字符替换 我需要替换字符串的某个字符 直接调用str.replace("要替换的字符","替换什么样的") ，我的主观意识 以为 就是把所有的选中的字符 替换成某个字符 比如 asdasfdafa.replace("a","b") 就成了bsdbsfdbfb 把所有的a替换了b 但是但是 并不是这样的 运行后 只替换了第一个a字符 变成了bsdasfdafa 后面的没替换，有点奇怪 就去网上找到了解决办法 asdasfdafa.replace(/b/g, "a") 这样就全部替换了 。这是一个正则表达式 /a 意思找到需要替换的字符 /g 意思全部。整体意思 就是替换全部a字符。