3 如何写“好” JavaScript
- 各司其职：JavaScript 尽量只做状态管理
- 结构、API、控制流分离设计 UI 组件
- 插件和模板化，并抽象出组件模型
- 运用过程抽象的技巧来抽象并优化局部 API
4 Web 标准
标准组织
Web 标准是构成 Web 基础、运行和发展的一系列标准的总称。Web 标准并不是由一家标准组织制定。
-
国际互联网工程任务组（The Internet Engineering Task Force，简称 IETF）
-
HTTP/0.9
-
HTTP/1.0
-
HTTP/1.1
-
The Transport Layer Security (TLS) Protocol Version 1.3
-
HTTP/2
-
-
欧洲计算机制造商协会（ European Computer Manufacturers Association，简称 ECMA）
- ECMA-262s
-
万维网联盟（World Wide Web Consortium，简称 W3C）
- CSS
- DOM
- Graphics
- HTML
- HTTP
- Performance
- Security
- Web API
BOM
BOM（Browser Object Model，浏览器对象模型）HTML5 规范中有一部分涵盖了 BOM 的主要内容，因为 W3C 希望将 JavaScript 在浏览器中最基础的部分标准化。
- window 对象，也就是 ECMAScript 中定义的 Global 对象。网页中所有全局对象、变量和函数都暴露在这个对象上。
- location 对象，通过 location 对象可以以编程方式操纵浏览器的导航系统。
- navigator 对象，对象提供关于浏览器的信息。
- screen 对象，保存着客户端显示器的信息。
- history 对象，提供了操纵浏览器历史记录的能力。
DOM
DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。
DOM1（DOM Level 1）主要定义了HTML和XML文档的底层结构。DOM2（DOM Level 2）和DOM3（DOM Level 3）在这些结构之上加入更多交互能力，提供了更高级的XML特性。
DOM 规范不断被赋予新的能力
DOM2和DOM3是按照模块化的思路来制定标准的，每个模块之间有一定关联，但分别针对某个DOM子集。
- DOM Core：在DOM1核心部分的基础上，为节点增加方法和属性。
- DOM Views：定义基于样式信息的不同视图。
- DOM Events：定义通过事件实现DOM文档交互。
- DOM Style：定义以编程方式访问和修改CSS样式的接口。
- DOM Traversal and Range：新增遍历DOM文档及选择文档内容的接口。
- DOM HTML：在DOM1 HTML部分的基础上，增加属性、方法和新接口。
- DOM Mutation Observers：定义基于DOM变化触发回调的接口。这个模块是DOM4级模块，用于取代Mutation Events。
5 HTTP
前端开发中的数据传输大多是基于 HTTP，了解掌握 HTTP 对于解决前端开发中遇到的问题是否有价值。
HTTP 是一个应用层协议，它的下层协议是 TCP/UDP
报文
报文分为请求报文和响应报文，结构如下
请求报文
<method> <request-URL> <version>
<headers>
<entity-body>
响应报文
<version> <status> <respon-phrase>
<headers>
<entity-body>
请求类型
| 请求类型 | 描述 |
|---|---|
| GET | 获取一个资源内容 |
| POST | 新增一个资源 |
| PUT | 更新资源内容 |
| DELETE | 删除资源 |
| OPTIONS | 根据返回判断是否有对其请求的权限 |
| HEAD | 只返回 header，不返回实体 |
| PATCH | 更新部分内容 |
只是规范，不是强制的
状态码
| 状态码 | 描述 |
|---|---|
| 1XX | 该操作持续进行，接下来有其他操作才能有返回 |
| 2XX | 操作成功 |
| 3XX | 该操作需要重定向，有其他方式获取数据 |
| 4XX | 客户端错误 |
| 5XX | 服务器出现错误 |
常见状态码
| 状态码 | 描述 |
|---|---|
| 101 | 切换协议，如：将 HTTP 协议切换为 WebSocket 协 |
| 200 | 成功 |
| 206 | 返回部分内容，如：大文件下载 |
| 301 | 永久重定向，如：资源更换路径或改名 |
| 302 | 临时重定向，如：当前请求需要登录，临时跳转到登录页 |
| 304 | 资源未修改，不返回实体内容，客户端可直接读取本地缓存内容 |
| 400 | 错误请求 |
| 403 | 拒绝执行，如：无对应的访问权限 |
| 404 | 资源找不到，如：服务器已经删除该资源 |
| 413 | 请求实体过大，如：服务端限制了上传的文件大小 |
| 500 | 服务端内部错误，如：数据处理异常导致报错 |
| 502 | 作为网关或代理服务器时，上游服务器异常 |
| 504 | 作为网关或代理服务器时，上游服务器处理超时 |
URL
<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>
http://<host>:<port>/<path>?<query>#<frag>
ftp://<user>:<password>@<host>:<port>/<path>;<params>
受限字符：%/.#?;:$+@&= 以及非US-ASCⅡ字符集字符
Header
通用 Header
- Date: Tue, 3 Oct 2019 02:16:00 GMT
- Connection: close
请求 Header
- 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: /
响应 Header
- Server: Nginx
- Last-Modified: Thu, 16 Oct 2019 10:15:16 GMT
实体 Header
- Content-Type: text/html; charset=utf-8
- Content-Length: 100
扩展（自定义）
- X-Powered-By: thinkjs-3.0.4
- X-Cache: hit
Cookie
HTTP 是无状态的，两次请求之间没有关联性。但实际业务中又有关联性的场景，cookie 可以用来解决这一问题。
使用
请求报文
请求时会带上该域名下的 cookie
GET / HTTP/1.1
Host: m.so.com
Connection: keep-alive
Cookie: __guid=34870781.3073803881376862000
响应报文
服务器会通过 Set-Cookie 下发 cookie
HTTP/1.1 200 OK
Server: nginx/1.2.9
Date: Wed, 08 Oct 2014 05:59:59 GMT
Connection: keep-alive
Set-Cookie: thinkjs=s4mhqotbdbg9uh917lu8d5bub5; path=/
Content-Encoding: gzip
Cookie 属性
- path
- domain (hostonly*)
- expires (max-age)
- secure
- httponly
- SameSite
Cookie 安全策略
- XSS 漏洞盗取 Cookie，设置 httponly
- CSRF 漏洞，设置 token/samesite
Session
- 服务器侧对应为 Session，基于 Cookie 存放用户信息
- Cookie 有效期为 Session（随浏览器进程退出而失效）
Content-Type
在响应报文中，标识返回内容的格式
- content-type: text/css; charset=utf-8
- content-type: application/javascript; charset=utf-8
- content-type: image/svg+xml
- content-type: image/jpeg
在请求报文中， 标识提交数据的类型
-
content-type: application/x-www-form-urlencoded
-
content-type: multipart/form-data
-
content-type: application/json
-
content-type: text/xml
性能优化
- keep-alive
- 减少网络传输大小
- 缓存
- http2/http3
keep-alive
- HTTP 1.0 原本不支持 Keep-Alive，后来扩充了 Connection: Keep-Alive
- HTTP 1.1 默认支持 Keep-Alive，除非显式指明 Connection: close
gzip
服务器开启 gzip 压缩，减小数据大小
- 主要是文本资源
- 大约减少 60%
- 文件过小不宜压缩（<1K）
缓存
- 强缓存
- Expires/max-ages
- 协商缓存
- E-tag
- If-none-match
- 浏览器缓存
- LocalStorage
- ServiceWorker
缓存控制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GBBK5iUw-1586436464840)(360 2020 前端星计划.assets/1586436003790.png)]
HTTP2/HTTP3
- HTTP2
- 进制传输
- 多路复用
- 头部压缩
- server push
- HTTP3
- 基于 QUIC 协议（UDP）
HTTP 常用工具
抓包工具
- Wireshark
- Fiddler
- Firebug for Firefox
- Chrome 开发者工具
- IE8+ 自带的开发者工具
发包工具
- telnet / curl
- Fiddler *
- Tamper for Firefox
- Postman for Chrome *
- Paw for OSX
HTTP 在网络中的位置
