快速瞭解 inert 屬性
歡迎關注我的公眾號：前端偵探 介紹一個全新的、和用户行為息息相關的屬性：inert。 HTMLElement.inert - Web APIs | MDN (mozilla.org) 有了這個屬性，可以更加輕易地控制很多交互行為，花幾分鐘瞭解一下吧 一、inert 是什麼？ inert是 HTMLElement 的一個布爾屬性，意為"惰性"，簡單來説，可以禁用一切交互，包括鼠標點擊、選中、拖
昵稱 XboxYan
@dom
貢獻者13
粉絲0
貢獻者
@dom
動態 列表
dom-vcr - 使用 HTML5 canvas 和 SVG 從 DOM 節點生成視頻或 GIF
📦 安裝 npm i dom-vcr 🦄 使用 錄製 2s 生成 4 幀 GIF 需要安裝 gif.js import { createVcr } from 'dom-vcr' import GIF from 'gif.js' const dom = document.querySelector('#app') const vcr = createVcr(dom, { interv
昵稱 weng
瀏覽器工作原理
瀏覽器（也稱為網絡瀏覽器或互聯網瀏覽器）是安裝在我們設備上的軟件應用程序，使我們能夠訪問萬維網。在閲讀這篇文字時，你實際上正在使用一個瀏覽器。 有許多瀏覽器正在被使用，截至2022年，使用最多的是：谷歌瀏覽器、蘋果的Safari、微軟的Edge和火狐。 但是，它們實際上是如何工作的，從我們在地址欄中鍵入網絡地址開始，到我們試圖訪問的頁面顯示在屏幕上，會發生什麼？ 關於這個問題的答案，一個極其簡化的
昵稱 superZidan
js用前綴名查找class或id節點,js模糊查詢某個dom節點
js在操作dom的場景中，有時候會有類似的場景需求。 js用前綴名查找class節點 // 參數dom為html dom節點 // 參數key為需模糊查詢的名稱字段 function queryClassNode(dom, key) { let collectArray = []; for (var i = 0; i dom.childNodes.length; i++) {
@tianmiaogongzuoshi_5ca47d59bef41
昵稱 天渺工作室
DOM動畫效果怎麼做
JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬於 web 的語言，它適用於 PC、筆記本電腦、平板電腦和移動電話。 JavaScript 被設計為向 HTML 頁面增加交互性。 許多 HTML 開發者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段添加到網頁中。下面給大家分享下JavaScript教程
昵稱 編程世界
學習HTML DOM筆記
HTML DOM 簡介 HTML DOM 定義了訪問和操作 HTML 文檔的標準。 什麼是 DOM？ DOM 是 W3C（萬維網聯盟）的標準。 DOM 定義了訪問 HTML 和 XML 文檔的標準： "W3C 文檔對象模型 （DOM） 是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。" W3C DOM 標準被分為 3 個不同的部分： • 核心 D
昵稱 阿里雲開發者
社交直播遊戲場景前端解決方案專欄（一）：關於Alice.js的起點
本文作者：QHC 前言： 長久以來，傳統前端的工作大多時候在與DOM打交道，近年來，瀏覽器廠商也在不斷努力提高DOM渲染性能，以提高用户體驗。但是更多複雜場景的出現，例如近幾年隨着在線直播、社交娛樂、各種小遊戲的火爆，前端性能的關注度持續提高。特別是遊戲場景，而我們團隊也面臨着一大波h5遊戲化場景，那麼這個系列文章，將帶讀者朋友們一起了解，雲音樂社交直播業務的遊戲化場景解決方案的整體思路與落地案例
昵稱 雲音樂技術團隊
純js、v-for、vue函數式組件、vue普通組件性能對比
先説結論 dom 節點數量對內存影響沒想象中大，js 變量才是內存佔用的元兇 內存佔用及運行性能對比：原生 js v-for div ≈ v-for 函數式組件 v-for 普通組件 去虛擬 dom 化框架正在崛起，成為一種新的選擇 dom 節點數量對內存影響沒想象中大（十萬 div 僅佔用 400mb） 測試示例 生成 100,000（十萬）個 div，內存佔用僅
昵稱 momo707577045
React 18 如何提升應用性能
hello 大家好，我是 superZidan，這篇文章想跟大家聊聊 React 18 如何提升應用性能 這個話題，如果大家遇到任何問題，歡迎 聯繫我 React 18 引入了併發功能，從根本上改變了 React 應用程序的渲染方式。 我們將探討這些最新功能如何影響和提高應用程序的性能 首先，讓我們退一步來了解長任務的基礎知識和相應的性能測量 主線程和長任務 當我們在瀏覽器運行 JavaScrip
昵稱 superZidan
解析$nextTick魔力，為啥大家都愛它？
1.為什麼需要使用$nextTick? 首先我們來看看官方對於$nextTick的定義: 在下次 DOM 更新循環結束之後執行延遲迴調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。 由於vue的試圖渲染是異步的，生命週期的created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中，原因是在created()鈎子函數執行的時候DOM其實並未進行渲染，而此時
昵稱 京東雲開發者
HTML DOM+瀏覽器BOM
一： HTML DOM 1.HTML DOM：文檔對象模型 JS操作HTML文檔的接口，JS改變頁面中的所有HTML元素、HTML屬性、CSS樣式，對所有世間做出反應;DOM是JS操作HTML和CSS的橋樑。 樹型結構 eg: 2.nodeType 1 元素節點 3 文字節點 8 註釋節點 9 docunment節點 10 DTD節點
昵稱 茶色島
javascript中的動態集合NodeList&HTMLCollection
不知道你有沒有在控制枱見到過類似這樣的輸出 我們會發現，同樣都是獲取元素的代碼，為啥一個是NodeList，一個是HTMLCollection。 那麼這倆是啥？又有啥區別，本篇文章我們就聊聊這個。 NodeList NodeList對象是節點的集合(類數組)。通常是由屬性，如Node.childNodes 和 方法（如document.querySelectorAll） 返回的
昵稱 aqiongbei
告別 DOM 的舊時代：從零重塑 Web 渲染的未來
引言 瀏覽器這玩意兒現在真夠詭異的。WebAssembly 在服務器端混得風生水起，但客户端還是那副老樣子，跟十年前沒啥區別。 WASM 粉會跟你吹，通過點 JS 膠水代碼就能調原生 Web API。但核心問題是：為啥非得用 DOM？這東西就是個默認選項罷了。本文直擊 DOM 和相關 API 的痛點，為什麼該讓它們退場了，順便腦洞下怎麼改進。 作者不是瀏覽器全棧專家——沒人能全懂了，這正是癥結所在
昵稱 葡萄城技術團隊
從一個動畫需求，來學習js中animation動畫事件的具體應用
本文通過一個具體的動畫需求，來講解一下js中animationend事件使用 在線演示效果一：https://ashuai.site/reactExamples/animationEvent 在線演示效果二：https://ashuai.work:8890/27 前言 平常，我們代碼中，會做一些事件的監聽 比如點擊事件、右鍵事件、滾動事件等 實際上，js中還提供了動畫事件的相關ap
昵稱 水冗水孚