博客 / 列表

京東雲開發者 - 聊聊前端性能指標那些事兒

作者:京東科技 郝梁 前言:作為 C 端前端研發,除了攻克業務難點以外,也要有更深層的自我目標,那就是性能優化。這事兒説大不大,説小也不小,但難度絕對不一般,所涉及的範圍優化點深入工程每個細胞。做好前端性能優化絕非簡單之事!文章主要內容介紹前端性能考核指標及優化方案。 一、前端性能指標有哪些? 根據 chrome Lighthouse 最新規則,前端性能指標考量主要有 FCP(First Cont

性能優化 , 前端性能 , 前端

京東雲開發者 - 帶你揭開神秘的javascript AST面紗之AST 基礎與功能

作者:京東科技 周明亮 AST 基礎與功能 在前端裏面有一個很重要的概念,也是最原子化的內容,就是 AST ,幾乎所有的框架,都是基於 AST 進行改造運行,比如:React / Vue /Taro 等等。 多端的運行使用,都離不開 AST 這個概念。 在大家理解相關原理和背景後,我們可以通過手寫簡單的編譯器,簡單實現一個 Javascript 的代碼編譯器,編譯後在瀏覽器端正常運行。 創建數字小

ast , 前端性能 , 前端 , Javascript

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

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

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

京東雲開發者 - 極致性能優化:前端SSR渲染利器Qwik.js | 京東雲技術團隊

引言 前端性能已成為網站和應用成功的關鍵要素之一。用户期望快速加載的頁面和流暢的交互,而前端框架的選擇對於實現這些目標至關重要。然而,傳統的前端框架在某些情況下可能面臨性能挑戰且存在技術壁壘。 在這個充滿挑戰的背景下,我們引入了 Qwik.js 框架。Qwik.js 不僅是一個前端框架,更是一種前端性能的終極解決方案。它不僅提供了卓越的性能,還以其獨特的特點和優勢脱穎而出。 讓我們一起深入探索 Q

性能優化 , 前端性能 , ssr , 前端

京東雲開發者 - Python網絡爬蟲原理及實踐 | 京東雲技術團隊

作者:京東物流 田禹 1 網絡爬蟲 網絡爬蟲:是一種按照一定的規則,自動地抓取萬維網信息的程序或者腳本。 網絡爬蟲相關技術和框架繁多,針對場景的不同可以選擇不同的網絡爬蟲技術。 2 Scrapy框架(Python) 2.1. Scrapy架構 2.1.1. 系統架構 2.1.2. 執行流程 總結爬蟲開發過程,簡化爬蟲執行流程如下圖所示: 爬蟲運行主要流程如下: (1) Scrapy啓動Spid

webmagic , python爬蟲 , scrapy , Python

京東雲開發者 - 自動化離線交付在雲原生的應用和思考

作者:京東科技 王曉飛 前言 本文不談論具體的技術和方案,在對於每一個產品來講,都有其特殊性存在。單一的產品解決方法並不適合所有的產品。但是我們可以提供一種思路,一種通用方法,甚至我們曾經在某個技術點走的彎路,旨在為各位在離線設計上有更多的案例可循。 對離線的理解 相對於公網應用,可以從公共鏡像倉庫拉取鏡像,比如Dockerhub,各大雲廠商的公共鏡像倉庫。二進制編譯文件,軟件包也非常方便的從gi

github , 依賴注入 , 自動化 , 模塊化 , 雲原生

京東雲開發者 - Java模塊化應用實踐之精簡JRE | 京東雲技術團隊

導語 Java9及以後的版本引入了模塊化特性,但是直到今天JDK21都發布了,依然沒有被大量使用起來,那麼這個特性就真的沒啥意義了嗎? 別忘了,Java本身可是把模塊化做到了極致的,所以可以利用這個特性對JRE本身進行定製化或者精簡化。 由於平時偶爾會開發一些Java的客户端應用,這時精簡JRE的需求就凸顯出來,讓自己的程序帶着最精簡的JRE到處運行。 實際實踐了一段時間之後發現“真香!” 現在把

jre , 模塊化 , JAVA , 後端

京東雲開發者 - jar包的精細化運營,Java模塊化簡介 | 京東雲技術團隊

圖:模塊化手機概念 一、什麼是Java模塊化 Java模塊化(module)是Java9及以後版本引入的新特性。 官方對模塊的定義為:一個被命名的,代碼和數據的自描述集合。( the module, which is a named, self-describing collection of code and data)。 早在Java7的時候就被提出,但由於其複雜性,不斷跳票,直到Ja

jar包 , 模塊化 , JAVA , 模塊化開發 , 後端

京東雲開發者 - 邏輯漏洞挖掘之XSS漏洞原理分析及實戰演練 | 京東物流技術團隊

一、前言 2月份的1.2億條用户地址信息泄露再次給各大公司敲響了警鐘,數據安全的重要性愈加凸顯,這也更加堅定了我們推行安全測試常態化的決心。隨着測試組安全測試常態化的推進,有更多的同事對邏輯漏洞產生了興趣,本系列文章旨在揭秘邏輯漏洞的範圍、原理及預防措施,逐步提升大家的安全意識。作為開篇第一章,本文選取了廣為熟知的XSS邏輯漏洞進行介紹。 二、XSS漏洞介紹 1.XSS漏洞的定義 跨站腳本(Cro

安全防護 , 測試 , 漏洞 , 安全 , xss

京東雲開發者 - Jmeter壓測實戰:Jmeter二次開發之自定義函數 | 京東雲技術團隊

1 前言 Jmeter是Apache基金會下的一款應用場景非常廣的壓力測試工具,具備輕量、高擴展性、分佈式等特性。Jmeter已支持實現隨機數、計數器、時間戳、大小寫轉換、屬性校驗等多種函數,方便使用人員使用。如果在使用過程中存在和業務強耦合的常用功能函數,在Jmeter不支持的情況下,那就需要單獨開發自定義函數實現特定功能。 本文介紹如何開發Jmeter自定義函數實現快速生成京東宙斯下單標準si

函數 , jmeter , 壓測 , 測試

京東雲開發者 - 當我們在談論構造函數注入的時候我們在談論什麼 | 京東物流技術團隊

依賴注入 當涉及依賴注入(Dependency Injection,DI)時,首先推薦使用構造函數注入,因為構造函數注入有很多技術優點,而且還與面向對象的設計原則密切相關。在業界,構造函數注入作為依賴注入的一種最佳實踐得到了廣泛的認可,在Spring Framework的作者之一Rod Johnson的觀點中也得有體現。 下面是Spring官方文檔中對於依賴注入的描述: Since you c

函數 , 依賴注入 , 構造函數 , oop

京東雲開發者 - 前端部署新方案-技術篇(總體架構設計)

作者:京東科技 王光輝 1. 全流程自動化 打通 ​Jen/行雲/京東雲OSS/零售雲OSS/NP/CDN/R2M/JimDB/科技容器/零售容器/域名解析/鏡像適配​/測試站發佈等全鏈路 實現資源免維護部署,提升部署效率 2. 高可用架構 支持高併發訪問,具備主備容災機制 系統穩定性與可維護性全面提升 3. 精細化部署策略 新增前端灰度發佈能力 支持按業務需求靈活選擇部署模

編輯器 , 程序員

京東雲開發者 - 淺談冪等設計 | 京東雲技術團隊

1 冪等性 一句話,冪等就是一個執行操作,無論執行多少次,產生的效果和返回的結果都是一樣的。 2 為什麼要實現冪等性? 如今隨着互聯網技術快速發展,業務越來越複雜,系統的高併發和關鍵數據的場景越來越多。 在分佈式系統中,機器宕機和消息丟失也是需要重點關注的問題,其中的一個典型就是冪等性問題。 想想看,一個對外暴露的接口會面領很多次請求,如果不能保證冪等性會帶來什麼樣的後果? 微信進行一次扣款操作,

redis , 高併發 , 接口設計 , 冪集

京東雲開發者 - 文盤Rust -- tokio綁定cpu實踐 | 京東雲技術團隊

tokio 是 rust 生態中流行的異步運行時框架。在實際生產中我們如果希望 tokio 應用程序與特定的 cpu core 綁定該怎麼處理呢?這次我們來聊聊這個話題。 首先我們先寫一段簡單的多任務程序。 use tokio::runtime; pub fn main() { let rt = runtime::Builder::new_multi_thread() .e

rust , 異步 , cpu

京東雲開發者 - 你真的瞭解@Async嗎? | 京東雲技術團隊

使用場景: 開發中會碰到一些耗時較長或者不需要立即得到執行結果的邏輯,比如消息推送、商品同步等都可以使用異步方法,這時我們可以用到@Async。但是直接使用 @Async 會有風險,當我們沒有指定線程池時,他會默認使用其Spring自帶的 SimpleAsyncTaskExecutor 線程池,會不斷的創建線程,當併發大的時候會嚴重影響性能。所以可以將異步指定線程池使用 簡介: @Async是Sp

spring , async , springboot , 後端

京東雲開發者 - 前端開發之函數式編程實踐 | 京東雲技術團隊

作者:京東科技牛志偉 函數式編程簡介 常見應用場景 1、ES6中的map、filter、reduce等函數 [1,2,3,4,5].map(x = x * 2).filter(x = x 5).reduce((p,n) = p + n); 2、React類組件 - 函數式組件+hooks、Vue3中的組合式API 3、RxJS、Lodash和Ramda等JS庫 4、中間件/插件,如Redux中的

編程 , 函數式編程 , 前端構建 , 前端

京東雲開發者 - Backbone前端框架解讀

作者: 京東零售 陳震 一、 什麼是Backbone 在前端的發展道路中,前端框架元老之一jQuery對繁瑣的DOM操作進行了封裝,提供了鏈式調用、各類選擇器,屏蔽了不同瀏覽器寫法的差異性,但是前端開發過程中依然存在作用域污染、代碼複用度低、冗餘度高、數據和事件綁定煩瑣等痛點。 5年後,Backbone橫空出世,通過與Underscore、Require、Handlebar的整合,提供了一個輕量和

vue.js , backbone.js , 前端框架 , 架構 , mvc

京東雲開發者 - 實現動態表單的一種思路 | 京東雲技術團隊

一、動態表單是什麼 區別於傳統表單前後端配合聯調的開發實現方式,動態表單通過一種基於元數據管理的配置化方法來實現表單的動態生成,並能根據配置自由增改刪指定字段。實現特定需求的自助化。 圖1.1 傳統表單前後台協作模式 圖1.2 動態表單前後台協作模式 二、解決什麼問題 租户有個性化業務表單訴求的場景,千人千面系統 三、實現動態表單的一種思路 基於元數據管理的配置化表單技術共需三步來完成: 步驟

表單 , 前後端分離 , 動態代理

京東雲開發者 - 解析$nextTick魔力,為啥大家都愛它?

1.為什麼需要使用$nextTick? 首先我們來看看官方對於$nextTick的定義: 在下次 DOM 更新循環結束之後執行延遲迴調。在修改數據之後立即使用這個方法,獲取更新後的 DOM。 由於vue的試圖渲染是異步的,生命週期的created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中,原因是在created()鈎子函數執行的時候DOM其實並未進行渲染,而此時

vue.js , dom , 前端 , Javascript

京東雲開發者 - 一種基於閉包函數實現自動化框架斷言組件的設計實踐 | 京東物流技術團隊

1 背景 目前測試組同學基本具備自動化腳本編寫能力,為了提高效率,如何靈活運用這些維護的腳本去替代部分手工的重複工作?為了達到測試過程中更多的去使用自動化方式,如何能夠保證通過腳本覆蓋更多的校驗點,提高自動化測試的精度和力度?那麼一定是不斷的豐富斷言,符合預期場景。緊接着棘手的問題就是,在前人維護的腳本不清楚如果在方法內部修改?擔心修改原來邏輯影響正向流程運行?一個斷言方法希望應用到更多的用例中?

函數 , 閉包 , 測試 , 自動化測試

京東雲開發者 - RPA+智能問答實現微信端智能客服 | 京東雲技術團隊

背景: 由於業務發展迅速,服務的商家越來越多,目前我們售後團隊都是通過企業微信羣和客户進行溝通,平時客户的相關問題也是在企業微信中來討論解決; 但是我們售後團隊資源有限,而且有的問題客户會重複問,週末或者晚上售後同學回覆不及時影響體驗;最重要的一點商家客服習慣於在微信端進行諮詢交流; 每逢618大促,業務量突增,隨之產生的業務諮詢量也會增多,因此為了減輕客户售後團隊的壓力、提升問題響應的速度、不改

微信開發 , rpa , 智能應用 , 人工智能 , 程序員

京東雲開發者 - APP常用跨端技術棧深入分析

導讀 本文主要針對常用跨端技術Flutter、ReactNative、Weex、H5,從技術特點、基本架構、編譯原理、基本渲染流程等進行梳理分析;以及一些常見性能問題如何優化解決,然後如何進行技術選型或在進行業務開發時選擇不同技術棧的邏輯是什麼。 01 背景 在今年的敏捷團隊建設中,我通過Suite執行器實現了一鍵自動化單元測試。Juint除了Suite執行器還有哪些執行器呢?由

weex , reactnative , flutter , HTML

京東雲開發者 - 玩轉服務器之Java Web篇:手把手教你搭建Java Web環境 | 京東雲技術團隊

前言 Java Web項目,簡單來説就是我們在瀏覽器上可以看到的內容。就簡單的Web來説,服務器上也同樣需要有計算機上所需要的運行環境,如:java,tomcat,mysql 。Java Web環境可以用來開發和部署各種Web應用程序,例如網站、Web服務、Web後台管理系統等。特點是跨平台、可靠性高、安全性強、開發效率高等。本篇文章會給你比較詳細的教程,從最基本的開始,循序漸進的深入。 一、Ja

tomcat , 服務器配置 , 服務器 , JAVA , java-web

京東雲開發者 - 你想要的【微前端】都在這裏了! | 京東雲技術團隊

作者:京東零售 鄭炳懿 開篇: 如果你不知道微前端是什麼,或者不知道微前端能解決什麼問題,那麼你可能不需要微前端。 在我看來,對於每一個沒有使用過的新技術,都應該有以下幾個過程: 1、調研該技術,產出相應的調研文檔。 2、輸出技術Demo,基本的框架結構。 3、試着在項目中使用它,這一步坑會很多。 4、把它推動到線上完成真正的技術升級。 一、調研微前端 1.1 業務背景 某次遇到一個從0到1的大型

singlepage , 前端工程師 , 微前端 , 前端