tag Javascript

標籤
貢獻1,371
1543
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 invalidnull 頭像 yayu 頭像 icecreamlj 頭像 lengxi_16 頭像 u_15469972 頭像 tanking 頭像 codesheep_pro 頭像 u_15943685 頭像 refanbanzhang 頭像 jdcdevloper 頭像 u_17141077 頭像

@Javascript / 博客 RSS 訂閱

jdcdevloper 頭像

京東雲開發者 - 抽象語法樹AST必知必會 | 京東物流技術團隊

1 介紹 AST 打開前端項目中的 package.json，會發現眾多工具已經佔據了我們開發日常的各個角落，例如 JavaScript 轉譯、CSS 預處理、代碼壓縮、ESLint、Prettier 等。這些工具模塊大都不會交付到生產環境中，但它們的存在於我們的開發而言是不可或缺的。 Babel，Webpack，Vue-cli 和 EsLint 等很多的工具和庫的核心都是通過 Abstract

ast , 抽象語法樹 , 前端 , html5 , Javascript

收藏 評論

zzd41 頭像

superZidan - React 18 如何提升應用性能

hello 大家好，我是 superZidan，這篇文章想跟大家聊聊 React 18 如何提升應用性能 這個話題，如果大家遇到任何問題，歡迎 聯繫我 React 18 引入了併發功能，從根本上改變了 React 應用程序的渲染方式。 我們將探討這些最新功能如何影響和提高應用程序的性能 首先，讓我們退一步來了解長任務的基礎知識和相應的性能測量 主線程和長任務 當我們在瀏覽器運行 JavaScrip

性能優化 , react , chrome , dom , Javascript

收藏 評論

sovitjs 頭像

可視化PaaS開發 - 目前主流的9款Web前端框架

啓動項目時，請查看 2023 年最好的 Web 前端框架。為什麼選擇合適的工具很重要? 前端開發人員使用前端框架來簡化工作。這些軟件包通常提供可重用的代碼模塊、系統化的前端技術和預構建的接口塊。這使團隊可以更快、更輕鬆地創建可持續的 Web 應用程序和用户界面，而無需從頭開始編寫每個功能或對象。在開發 Web 應用程序時，有必要使用現代工具。 數維圖科技小編在這裏列出 2023 年 9 個流行的

前端框架 , 前端設計 , 前端 , Javascript , Web

收藏 評論

tinygeeker 頭像

江户川亮仔 - 禁止別人調試自己的前端頁面代碼

🎈 為啥要禁止？ 由於前端頁面會調用很多接口，有些接口會被別人爬蟲分析，破解後獲取數據 為了 杜絕 這種情況，最簡單的方法就是禁止人家調試自己的前端代碼 🎈 無限 debugger 前端頁面防止調試的方法主要是通過不斷 debugger 來瘋狂輸出斷點，因為 debugger 在控制枱被打開的時候就會執行 由於程序被 debugger 阻止，所以無法進行斷點調試，所以網頁的請求

經驗 , 加密 , 安全 , 前端 , Javascript

收藏 評論

autohometech 頭像

之家技術 - 汽車之家頁面性能監控建設實踐

1 前言 關注用户體驗，提高頁面性能，是每位前端研發同學的日常工作之一。提高頁面性能對業務的幫助，雖不易衡量，但肯定是利遠大於弊。如何衡量頁面性能優劣？如何幫助研發同學快速定位到頁面性能瓶頸點？一直是前端的重點工作之一。本文分享汽車之家在頁面性能監控建設方面的部分工作，主要包含三方面： 技術選型 該選擇哪些頁面性能監控技術方案？ 在儘可能不影響頁面性能的前提下，既能客觀、全面衡量頁面性能，又

監控 , 性能 , 前端 , html5 , Javascript

收藏 評論

skychx 頭像

鹵代烴 - ⚡️ The Cost Of JavaScript (2017 - 2023) | JavaScript 性能優化之旅

