O、自我介绍
一、技术选型
前端框架:vue2、vue3、React 老版本及 hooks版本;
SSR框架:next;
微前端框架:Single-SPA、qiankun(乾坤)、无界、McroApp;
跨端方案:RN、webApp、Hybrid(H5);
node框架:express、koa、egg;
脚本:nodejs
二、前端项目优化
1、开发阶段优化:
-代码规范与风格统一:采用ESLint、Prettier等工具来统一代码风格和规范。
-组件化和模块化:设计可复用的组件和模块,提高开发效率和代码可维护性。
-代码评审:通过代码评审来提高代码质量和团队协作效率。
-业务流程设计优化;
2、构建阶段优化:
-自动化构建工具的选择和配置:如Webpack、Rollup等。
-Tree Shaking:去除无用代码,减少最终包的体积。
-代码拆分(Code Splitting):按需加载代码,减少首次加载的体积。
-持续集成/持续部署(CI/CD):自动化测试和部署流程。
3、编码阶段优化:
-语义化HTML:提高代码的可读性和SEO性能。
-CSS优化:如使用CSS预处理器、PostCSS、CSS-in-JS等。
-JavaScript性能优化:包括算法优化、避免内存泄漏等。
4、访问性能优化:
-白屏调优:资源体积、缓存策略、代码分段;
-用户体验方面:加载动画、渐进式数据分页等;
5、网络性能优化:
-压缩资源:如图片、字体、CSS和JavaScript文件。
-HTTP请求优化:减少请求次数,合理设置HTTP缓存策略。
-使用CDN和DNS预解析来加速资源加载。
6、网站安全优化:
-通信加密:RSA非对称加密;
-xss:转义用户输入、验证和过滤输入、CSP (内容安全策略)、使用HTTPOnly和Secure标志的Cookies:
-csrf:Referer和Origin头、避免自动提交的表单、敏感操作用post提交;
三、核心技能:
JS:
1、数据类型和变量:变量声明(var、let、const);
2、作用域和闭包:闭包的概念和用途、立即执行函数表达式(IIFE)、作用域链;
3、this指向:call、apply 和 bind 方法 、不同情境下 this 的指向、this 的工作原理;
4、对象和原型:对象的创建和原型继承、构造函数、原型链、ES6 类的语法糖和与传统原型继承的区别;
5、事件循环和异步编程:事件循环、宏任务和微任务、Promise、async/await;
6、浏览器API和Web APIs:setTimeout、setInterval、requestAnimationFrame、localStorage、sessionStorage、IndexedDB、Web Workers、Fetch API / XMLHttpRequest
7、模块化和工具链:模块化标准(CommonJS、AMD、UMD、ES6 Modules)、Babel 和 JavaScript 的编译;
8、网络请求和安全:跨域资源共享(CORS)、https和http、https 1.0和2.0、Web 安全(XSS、CSRF);
9、ES6及更新版本的新特性:箭头函数、新增的数组和对象方法;
10、测试和调试:单元测试(Jest、Mocha)、浏览器开发者工具、性能分析和内存泄露调试;
11、函数式编程:纯函数特点、高阶函数、柯里化;
12、Web组件和影子DOM: 影子DOM(Shadow DOM)Web-components;
13、编程范式和代码风格:23种设计模式、
14、辅助工具和库:代码质量检查(如ESLint)、包管理器(如npm、Yarn);
TS:
1、协变 (Covariance) 和 逆变 (Contravariance)
协变:如果A是B的子类型,那么Array是Array的子类型。这意味着你可以将派生类型的数组赋值给基类型的数组,这在函数返回值和解构数据时特别有用。
逆变:如果A是B的子类型,那么Function是Function的子类型。逆变通常出现在函数参数的类型关系中,也就是说,你可以将接收基类型参数的函数赋值给接收派生类型参数的函数的变量。
在TypeScript中,函数参数是双向协变的,这是对JavaScript现实行为的一种妥协,因为函数参数在JS中既可以协变也可以逆变。
2、函数重载 (Function Overloading)
在TypeScript中,函数可以根据参数列表的不同有多个定义,这就是函数重载。函数重载允许一个函数接受不同数量或类型的参数时做出不同的处理。重载的函数会有多个签名,但实现时你只能写一个函数体,这个函数体必须能够处理所有重载的签名。
function add(a: number, b: number): number; // 签名1
function add(a: string, b: string): string; // 签名2
function add(a: any, b: any): any { // 实现return a + b;
}
3、泛型 (Generics)
泛型是TypeScript中用来创建可重用组件的一种工具,它可以支持多种类型的数据。泛型可以提高代码复用性,同时保持类型安全。你可以用泛型定义函数、接口、类,而不必在编写代码时指定具体的类型。
function identity<T>(arg: T): T {return arg;
}
在上面的例子中,T 用作类型变量,代表任意类型。这样,identity 函数就可以接受任何类型的参数,并返回相同的类型。
4、类型断言 (Type Assertion):类似于类型转换,但不进行数据检查或重构。
5、类型守卫 (Type Guard):一种运行时检查,确保变量属于特定类型。
6、高级类型 (Advanced Types):例如交叉类型、联合类型、索引类型、映射类型等。
7、装饰器 (Decorators):一种特殊的声明,可以附加到类、方法、访问器、属性或参数上。
8、模块 (Modules) 和 命名空间 (Namespaces):代码组织和封装的机制。
9、异步编程 (Async/Await):处理异步操作的现代JavaScript特征。
C3:
H5:
四、算法题
五、项目情况
六、项目亮点+价值贡献