6月iOS設備好評榜：第一蟬聯榜首近一年
作為安兔兔各種榜單里變化最小的那個，2023年6月的iOS好評榜和上個月相比沒有任何排名上的變化，僅僅是部分設備好評率的下降，長年累月的用戶評價和逐漸退出市場的老款機器讓這
前端知識中有很多相近的概念或 API，相信不少人在開發中有注意到這些相近的概念或 API，但是有時不會深入去了解異同，只要某個 API 能滿足開發需求即可。
本文將介紹一些相近的概念和 API，讓你能更清晰地了解它們的異同，在使用時更游刃有余。
前端開發中，這三個本地存儲方案可以說是很常見的，用一張圖說明下它們的區別：
圖片
querySelectorAll 可以根據傳入的 CSS 選擇器查找 HTML 元素，使用上比 getElementsByTagName 更靈活。
它們之間的不同點在于：querySelectorAll 返回的是一個靜態的 NodeList，而 getElementsByTagName 返回的是動態的。
來看下面這個示例：
<ul> <li>1</li> <li>2</li> <li>3</li></ul>接下來使用兩個方法獲取 li 元素類數組，然后再動態插入一個 li，最后查看兩個類數組的長度。
const listItems = document.querySelectorAll('li');const listItems2 = document.getElementsByTagName('li');console.log(listItems.length, listItems2.length); // 3,3const list = document.querySelector('ul');const li = document.createElement('li');li.innerHTML = '4';list.appendChild(li);console.log(listItems.length, listItems2.length); // 3, 4可以看到 querySelectorAll 方法獲取的類數組長度在動態添加 li 后還是 3，而 getElementsByTagName 的為 4。
常用的獲取元素方法中getElementsByClassName 方法、element.childNodes 和 element.children 返回的也是動態 NodeList。
children 和 childNodes 都可以用來獲取元素的子節點，不同的是 children 只會獲取 HTML 元素節點，而 childNodes 會獲取到非 HTML 元素節點，包括文本、注釋節點等。
<ul> <!-- 這里有有些內容 --> <li>A</li> <li>B</li> <li>C</li></ul>const parent = document.querySelector('ul');// 輸出 HTMLCollection(3) [li, li, li]console.log(parent.children)// 輸出 NodeList(10) [text, comment, text, text, li, text, li, text, li, text]console.log(parernt.childNodes)宏任務和微任務概念也經常在前端中出現，與之相關的就是事件循環機制。事件循環機制是必須掌握的，宏任務和微任務也可以了解下，實際開發中碰到相關問題能反應過來是宏任務和微任務的不同即可。
宏任務包括：
微任務包括：
事件循環機制如下圖：
圖片
宏任務微任務執行順序如下圖：
圖片
最后配合一個例子看下效果：
console.log('Script start')setTimeout(function () { console.log('setTimeout')}, 0)new Promise((resolve) => { console.log('Promise')}).then(function () { console.log('Promise then')})console.log('Script end')// 輸出順序為: Script start、Promise、Script end、Promise then、setTimeout一個更清晰的圖（源[2]）:
圖片
setTimeout(0) 和 requestAnimationFrame 都能把代碼延遲到下一個動畫幀運行，它們的不同在于：
處理動畫時，requestAnimationFrame 更合適， 如果你要延遲執行代碼的話，可以直接使用 setTimeout(0)。
補充一個小點：setTimeout 的語法是 setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)，除了回調函數和延遲時間，后續參數都會作為回調函數的參數。
// 1 秒后輸出 delay 1ssetTimeout(console.log, 1000, 'delay 1s')naturalWidth 是元素的自然寬度，它永遠不會改變。例如，一張 100px 寬的圖片的 naturalWidth 始終是 100px，即使通過 CSS 或 JavaScript 調整圖片大小后也不變。
而 width 是可以改變的，可以通過 CSS 或 JavaScript 設置。
圖片
stopImmediatePropagation() 方法與 stopPropagation() 方法一樣，可阻止事件冒泡。但是，stopImmediatePropagation() 方法會阻止元素同一事件的其他監聽器。
button.addEventListener('click', function () { console.log('foo')})button.addEventListener('click', function (e) { console.log('bar') e.stopImmediatePropagation()})button.addEventListener('click', function () { console.log('baz')})上面代碼中按鈕點擊后只會輸出 foo and bar，baz 的事件監聽函數不會觸發。
HTML 實體是特殊字符序列，用來表示可能被誤認為是 HTML 代碼的字符，如小于號 (<) 或雙引號 (&)。
下面是一些常見的 HTML 實體：
HTML 字符實體相比 Unicode 字符會更好記些，同時瀏覽器對 HTML 字符實體支持更好。
Unicode 是表示字符或符號的特定代碼，它們用于顯示標準字符集中可能沒有的字符，如非拉丁字母或特殊符號。
一些 Unicode 字符示例：
本文鏈接：http://www.www897cc.com/showinfo-26-92158-0.html前端中的那些 This vs That，你知道嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號