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









