一、JavaScript从入门到放弃
1、各司其职
例子：关灯吃面demo
-
版本一：JS中写入CSS
-
版本二：JS与CSS各司其职
版本三：纯CSS实现
二、Web标准：前端的原力
1、Web标准概述
Web是World Wide Web(万维网）的简称，Web标准是构成Web基础、运行和发展的一系列标准的总称。Web标准并不是由一家标准组织制定。
1.1 IETF
- HTTP1.0 未制定新的规范，总结并记录了有代表性的实现。
- HTTP1.1 是对HTTP1.0的改进。
- TLS 传输层安全协议，对HTTP传送的消息进行加密。
- HTTP2.0
1.2 ECMA
ECMA Script是Java Script的标准。
1.3 W3C
- BOM（Browser Object Model，浏览器对象模型）
- window对象，也就是ECMAScript中定义的Global对象。网页中所有全局对象、变量和函数都暴露在这个对象上。
- location对象，通过location对象可以以编程方式操纵浏览器的导航系统。
- navigator对象，对象提供关于浏览器的信息。
- screen对象，保存着客户端显示器的信息。
- history对象，提供了操纵浏览器历史记录的能力。
- DOM（Document Object Model，文档对象模型）
是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。DOM现在是真正跨平台、语言无关的表示和操作网页的方式。
三、前端常用的HTTP知识
1、请求类型
2、状态码
3、Header分类
- 通用
Date: Tue, 3 Oct 2019 02:16:00 GMT
Connection: close - 请求
User-Agent: Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Accept: / - 响应
Server: Nginx
Last-Modified: Thu, 16 Oct 2019 10:15:16 GMT - 实体
Content-Type: text/html; charset=utf-8
Content-Length: 100 - 扩展（自定义）
X-Powered-By: thinkjs-3.0.4
X-Cache: hit
4、Cookie
可以标识用户身份，响应头里也可以有多个 Set-Cookie。
Cookie安全策略：
- path
- domain (hostonly*)
- expires (max-age)
- secure
- httponly
- SameSite
重要：
- XSS 漏洞盗取 Cookie，设置 httponly
- CSRF 漏洞，设置 token/samesite
5、Session
服务器侧对应为 Session，基于 Cookie 存放用户信息；
Cookie 有效期为 Session（随浏览器进程退出而失效）
6、Content-Type
标识提交数据的类型（一般post请求）；标识返回内容的类型。
常见的提交类型：
- application/x-www-form-urlencoded
- multipart/form-data
- application/json
- text/xml
7、性能优化
- keep-alive
- 减少网络传输大小
- 缓存（强缓存、协商缓存）
- http2/http3