360前端星计划—0409

1. 如何写“好”JavaScript（月影）

1.1 各司其职

• HTML：负责结构功能(Structural)
• CSS：负责表现功能(Presentational)
• JavaScript：负责行为功能(Behavioral)

1.2 复杂UI组件的设计

对于京东轮播图怎么进行设计？可使用以下步骤：

1. 结构设计
2. API设计
3. 控制流设计

优化：

1. 插件/依赖注入 降低耦合度
2. 改进插件/模板化 将html和组件封装
3. 组件模型抽象

1.3 局部细节控制

• 过程抽象，创建once
  • 节流防抖

2. Web标准：前端的原力（李松峰）

• HTTP2.0和HTTP1.X相比的新特性

  • 新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。

  • 多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。

  • header压缩，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。

  • 服务端推送（server push），同SPDY一样，HTTP2.0也具有server push功能。

3. 前端常用的HTTP知识（李成银）

3.1 请求类型

• GET：获取一个资源内容
• POST：新增一个资源
• PUT：更新资源内容
• DELETE：删除资源
• OPTIONS：根据返回判断是否有对其请求的权限
• HEAD：只返回head，不返回实体内容
• PATCH：更新部分内容

3.2 状态码

• 1**：请求已接受，需要继续处理
• 2**：请求已经正确处理
• 3**：重定向
• 4**：客户端错误
• 5**：服务器端错误

3.3 Cookie安全策略

(XSS 漏洞盗取 Cookie，设置 httponly，CSRF 漏洞，设置 token/samesite)

• path
• domain (hostonly*)
• expires (max-age)
• secure
• httponly（js无法获得cookie）
• SameSite

3.4 session

• 服务器侧对应为 Session，基于 Cookie 存放用户信息
• Cookie 有效期为 Session（随浏览器进程退出而失效）

3.5 Content-Type

请求：

• application/x-www-form-urlencoded（提交）

• multipart/form-data

• application/json

• text/xml

  3.6 性能优化

• 连接保持keep-alive

• 减少网络传输大小

• 缓存（强缓存和协商缓存，LocalStorage和ServiceWorker）

• http2/http3