JavaScript篇

1. 各司其职
   例：直接使用CSS类的切换（避免直接使用js改变css样式）
2. 使用CSS代替JS
   例：使用input[type="checkbox"]及label<for>实现页面状态的转换
3. 设计复杂的UI组件（数据、行为驱动）
   例：轮播图设计

   • 图片结构为列表型结构，主体用<ul>

   • 使用css绝对定位将图片重叠同一位置

   • 轮播图切换的状态使用修饰符(modifier)

   • 轮播图切换动画使用css transition

   • API设计： API设计

   • 控制结构：加入自定义事件new CustomEvent('slide', …)

   • 函数改进：剥离子控件，解耦合（使用依赖注入）

   • 集成HTML代码：改进插件/模板化 HTML模板化
   • 组件模型抽象 组件模型抽象
4. 局部细节控制：
   • 函数的防抖：addEventListener('click', ()=>{}, {once: true})或及时注销事件
   • 异步请求获取数据：过程抽象为只能处理一次->高阶函数once()
   • 函数的节流
   • 设计异步队列，将任务暂时缓存处理，之后取出执行
5. 声明式编程vs指令式编程（做什么vs怎么做）
6. reduce(function)
   iterative高阶函数
7. toggle状态切换函数的拓展
   
   
   

   ---

Web标准篇

IETF

HTTP协议版本更迭

W3C

1. BOM浏览器对象模型
   • window对象：ES定义的Global对象，网页上所有的全局对象，变量和函数均暴露在此对象上
   • location对象：以编程的方式操纵浏览器的导航系统
   • navigator对象：提供关于浏览器的信息
   • screen对象：保存客户端显示器信息
   • history对象：提供操纵浏览器历史记录的能力
2. DOM文档对象模型

ECMA

ES版本更迭

whatwg

---

HTTP基础篇

网络结构图

属于应用层协议

常见请求类型

状态码

常见状态码

cookie

响应头中可以有多个Set-Cookie
Set-Cookie: <name>=<value>……
cookie安全策略相关：

1. path
2. domain(hostonly*)
3. expires(max-age)
4. secure
5. httponly
6. SameSite
   存在问题：
7. XSS漏洞盗取cookie->设置httponly
8. CSRF漏洞，设置token/SameSite
9. 服务器端对应位session，基于cookie存放用户信息
10. cookie有效期为session：随浏览器进程退出而失效

Content-Type

常用：

• application/x-www-form-urlencoded
• multipart/form-data
• application/json
• text/xml, text/css

http性能优化

• keep-alive
• 减少网络传输大小（gzip，deflate，br）
• 缓存
• http2/http3