js基础
html 基础 juejin.cn/post/717504…
vue基础 juejin.cn/post/719132…
webpack git juejin.cn/post/719663…
前端性能优化
vuex和localstorage的区别
移动端兼容性问题
rollup 的使用
阮一峰 es6
vite
github github.com/vitejs/vite
总结文档 vue react
vuex redux
events.jianshu.io/p/41cf1613c…
闭包是什么
require 和 import
zhuanlan.zhihu.com/p/121770261
css 解析
typescirpt
type interface
联合类型
重绘 重排
1.页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次重排。
2.浏览器窗口尺寸改变
3.元素位置和尺寸发生改变的时候
4.新增和删除可见元素
5.内容发生改变（文字数量或图片大小等等）
6.元素字体大小变化。
7.激活CSS伪类（例如：:hover）。
8.设置style属性 （更新样式，display: none, 更新完样式，再恢复显示；设置class）
9.查询某些属性或调用某些方法。比如说： offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 除此之外，当我们调用getComputedStyle方法，或者IE里的currentStyle时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。
触发重绘的操作主要有：
vidibility、outline、背景色等属性的改变
我们应当注意的是：重绘不一定导致重排，但重排一定会导致重绘。
computed watch
功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
computed 默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.
vue2 vue3 的原理
http 1， http2
zhuanlan.zhihu.com/p/102561034
腾讯 zhuanlan.zhihu.com/p/102561034
浏览器缓存
强缓存，协商缓存
强缓存
- 会让浏览器执行强缓存的respone header有以下两种：
1.Cache-Control：max-age=3600;
2.Expires: Thu, 25 May 2020 12:30:00 GMT;
协商缓存
协商缓存就是浏览器向服务器发送一个请求，服务器会检查该资源是否有更新，如果有更新，就返回最新的资源，状态码200，如果没有更新，状态码304，不返回资源，浏览器从缓存中读取资源。
安全加密
vue3 ref 为什么用.value
事件委托 | 事件代理
ts 泛型
vue3 比vue2 优化
zhuanlan.zhihu.com/p/410951679
diff算法的优化；hoistStatic 静态提升；cacheHandlers 事件侦听器缓存；ssr渲染；更好的Ts支持；Compostion API: 组合API/注入API；更先进的组件；自定义渲染API；按需编译，体积比vue2.x更小；支持多根节点组件等
vue2-vue3 diff 算法的提高--》静态标记、
AMD CMD UMD
断点续传
keepalive 原理
webpack 打包上做了那些处理
前端性能优化
前端性能优化是改善网站性能和用户体验的关键一环。下面是一些常见的前端性能优化技巧：
- 压缩代码。使用压缩工具（如Uglify或Closure Compiler）来压缩前端代码可以减少文件大小并提高网页加载速度。
- 资源合并。将多个CSS文件和JS文件合并为一个可以有助于减少HTTP请求次数，从而提高性能。
- 图片优化。压缩图片大小和使用适当的格式可以减少文件大小，并可以提高加载时间。使用SRCSET属性以支持响应式设计。
- 缓存加载。使用浏览器缓存、CDN缓存等方式可以减少服务器响应时间并缓解服务器压力。
- 异步加载。使用异步JavaScript和JavaScript延迟加载可以减少网站加载时间并提高用户体验。
- 减少HTTP请求。尽量减少文件的数量和大小，使用压缩和合并技术，减少HTTP请求。
- 使用HTTP/2及SSL。HTTP/2减少了延迟和头部的大小，SSL提供了更安全的连接和更快的加载速度。
- 减少CSS和JavaScript文件的大小。删除不需要的CSS和JavaScript语句，以减小文件大小，并尽量避免使用图片背景和多余的元素。
- 在服务器端启用Gzip压缩。Gzip压缩工具可以减少页面传输数据量并减少传输时间。
- 优化CSS选择器。CSS选择器性能直接影响渲染速度，应尽量减少CSS选择器嵌套数量，使用单层选择器尽可能。
前端工程化
前端工程化是一种方法论，旨在提高前端开发效率并减少维护成本。它重点关注使开发流程自动化、标准化和轻松可重复的过程，从而最大限度地提高产品质量和效率。以下是前端工程化的核心思想和实践方法：
- 模块化：将代码划分为小的、独立的模块，便于管理和维护。通过使用现代的模块化技术（如ES6模块、CommonJS、AMD等），可以确保代码的可重用性、可维护性和可扩展性。
- 自动化构建：使用构建工具（如Webpack、Grunt、Gulp等）将多个文件组合成单个文件，以减少HTTP请求和提高页面加载速度。同时，构建工具可以执行一系列任务，如编译Sass、压缩代码、生成静态文件等，进一步提高产品质量和效率。
- 自动化测试：通过自动化测试（如单元测试、集成测试、端对端测试等）提前发现和修复代码问题，以减少代码错误、帮助调试代码和提高代码质量。
- 版本控制：使用Git等版本控制工具来管理代码版本、日志和变更历史，使得代码的合并、恢复和分支管理更加简单和高效。
- 自动化部署：通过自动化部署（如Jenkins、Travis CI等）实现一键式发布，减少手动操作、减少因发布错误导致的故障，提高发布效率。
综上所述，前端工程化可以帮助前端开发团队提高协作效率、降低维护成本、提高产品质量和速度。
内存泄露的几种情况
- 全局变量。在局部作用域中，函数执行完毕后，变量就没有存在的必要了，垃圾回收机制很快的做出判断并回收；但是对于全局变量，很难判断什么时候不用这些变量，无法正常回收。
解决办法：
① 尽量少使用全局变量；
② 使用严格模式，在 js 文件头部或者函数的顶部加上use strict。 - 闭包引起的内存泄露。闭包可以读取函数内部的变量，然后让这些变量始终保存在内存中，如果在使用结束后没有将局部变量清除，就可能导致内存泄露。
解决办法：将事件处理函数定义在外部，解除闭包。 - 被遗忘的定时器。定时器setInterval或者setTimeout不再需要使用时，且没有被清除，导致定时器的回调函数及其内部依赖的变量都不能被回收，就会造成内存泄漏。
解决办法：当不需要定时器的时候，调用clearInterval或者clearTimeout手动清除。 - 事件监听。垃圾回收机制不好判断事件是否需要被解除，导致callback不能被释放，此时需要手动解除绑定。
解决办法：及时使用removeEventListener移除事件监听。 - 元素引用没有清理。
解决办法：移除元素后，手动设置元素的引用为null。 - console。传递给console.log的对象是不能被垃圾回收，可能会存在内存泄漏。
解决办法：清除不必要的console。
JS模块化加载方式 ，AMD、CMD、CommonJS、ES6四者间的异同
- AMD----- 依赖前置 (require.js)引入模块-----require([ ],callback)
定义模块----- define([],callback)
不论定义模块，还是引入模块时，都会先行引入依赖，再定义/引入模块 - CMD ----- 依赖就近引入原则(seaJs)引入模块 (遵循就近原则)
define(function (requie, exports, module) {
//依赖可以就近书写
var a = require('./a');
a.test();
});
定义模块----- define([],callback)
- CommonJS引入模块-------require('模块路径')
定义模块 ------ exports.模块名= function(){ //some code ... }
- ES6引入模块 ----- import
定义模块 ----- export、export default
qiankun,js
1.注册
registerMicroApps(
[
{
name: 'app1',
entry: '//localhost:8080',
container: '#container',
activeRule: '/react',
props: {
name: 'kuitos',
},
},
],
{
beforeLoad: (app) => console.log('before load', app.name),
beforeMount: [(app) => console.log('before mount', app.name)],
},
);
2.事件通讯
// 父应用
import { initGlobalState, MicroAppStateActions } from 'qiankun';
// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();
// 子应用
// 从生命周期 mount 中获取通信方法，使用方式和 master 一致
export function mount(props) {
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
props.setGlobalState(state);
}
3.js隔离
SnapshotSandbox 构造函数 来兼容proxy
proxy
4.css隔离
使用命名空间，shadowDom
