夢迴前端-數據類型篇
關於夢迴前端 每天一個重要的知識點，以問答的形式進行反推，利用碎片時間來完成自我提升 Day1 數據類型篇 説在前面 JS是典型的弱類型(動態)語言, 意味着你不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定, 也意味着你可以使用同一個變量保存不同類型的數據 請簡述Js中有哪些數據類型? Js中每一個值都屬於某一種數據類型, 根據最新的語言標準，一共有8種類型 Boolean N
昵稱 刀哥
動態
DIY 一個前端性能監控系統
Github鏈接:Nemo Metrics 輕量性能採集系統 Nemo近一年以來做了不少h5活動，，積累了不少優化開發流程經驗以及優化用户加載與性能經驗。 但是每次覆盤轉化率都不高,我們不希望任何用户流失。 用户為什麼會離開，是不是頁面報錯了？ 是不是某些地區解析DNS，服務器資源/CDN資源加載慢？ 大部分用户打開我們的網頁都在哪些時間區間(哪些國家/地區，哪些版本，哪些手機的用户打開用
昵稱 文叔叔叔叔
網站性能優化--性能指標及採集
引言 在平時工作中可能會遇到用户反饋：“哥們，你們的網站感覺很卡啊！”。這種來自用户的吐槽對前端同學可以説是直擊心靈的衝擊。此時就應該好好想想如何讓用户不再出現這樣的吐槽呢。首先就是指標化的瞭解自己的網站。 常用的衡量指標 可以結合兩張圖 第一張圖是瀏覽器加載整個頁面的時間線，第二張圖則是這個是Google力推的指標，主要從4個視覺反饋階段來描述頁面性能。 總結一下常用的性能指標
昵稱 求實亭下
「交流分享」從入門到放棄之計算機網絡
前言 計算機網絡對於程序員的重要性,想必不用多提～最近在梳理這方面的知識,由點成面,需要一個過程。 梳理了幾個點,借鑑了很多大佬的文章。(站在巨人的肩膀上!) 發出來大家一起學習進步一哈～之後會陸續梳理更新。 啊~枯燥的計算機網絡！ 我用 nodejs 對下面的其中幾個點做了簡單的實踐,進一步驗證原理,加深印象和理解。 HTTP/2 帶來了什麼 HTTPS 連接到底發生了什麼 什麼是中間人攻擊
昵稱 null仔
前端標準規範-v1.0
總體原則：極簡、極快、解耦 主要適用範圍：vue 單頁項目+ 文件組織規範 文件結構 原則：文件少、層級淺、資源集中、相對獨立互不影響 基本結構： . |_ node_modules |_ dist |_ src |_ assets // 公共資源 |_ img // 全局圖片 |- favicon.png |- comm
昵稱 前端一鍋煮
JSON.parse 比 Object 字面量語法更快
寫在前面 原文地址： https://www.bram.us/2019/11/25/faster-javascript-apps-with-json-parse/ 原文中包含油管視頻，有梯子並且英文好的可以直接點開鏈接觀看。 針對太長不看的讀者 因為 JSON 語法比 Javascript 的語法更簡單，因此解析 JSON 比解析 Javascript 更高效。當一個 web app 需要加載在首
昵稱 littlelyon
前端通用性能優化之cdn
通過cdn的方式可以快速訪問到靜態資源 在當前的前端框架下，結合webpack使用cdn更方便，分兩部進行 1、把dist下的圖片，js，css上傳到cdn 2、在webpack裏配置output.publicPath: 'http://cdn.test.com'，css的輸出在css-loader裏配置，同樣圖片的輸出在url-loader裏配置。 打包後的index.html
昵稱 楊龍飛
瀏覽器事件循環
完整高頻題庫倉庫地址：https://github.com/hzfe/awesome-interview 完整高頻題庫閲讀地址：https://febook.hzfe.org/ 相關問題 什麼是瀏覽器事件循環 瀏覽器為什麼需要事件循環 Node.js 中的事件循環 回答關鍵點 任務隊列 異步 非阻塞 瀏覽器需要事件循環來協調事件、用户操作、腳本執行、渲染、網絡請求等。通過事件循環，瀏覽器
昵稱 HZFEStudio
聊聊前端性能指標那些事兒
作者：京東科技 郝梁 前言：作為 C 端前端研發，除了攻克業務難點以外，也要有更深層的自我目標，那就是性能優化。這事兒説大不大，説小也不小，但難度絕對不一般，所涉及的範圍優化點深入工程每個細胞。做好前端性能優化絕非簡單之事！文章主要內容介紹前端性能考核指標及優化方案。 一、前端性能指標有哪些？ 根據 chrome Lighthouse 最新規則，前端性能指標考量主要有 FCP（First Cont
昵稱 京東雲開發者
帶你揭開神秘的javascript AST面紗之AST 基礎與功能
作者：京東科技 周明亮 AST 基礎與功能 在前端裏面有一個很重要的概念，也是最原子化的內容，就是 AST ，幾乎所有的框架，都是基於 AST 進行改造運行，比如：React / Vue /Taro 等等。 多端的運行使用，都離不開 AST 這個概念。 在大家理解相關原理和背景後，我們可以通過手寫簡單的編譯器，簡單實現一個 Javascript 的代碼編譯器，編譯後在瀏覽器端正常運行。 創建數字小
昵稱 京東雲開發者
卡口服務 —— 基於前端巡檢系統的拓展實踐｜得物技術
1 背景 體驗是得物的業務關鍵詞之一，對於前端開發而言，提高用户體驗更是重要工作內容之一。 得物前端平台目前有巡檢系統、監控平台等多種手段保障線上頁面穩定運行，但是仍有一部分問題處於“監控死角”，而且巡檢、監控都屬於後置告警手段，為了確保頁面上線前就能得到一定的用户體驗保障，結合公司的戰略目標，我們決定開發一個H5頁面檢測服務，用來前置檢測即將上線的頁面，提前暴露該頁面可能存在的問題反饋給對應的開
昵稱 得物技術
React請求機制優化思路 | 京東雲技術團隊
説起數據加載的機制，有一個繞不開的話題就是前端性能，很多電商門户的首頁其實都會做一些垂直的定製優化，比如讓請求在頁面最早加載，或者在前一個頁面就進行預加載等等。隨着react18的發佈，請求機制這一塊也是被不斷談起，並且在後續其實也給出了明確的方向。 假如我們頁面中有三個組件C1、C2、C3依次嵌套，每個組件中有對應的請求F1、F2、F3，通常大多數人會使用useeffect和state變量來實現
昵稱 京東雲開發者
用 Apifox 的 Mock 功能模擬常見業務數據的最佳方法
Apifox 擁有強大的Mock 功能，兼容 Mock.js 語法的同時還提供 Nunjucks 和自定義腳本支持，能夠滿足不同場景需求。 今天給大家分享一些常見業務場景的 Mock 使用技巧，當然，實現的方法不唯一。在開始之前，你需要將 Apifox 的當前環境切換為「本地 Mock」或「雲端 Mock」環境。 模擬簡單數據 要模擬一些簡單的數據，只需在 「返回響應」 裏定義字段，系統便會自動使
昵稱 Apifox
極致性能優化：前端SSR渲染利器Qwik.js | 京東雲技術團隊
引言 前端性能已成為網站和應用成功的關鍵要素之一。用户期望快速加載的頁面和流暢的交互，而前端框架的選擇對於實現這些目標至關重要。然而，傳統的前端框架在某些情況下可能面臨性能挑戰且存在技術壁壘。 在這個充滿挑戰的背景下，我們引入了 Qwik.js 框架。Qwik.js 不僅是一個前端框架，更是一種前端性能的終極解決方案。它不僅提供了卓越的性能，還以其獨特的特點和優勢脱穎而出。 讓我們一起深入探索 Q
昵稱 京東雲開發者
Flex & Bison 開始
Flex 與 Bison 是為編譯器和解釋器的編程人員特別設計的工具： Flex 用於詞法分析（lexical analysis，或稱 scanning），把輸入分割成一個個有意義的詞塊，稱為記號（token）。 Bison 用於語法分析（syntax analysis，或稱 parsing），確定這些記號是如何彼此關聯的。 例如，如下代碼片段： alpha = beta + gamma;
昵稱 GoCoding
flex 佈局（彈性佈局 / 彈性盒子）一直沒學明白，看完這篇文章我徹底懂了
注：CRMEB 附件包已放在文章最下方，需要的可以下載，希望在互聯網的道路上對你有所啓發和幫助 容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做 main start，結束位置叫做 main end；交叉軸的開始位置叫做 cross start，結束位置叫做 cross end。 項目默認沿主軸排列。單個項目佔
昵稱 CRMEB
Flex 佈局教程：語法篇
網頁佈局（layout）是 CSS 的一個重點應用222。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地
昵稱 遺失的美好灬
遲遲沒學會grid，是因為你沒理解flex
我先問 2 個問題： 你是不是用主軸-交叉軸/輔軸/副軸的概念理解 flex 你是不是也用這個概念去理解 grid 如果你是用這種方式理解的 flex，那聽我慢慢道來 今天我打破你對 flex 的理解 打碎對 flex 理解 display: grid 和 display: flex 默認方向都是 row，為什麼他們表現出來的形式不一樣呢？ display: flex： 效果 di
昵稱 uccs
flex佈局下的<el-tooltip>位置問題與解決方案
問題描述 想在el-tabs/el-tabs裏的每一個el-tab-pane/el-tab-pane上加一個el-tooltip/el-tooltip 代碼如下所示： el-tabs v-model="choseTab" tab-position="left" el-tab-pane v-for="(config,k) in assetCheckConfig" :key="k.
昵稱 灰灰
3分鐘搞定：Flex 佈局
flex 佈局原理 全稱 flexible box，彈性佈局。 如何開啓：為元素添加 display: flex。 開啓 flex 佈局的元素，稱為 flex 容器（flex container），其子元素成為容器成員，稱為 flex 項目。 flex 佈局原理：通過給父盒子添加 display: flex，來控制盒子的位置和排列方式。 flex 佈局父盒子常見屬性 flex-direction
昵稱 麒寧
解決flex佈局space-between最後一行左對齊的方法（所有行列不同情況通用）
div class="work-list" div class="list" v-for="item in 11" :key="item" @click="$router.push('/dataList')" /div /div .work-list { display: flex; justify-content: space-between; flex-w
昵稱 煌大河ゞ
一文吃透 CSS Flex 佈局
原文鏈接：一文吃透 CSS Flex 佈局 教學遊戲 這裏有兩個小遊戲，可用來練習 flex 佈局。 塔防遊戲 送小青蛙回家 Flexbox 概述 Flexbox 佈局也叫 Flex 佈局，彈性盒子佈局。 它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來，更簡便、完整、響應式地實現各種頁面佈局。 它的主要思想是使父元素能夠調整子元素的寬度、高度、排列方式，從而更
昵稱 唐志遠
[CSS] flex佈局+white-space: nowrap寬度異常
在flex佈局中，定義一行三列並列的3個div，其中2個div寬度寫定，第3個div隨着父容器寬度由flex自適應。這是個很常見的佈局，平常使用沒有啥問題。 現在在第3個div中放置一段長的純文本(文本內容單行放置寬度大於第3個div的寬度)，且設置white-space: nowrap，此時就會出現第3個div的寬度被文本撐開，變為單行文本的寬度，而不受flex佈局的約束。且由於第3個div的寬
昵稱 DiracKeeko
Flex 佈局學習總結（對齊方式）
一、Flex佈局是什麼 Flex佈局是一種現代的、彈性的CSS佈局模型，一般簡稱彈性佈局， 全稱為Flexible Box Layout。它提供了一種更加高效、直觀的方式來設計、排列和對齊容器中的子元素。Flex佈局適用於響應式設計，能夠輕鬆適應不同屏幕大小和設備類型。 二、基本概念 容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開
昵稱 zZ_jie