docs: update

brightzoe · Apr 7, 2024 · f846f12 · f846f12
1 parent 7cd5cbf
commit f846f12
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 31 deletions.
diff --git a/docs/README.md b/docs/README.md
diff --git a/docs/fe-basic/browser.md b/docs/fe-basic/browser.md
@@ -9,15 +9,16 @@
 
 ### 缓存位置（优先级从高到低）
 
-- Service Worker 运行在 JavaScript 主线程之外，无法直接访问 DOM。可以自由地控制缓存，可以完成离线缓存、消息推送、网络代理等功能。
 - Memory Cache 内存缓存效率最快，但持续性短，关闭 Tab 页，内存缓存就会被释放。
+- Service Worker Cache 运行在 JavaScript 主线程之外，无法直接访问 DOM。可以自由地控制缓存，可以完成离线缓存、消息推送、网络代理等功能。
+- HTTP Cache HTTP 缓存。
 - Disk Cache 硬盘缓存，读取速度慢，容量大，持续性长。所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。
 
-### 强缓存与协商缓存
+### HTTP 缓存
 
 强缓存：如果缓存资源有效则直接使用缓存资源，不必再次向服务器发送请求。
 
-- Expires。HTTP 响应头添加 Expires，表示资源的过期时间。是 HTTP 1.0 的方式，在 HTTP 1.1 中已经被弃用。
+- Expires。HTTP 响应头添加 Expires，表示资源的过期时间。对客户端与服务端的时间一致性有很高要求。是 HTTP 1.0 的方式，在 HTTP 1.1 中已经被弃用。
 - Cache-Control。响应头。Http 1.1 提出，对缓存更精准的控制，优先级高于 Expires。
   - max-age=t：设置缓存的最大有效期，单位为秒。
   - private：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的 HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存。
@@ -54,19 +55,19 @@
 2. 进一步优化，很多网站的资源后面都添加版本号，目的是使用强缓存，每次升级资源后强制改变版本号，防止浏览器进行缓存。但有可能只是修改了一个资源导致所有资源的版本号改变，性能优化不够。
 3. 缓存控制精确到文件粒度，使用**数据摘要**算法对文件求摘要信息。
 4. 用户体量大的网站静态资源和动态网页分集群部署，静态资源会被部署到CDN节点，会产生动态网页和静态资源部署不对应的情况。
-    - 静态资源也需要摘要，并更新动态网页中的摘要url，需要采用非覆盖式更新方式，发布新版本时不能直接覆盖旧版本，实现平滑升级。
-    - 灰度部署动态网页。
-  ![动静资源结合](image.png)
+   - 静态资源也需要摘要，并更新动态网页中的摘要url，需要采用非覆盖式更新方式，发布新版本时不能直接覆盖旧版本，实现平滑升级。
+   - 灰度部署动态网页。
+     ![动静资源结合](image.png)
 
 :::
 
-
 ## 浏览器多标签页通信
 
 - WebSocket 使用服务器作为中介，标签页向服务器发送数据，服务器向其他标签页进行推送转发。
-- SharedWorker
+- Shared Worker
 - localStorage 监听 localStorage 的变化。onStorage 事件。
 - postMessage 获取对应标签页的引用，使用 postMessage 发送数据。
+- BroadcastChannel
 
 ## Service Worker
 
@@ -198,7 +199,7 @@ CSSOM DOM
 
     响应头:
 
-    Access-Control-Allow-Origin:url/* 服务器允许的域
+    Access-Control-Allow-Origin:url/\* 服务器允许的域
 
     Access-Control-Allow-Methods: (POST, GET, OPTIONS) 服务器允许使用这些方法
 

diff --git a/docs/fe-basic/css/index.md b/docs/fe-basic/css/index.md
@@ -67,7 +67,9 @@ display:inline 水平方向的 margin，padding 有效，垂直方向无效。
 
 - gif 动图，只有 256 色
 - jpeg/jpg 有损压缩，色彩丰富，适合存储照片
+  > 处理矢量图形和Logo等线条感强、色彩对比强烈的压缩后模糊会相当明显。不支持透明度
 - png 无损压缩，支持透明度，适合大块相同颜色区域的图像
+- svg 矢量图、文本文件、体积小
 - webp 有损压缩，体积小
 - bmp 无损，不压缩，体积大，不适合网页
 

diff --git a/docs/fe-basic/fe-engineering/performance-optimization.md b/docs/fe-basic/fe-engineering/performance-optimization.md
@@ -61,6 +61,35 @@ Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量
 
 3.  NetWork 面板
 
+## 加载网站全过程
+
+- DNS 解析
+  - 减少解析次数或者把解析前置：浏览器DNS缓存和DNS prefetch
+- TCP 连接
+  - 长连接、预连接
+- HTTP 请求
+
+  - 减少请求次数：长连接、预连接、缓存、CDN
+  - 减小请求体积：图片压缩、gzip、base64
+  - 请求慢：CDN
+
+  :::tip 资源的压缩与合并
+  通常由构建工具实现，见下方webpack的处理。
+
+  - 减少打包时间
+  - 减小打包体积
+
+    HTTP压缩：内置到网页服务器和客户端中以改进传输速度和带宽利用率的方式。最常见的HTTP压缩方式有：deflate、br、gzip。
+
+    gzip原理：在文本文件中找出重复出现的字符串，临时替换他们，使整个文件变小。文件中重复率越高，压缩率越高。
+
+    gzip通常由服务端实现。以服务器的压缩时间和CPU的开销为代价，省下一些传输过程中的时间开销。Webpack中的Gzip压缩才做，在构建过程中做了一部分服务器的操作，为服务器分压。
+
+  :::
+
+- HTTP 响应
+- 渲染
+
 ## 选择合适的优化方式
 
 - 网络层面

diff --git a/docs/fe-basic/fe-engineering/webpack.md b/docs/fe-basic/fe-engineering/webpack.md
@@ -173,7 +173,7 @@ bundle
 
 ## webpack optimization
 
-构建时间优化
+**构建时间优化**
 
 - speed-measure-webpack-plugin 分析打包耗时
 - 比较耗时的包可以使用 cdn 分包。或者预编译资源为 dll
@@ -190,7 +190,7 @@ bundle
 - 开发环境：不需要代码压缩，gzip，体积优化，提高构建速度
 - 生产环境：代码压缩，gzip，体积优化
 
-打包体积优化
+**打包体积优化**
 
 - webpack-bundle-analyzer 打包体积分析，定位问题
 - 比较大的包使用 cdn 引入或者按需加载。 使用 cdn 引入的，在配置中要在打包时排除掉。

diff --git a/docs/fe-basic/web-workers.md b/docs/fe-basic/web-workers.md
@@ -55,7 +55,7 @@ self.onmessage = (messageEvent) => {
 - 视频网站，视频解码
 - 大量计算，比如设计相关的网站，解析 sketch 文件
 
-### SharedWorker
+### Shared Worker
 
 共享 worker，可以被多个浏览器环境访问，只要页面同域即可，为跨浏览器 tab 共享数据提供了解决方案。
 
@@ -93,7 +93,7 @@ port.onmessage = (messageEvent) => {
 
 - SharedWorker 的作用域是公用的。
 
-## ServiceWorker
+## Service Worker
 
 一般用来提高离线体验，拦截网络请求，根据网络是否可用来采取适当的手段或者更新来自服务器的资源。