VIEWZ UI

# 口诀

hide页面

# Typescript

  • 【联断枚泛const】 接口(+5个操作“对象类型”的高级类型) 函 （类） 【装】

# vue3和vue2的区别

  • 组合式 css编译确实增强了 模板2性能 | 抽事件中心 抽渲染器 重写ts和虚拟DOM
    • 解释：分别系：js层面 css层面 模板层面
  • 小的语法改动和“略微改进”加起来有十多项吧 【我总结的】

# vue3 下场景问题： ref computed watch

  • 对比ref和reactive：零散简便 vs 集中持有
  • 为什么ref需要.value：js不能检测简单数据类型的值的改变，而相反，可以对对象的属性.value的getter和setter可以做数据劫持
  • 对比 computed 和 watch之流： 【1】不能异步return 【2】不带副作用
    • 【1的】具体解释：“computed的回调”不支持异步return结果数据

# webpack 5 更新了什么

  • webpack 5 更新了什么：
    • 一：内部性能优化：瞎猜都知道必有的
    • 二：在使用层面，换汤不换药：确实都是一些【1】小修小改：小的改语法不改用法、小改进 【2】内置了一些插件【3】新概念就一两个。
      • 新概念层面：“模块联邦”，暂时先不管
      • （小的改语法不改用法层面，其中就cache特别重要，需要单独看看。 2024年3月10日）
    • !!应对面试：看过自己的笔记有印象，能解释是什么东西即可

# webpack 性能优化

  • "主要分为三大方向：" 【一下就飞到 分包 那里了】
    • 缓存：提高二次构建速度
    • 开发环境优化：好像就vite这一个东西
    • 生产环境优化 【应是重心】 【还是按照 网页性能优化的思路】【下有具体说明】
      • “绝大多数位于此”
      • 按思路来：预加载 懒加载 分包策略 压缩文件体积 | cdn(externals) | 少经过loader 多线程
  • 分包策略优化口诀 【等别人问】：
    • 体积 | 更共使 频率 + 数目
  • 【具体说明】记忆口诀 （其实能有效提升的就其中三四个）
    • 缓存：提高二次构建速度： webpack缓存大一统
      • 替代链： webpack 5 cache > hard-source-webpack-plugin > dll
      • 替代链： webpack 5 cache > babel缓存 > cache-loader
    • 【一下就飞到 分包 那里了】
      • 开发环境优化 【暂无内容 见隔壁文件】 vite 然后可以搞各种骚操作毕竟开发环境
      • 预加载/懒加载 【主要是提升不明显】【暂无内容 见隔壁文件】
    • 分包策略： 体积 | 更共使 频率+ 数目 【前文已经介绍】
      • 【1】SplitChunks （配置贼复杂，还要考虑缓存） 和 【2】code split
    • externals：外挂cdn
      • !!! public;src/assets;第三方库都可以
    • 少执行 或者 执行效率
      • 少经过loader：oneOf exclude/include noParse IgnorePlugin等等 原理都是一样的 【优化打包构建速度】【前文已经介绍】
      • 多线程 【优化打包构建速度】【前文已经介绍】

# 性能优化

  • 预 | 懒缓缓alive打包
  • g需free缩图(预~懒缓~雪格)
  • loading懒骨("塞"忽略) -----加快首屏显示
  • dom、dom、绘排
  • 委托、防抖节流、worker、css还有其他代码逻辑 柯里化 算法优化等等

# 如何减少无意义的 重绘重排 (表述清楚一点，应该是：如何减少无意义的 重绘重排)

  • 尽可能不要修改影响布局的范围比较大的 DOM
    • 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局(这知识有点老了)
  • 常变动的就绝对定位 或者 专门归入合成层
    • 绝对定位：为动画的元素使用绝对定位 absolute / fixed（局部重排）
    • 构造合成层：tansform、opacity、filters...这些属性，把经常变动的抽到合成层(不是银弹)
  • 如果将要频繁触发重排重绘，则合并dom操作或者样式变动，再统一更新dom
    • 应预先定义好 class，然后修改 DOM 的 className(而不是一条一条地修改 DOM 的样式)
      • 使用div.style.cssText(和class同理，不太推荐)
    • 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次样式，然后再把它显示出来
    • 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。(奇技淫巧，看下使用场景合适不合适)
    • createDocumentFragment
  • 避免触发 强制重排重绘 ----其实就是尽量少读取
    • 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量（因为获取一次，加之循环内修改产生dirty标记，就是强制重排/重绘一次）
    • js保存dom的属性信息，从js内间接地读取dom信息；再确定好修改内容再更新到dom中
  • (避免合成层的 隐式合成 的发生)
    • z-index的设置

