软件公司都是帮别人做网站么,做外贸商城网站,用vs2005做网站设计,重庆川九建设有限责任公司官方网站目录 前言一面git 常见命令跨窗口通信vue 响应式原理发布订阅模式翻转二叉树Promise.all()扁平化数组面试官建议 二面Event Loop 原理Promise 相关css 描边方式requestAnimationReact 18 新特性JSX 相关react 输出两次函数式编程React 批处理机制http请求头有哪些本地存储性能优… 目录 前言一面git 常见命令跨窗口通信vue 响应式原理发布订阅模式翻转二叉树Promise.all()扁平化数组面试官建议 二面Event Loop 原理Promise 相关css 描边方式requestAnimationReact 18 新特性JSX 相关react 输出两次函数式编程React 批处理机制http请求头有哪些本地存储性能优化方面webgl 的优化手段着色器优化相关缓冲区和深度测试异步原型和原型链倒序输出汉语表达次数最少字符 面试复盘 前言 即时设计 - 可实时协作的专业 UI 设计工具 即时设计是一款可在线编辑的专业UI设计工具支持原型、交互、智能动画、切图等功能满足产品创造和交付的全流程体验。 面试题目源码前端面经 一面 git 常见命令 初始化仓库git init 远程仓库地址git clone / git remote add origin 查看关联的远程仓库列表 git remote -v 显示当前工作目录和暂存区的状态 git status 添加到暂存区 git add . 提交本地仓库 git commit -m 提交日志 提交日志信息 git log 推送远程仓库 git push origin 本地分支名 创建分支 git branch 分支名称 切换分支 git checkout 分支名称 合并分支 git merge 分支名称跨窗口通信 https://juejin.cn/post/7306040473542213644 可以借助 web scoket 通过后端这个载体进行跨页面通信Broadcast Channel遵循浏览器的同源策略基于发布-订阅模式允许一个窗口发送消息并由其他窗口接收本质上是一个数据共享池子SharedWorker是 HTML5 中提供的一种多线程解决方案它可以在多个浏览器 TAB 页面之间共享一个后台线程从而实现跨页面通信本地化存储 API利用本地存储实现同域下的数据共享window 监听 storage 数据变化执行对应的方法回调 vue 响应式原理 vue2 使用 Object.defineProperty实现是 es6 引入的方法可以通过配置精确添加或修改对象的属性 不能利用 get/set 对额外添加的属性进行监听 不能监听自身数组下标修改元素的变化直接定义数组可以但是不常用 vue3 使用 Proxy 实现能够支持对象添加或修改属性的变化 通过reactive() 函数给每一个对象都包一层 proxy从而实现对数据的监控 支持改变数组的方法push、pop、shift、unshift、splice、sort、reverse Reflect 是 es6 引入的新特性提供一种新的方式操作对象 使用 WeakMap 作为缓存区防止对象被重复代理主要是避免内存泄漏以及隐藏内部实现细节 发布订阅模式 class PubSub {constructor() {this.events {}}subscribe(event, callback) {if (!this.events[event]) this.events[event] []this.events[event].push(callback)}unSunscribe(event, callback) {if (!this.events[event]) returnthis.events[event] this.events[event].filter((cb) cb ! callback)}publish(event, data) {if (!this.events[event]) returnfor (let item of this.events[event]) item(data)} }const pubsub new PubSub() function callback1(data) {console.log(触发订阅事件 1, data) }function callback2(data) {console.log(触发订阅事件 2, data) }pubsub.subscribe(myEvent, callback1) pubsub.subscribe(myEvent, callback2)pubsub.publish(myEvent, 11111)翻转二叉树 /*** 实现翻转二叉树* 例如* a* / \* b c* 转为* a* / |* c b*/ const invertTree function (root) {if (root null) return rootlet temp root.leftroot.left invertTree(root.right)root.right invertTree(temp)return root }const ensure (output, expect, message) {if (JSON.stringify(output) JSON.stringify(expect)) {console.log(${message} ok)} else {console.log(${message} fail)} }const test function () {const input {val: 1,left: {val: 2,left: {val: 3,left: null,right: null,},right: {val: 4,left: null,right: null,},},right: {val: 5,left: {val: 6,left: null,right: null,},right: {val: 7,left: null,right: null,},},}const expect {val: 1,left: {val: 5,left: {val: 7,left: null,right: null,},right: {val: 6,left: null,right: null,},},right: {val: 2,left: {val: 4,left: null,right: null,},right: {val: 3,left: null,right: null,},},}const output invertTree(input)ensure(output, expect, test) }// 输出 test ok表示测试成功 test()Promise.all() Promise.myAll function (promises) {let result []return new Promise((resolve, reject) {promises.forEach((item, index) {Promise.resolve(item).then((res) {result[index] resif (Object.keys(result).length promises.length) resolve(result)}).catch((err) {reject(err)})})}) }const p1 Promise.resolve(p1) const p2 new Promise((resolve, reject) {setTimeout(() {resolve(p2 延时一秒)}, 3000) }) const p3 new Promise((resolve, reject) {setTimeout(() {resolve(p3 延时两秒)}, 2000) })const p4 Promise.reject(4)Promise.myAll([p4, p2, p3]).then((res) console.log(res)).catch((err) console.log(err)) // 2秒后打印 [const promise new Promise((resolve, reject) {}) console.log(promise) 扁平化数组 // https://juejin.cn/post/7273693216372916283console.log(\n --- 一原生方法 --- \n) let arr [1, [2, 3], [4, [5, 6, [7, 8]]]] console.log(arr.flat()) // 默认解析一层可以指定参数 console.log(arr.flat(Infinity)) // Infinity完全解析console.log(\n--- 二、递归解析 ---\n)function flatten(arr, depth) {let result []for (let i 0; i arr.length; i) {if (Array.isArray(arr[i]) depth 0) {result result.concat(flatten(arr[i], depth - 1))} else {result.push(arr[i])}}return result }console.log(flatten(arr, 1)) console.log(flatten(arr, 2)) console.log(flatten(arr, 3))console.log(\n--- 三、reduce解析 ---\n) function reduceFlatten(arr) {return arr.reduce((acc, cur) {if (Array.isArray(cur)) {return acc.concat(reduceFlatten(cur))} else {return acc.concat(cur)}}, []) }console.log(reduceFlatten(arr)) 面试官建议 面试回答先总结然后分点并结合自己的实际项目进行讲解应届生没有太多的项目/业务经验面试官可能会重点问一下基础、框架原理、数据结构与算法、计算机网络这些知识点 一面忘记录音了有一些问题面试后没有回想起来 二面 Event Loop 原理 事件循环Event Loop是 JavaScript 中实现异步编程的一种机制。 执行同步任务放入调用栈结果输出到控制台异步任务放到web apis这里分为微任务、宏任务同步代码执行完毕即调用栈清空启动事件循环机制Event Loop依次处理执行微任务、宏任务队列放入调用栈执行 Promise 相关 同步任务按照次序依次执行每个任务必须完成后才能执行下一个任务。 异步异步任务是非阻塞的可以同时执行多个任务不需要等待任务的完成。 执行 async 函数返回的一定是 Promise 对象await 相当于 Promise 的 thentry…catch 可捕获异常代替了 Promise 的 catchpromise.all 接收 promises 数组所有为 resolve 才输出有一个 reject 就中断输出报promise.allSettled 接收 promises 数组不论结果是什么都会输出每一个 promise 的状态 css 描边方式 border 普通边框outline 不占用空间和影响元素大小box-shadow 设置阴影描边效果 requestAnimation setTimeout快速滚动白屏原因不同设备刷新率不同setTimout 只是一个固定的时间间隔。只有主线程执行完毕才会检查事件队列的任务执行时间会变晚requestAnimationFrame由系统决定回调函数的执行时机不会引起丢帧现象1/60 1/75 React 18 新特性 https://juejin.cn/post/7071861718573383716 并发渲染机制优先处理用户最关心的事情批处理优化多个状态合并成一个批次处理这样可以减少不必要的渲染次数服务端渲染的改进引入新的 api createRoot 创建 root 节点移除对 IE 支持继续使用需要 17版本 JSX 相关 js 是一种动态类型的脚本语言jsx 是 react 的扩展语法主要用于定义组件UI的结构和外观最后需要通过构建工具转换为普通的js代码JSX是React的一个语法扩展它允许你在JavaScript代码中写类似HTML的标记。Babel会将JSX代码转换成普通的JavaScript代码所有的JSX元素都会被转换成React.createElement函数调用 react 输出两次 组件被开发模式下的严格模式包裹组件渲染或副作用函数会执行两次不影响生产模式函数式编程纯函数的概念用于帮助开发者发现和修复潜在的问题 函数式编程 总结一下 函数式编程有两个核心概念。 数据不可变无副作用 它要求你所有的数据都是不可变的这意味着如果你想修改一个对象那你应该创建一个新的对象用来修改而不是修改已有的对象。无状态 主要是强调对于一个函数不管你何时运行它都应该像第一次运行一样给定相同的输入给出相同的输出完全不依赖外部状态的变化。 纯函数带来的意义。 便于测试和优化这个意义在实际项目开发中意义非常大由于纯函数对于相同的输入永远会返回相同的结果因此我们可以轻松断言函数的执行结果同时也可以保证函数的优化不会影响其他代码的执行。可缓存性因为相同的输入总是可以返回相同的输出因此我们可以提前缓存函数的执行结果。更少的 Bug使用纯函数意味着你的函数中不存在指向不明的 this不存在对全局变量的引用不存在对参数的修改这些共享状态往往是绝大多数 bug 的源头。 React 批处理机制 在事件处理函数的更新不是一个个重新渲染处理的而是批处理多个状态将更新操作放入一个队列中下一段时间一次性执行更新操作状态更新完成前一般是无法打印状态的最新值的只能等到下一次React 的状态更新是异步处理的可以使用回调函数进行更新 http请求头有哪些 常见请求头Accept 接受的内容、字符集、编码方式Content 请求体的类型、长度缓存机制强制缓存、协商缓存标识 本地存储 Cookie是在客户端存储数据的机制用于存储少量用户信息4KB可以设置过期时间基于浏览器。Session是在服务器端存储用户状态的机制用于存储用户的登录状态和其他相关信息占用服务器资源基于服务器。Token是一种无状态的身份验证机制用于验证用户身份可以包含用户信息不占用服务器资源可以存储在客户端或服务器。IndexedDB 是一个运行在浏览器上的非关系型数据库系统它允许你存储大量数据包括文件和二进制数据 性能优化方面 代码层面 使用防抖和节流减少页面的重排和重绘要统一调整样式、多次修改 DOM 先脱离标准流事件触发使用事件委托机制按需加载如单页面应用的路由懒加载 构建方面 开启 gzip 压缩代码vite 使用 vite-plugin-compression 插件后端开启 gzip 支持常用的第三库使用 CDN 服务就是部署多个服务器节点用户请求将定位到离用户最近的节点 其他 优先使用缓存减少HTTP请求将多个细小请求可以合并大文件图⽚优化对图片进⾏压缩和优化减少图片的⼤⼩和请求次数使⽤字体图标使⽤字体图标可以减少图片的请求提⾼页面性能服务端渲染 用户体验 增加骨架屏、loading加载动画效果 webgl 的优化手段 监视渲染帧率、控制台lighthouse性能报告良好的编码规则将场景中不需要的对象通过 remove dispose 进行清除废置使用廉价的灯光如环境光和平行光阴影方面优化阴影贴图范围降低分辨率贴图尺寸贴图、模型等资源进行压缩谨慎使用抗锯齿和后期处理通道着色器指定精度、保持代码简单、使用贴图纹理表示噪波尽可能在顶点着色器进行计算并将结果发送到片元着色器 着色器优化相关 着色器指定精度、保持代码简单、使用贴图纹理表示噪波尽可能在顶点着色器进行计算并将结果发送到片元着色器 缓冲区和深度测试 概述几何体由一个个顶点粒子构成每个粒子包含了位置、uv贴图3d2d坐标对应等三个顶点形成一个面在three.js中。物体由一个个三角形面构成。 BufferGeometry是面片、线或点几何体的有效表述。包括顶点位置面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。目前three.js的物体都用上了Buffer可以直接调用一些顶点可以使用这个。 当WebGL绘制粒子时WebGL会测试正在绘制的粒子哪个更靠前在其后面的粒子不会被绘制在其前面的粒子会被绘制这被称为深度测试可以通过alphaTest停用depth testing。 异步 setTimeout(function () {console.log(1) }, 0)new Promise(function (resolve, reject) {console.log(2)for (var i 0; i 10000; i) {if (i 10) console.log(10)i 9999 resolve()}console.log(3) }).then(function () {console.log(4) })console.log(5)//2 10 3 5 4 1计时器宏任务放入宏任务队列new Promise 立即执行函数输出 2promise 微任务放入微任务队列进入 for 循环输出10 3同步任务输出 5微任务输出 4宏任务输出 1 原型和原型链 function Foo() {getName function () {console.log(1)}return this }Foo.getName function () {console.log(2) } Foo.prototype.getName function () {console.log(3) } var getName function () {console.log(4) } function getName() {console.log(5) }Foo.getName() //2 getName() //4 Foo().getName() //1 new Foo().getName() //3Foo.getName 绑定到类的方法 2var 存在变量提升function fn1(){} 定义的函数也会变量提升结果如下 var getName function getName() {console.log(5) }getName function () {console.log(4) } //node 环境运行报错、let 声明不可用Foo() 返回 this 指向window 但是进行 Foo()函数getName 被重新赋值了所以是 1以后也是1new Foo() 指向当前实例内部的方法 返回3 倒序输出 // 输入1-2-3-4-5-NULL // 输出5-4-3-2-1-NULLfunction traverseStr(str) {const array str.split(-).slice(0, -1)return array.reverse().join(-) -NULL }const target 1-2-3-4-5-NULL const result traverseStr(target) console.log(result)汉语表达 次数最少字符 const target aaabbbcceeff function removeStr(target) {let map new Map(),result []for (let ch of target) map.set(ch, (map.get(ch) || 0) 1)let minCount Math.min(...map.values())for (let ch of target) {if (map.get(ch) ! minCount) result.push(ch)}return result.join() }const result removeStr(target) console.log(result)面试复盘 之前面试的一些八股文、总结大部分都在自己内部的语雀文档后续逐步整理一下发出来希望能够帮助到面试的小伙伴大概是12月12号一面第二天的二面但是第二轮面试挂了。数字转为汉字那题没写出来只是说了一下大概的思路后续源码整理到算法仓库里面去除出现最少字符虽然写出来了可能代码逻辑还有待优化的地方webgl 和着色器优化那部分答的一般