总结

Overview

flex篇
http状态码
cookie
浏览器缓存

flex篇

父元素属性：
- display: flex;
- flex-direction: row | row-reverse | column | column-reverse
- flex-wrap: nowrap | wrap | wrap-reverse(换行，第一行在最下面)
- flex-flow (flex-direction + flex-wrap)
- justify-content: flex-start | flex-end | center | space-between | space-around
- align-items: flex-start | flex-end | center | baseline | stretch
- align-content: flex-start | flex-end | center | space-between | space-around | stretch
子元素属性
- order: integer (默认为0，越小越靠前)
- flex-grow: number (默认为0，即如果存在剩余空间，也不放大)
- flex-shrink: number (默认为1，即如果空间不足，项目将缩小)
- flex-basis: length | auto
- flex (flex-grow(0) + flex-shrink(1) + flex-basis(auto))
- align-self: auto(表示继承父元素的align-item值) | flex-start | flex-end | center | baseline | stretch
参考
- Flex 布局教程：语法篇 - 阮一峰
- flex 实现圣杯布局

http状态码

1xx：请求已被接受，需要继续处理，表临时响应。只包含状态行和某些可选的响应头信息，并以空行结束。
2xx: 代表请求成功被接收、理解、并接受。
- 200: 请求成功，所请求的数据体将随着响应返回。
- 201: Created
- 202: Accepted
  返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作），而不必让客户端一直保持与服务器的连接直到批处理操作全部完成。
3xx: 代表客户端需要采取进一步的操作才能完成请求。
- 301: 永久资源移动。
- 302: 临时重定向。
- 304: Not Modified。不包含信息体，因此始终以消息头后的第一个空行结尾。
4xx: 客户端错误。
- 400: Bad Request。请求包含语法错误，若不修改不应该再次提交此请求。
- 401: 需要用户验证。WWW-Authenticate请求头。
- 403: Forbidden。服务器理解请求但是拒绝执行。
- 404: Not Found。请求失败，请求所希望得到的资源未被在服务器上发现。
- 405: Method Not Allowed。有些方法，如PUT, DELETE不被服务器允许。
- 406: Not Acceptable。请求的资源内容特性无法满足请求头中的条件，因而无法生成响应实体。由Content-type: text/html(MIME-type)这种指定。
  mime-type: text/html, text/plane, image/jpeg, image/gif，。。。
- 408: Request Timeout。请求超时。可以 xhr.timeout=2000, 也可以在 jquery 的 timeout 字段中设置。
- 414: Request-URI Too Long。比如应该 post 的时候用了 get。
5xx: 服务器错误。
- 500: Internal Server Error。
- 502: Bad Gateway。网关错误（作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应）。
- 503: Service Unavailabel。由于临时的服务器维护或过载，服务器当前无法处理。
参考
- HTTP状态码 - wiki

cookie 就是浏览器储存在用户电脑上的一小段文本文件。用于维持访问状态，比如在用户登录后服务器在本地设置下username和password表示下当前用户已登录。

创建
Set-Cookie: Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]
- 服务器通过发送这个给客户端来创建一个 cookie, 后续客户端的请求带上的只会是 value 部分而不包括设置选项。
- expires 若为空，则表示 cookie 的生命周期仅限于当前会话中。时间以浏览器运行的电脑上的时间为基准，注意浏览器和客户端的时间差异问题
- domain 默认为创建 cookie 的页面的域名，默认是当前页面的 host（不包括子域），但是可以扩展发送场景，比如如果设置为.yahoo.com则my.yahoo.com、finance.yahoo.com等请求的时候也会带上这个cookie，但是 domain 值必须是 request url 中的一部分，不能在 A.baidu.com 中设置 domain 为 google.com
- path 与 domain 类似，是在 domain 条件符合的条件下再符合某种路径规则的设置。若 path 为 /blog 则以 /blog、 /blogsome 这类开始的路径上的请求都会被带上 cookie
- secure 只有当请求通过 SSL 或 HTTPS 创建时，包含 secure 选项的 cookie 才会被发送
- HttpOnly：cookie 无法通过 document.cookie 被获取，针对 XSS 攻击
维护
- 多个 cookie 的排序依照 domain-path-secure 的顺序，设置越详细的 cookie 越靠前
删除
- session cookie(expires值为空)在会话结束时（浏览器关闭）被删除
- 设置了 expires 值的会在到期时被删除
- 如果浏览器的 cookie 数量达到限制，则会删除某些 cookie 为新 cookie 腾出空间。
  参考cookies restrictions
