2019/2/19

在學(xué)習(xí)js的時(shí)候，看到一些視頻或者博客 覺(jué)得很有意思的地方 口述記下來(lái)

雪碧圖 原先看到一些雪碧圖的關(guān)鍵字 也沒(méi)在意 直到前天發(fā)現(xiàn)一個(gè)很有趣的事，就是很多圖標(biāo)放在一個(gè)圖片里 很納悶 為啥把圖標(biāo)整合到一塊呢 當(dāng)時(shí)覺(jué)得有兩種可能 第一 是為了方便展示，需要用到圖片 直接用background-position:0px 0px; 可以控制顯示的圖標(biāo)，第二 是為了節(jié)省資源 加載網(wǎng)頁(yè)的時(shí)候速度快些。今天看了一個(gè)關(guān)于css background的視頻 里面有講到 圖片屬于外部資源 網(wǎng)頁(yè)用的時(shí)候 需要加載外部資源 這個(gè)外部資源也不是一次加載完成的 什么時(shí)候用到 就什么時(shí)候加載 比如說(shuō)?hover的時(shí)候 需要一張背景圖片 那么沒(méi)有觸發(fā)hover 那么這張圖片就不會(huì)加載。hover狀態(tài)加載圖片的時(shí)候 是需要時(shí)間的 哪怕0.00001毫秒 那也是有間隔，這個(gè)間隔沒(méi)有圖片展示 就會(huì)造成空白 直觀上的感覺(jué)就是閃爍一下 這個(gè)體驗(yàn)很不好，所以把所有的圖標(biāo)放在一起， 一次加載完成。需要用的某個(gè)圖標(biāo) 不需要加載 直接用background-position 展示對(duì)應(yīng)的圖標(biāo) 這樣就不造成閃爍 第二 也驗(yàn)證了我的猜想 節(jié)省資源 提升網(wǎng)頁(yè)加載速度。另外再說(shuō)一下網(wǎng)頁(yè)加載機(jī)制 加載整體網(wǎng)頁(yè)是一次 加載外部資源一次。比如說(shuō) 一個(gè)網(wǎng)頁(yè) 只有一張圖片 則需要加載兩次 一次網(wǎng)頁(yè) 一次是加載圖片。

雪碧圖示例

今天還發(fā)現(xiàn)一個(gè)有趣的事，js里面的字符替換 我需要替換字符串的某個(gè)字符 直接調(diào)用str.replace("要替換的字符","替換什么樣的") ，我的主觀意識(shí) 以為 就是把所有的選中的字符 替換成某個(gè)字符 比如 asdasfdafa.replace("a","b") 就成了bsdbsfdbfb 把所有的a替換了b 但是但是 并不是這樣的 運(yùn)行后 只替換了第一個(gè)a字符 變成了bsdasfdafa 后面的沒(méi)替換，有點(diǎn)奇怪 就去網(wǎng)上找到了解決辦法?asdasfdafa.replace(/b/g, "a") 這樣就全部替換了 。這是一個(gè)正則表達(dá)式?/a 意思找到需要替換的字符 /g 意思全部。整體意思 就是替換全部a字符。