知识库

解析和渲染

URL 解析
- 特殊字符编码
  - 请求地址如果出现非 Unicode 编码内容，现代浏览器会默认进行编码。（IE编码成 gb2312 格式，火狐编码成 utf-8 格式，可以使用 encodeURI 或 encodeURIComponent 进行统一的编码处理）
  - 基于 encodeURI 编码，整个URL中的特殊字符都会自动编码。
    https://www.baidu.com:443/index.html?from=微信 => https://www.baidu.com:443/index.html?from=%E5%BE%AE%E4%BF%A1
  - 基于 encodeURIComponent 编码，相对于 encodeURI 来说，不会给整个URI编码，而是给URL部分信息编码。
    https://www.baidu.com:443/index.html?from=127.0.0.0.1:8080 => http%3A%2F%2Fbaidu.com%3A443%2Findex.html%3Ffrom%3D127.0.0.0.1%3A8080
    js
```
var set1 = ";,/?:@&=+$";  // 保留字符
var set2 = "-_.!~*'()";   // 不转义字符
var set3 = "#";           // 数字标志
var set4 = "ABC abc 123"; // 字母数字字符和空格

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (空格被编码为 %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (空格被编码为 %20)
```
  - escape / unescape 编码，已废弃，一般只用于客户端页面之间自己的处理，例如页面跳转传参的中文信息进行编码，客户端的 cookie 信息是中文用这种方式编码
缓存检查
- Service Worker
- Memory Cache 内存缓存
  主要是页面中已经抓取到的资源，如 css、js、图片等，虽然读取高效，但时效短，关闭页面后，也就释放了。
- Disk Cache 硬盘缓存
  读取速度比内存缓存慢，但胜在容量和时效性上。
- Push Cache 推送缓存
  当上面三种缓存都没命中时，才被使用，只在会话中存在，并且缓存时间也很短，Chrome 中只有五分钟左右。
DNS 域名解析：将域名地址解析为 ip 地址
IP 寻址，排队等待，最多只能发送 6 个 HTTP 请求。

代理 TCP复用

和服务器建立TCP连接，如果是 HTTPS，会进行 SSL 协商。
发送HTTP(S)请求（请求行请求头空行请求体）
响应 HTTP(S)请求（响应行响应头空行响应体）
- 如果是重定向状态码，进行重定向操作。jd.com => https://www.jd.com
- 如果是协商缓存，本地进行缓存查找。
浏览器渲染服务器返回的内容
- 浏览器无法直接使用 HTML，需要将 HTML => Tokens => DOM 树。
- 浏览器无法解析纯文本的 CSS 样式，对 CSS 进行解析，解析成 styleSheets，即 CSSOM 树（document.styleSheets）
- 计算出 DOM 树中每个节点的具体样式（Attachment）
- CSSOM 树和 DOM 树组成渲染（布局）树，将 DOM 树中的可见节点，添加到渲染树中，并计算节点渲染到页面的坐标位置（Layout）。
  DOM树和渲染树的区别：
  - DOM 树与 HTML 标签一一对应，包括 head 内不会渲染输出的节点，如 link、meta、 script 和 display：none 隐藏的元素。
  - 渲染树不包括 head 内不会渲染输出的节点和隐藏元素（opacity、visible 会出现在渲染树中）
- 通过渲染树，进行分层，根据定位属性、透明属性、transfrom 属性、clip 属性等生成图层树
- 将不同图层进行绘制，转交给合成线程处理，最终产生页面，并显示在浏览器上 (Painting、Display)
和服务器断开TCP连接 HTTP 1.1 默认长连接

CSS 不会阻塞 HTML 解析，渲染 DOM 必须等 CSS 解析完。如果 link 放到 body 最后，会导致二次渲染。

html

<body>
  <div></div>
  <link rel="stylesheet" href="./index.css">
</body>

JS 会阻塞 HTML 解析，阻塞渲染。需要暂停 DOM 去执行 JS，JS 可能操作样式，因此执行前还需要等待样式加载完。所以 JS 要放到页面底部。

html

<body>
  <div>Hello</div>
  <script>
    for () {

    }
  </script>
  <div>World</div>
</body>

解析 HTML 前会先执行预解析，会预加载 JS 和 CSS 等文件（并行加载）

解析和渲染 ​

解析和渲染