限制
- UserAgent 至少应支持 300 项 cookie，每项至少应支持到 4KB，每个域名至少支持 20 项 cookie
cookie 安全
- cookie 中的信息很容易被获取，不适合存放敏感数据，cookie 中一般存放一个session id, session 则存放在服务端

参考

浏览器缓存

与缓存相关的 http 头
Cache-Control: max-age / s-maxage / public / private / no-cache / no-store / must-revalidate
- max-age(s) / s-maxage(s)：表示缓存存储的最大周期，超过这个时间缓存被认为过期，优先级高于 expires。 s-maxage（在private模式下不生效） > max-age
- public(默认值) / private：前者表示可以被任何类型的机器缓存，后者表示不能作为共享缓存（即代理服务器不能缓存它）
- no-cache：强制所有缓存了该响应的缓存用户，在使用已存储的缓存数据前，发送带验证器的请求到原始服务器
- no-store：每次请求都需要从服务器重新获取
ETag：如果文件缓存过期了，浏览器在 If-None-Match 头中带上 tag 值，如果服务器端的文件并未改变，将会返回 304 响应，跳过重新下载的过程
If-None-Match
Expires
Last-Modified
If-Modified-Since
与缓存相关的一些概念
- Cache-Control 是设置浏览器端的缓存状态的
- Expires 使用的是服务端的时间，也就是说 Expires = max-age + 请求时间
- ETag 可以弥补 Last-Modified 只能精确到秒的缺点
缓存的使用流程

参考

ES6中的this

*参考
- ES6 箭头函数中的 this？你可能想多了（翻译）

计算机网络

地址划分

DOM总结
- 创建
  - createElement()
  - createAttribute()
  - createTextNode()
  - cloneNode(deep): deep为true表示克隆后代
  - createDocumentFragment()
- 读写
  - getElementById()
  - getElementsByTagName()
  - getElementsByClassName()
  - appendChild()
  - insertBefore(): parent.insertBefore(待插入元素, 参照元素);
  - replaceChild(): parent.replaceChild(new, old)
  - getAttribute()
  - setAttribute()
  - hasAttribute()
  - hasAttributes()
  - hasChildNodes()
- 删除
  - removeChild()
  - removeAttribute()
- 遍历
  - childNodes
  - parentNode
  - nextSibling
  - previousSibling
  - firstChild
  - lastChild
URL输入后发生了什么
- 当你输入一个网址，实际会发生什么?
- 输入网址之后发生了什么
position:absolute/fix的时候发生了什么
- 把该元素往z轴方向移动一层，元素脱离了普通流，所以不在占据原来那层的空间，还会覆盖下层的元素。
- 该元素将变为块级元素，相当于给该元素设置了display:block（内联元素设置了absolute之后就可以设置宽高了）
- 如果该元素的块级元素，元素的宽度从原来的width:100%变为auto
float之后发生了什么
- 只有左右浮动，没有上下浮动
- float后，脱离文档流，不再占据原来那层的空间，还会覆盖下一层的元素
- 不会对该元素的上一个兄弟元素有任何影响
- 该元素的下一个兄弟元素会紧贴到该元素之前没有设置float的元素之后
- 如果该元素的下一个兄弟元素中有内联元素，则会围绕该元素显示
- 下一个兄弟元素如果也设置了同一方向的float,则会紧随该元素之后显示

bind的实现（浏览器兼容bind)

Function.prototype.bind = Function.prototype.bind || function(context) {
    var self = this;
    return function() {
        return self.apply(context, arguments);
    }
}

原型与继承
- JavaScript 世界万物诞生记
- js中proto和prototype的区别和关系？ - doris的回答