如果你喜歡我的文章，希望點贊👍 收藏 📁 評論 💬 三連支持一下，謝謝你，這對我真的很重要！ 吐槽時間 不知道從什麼時候開始，前端開始卷一些 “高端知識”，動不動就瀏覽器底層原理，V8 是如何運行的，倒不是説這些沒啥用，只是來勢洶洶好像不懂這些就不能糊頁面一樣。 我工作中和內核團隊與虛擬機團隊也合作過並諮詢過他們這些相關問題，大家的態度也很明確，面對這種千萬行代碼的大型工程項目，他們作為專業

性能優化 , v8 , chrome , 前端 , Javascript

收藏 評論

shine_zhu 頭像

軒軒 - 本地存儲封裝

前言 在項目中使用本地存儲(LocalStorage/SessionStorage)的場景有很多，如果有較多頻次的使用，則可以考慮簡單封裝一下。 封裝便利： 統一管理：如果視頻頻次將多，考慮將本地存儲全放到某一個文件夾中，避免後期混亂幾不好維護等問題； 序列化：存儲的時候轉字符串，使用的時候轉回來，通過公共方法處理即可，不用當使用的時候再逐個處理； 類型推斷：在實例化時傳入類型，在傳入和獲

localstorage , typescript , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - React請求機制優化思路 | 京東雲技術團隊

説起數據加載的機制，有一個繞不開的話題就是前端性能，很多電商門户的首頁其實都會做一些垂直的定製優化，比如讓請求在頁面最早加載，或者在前一個頁面就進行預加載等等。隨着react18的發佈，請求機制這一塊也是被不斷談起，並且在後續其實也給出了明確的方向。 假如我們頁面中有三個組件C1、C2、C3依次嵌套，每個組件中有對應的請求F1、F2、F3，通常大多數人會使用useeffect和state變量來實現

性能優化 , react , 前端性能 , 前端 , Javascript

收藏 評論

apifox 頭像

Apifox - JavaScript 閉包是什麼：深入瞭解

閉包是指在一個函數內部創建另一個函數，並且內部函數可以訪問外部函數的變量、參數以及其他內部函數，即使外部函數已經執行完畢。這種機制使得內部函數保留了對外部作用域的引用，即使外部作用域已經不再活躍。 為什麼閉包重要？ 閉包在 JavaScript 中具有重要的用途和價值。它們可以用於創建私有變量、封裝邏輯、避免全局污染等方面。另外，閉包還允許你在函數之外操作局部變量，從而為代碼提供更大的靈活性和可

編程 , 閉包 , 後端 , 前端 , Javascript

收藏 評論

chenchaoyang666 頭像

愚者 - RegExp基礎語法

匹配模式 創建正則表達式對象時，可以設置’m’、’i’、’g’這三個標誌，分別對應多行模式、不區分大小模式和全局模式三種 全局模式 g: 默認地，第一次匹配成功後，正則對象就停止向下匹配了。g 修飾符表示全局匹配(global)，設置’g’標誌後，正則對象將匹配全部符合條件的結果，主要用於搜索和替換 console.log('1a,2a,3a'.replace(/a/,'b'));//'1b

regexp , Javascript

收藏 評論

invalidnull 頭像

註銷 - 什麼是面向對象編程領域的胖接口 - Fat Interface

在面向對象編程（Object-Oriented Programming，簡稱 OOP）領域，"胖接口"，也稱為"Fat Interface"，是一個被廣泛認識並且應當避免的設計反模式。這個術語指的是一個接口（或抽象類）包含了大量的方法，可能超出了單一職責的原則，導致接口變得臃腫、複雜和難以維護。在本文中，我將詳細解釋什麼是胖接口，為什麼它是一個問題，並通過實例來加深理解。 胖接口的定義和問題： "

面向對象編程 , oop , 面向對象設計模式 , 前端 , Javascript

收藏 評論

zzd41 頭像

