哪有多奇怪

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 ...

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.myCal ...

FPS FPS( frame per second）是帧率的单位。FPS 一般表示的是每秒钟画面更新次数。 大多数浏览器会限制重绘频率，使其不超出屏幕的刷新率，这是因为超过刷新率，用户也感知不到。一般计算机显示器的屏幕刷新率都是 60Hz，基本上意味着每秒需要重绘 60 次。 因此，一般实现平滑动画最佳的重绘间隔为 1000 毫秒/60，大约 17 毫秒。以这个速度重绘可以实现最平滑的动画，因为这已经是浏览器的极限了。 计时器动画 创造平滑动画的关键：知道何时绘制下一帧。 浏览器知道 CSS 过渡和动画应该什么时候开始，并据此计算出正确的时间间隔，到时间就去刷新用户界面。 JavaScript 实现动画一般都是采用计时器 setInterval / setTimeout 来做。 计时器的缺点： setInterval / setTimeout 只能保证何时会把代码添加到浏览器的任务队列，不能保证立即执行 浏览器自身计时器存在精度问题： IE8 及更早版本的计时器精度为 15.625 毫秒 IE9 及更晚版本的计时器精度为 4 毫秒 Firefox 和 Safari 的计时器 ...

两栏布局 两栏布局就是：一栏定宽，一栏自适应。 BFC 将定宽的那一栏浮动，另一栏触发 BFC，实现两栏。 两栏之间的空隙通过给浮动的那一栏设置 margin 实现。 1234567891011121314151617181920212223242526272829<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 { overflow: hidden; background-color: #008c8c; height: 200px ...

缓存控制 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 ...