# 当输入url

  • 用户输入www.baidu.com
  • (合成url：如果是符合url规则则直接访问；否则“合成url”把输入内容当成搜索内容，拼接为访问搜索引擎的地址)
  • (能否利用当前网页的http强缓存)（后面流程已经和弱缓存的过程是合为一体的）
  • DNS域名解析(即，把域名解析为IP) (DNS也是要走应用层及其以下的层)
  • 和IP地址建立tcp连接，发送HTTP请求 (如果是https会有TLS/SSL 握手) 【详见另外一个文档】
  • 服务器接受请求，返回HTTP响应 (或静态资源或静态html等)
  • (客户端)接受完响应发起"关闭tcp连接"(4次挥手) (这要看是否开启了“http keep-alive”。http1.1及http2)
  • (浏览器开始了“关键渲染路径”)
    • (遇到js、css、图片引用标签：会再次发送HTTP请求重复上述的步骤。一般都会用cdn，cdn也是基于DNS解析) (cdn也有专题讲它的流程)
      • (包括重绘重排)
      • (在收到CSS文件后会对已经渲染的页面重新渲染)

# 关键渲染路径

  • 关键渲染路径
    • parse html 、解析cssom (update render object tree) 、update render layer tree 、layout (好像是计算布局信息) 、paint (计算) 、 composite(计算合成层信息) 、commit 、分片 rasterize 、回到合成线程 commit到cpu

# 浏览器tab间通信

浏览器同源指的是协议，主机名，端口都相同 sessionStorage不能跨标签或者窗口

【1】只能“同源”的思路：

  • 尝试使用各种本地化存储(列举了该问题场景下比较常用的几种)：
    • localStorage + onstorage事件
      • onstorage事件是非当前(且需同源的)页面对localStorage进行修改时才会触发；当前页面修改localStorage不会触发本页面的监听函数
    • IndexedDB也是基于浏览器数据存储，区别是其实现通信需要轮询
  • tab间 Worker
    • SharedWorker 共享工作线程（只能同源，兼容性差）
    • Service Worker(加postMessage) (没有详细研究过)
  • 【用法最简洁】BroadCastChannel

【2】能跨域的思路：(其实就是在跨域的方法里面，能找到很多能应用到浏览器tab之间的！！)------------按能力强弱排名

  • iframe：仅仅将非同源页面通信转换为同源页面通信。然后再需要配合同源通信手段 【后有例子】
  • websocket用服务器做中转
  • postMessage 需要结合window.open父子tab之间使用，局限性在于要求tab父子等关系。
  • 使用cookie（Cookie中的同源只关注域名，忽略协议和端口，也就是Cookie可以跨二级域名来访问，也可以称为“同站”）
    • 可以加于setInterval回调或者requestIdleCallback回调以轮询
  • 【被废弃】document.domain已介绍了不是特别好用

# dns图

临时--iteye (opens new window)

# 宏任务和微任务分别有哪些

宏任务有：(在文档中叫tasks)

  • setTimeout
  • setInterval
  • setImmediate (Node独有)（弥补process.nexttick若递归自己会没完没了的缺陷）
  • I/O：比如click事件回调、??ajax算吗????
  • postMessage：某个窗口的引用或者channel
  • 【应该不算是宏任务吧】UI rendering (浏览器独有，也就是每个loop的最后一环节)
    • IntersectionObserver它紧随r~A~F

微任务：(在文档中叫jobs)

  • process.nextTick (Node独有)（node两大微任务阶段因它而区分）
  • Promise的then回调
  • MutationObserver （浏览器独有）
  • （ Object.observe(废弃) ）

# “快速已复习”

  • "AA02-MVVM框架\收集箱\vue3组合式\01index.md" 建议常常拿出来看，碎规则多
  • lazyload的container：更精确指定被监听滚动的容器，若未定义则为最近一个overflow值为auto或scroll的父元素， 这个规则很实用
    • 懒加载组件：lazyComponent该组件由库方提供，你只需要传入default slot（里面会调用this.$slots.default）就行了，这样可以随便传组件进去。
  • 宏任务微任务分别有哪些 事件循环00
  • 预加载 tcp dns preload refetch prerender
  • 根域 --顶级 -- 权威
  • 跨域8+1+1：jsonp cors postMessage iframe2 nginx ws node + cookie + domain (2024年7月3日update)
    • broadcastchannel post
    • sharedworker post
    • ls indexdb轮询
  • 缓存11个 其实有效的只有6个：html indexdb cook ls ss caches
    • websql app cache userdata push cache flash

# 链接：响应式原理；性能优化；es6

# 技术外的提问 @TODO:

  • 做的东西就自己用吗
  • (hr轮不是出题目，公开的能录音)
  • 午休 / 周六
  • 出差
  • 跟哪个公司签合同
  • 绩效占比
  • 固定淘汰比例
  • 试用期和转正工资区别
  • 电脑自带的吗 / 能电脑自带
  • 关系Hub