迭代器和生成器
迭代器 在 javaScript 中,如果一个对象具有 next 方法,并且该方法返回一个对象,格式如下: 1{ value: 值, done: 是否迭代完成 } 则认为该对象是一个迭代器 next 方法用于得到下一个数据 value 下一个数据的值 done 是否迭代完成 Iterator接口 迭代器创建函数: 用于创建一个迭代器 ES6 规定,默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性,该方法是一个迭代器创建函数 原生具备 Iterator 接口的数据结构 Array、Map、Set、String、arguments 等原生类型 NodeList 调用 Iterator 接口的地方 展开运算符(除了对象的展开)本质上是调用的是 Iterator 接口 数组和 set 的解构本质上调用的也是 Iterator 接口 部署了 Symbol.iterator 接口,即可被 for...of 循环所遍历 yield* 后面跟的是一个可遍历的结构,它会调用该结构的 Iterator 接口 Array ...
浏览器中的像素
像素 一个像素由红绿蓝三个像点组成,通过空间混色法显示颜色 点距:相邻同种颜色像点的距离 点距可以用来描述像素,点距越小,等距离的像素越多,显示越好。 分辨率 分辨率一般分为屏幕分辨率和图像分辨率。 屏幕分辨率:指一个屏幕具体由多少个像素点组成。 例如:iPhone XSMax 的分辨率为 2688x1242,表示手机分别在垂直和水平上所具有的像素点数为 2688 和 1242。 我们经常见到用 K 和 P 这个单位来形容屏幕: P 代表的就是屏幕纵向的像素个数, 1080P 即纵向有 1080 个像素,分辨率为 1920X1080 的屏幕就属于 1080P 屏幕。 K 代表屏幕横向有几个 1024 个像素,一般来讲横向像素超过 2048 就属于 2K 屏,横向像素超过 4096 就属于 4K 屏。 我们平时所说的高清屏其实就是屏幕的物理分辨率达到或超过 1920X1080的屏幕。 图像分辨率:一般指的是一张图片含有的像素数。 例如:一张图片的分辨率为 800x400,这表示图片分别在垂直和水平上所具有的像素点数为 800和 400。 同一尺寸的图片,分辨率越高,图片越清晰。 ...
flex布局item的尺寸
flex-basis flex-basis 用于设置项目(flex-item)的基础宽度,和 width 一样,flex-basis 设置的是 content-box。 项目最终宽度的优先级: 最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸 flex-shrink 设置项目的收缩比例,默认值为:1 特殊点:收缩比例的计算方式 计算加权值(content-width * 比例 + content-width * 比例 + …… = W) 收缩像素( content-width / W * 溢出像素) 计算方式和盒模型没有关系,只和内容盒的宽度有关 当该项目设置 flex-basis 并且内容溢出撑开盒子,该项目不参与收缩 基础尺寸 基础尺寸由 flex-basis、width、content-size 共同决定,content-size 包括文本内容和元素。 auto 当 flex-basis 为 auto 时: width 的优先级 > content-size 的优先级,也就是说当设置了 width 时,内容无法撑开项目的宽度。 HT ...
JavaScript手写
new 原理 创建一个新对象(this) 对这个新对象执行 [[prototype]] 连接 这个新对象会绑定到函数调用的 this 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象 实现 12345function create(constructor, ...args) { const ctx = Object.create(constructor.prototype); const res = constructor.apply(ctx, args); return res instanceof Object ? res : ctx;} call 使用细节 call 将调用函数的该次调用 this 指向第一个参数 call 将后序参数作为形参传入调用函数 call 会立即执行调用函数并返回结果 直接调用 call 返回 undefined call 不能作为构造函数 第一个参数 == null,this 指向全局对象 实现 12345678910111213Function.prototype ...
requestAnimationFrame
图像的显示 显卡中有一块叫前缓冲区的地方,这里存放着显示器要显示的图像,显示器会按照一定的频率读取并显示。 不同的显示器读取的频率是不同的,这取决于屏幕的刷新率,大部分的显示器都是 60HZ,也就是显示器会每间隔 1/60 秒就读取一次。 显卡的职责是合成新的图像并保存到后缓冲区中,一旦显卡把合成的图像写到后缓冲区,系统就会将后缓冲区和前缓冲区互换,这样就能保证显示器能读取到最新显卡合成的图像。 显卡的更新频率需要和显示器的刷新频率保持一致,否则就可能会造成视觉上的问题: 生成的帧速率比屏幕刷新率慢,屏幕会在两帧中显示同一个画面,当这种情况持续发生,会很明显地察觉到动画卡住了 生成的帧速率比屏幕刷新率快,GPU 所渲染的图像没有全部被显示出来,会造成丢帧现象 浏览器如果想要更新页面内容,则需要将新生成的图片提交到显卡的后缓冲区中,并且为了实现流畅的动画需要将页面更新的频率和显示器的刷新率保持一步 VSync 显示器将一帧画面绘制完成后,在准备读取下一帧之前,会发出一个垂直同步信号(vertical synchronization)给 GPU,简称 VSync 当 GPU 接收到 ...
布局总结
两栏布局 两栏布局就是:一栏定宽,一栏自适应。 BFC 将定宽的那一栏浮动,另一栏触发 BFC,实现两栏。 两栏之间的空隙通过给浮动的那一栏设置 margin 实现。 123456789101112131415161718192021222324252627282930313233<style> .clearfix::after { content: ''; display: block; clear: both; } .wrapper { border: 1px solid; } .aside { float: left; width: 300px; background-color: lightblue; margin-right: 10px; height: 200px; } .main { ov ...
HTTP缓存
缓存控制 Cache-Control Cache-Control 出现于 HTTP / 1.1 用于实现缓存, 使用相对时间来实现缓存,优先级高于 Expires 响应 public:表示无论私有缓存或者共享缓存,皆可将该响应缓存 private:表示该响应不能被代理服务器作为共享缓存使用。若 private 后指定头部,则在告诉代理服务器不能缓存指定的头部,但可缓存其他部分 no-cache:告诉客户端不能直接使用缓存的响应,使用前必须在源服务器验证得到 304 返回码。如果 no-cache 后指定头部,则若客户端的后续请求及响应中不含有这些头则可直接使用缓存 no-store:告诉所有下游节点不能对响应进行缓存 max-age:告诉客户端缓存时间超出 max-age 秒后则缓存过期 s-maxage:与 max-age 相似,但仅针对共享缓存,且优先级高于 max-age 和 Expires,告诉缓存最多缓存多久 no-transform:告诉代理服务器不能修改消息包体的内容 must-revalidate:告诉客户端一旦缓存过期,必须向服务器验证后才可使用 prox ...
排序算法总结
冒泡排序 冒泡排序重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。 这个算法的名字由来是因为越小/大的元素会经由交换慢慢“浮”到数列的顶端。 冒泡排序的思路 从头开始比较每一对相邻元素,如果不符合升序/降序的要求,就交换它们的位置 经历过几轮比较,第几大/小的元素一定在倒数第几个 忽略已经找到的元素,重复执行比较交换,直到全部元素有序 图示 实现 12345678910function bubbleSort<T>(arr: T[], comparator: Comparator = defaultComparator) { const len = arr.length; for (let i = 0; i < len - 1; i++) { for (let j = 0; j < len - 1 - i; j++) { if (comparator(arr[j], a ...