Blog
希望这博客里的文章是有意义的!
-
-
JavaScript 预编译（AOT）：现状与未来 —— Oliver Medhurst 演讲整理
。在现代 Web 和服务端开发中，JavaScript 引擎的演进一直是性能提升和开发体验优化的关键领域。近日，TC39 特邀专家Oliver Medhurst 在一次技术分享中详细介绍了 JavaScript 的 ahead-of-time 编译（AOT）技术，结合自身开源项目的实践，带来了许多值得业界关注的新思考。本文将根据其演讲内容与对话进行梳理，带你深度了解这一前沿话题。
-
关于视频网站平台视频画面质量的一点启发——来自于UP主影视飓风
-
在 VoidZero 之前，前端打包工具的发展史
-
深拷贝——忘记JSON.parse 和 JSON.stringify，拥抱structuredClone
* structuredClone()是什么？ * structuredClone()是在2022年引入的一个全局函数，它能够深度克隆JavaScript对象。与传统的方法JSON.stringify()和JSON.parse()不同。之前的方法在处理复杂结构和循环引用时存在一定的问题，而structuredClone()则能够轻松应对这些挑战。
-
来看看HTTP3——为什么QUIC比HTTP更快
-
Using MDX
Lorem ipsum dolor sit amet
-
Transfer Size vs. Resource Size
roman-logov-f5QWC1a3tOA-unsplash.jpg [https://s2.loli.net/2024/06/01/epUS1MO8bwNn9os.jpg] 原文：【Transfer Size vs. Resource Size】 [https://webperf.tips/tip/resource-size-vs-transfer-size/]
-
JavaScript中的 "Illegal invocation" 异常
当调用一个函数时，如果其this关键字没有指向它最初指向的对象，即函数的“上下文”丢失时，就会抛出这个错误。
-
元组Tuple究竟是什么数据结构？
元组（Tuple）是一种数据结构，它是一个不可变的有序元素序列。由于元组是不可变的，因此，无法修改它们的值。
-
来自高级工程师的 37 个 Tips
* 你将难以应对 JavaScript 框架
-
2024了，回看服务端渲染（SSR） VS 客户端渲染 （CSR）
-
真得懂了？自定义实现 Javascript 中的 call、apply 和 bind 方法
通常情况下，在调用函数时，函数内部的 this 的值是访问该函数的对象。利用 call、apply 和 bind，你可以在调用现有函数时将任意值分配给 this，而无需先将函数作为属性附加到对象上。这使得你可以将一个对象的方法用作通用的实用函数。
-
实现响应式布局的几个着手点
-
前端进阶之最长递增子序列算法和vue.js中的Diff算法
前端进阶之最长递增子序列算法和vue.js中的Diff算法
-
CSS 布局之如何使用CSS构建一个瀑布流
-
Draft：常见面试题之事件循环
这个需要从浏览器和Node.js两方面讲，但是二者的初衷是一致的，但在具体实现原理和事件阶段（宿主环境不同导致）上有些许差异。 首先看下 whatwg 官方给的定义：
-
Set VS Array
数组（Array）和集合（Set）数据结构类型有很多共同点，下面我们就来看看它们有哪些相似之处、彼此有何不同以及它们的使用情况。 Set是一种数据类型，可用于存储任何类型的数据，无论是原始数据还是对象的引用。Set将数据存储在具有键的集合中，这些键可以按照插入时的顺序进行迭代。
-
比Map自由度更高一些的flatMap
在使用Array.prototype.map方法时，会返回一个新的数组，新的数组长度总是跟原有数组相同。 1. const array1 = [1, 4, 9, 16]; 3. // Pass a function to map 4. const map1 = array1.map((x) => x * 2); 6. console.log(map1);
-
WebGL 深入浅出
原文：An Introduction to WebGL — Part 1 [https://dev.opera.com/articles/introduction-to-webgl-part-1/]
-
MacOS设置 ReactNative iOS开发环境的常见问题解决方案
Mac系统通常自带ruby，但是版本一般比较旧 1. ruby -v 2. # ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.x86_64-darwin22]bash
-
洋葱模型
Koa 的洋葱模型指的是以 next() 函数为分割点，先由外到内执行 Request 的逻辑，再由内到外执行 Response 的逻辑。通过洋葱模型，将多个中间件之间通信等变得更加可行和简单。其实现的原理并不是很复杂，主要是 compose 方法。
-
浏览器页面渲染——经典题目：输入URL后发生了什么？
浏览器根据域名（Domain）向DNS服务器查询该domain对应的IP地址；
-
不用除法，一个简单的算法题
有一个长度为len数组arr（[1,2,3,4]），要求返回一个新数组newArr（[24, 12, 8, 6]） 对于新数组，存在newArr[i] = arr[1] * arr[2] *…*arr[i-1] * arr[i + 1] … arr[len-1]
-
JS中的函数
-
JS之防抖(debounce)和节流（throttle）
1. function debounce(fn, time) { 2. let timer = null; 3. return function (...args) { 4. let ctx = this; 5. clearTimeout(timer);
-
JavaScript 之 原型和原型链
1. 构造函数： 构造函数实际上是一个普通函数，通过new操作符，可以利用构造函数快速创建对象； 2. prototype：每个构造函数自身上都会有一个prototype属性，该属性值为一个对象，这个对象具有一个constructor属性，constructor指向构造函数自身；
-
手写bind
1. Function.prototype.bind=function(ctx){ 2. let fn = this; 4. if(!ctx){ 5. ctx = typeof window !== 'undefined' ? window : global; 8. return
-
js取0到50之间10个不重复的随机数
1. function getRandom( len=10, total=50 ){ 2. // step 1: generate a array, and its length is 50 3. let arr = Object.keys(Array.from(*new* Array(total))); 5. let out=[], i = 0;
-
js深拷贝与循环引用
在 JavaScript 中，深拷贝（deep copy）意味着创建一个新的对象，并递归地复制原始对象的所有属性，包括嵌套的对象和数组。深拷贝确保原始对象和副本之间不共享任何引用，因此修改副本不会影响原始对象。
-
ES6之Promise
Promise是JavaScript中为解决异步问题，结合社区已有规范，提出的一种异步编程解决方案。 在ES6中，Promise本身一个构造函数，原型链上有then、catch和finally等方法。自身的静态方法有all、race、reject和resolve等。 image [https://user-images.githubusercontent.com/25574040/59982651-4ae76080-9648-11e9-9de5-8bf183af7c76.png]
-
三种基本排序
2. name： 快速排序 3. 1. 在数据集之中，选择一个元素作为"基准"（pivot）。 7. function quickSort(arr){
-
一个简单的输出测试
1. function b(){console.log('1111');} 2. function b(){console.log('22222');} 3. var b=3; 4. b();javascript
-
【CSS揭秘】之用CSS实现一些基本形状
借助border-radius 1. <style> 2. .circle{ 3. width: 200px; 4. height: 200px; 5. background: yellowgreen; 6. border-radius: 100px; 8. </style> 9. <div
-
CSS揭秘之多重边框
1. border-shadow 2. outline 1. <!DOCTYPE html> 2. <html lang="en"> 4. <head> 5. <meta charset="UTF-8"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
background-clip和半透明边框
1. hsla的使用 2. background-clip 1. <!DOCTYPE html> 2. <html lang="en"> 4. <head> 5. <meta charset="UTF-8"> 6. <meta name="viewport" content="width=device-width,
-
元素总是居中且高度是宽度的50%
1. 元素e水平垂直居中； 2. 元素e水平方向与父元素保持10px间距； 3. 元素e的高度是宽度的一半； 1. 水平垂直居中，这个还好处理。网上已经有若干种解决方案了CSS实现水平垂直居中的1010种方式 [https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/]。
-
图解HTTP
HTTP最早由Tim Berners Lee提出用于知识共享的一种协议。因为在1989年之前，互联网只属于少数人。 最初的基本理念： 借助多文档之间的互相关联形成的超文本，连成可互相参阅的WWW（World Wide Web， 万维网）。
-
A trick 用JS获取随机颜色
在CSS中， 颜色一般用#000000 ~ #ffffff 6位十六进制数表示。 那么只要生成 #000000 ~ #ffffff之间的随机数即可。 1. ('00000'+Math.random()*(0xffffff+1)<<0).toString(16)javascript
-
BFC及自适应布局
* <html>根元素 * float的值不为none * overflow的值为 auto，scroll和hidden * display的值为table-cell、table-caption 和 inline-block中的任何一个
-
利用clear清除浮动的一些问题
1. .clearfix:before { 2. content: "."; 3. display: block; 4. height: 0; 5. clear: both; 6. visibility: hidden; 7. }css
-
CSS中的内联元素
对于非替换元素，其高度是由line-height属性定义的。一行的高度就是line-height * 1；n行的高度就是line-height * n。
-
聊聊CSS中counter
在介绍 CSS counter前，我们先明确两个概念： 替换元素 和 非替换元素。 在HTML中，什么是替换元素，什么又是非替换元素？举例说明，img是替换元素，因为它的内容是根据src属性关联的。 span是非替换元素，我们无法改变span标签本身的内容（实际上它显示的文字是由它的子节点定义的，纯文本在html也是一种节点类型，文本节点）。
-
ES6中箭头函数的作用
关于ES6中的箭头函数，箭头函数 MDN [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions]这篇文章讲得已经很全面了。
-
JS模块规范回炉再造
AMD Specifics [https://github.com/amdjs/amdjs-api/wiki/AMD] 在AMD的中，一个模块由定义，依赖和工厂函数 三部分组成。
-
CSS2中的有关盒模型与布局的一些概念
在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。
-
现代浏览器的背后的工作原理
* render渲染
-
CSS中的盒模型
在对文档进行布局时，浏览器渲染引擎会根据盒模型（CSS-Box）,将所有的元素表现一个矩形盒子。
-
float元素换行展示的问题
搜了好多资料，大多提到了解决方案（调整顺序/将前面的元素转成float元素）。 然而，好奇的我还是想知道究竟为何换行。
-
DOM扩展
querySelect(), querySelectAll()这两个方法遵循CSS的选择器规则，IE8+及其它最新版浏览器均支持这两个方法。 这两个方法的差别在于，一个返回符合匹配规则的第一个元素，一个返回匹配规则的所有元素。若遇到不匹配的情况，前者返回null，后者返回一个空的NodeList。
