submit

Author: lirunkai

docs/base/html.md

@@ -10,6 +10,7 @@
 
 + 解析接受到的文档，根据文档定义一颗DOM树
 + 对CSS进行解析， 生成CSSOM规则树
++ 加载并执行javascript
 + 根据DOM和CSSOM生成渲染树，根据渲染树来进行布局
 + 这个过程是逐步完成的，不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容
 

docs/base/performance.md

@@ -1,24 +1,25 @@
 ## 性能优化
 
-前端性能
+影响页面渲染的因素
 
-1. 页面加载速度
-2. 浏览时动态加载数据过多时的卡顿
+1. 网络延迟
+2. 资源体积过大
+3. 重复加载资源
+4. 加载脚本时，渲染内容阻塞
 
 
 
 怎么分析？
 
 1. lighthouse 自动对网站做一个质量评估
 2. Performance
+   1. js中的`window.performance.timing`对象上有各个阶段的耗时
 3. Web pack 分析包`webpack-bundle-analyzer`
 4. Source-map
 
 
 
-怎么优化？
-
-静态文件的终极优化策略：
+##### 静态文件的终极优化策略：
 
 1. 缓存 => 配置超长时间的缓存,节省带宽, 提高性能
    1. `http响应头`
@@ -37,54 +38,72 @@
 
 
 
-网络层面
+#### 怎么优化？
+
+##### 资源加载优化
+
++ 减少http请求
 
-1. 增加缓存cache-control/last-modified/if-modified-since/etag/if-none-match
+  + 缓存cache-control/last-modified/if-modified-since/etag/if-none-match
 
-   1. Cache-control  和 max-age
+    + Cache-control  和 max-age
 
-      1. `no-cache` 不缓存
-      2. `no-store` 禁止缓存
-      3. `private` 仅UA缓存
-      4. `public` 都可以缓存
+      + `no-cache` 不使用前置缓存，检查协商缓存
+      + `no-store` 禁止缓存
+      + `private` 仅UA缓存
+      + `public` 都可以缓存
 
-   2.  `Etag` 和 `If-None-Match`
+    + `Etag` 和 `If-None-Match`
 
       `Etag` 表示资源的版本, 浏览器在发送请求时会带`If-None-Match`头字段, 来询问服务器该版本是否仍然可用。 可用则返回304状态码。
 
-   3. `Last-Modified` 和 `If-Modified-Since` 检查修改时间
+    + `Last-Modified` 和 `If-Modified-Since` 检查修改时间
+
+  + 懒加载
+
+  + 按需加载
+
+  + 合并请求
 
-2. 减少cookie传输
+    + 雪碧图
+    + 小图片使用base64 
 
-3. 压缩文件`nginx 开启gzip`
++ 提高响应速度
 
-4. 应用http2
+  + cdn
+  + DNS Prefetch
+  + 应用http2
+    + 首部压缩
+    + 多路复用
+    + 服务端推送
+    + 二进制分帧
 
-   1. 首部压缩
-   2. 多路复用
-   3. 服务端推送
-   4. 二进制分帧
-   
-5.  减少http请求
++ 减少资源大小
 
-   1. 雪碧图
-   2. 小图片使用base64
-   3. 按需加载
-   4. 懒加载图片
+  + 代码压缩
+  + 代码拆分
+  + 图片压缩
 
++ 优化资源加载方式
 
+  + ssr
 
-页面
 
-1. 减少回流与重绘
-2. 骨架屏
-3. 只对可视区域进行渲染
-4. 预加载preload/prefetch
-   1. `<link rel="preload" as="script" href="">`
-   2. `<link rel="dns-prefetch" href="//wq.test.com"/>` 提前解析dns
-5. 懒加载
 
+##### 页面渲染优化
 
++ 优化html
+  + js外链放在底部
+  + css外链放在顶部
+  + 减少dom层级
++ 优化js/css
+  + 减少重绘，重排
+  + 降低css选择器复杂性
+  + 缓存dom查找
+  + 通过class名方式修改元素样式
++ 优化动画
+  + 使用requestAnimationFrame
+  + 使用绝对定位或者固定定位
 
 webpack
 

docs/base/框架.md

@@ -25,7 +25,18 @@ View:  视图
 
 ViewModel: 负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model
 
-### 
+##### 什么是双向数据绑定
+
+当我们修改视图时，数据会自动改变，当我们修改数据时，视图会自动渲染
+
+原理：
+
++ 监听器： 对数据进行监听
+  + vue中使用`reactive`
++ 解析器： 对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
+  + vue中使用`effect`
+
+
 
 #### Vue3
 
@@ -46,27 +57,40 @@ vnode是虚拟的dom, 也就是通过js对象来描述dom结构
 
 ##### vue和react的区别
 
+**相同点**
+
++ 都有组件化思想
++ 都是用了虚拟dom
++ 数据驱动视图
++ 支持native
+
+**不同点**
+
 1. 修改父组件的数据。 vue通过emit事件来修改父级数据 react通过props传递父组件方法，在子组件调用
 2. vue是渐进式框架，react是一个UI库
 3. vue的组件需要注册之后才能使用， react导入就可以在jsx中使用
 4. vue的修改是通过依赖追踪（观察者模式+proxy拦截），动了多少数据，就触发多少更新。React对数据变化无感知，触发局部重新变化是通过调用`setState`完成的
 5. 事件。 react对所有事件进行代理，将所有事件都绑定到document上。
 
+##### `v-if`和`v-show`的区别
+
++ `v-show`使用css的display来隐藏元素，`v-if`则是直接删除元素
++ `v-if`切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；`v-show`只是简单的基于css切换
+
 ##### 为什么会出现vue3？
 
 + 随着功能的增长，复杂组件的代码变得越来越难维护
 + 缺少一种比较干净的在多个组件之间提取和复用逻辑的机制
 + 类型推断不够友好
 + bundle时间比较长
 
-
-
 ##### vue3的优化
 
 + diff算法优化
 + 静态提升
 + 事件监听缓存
 + 更好的类型支持
++ 更好的逻辑复用 `compositionApi`
 
 
 
@@ -76,16 +100,40 @@ props是响应式的, context是普通js对象，也就是说不是响应式的
 
 
 
+##### vue实例都做了什么？
+
+
+
+#### SPA(single-page application)
+
+单页应用： 通过动态重写当前页面来避免页面间的切换打断用户的操作
+
+优点
 
+- 具有桌面应用的即时性、网站的可移植性和可访问性
+- 用户体验好、快，内容的改变不需要重新加载整个页面
+- 良好的前后端分离，分工更明确
 
-##### Vue-router原理
+缺点
+
+- 不利于搜索引擎的抓取
+- 首次渲染速度相对较慢
+
+##### Vue-router原理（spa原理）
 
 HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录
 
 + pushState 和 repalceState 两个 API 来操作实现 URL 的变化 
 + 我们可以使用 popstate 事件来监听 url 的变化。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用`history.back()`或者`history.forward()`方法）
 + history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）
 
+##### spa做seo
+
++ ssr服务端渲染
++ 静态化
+  + 通过程序将动态页面抓取并保存为静态页面,这样页面实际存在于服务器的硬盘中
++ 通过`Nginx`配置，判断访问来源是否为爬虫`phantomjs`
+
 
 
 ##### 组件的设计
@@ -115,5 +163,4 @@ HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API
   + 通常是根据最小业务状态抽象而出，有些业务组件也具有一定的复用性，但大多数是一次性组件
 + 高阶组件
 
-##### 组件的展示 storybook
-
+##### 组件的展示 storybook