前端

js

浏览器： setTimeout 与 setInterval 将队列加入任务队列中(只有当队列中任务执行完才会加入到执行栈中  在下一tick中检查计时——误差(若一tick执行过长
node：  setImmediate 当前任务队列最后插入对应的事件 即总在下一个事件循环中开始执行对应的回调(在执行栈的栈顶

export default 时候 导出对象会 绑定到 default 对象
需要通过 import ans from '' 来引用 而不能使用解构语法

前端 css

盒模型
外边距塌陷 取二者之间最大的margin
常用类型
block  可设定宽高, 单独换行  块元素默认
inline 不可设定宽高, 多个inline盒子会自动换行  行内元素默认
inline-block 可设定宽高 也能随文字流动

a标签书写顺序 :link  :visited :focus :hover  :active
浏览器 按照 该顺序寻找最近的样式并渲染

浏览器渲染过程

1. 获取文档
2. 解析文档 (html解析器 与 css解析器 浏览器内置
2.1 遇到脚本，停下解析执行脚本(因为脚本会操作dom元素,为了避免冲突,所以dom元素解析暂停
2.2 外部脚本可通过 defer(延缓 和 aysnc(异步 来告诉浏览器异步加载,从而避免阻塞解析
3. 将dom树和css规则构造呈现树(frame 
3.1 呈现树(rendtree 与dom树相对应(不显示的 如 display:none 将不会加入到呈现树中
4. 从树根开始,基于呈现树中的相关规则来实现布局
4.1 dirty 表示改变的呈现器,即需要 reflow的
4.2 全局样式更改,触发全局布局(窗口大小调整,dom加载等
4.3 部分样式更改,触发增量布局(异步形式,加入到队列,并标记dirty
4.4 父容器确定自己的高度 -> 父元素为字元素计算坐标(若字元素为dirty 或 全局布局时 为字元素计算高度 -> 根据字元素相关属性(边框,大小等 计算父元素属性 -> 将dirty改为false
5 遍历呈现树,paint对应的元素到屏幕
5.1 repaint(重绘 修改部分属性或reflow(重新布局 将重新绘制
5.2 绘制顺序 背景色 -> 背景图片 -> 边框 -> 子元素 -> 轮廓   绘制后面(z-index:0 -> 绘制前置(z-index:1
6 除网络操作外，所有操作都处于单线程(ui 渲染,js计算等
7 浏览器是个无限循环的事件队列(loop 一直循环,若事件队列有则调用事件加入到栈中执行 无则定时循环

浏览器缓存

1. 判断是否有缓存
2. 判断缓存是否过期 或 与服务端协商(即通过版本号或最后修改日期与服务端判断

1. Expire HTTP1.0 规定了缓存失效时间 浏览器直接判断

2. Cache Control 缓存控制 优先级最高 覆盖 Expire 下面是常用的
2.1 public 共有缓存(各页面可用 如cdn
2.2 private 私有缓存(当前页面可用
2.3 no-store不缓存
2.4 no-cache 等价max-age:0 下次打开浏览器后即失效(仍然缓存
2.5 max-age 指定时间内失效
2.6 s-maxage 依赖public 只在浏览器(代理服务器 上失效

3. 协商缓存
3.1 If-Modified-Since 当前资源最后修改时间 用于比较 即上次收到的Last-Modified
3.2 If-Unmodified-Since 同上 处理方式相反
3.3 If-Match 当前资源最后收到的ETag值 用于比较
3.4 If-None-Match 同上 处理方式相反
返回结果
Age 0表示命中缓存,即服务端资源刷新
Date 响应生成时间
Vary 支持多版本资源(如压缩与未压缩