人人都在用 AI，但你的身边又有多少人真正理解它的运作原理。
一、从一个真实困境说起
原文：【Transfer Size vs. Resource Size】
"Illegal invocation" 何时会出现？ 当调用一个函数时，如果其this关键字没有指向它最初指向的对象，即函数的“上下文”丢失时，就会抛出这个错误。
Tuple（元组）是什么？ 元组（Tuple）是一种数据结构，它是一个不可变的有序元素序列。由于元组是不可变的，因此，无法修改它们的值。 一般来说，元组比数组或列表占用更少的内存空间。 元组允许像数组一样进行切片和索引，但没有删除或更改任何元素的方法。 元组一般通过在括号内利用逗号分隔元素。与数组类似，它们是序列。元组与数组的主要区别在于一旦分配了元组，就无法更改它，而数组可以。元组有时使用方括号…
1. 掌握基础知识 建立在不稳定基础上的房子会在最小的问题上崩溃。 同样，如果你没有扎实的基础： - 你将难以应对 JavaScript 框架 - 你会在遇到第一个不熟悉的问题时陷入困境 - 你无法把握一些问题之间的共同主题 所以，如果你想作为一名前端开发者进步，首先要掌握 HTML、CSS 和 JavaScript。
服务端渲染（SSR） VS 客户端渲染 （CSR）
自定义实现 Javascript 中的 call、apply 和 bind 方法 通常情况下，在调用函数时，函数内部的 this 的值是访问该函数的对象。利用 call、apply 和 bind，你可以在调用现有函数时将任意值分配给 this，而无需先将函数作为属性附加到对象上。这使得你可以将一个对象的方法用作通用的实用函数。
2024年，回头看响应式布局 现如今，人们通过各种设备访问互联网--无论是手机、笔记本电脑、台式机、平板电脑还是 电视、投影仪等。静态布局的网站早已不再适用，因为它们无法让用户在更换设备时仍能获得舒服的浏览体验。 然而，在Web开发领域，响应式设计的概念往往给初学者带来陡峭的学习曲线。即使在掌握了很多高级概念之后，许多人仍然难以完全掌握响应式设计的原则。 即使是成熟的网站，在响应速度方面也会出现问…
前端进阶之最长递增子序列算法和vue.js中的Diff算法
如何使用CSS构建一个瀑布流布局 瀑布流布局是一种常见的网页布局方式，其中元素以不同的大小排列，且行与列之间没有不均匀的间隙。在瀑布流布局中，即使某一行或列中的元素较短，下一个元素也会占据空间。
什么是事件循环Event Loop 这个需要从浏览器和Node.js两方面讲，但是二者的初衷是一致的，但在具体实现原理和事件阶段（宿主环境不同导致）上有些许差异。
比Map自由度更高一些的flatMap 在使用Array.prototype.map方法时，会返回一个新的数组，新的数组长度总是跟原有数组相同。 javascript const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map((x) => x 2); console.log(map1); // E…
数组（Array）和集合（Set）数据结构类型有很多共同点，下面我们就来看看它们有哪些相似之处、彼此有何不同以及它们的使用情况。
> 同一个坑不能摔两次
原文：An Introduction to WebGL — Part 1
Koa 的洋葱模型指的是以 next() 函数为分割点，先由外到内执行 Request 的逻辑，再由内到外执行 Response 的逻辑。通过洋葱模型，将多个中间件之间通信等变得更加可行和简单。其实现的原理并不是很复杂，主要是 compose 方法。
题目描述 有一个长度为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] 算法要求： 1. 时间复杂度O(n); 2. 不可以使用除法；
导航 用户通过点击超链接、按钮或者浏览器地址栏部分的按钮，进行页面跳转，此时会出发浏览器地址栏页面地址的更新；
JavaScript函数式编程
javascript function debounce(fn, time) { let timer = null; return function (...args) { let ctx = this; clearTimeout(timer); timer = setTimeout(function () { fn.apply(ctx, args); timer = null; }, time)…
JavaScript 之 原型和原型链
javascript Function.prototype.bind=function(ctx){ let fn = this; if(!ctx){ ctx = typeof window !== 'undefined' ? window : global; } return function(...args){ ctx.fn=fn; ctx.fn(...args) } } function f(…
在 JavaScript 中，深拷贝（deep copy）意味着创建一个新的对象，并递归地复制原始对象的所有属性，包括嵌套的对象和数组。深拷贝确保原始对象和副本之间不共享任何引用，因此修改副本不会影响原始对象。 然而，当原始对象中存在循环引用时，深拷贝的实现可能会变得复杂。循环引用是指两个或多个对象相互引用，形成一个闭环。在这种情况下，深拷贝函数需要能够识别并处理循环引用，以避免无限循环。 jav…
javascript function getRandom( len=10, total=50 ){ // step 1: generate a array, and its length is 50 let arr = Object.keys(Array.from(new Array(total))); let out=[], i = 0; while(i<len){ let r = Math.…
三种基本排序 javascript / name： 快速排序 1. 在数据集之中，选择一个元素作为"基准"（pivot）。 2. 所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。 3. 对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。 / function quickSort(arr){ if(arr.length…
什么是Promise Promise是JavaScript中为解决异步问题，结合社区已有规范，提出的一种异步编程解决方案。 在ES6中，Promise本身一个构造函数，原型链上有then、catch和finally等方法。自身的静态方法有all、race、reject和resolve等。
下面这段程序的执行结果： javascript function b(){console.log('1111');} function b(){console.log('22222');} var b=3; b(); 答案：Uncaught TypeError: b is not a function
用border-radius实现圆形/椭圆
多重边框的两种实现方案： 1. border-shadow 2. outline html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-…
用CSS实现半透明边框效果。 1. hsla的使用 2. background-clip html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv…
有一个元素element，实现如下需求： 1. 元素e水平垂直居中； 2. 元素e水平方向与父元素保持10px间距； 3. 元素e的高度是宽度的一半； 解决思路 1. 水平垂直居中，这个还好处理。网上已经有若干种解决方案了CSS实现水平垂直居中的1010种方式。 注意其中一种方式：absolute+margin:auto。这种方式，margin的值通常设为auto。实际上也可以在水平或垂直方向设定…
图解HTTP
在CSS中， 颜色一般用#000000 #ffffff 6位十六进制数表示。 那么只要生成 #000000 #ffffff之间的随机数即可。 javascript ('00000'+Math.random()(0xffffff+1)<<0).toString(16) 1. Math.random() 函数返回一个浮点, 伪随机数在范围[0，1)，也就是说，从0（包括0）往上，但是不包括1（排除1）
什么是BFC 简单来说，BF可以看做是一个独立的布局区域。这个区域内元素的布局不会受到区域外元素的影响。同理，区域内的元素也不会影响外部元素的布局。
下面这段代码是用来清除浮动带来的高度塌陷问题 css .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Question 1: 上面的代码的能够实现清除浮动的问题吗 Answer： Can't. 因为clear属性只能控制元素本身与前面的浮动元素的关系。在本例…
内联元素 内敛元素分 可替换 和不可替换两种类型来讨论。
在介绍 CSS counter前，我们先明确两个概念： 替换元素 和 非替换元素。 在HTML中，什么是替换元素，什么又是非替换元素？举例说明，img是替换元素，因为它的内容是根据src属性关联的。 span是非替换元素，我们无法改变span标签本身的内容（实际上它显示的文字是由它的子节点定义的，纯文本在html也是一种节点类型，文本节点）。 那么替换元素与非替换元素的区别在哪儿呢？ 可以说，只有…
commonJS
关于ES6中的箭头函数，箭头函数 MDN这篇文章讲得已经很全面了。
现代浏览器背后的机制 主要介绍从地址输入一个URL到浏览器呈现出最终内容，都经过了哪些步骤。 首先来说，在这个过程中会涉及到多个模块的工作。 - 浏览器主模块 - render渲染 - UI - 网络 - 存储 - JS引擎
CSS的一些名词和概念 用来帮你更明确地去描述HTML/CSS世界的事物。
在对文档进行布局时，浏览器渲染引擎会根据盒模型（CSS-Box）,将所有的元素表现一个矩形盒子。 这个盒子的构成由里到外分别是 内容区域，内边距，边框和外边距。 每个区域的大小尺寸都可以被其对应的属性指定。 盒模型分为两种： 标准盒模型 和 IE盒模型。 标准盒模型： 元素的宽度 = 内容区域宽度 IE盒模型： 元素的宽度 = 内容区域 + 内边距 + 边框 在CSS中，box-sizing属性可…
奇怪的是，这种问题应该好早就遇到的。 搜了好多资料，大多提到了解决方案（调整顺序/将前面的元素转成float元素）。 然而，好奇的我还是想知道究竟为何换行。 回归到浮动元素的本质： 浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边或右边 。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。 再回到问题，上代码说明： html <div class="wrap">…
DOM扩展