superZidan - 詳解 React 中的閉包問題

hello 大家好，我是 superZidan，這篇文章想跟大家聊聊 React 中的閉包 這個話題，如果大家遇到任何問題，歡迎 聯繫我 JavaScript 中的閉包一定是最可怕的特性之一。 即使是無所不知的 ChatGPT 也會告訴你這一點。 它也可能是最隱秘的語言概念之一。 每次編寫任何 React 代碼時，我們都會用到它，大多數時候我們甚至沒有意識到。 但最終還是無法擺脱它們：如果我們想編

react , hooks , 閉包 , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 利用中介模式開發全局控制器

中介模式定義了一個單獨的（中介）對象，來封裝一組對象之間的交互。將這組對象之間的交互委派給與中介對象交互，來避免對象之間的直接交互。 在實際的項目中，程序由許多對象組成，對象間的交流錯綜複雜。 隨着應用程序的規模增大，對象越來愈多，他們之間的關係也越來複雜。對象間很容易出現相互引用而導致程序無法運行。同時開發者需要改變或者刪除某一個對象時候，需要查找並且改造所有引用到它的對象。這樣一來，改造的成

性能優化 , 前端工程化 , 設計模式 , 中介者模式 , Javascript

收藏 評論

seanshi_fe 頭像

Sean - Vue.js中如何去定位解決內存泄漏？

Vue.js 是一個流行且強大的 JavaScript 框架，它允許我們構建動態和交互式 Web 應用程序。 然而，與任何軟件一樣，Vue.js 應用程序有時會遇到內存泄漏，從而導致性能下降和意外行為。 今天，我們將深入探討 Vue.js 應用程序中內存泄漏的原因，並探索如何定位和修復這些問題的有效策略。 什麼是內存泄漏 ? 當程序執行過程中保留不再需要的內存時（主要是一些 變量、 方法等），會阻

vue.js , 性能 , 前端 , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 前端持久化緩存優化

緩存是提升 web 應用程序有效方法之一，尤其是用户受限於網速的情況下。提升系統的響應能力，降低網絡的消耗。當然，內容越接近於用户，則緩存的速度就會越快，緩存的有效性則會越高。 之前個人寫過 前端 api 請求緩存方案。介紹的了內存中的緩存以及過期邏輯。後續也寫過 手寫一個前端存儲工具庫，該工具利用了適配器處理了不同的存儲介質（內存，IndexedDB, localStorage 等）。 不過，在

性能優化 , 前端工程化 , 前端性能優化 , 緩存 , Javascript

收藏 評論

thjjames 頭像

小皇帝James - 前端腳手架（簡易版）搭建攻略

簡介 腳手架CLI(command-line-interface)是一類快速形成工程化目錄的工具。 開發過程中，如果需要新建前端項目，我們經常都會用到腳手架來創建工程，通過命令行式的交互，可快速選擇選項並完成初始項目的搭建。而CV大法往往會帶來很多重複的刪減工作，且會導致項目分散、架構不統一等等弊端。 常見的主流框架都有自己的腳手架： create-vite @vue/cli create

腳手架cli , 工具 , 前端工程化 , 前端 , Javascript

收藏 評論

taohongjie 頭像

特拉瓦爾多 - 關於 Javascript 中 this 指向的個人總結

JavaScript中的this關鍵字表示當前執行上下文中的對象。this的指向可以根據不同的情況而變化，以下是幾種常見情況： 1. 全局上下文中 全局上下文中： 當在全局作用域中使用this時，它通常指向window對象（在瀏覽器環境中）。例如： console.log(this); // 在瀏覽器中通常指向window對象 2. 函數中 函數中： this在函數內部的指向取決於函數的調用

this的用法 , this , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 聊聊前端框架的未來 Signals

