Tapbit 合约页面性能报告
报告概述1 背景检查 Tapbit 合约页面的性能，寻找是否有可优化的地方浏览器：Mac 上的 Chrome，版本 131.0.6778.205 (Official Build) (arm64)设备：MacBook Air M3 2 当前性能指标使用工具（WebPageTest 和隐身模式下的 LightHouse）获取 Binance、OKX 和 Tapbit 的性能指标 Binance OKX Tapbit 性能评分 91 92 67 SSR 是 是 否 页面地址：https://www.tapbit.com/contract/futures/BTC-SWAP在线结果：https://www.webpagetest.org/result/250103_AiDcE7_FE/ 为什么 SSR（服务器端渲染）的性能评分比 CSR（客户端渲染）更高？答案将在博客结尾解释。 在接下来的部分中，我们将使用本地 LightHouse 数据分析 Tapbit。 首次内容绘制 (FCP) ：（页面上第一个文本或图像被绘制）2.3 秒...
Performance Report for Tapbit BTC Contract Page
Report Overview1 backgroundcheck the performance of tapbit futures pages ,to see if there is anything can be optmizedbrowser : chrome on mac Version 131.0.6778.205 (Official Build) (arm64)device : macbook Air M3 2 Current performance indicatorsusing the tool（WebPageTest and LightHouse in incognito mode）to get the metrics result of binance ,okx and tapbit binance okx tapbit performance 91 92 67 SSR YES YES NOT url: https://www.tapbit.com/contract/futures/BTC-SWAPonline result...
How large should a JS file be
In a mobile-first world, ensuring fast JavaScript loading is critical for providing a seamless user experience. When using mobile or 4G networks, a 300 KB JavaScript file can theoretically be downloaded within 1 second, assuming a bandwidth of 2 Mbps. Here’s how the calculation works: Bandwidth Conversion:2 Mbps = 2048 Kbps 2Mbps = 2 * 1024 Kbps = 2048 Kbps ≈ 256 KB/sThis means 256 KB/s of data can be downloaded per second. Download Time:300 KB ÷ 256 KB/s ≈...
two common use of closure
there are two common use of closure: pass function as parameter,pass function as return value pass function as parameter12345678910function a1(){ let a = 100; return function(){ console.log(a) }}let a = 200;let b = a1()b();// output 100; Explanation:In this example, the function a1 defines a local variable a (with a value of 100) and returns an inner function. The inner function forms a closure over a. When b is executed, it remembers the environment...
protoType and protoType Chain
there is simple question how can you check if a variable is an Array。the answer is easy 1arr instanceof Array if result is true ,arr is Array .otherwise arr isn’t; so there is another question： what’s principle behind instanceof in Javascript let me explain there’re two classes. People and Student . Student implements People 123456789101112131415161718class People{ constructor(name){ this.name = name } eat(){ console.log(`${this.name}...
When to Use === and ==
Use the == operator only when checking for null or undefined. In all other cases, use === for strict equality.For example: 12if(obj.a == null){} is equivalent to: 12if (obj.a === null || obj.a === undefined) {}
Implement deepClone manually
Reason:Reference types will share the same address, so when we use = operator, if there is modification on the new object, the value on the old object will change too. SolutionIterate the Object recursively. If there is reference type, we create a new one and copy all the value type to the new reference type. 12345678910111213141516171819202122232425262728function deepClone(obj = {}) { // null can't be treated as object if (typeof obj != "object"...
decode message
There is a interview question on bfe.dev about decode-message. The link is below https://bigfrontend.dev/problem/decode-message Your are given a 2-D array of characters. There is a hidden message in it. 123I B C A L K AD R F C A E AG H O E L A D col and row are marked with number which start from 0. The number of col is 0 ~ 6 ,and the number of row is 0~2The way to collect the message is as follows start at top left move diagonally down right when cannot move any more, try to switch to...
Implementing the apply Function Manually
Steps to implement the apply function: Determine if the calling object is a function. Even though it’s defined on the function’s prototype, there may be instances where it is invoked using methods like call. Check if the incoming context object exists; if not, set it to window. Assign the function as a property of the context object. Determine if the parameter values have been passed in. Invoke the method using the context object and save the returned result. Remove the property that...
Flatten the array
(1) Recursive implementationThe common idea behind recursion is straightforward, involving a circular recursion approach where each item is iterated over. If an item is still an array, the process continues recursively to achieve the concatenation of each array item. 1234567891011121314let arr = [1, [2, [3, 4, 5]]];function flatten(arr) { let result = []; for(let i = 0; i < arr.length; i++) { if(Array.isArray(arr[i])) { result = result.concat(flatten(arr[i]));...