Signals 在目前前端框架的選型中遙遙領先！ 國慶節前最後一週在 Code Review 新同學的 React 代碼，發現他想通過 memo 和 useCallback 只渲染被修改的子組件部分。事實上該功能在 React 中是難以做到的。因為 React 狀態變化後，會重新執行 render 函數。也就是在組件中調用 setState 之後，整個函數將會重新執行一次。 React 本身做不到

性能優化 , 框架 , 前端工程化 , signal , Javascript

收藏 評論

tanking 頭像

TANKING - php實現callback跨域請求jsonp數據

摘要 JSONP 是 JSON with Padding 的縮寫，是一種解決跨域數據獲取的方案。由於瀏覽器的同源策略限制，不同域名之間的前端JS代碼不能相互訪問到對方的數據，JSONP通過script標籤的特性，實現在不同域名的網頁間傳遞數據。 其原理是在客户端頁面上定義一個回調函數 (callback)，然後通過script標籤向外部服務器請求數據，並將定義好的回調函數名稱作為參數放在url請求

異步請求 , callback , 跨域 , Javascript , Jsonp

收藏 評論

zhaoxiaoman 頭像

漫姐賊6 - __proto__，constructor，prototype

__proto__(實際原型)和prototype(原型屬性)不一樣！！！ constructor屬性(原型對象中包含這個屬性，實例當中也同樣會繼承這個屬性) prototype屬性(constructor.prototype原型對象) __proto__屬性(實例指向原型對象的指針) 首先弄清楚幾個概念： 什麼是對象？ 若干屬性的集合 什麼是原型？ 原型是一個對象，其他對象可以

原型 , 原型鏈 , Javascript

收藏 評論

moyuzai_zxp616510038 頭像

馳驥 - 【十四】CSS3新特性

前言 本篇章主要講述CSS3新特性，如svg、canvans以及動畫。 面試回答 1.canvas畫圓：首先獲取canvas對象，設置好寬高，用getContext方法設置2d繪圖，然後用arc方法進行繪製，arc的參數分別是圓心的x，y座標、半徑、以x軸為基準的起始角度以及結束角度，這裏設置，0到2π即可。 知識點 1.SVG 參考博客：https://juejin.cn/post/684490

css3 , less , Css , 前端 , Javascript

收藏 評論

moyuzai_zxp616510038 頭像

馳驥 - 【十五】CSS性能

前言 本篇章來源於https://juejin.cn/post/7077347573740077069，內容只是經過咀嚼便於自己理解。 面試回答 1.重繪重排：簡單來説重繪就是改變某個節點的樣式，重排就是改變某些節點的佈局，比如元素尺寸變動、元素位置變動以及瀏覽器窗口變動。所以重排一定會引起重繪，而重繪不一定引起重排。減少重繪重排的方式主要是通過集中修改css來完成，比如將樣式統一放在clas

vue.js , less , Css , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 基於 Letterize.js + Anime.js 實現炫酷文本特效

如上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。 基於以上的截圖效果可以分析出以下是本次要實現的主要幾點： 文案呈圓環狀擴散開，擴散的同時文字變小 文字之間的間距從中心逐個擴散開，間距變大 文案呈圓環狀擴散開，擴散的同時文字變大 文字之間的間距從中心逐個聚攏，間距變小 動畫重複執行以上4個步驟 實現過

css3 , 動畫 , Css , 前端 , Javascript

收藏 評論

zzd41 頭像

superZidan - Next.js 超實用進階技巧【持續更新】

hello 大家好，我是 superZidan，這篇文章想跟大家聊聊Next.js 進階技巧，如果大家遇到任何問題，歡迎 聯繫我或者直接微信添加superZidan41 🔥🔥🔥前方高能，乾貨滿滿，建議點贊➕關注➕收藏；後續還會 持續更新更多技巧和案例 温馨提示：如果你還是個 Next.js 新手，建議先閲讀這篇 Next.js 最佳實踐，照着這篇文章先把代碼敲一遍 Next.js 是一個強

性能優化 , next.js , ssr , Javascript

收藏 評論