目录一、JS1、JS的作用域有哪些2、死循环会导致什么后果无限递归会导致什么后果3、页面上有100万个任务需要执行如何保证页面不卡顿4、后端响应巨量数据如何避免其性能问题5、如何用JS判断多行文本溢出位置6、如何实现精准的setInterval7、如何判断一个属性是否存在有哪些方案8、获取元素尺寸有多少种方式它们的区别分别是什么9、什么是闭包闭包是否会造成内存泄漏10、如何实现一个只读属性?11、什么是Reflect?它有什么作用12、上传文件时如何展示上传速率?13、页面加载后发生大量的AJAX请求,如何优化?14、列表分页快速翻页下的竞态问题15、[各个数组循环的区别](https://blog.csdn.net/cuishizun/article/details/152514939?sharetypeblogdetailsharerId152514939sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)16、[map和weakMap的区别](https://blog.csdn.net/cuishizun/article/details/152515010?sharetypeblogdetailsharerId152515010sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)二、CSS1、发现样式不生效该如何调试确定问题2、什么是CSS原子化它的优劣势是什么三、HTML1、何时发生重排何时发生重绘四、vue1、vue项目有哪些常见优化手段2、Vue3能否支持IE浏览器为什么3、vue中的v-for和v-if哪个优先级高vue2和vue3分开介绍并说明会产生的后果。4、vue2中有$forceUpdate()方法可以强制组件渲染那vue3该如何强制渲染组件5、[vue2如何迁移到vue3](https://blog.csdn.net/cuishizun/article/details/152515155?sharetypeblogdetailsharerId152515155sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)6、[vuex和pinia的区别](https://blog.csdn.net/cuishizun/article/details/152515181?sharetypeblogdetailsharerId152515181sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)7、[vue中watch和watcheffect的区别](https://blog.csdn.net/cuishizun/article/details/152515211?sharetypeblogdetailsharerId152515211sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)8、[vue中watch和computed的区别是什么](https://blog.csdn.net/cuishizun/article/details/152515229?sharetypeblogdetailsharerId152515229sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)9、[谈谈你对keep-alive的了解](https://blog.csdn.net/cuishizun/article/details/152515253?sharetypeblogdetailsharerId152515253sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)10、五、Typescript1、[any和unknown的区别](https://blog.csdn.net/cuishizun/article/details/152515275?sharetypeblogdetailsharerId152515275sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)六、Git1、[什么是 Git它与 SVN 等版本控制系统有何区别](https://blog.csdn.net/cuishizun/article/details/152515304?sharetypeblogdetailsharerId152515304sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)2、[Git 工作区、暂存区、本地仓库、远程仓库的区别](https://blog.csdn.net/cuishizun/article/details/152515336?sharetypeblogdetailsharerId152515336sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)3、 [常用的 Git 命令有哪些分别用于什么场景](https://blog.csdn.net/cuishizun/article/details/152515354?sharetypeblogdetailsharerId152515354sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)4、[什么是 Git 分支如何创建、切换、合并分支](https://blog.csdn.net/cuishizun/article/details/152515379?sharetypeblogdetailsharerId152515379sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)5、[合并分支时发生冲突如何解决](https://blog.csdn.net/cuishizun/article/details/152515402?sharetypeblogdetailsharerId152515402sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)6、[git rebase 和 git merge 有什么区别何时使用](https://blog.csdn.net/cuishizun/article/details/152515543?sharetypeblogdetailsharerId152515543sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)7、[如何回退已提交的版本](https://blog.csdn.net/cuishizun/article/details/153123160?sharetypeblogdetailsharerId153123160sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)8、[git fetch 和 git pull 的区别](https://blog.csdn.net/cuishizun/article/details/153123263?sharetypeblogdetailsharerId153123263sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)9、 [如何暂存当前工作区的修改切换到其他分支处理紧急问题](https://blog.csdn.net/cuishizun/article/details/153123354?sharetypeblogdetailsharerId153123354sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)10、[如何删除远程分支](https://blog.csdn.net/cuishizun/article/details/153123406?sharetypeblogdetailsharerId153123406sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)11、 [什么是 Git 标签Tag如何创建和推送标签](https://blog.csdn.net/cuishizun/article/details/153123475?sharetypeblogdetailsharerId153123475sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)12、 [如何查看某次提交修改了哪些文件](https://blog.csdn.net/cuishizun/article/details/153123530?sharetypeblogdetailsharerId153123530sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)七、其他1、package.json中的版本号~1.2.3和^1.2.3有什么区别2、什么是AST它在前端有哪些应用场景3、什么是BFF它有什么用4、用户登录前如何确定ta是谁?5、有A、B、C三个作业同时到达执行时间分别为4、3、6且在系统以单道方式运行则可以获得最短的平均周转时间的执行顺序为BAC6、有哪些跨域方案真实项目中如何选择7、浏览器是如何知晓服务器传递是页面、js、css、图片等资源类型的8、同一个URL地址如何实现手机打开是移动端页面电脑打开是web页面9、当QPS达到峰值时该如何处理10、CommonJS和ES Module的区别11、文件指纹是什么它在前端工程化中作用是什么12、哪些数据在堆上哪些数据在栈上13、在地址栏输入URL后按下回车会发生哪些事14、http2有哪些升级15、什么时候用webworker16、如何清理源码里面没有被应用的代码主要是JS、TS、CSS代码17、创建webworker时,如何指定特定的文件?18、[http2.0和http1.1的区别](https://blog.csdn.net/cuishizun/article/details/153123725?sharetypeblogdetailsharerId153123725sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)19、如何优化webpack的打包速度?20、[webpack和vite的区别](https://blog.csdn.net/cuishizun/article/details/153123817?sharetypeblogdetailsharerId153123817sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)21、[hash和history有什么区别](https://blog.csdn.net/cuishizun/article/details/153123859?sharetypeblogdetailsharerId153123859sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)22、[前端如何处理高并发](https://blog.csdn.net/cuishizun/article/details/153123921?sharetypeblogdetailsharerId153123921sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)23、[rtsp和rtmp的区别](https://blog.csdn.net/cuishizun/article/details/153123955?sharetypeblogdetailsharerId153123955sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)24、[如何在两个项目中相互通讯](https://blog.csdn.net/cuishizun/article/details/153124024?sharetypeblogdetailsharerId153124024sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)25、[什么是SSESSE如何使用](https://blog.csdn.net/cuishizun/article/details/153124081?sharetypeblogdetailsharerId153124081sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)26、[大屏数据如何实现实时更新](https://blog.csdn.net/cuishizun/article/details/153124231?sharetypeblogdetailsharerId153124231sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)八、[笔试题](https://blog.csdn.net/cuishizun/article/details/89354590?sharetypeblogdetailsharerId89354590sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)一、JS1、JS的作用域有哪些1)函数作用域 2)块级作用域 3)全局作用域 4)模块作用域 script标签里面写上type‘module’ 5)脚本作用域 在script元素里面定义的变量 6)catch作用域 7)eval作用域 8)with作用域2、死循环会导致什么后果无限递归会导致什么后果1)死循环无响应主线程忙不过来浏览器会一直转圈 不会导致内存溢出内存占用只有对象和变量对象在栈上变量在堆上死循环while(1){}// 不会导致内存溢出跟变量或对象无关死循环while(1){leta1;}// 不会导致内存溢出死循环里面的变量会在进入块级作用域时生成离开块级作用域时销毁死循环while(1){vara1;}相当于vara;while(1){a1;}// 不会导致内存溢出var定义的变量会提升从始至终就一个变量死循环functiondelay(duration1000){returnnewPromise(resolve{setTimeout(resolve,duration);});}while(1){awaitdelay(0);}// 不会卡死无响应加入异步代码浏览器会利用间隙去渲染死循环while(1){await1;相当于awaitPromise.resolve(1);}// 会卡死无响应微队列会优于渲染帧执行会一直执行微队列代码造成卡死2)无线递归栈溢出,忙一会就爆栈了无线递归functionm(){m();}m();// m()一直执行不完就会只进不出直到填满栈内存无线递归functiondelay(duration1000){returnnewPromise(resolve{setTimeout(resolve,duration);});}functionm(){awaitdelay(0);m();相当于returnnewPromise(resolve{delay(0).then((){m();resolve();});});}m();// 不会导致栈溢出也不会导致页面卡死异步等待的是宏任务(现在已经没有宏任务的说法了统一叫延迟队列)执行完就出栈了宏任务的优先级低于渲染帧浏览器可以见缝插针执行渲染无线递归functionm(){await1;相当于awaitPromise.resolve(1);m();}m();// 不会导致栈溢出但是页面会卡死3、页面上有100万个任务需要执行如何保证页面不卡顿requestIdleCallbackwebworker不能涉及对dom对象的改动和获取setTimeoutpostMessage4、后端响应巨量数据如何避免其性能问题网络性能1改接口规则2流式读取fetch streamconstrespawaitfetch(接口地址);// 等待响应头很快能完成constbodyawaitresp.json();// 等待响应体比较耗时sse(server sent event) 改服务器websocket改服务器渲染性能分页分片渲染(React Fiber)虚拟滚动canvas5、如何用JS判断多行文本溢出位置// options:包含字体大小类型行高等可能影响溢出位置的信息functionexceedIndex(str,options){constdivdocument.createElement(div);div.style.widthoptions.widthpx;div.style.heidhtoptions.heightpx;div.style.fontSizeoptions.fontSizepx;div.style.overflowhidden;div.style.positionfixed;div.style.outline1px solid;div.style.visibilityvisible;div.textContentstr;document.body.appendChild(div);}exceedIndex(一堆文字)6、如何实现精准的setInterval为什么不精准事件循环模型影响回调执行时机4ms最小时间(嵌套5层以上后) whatwg wpt.fyi cve-upadte失活页面间隔会被强制调整1s解决办法根据Performance.now通过时间调整间隔偏差requestAnimationFrame不受失活页面受很多其他因素影响webworker不受失活页面影响不受渲染帧影响7、如何判断一个属性是否存在有哪些方案布尔判定if(obj.a){}// a不能为0、false、undefined等undefinedif(obj.a!undefined){}// a不能为undefinedObject.keysObject.defineProperty(obj,a,{value:2,enumerable:false})// 上面这种情况无法用此法判断Object.prototype.hasOwnProperty或Reflect.hasOwnProperty不看原型链in 或Relect.has看原型链8、获取元素尺寸有多少种方式它们的区别分别是什么dom.style.width和dom.style.heightDOM树 CSSOM 不会导致回流getComputedStyle(dom)计算后的样式offsetWidthscrollWidthclientWidth布局树中的信息dom.getBoundingClinetRect视觉尺寸9、什么是闭包闭包是否会造成内存泄漏在一个函数的环境中闭包函数词法环境造成内存泄漏的条件持有本该销毁的函数造成其关联的词法环境无法销毁当有多个函数共享词法环境时可能导致词法环境膨胀从而发生无法访问但无法销毁的数据10、如何实现一个只读属性?object.definePropertyconstobj{};Object.defineProgerty(obj,name,{value:Kevin,writable:false,// configurable: false},);或者 Object.defineProgerty(obj,name,{get(){returnKevin;},// configurable: false});这两种方式可以被重新定义更改值除非加上configurable: false限制再次被更改Proxyconstobj{};consthandlernewProxy(obj{get(){returnKevin;}});Object.freeze11、什么是Reflect?它有什么作用可以完成对象的基本操作12、上传文件时如何展示上传速率?XMLHttpRequestxhr.upload.addEventListener(progress’, e{})fetch不行浏览器端:XHR Fetch13、页面加载后发生大量的AJAX请求,如何优化?BFF请求队列(优先级)缓存幕等性压缩(GZIP)CDN多域名并发HTTP2.014、列表分页快速翻页下的竞态问题取消上一次请求functionrequest(){//1.取消上一次请求xhr.abort();constcontrollernewAbortController();//2、发出这一次请求15、各个数组循环的区别16、map和weakMap的区别二、CSS1、发现样式不生效该如何调试确定问题在浏览器中computed选项卡中查看最终计算结果确定生命值层叠确定优先级确定特定性确定源次序继承使用默认值2、什么是CSS原子化它的优劣势是什么Atomic CSSCSS 原子化就是把一个类里面的属性全部打散成一个个的单独类线上有很多原子化库tailwind.css、unocss、windi.css等优点复用性开发效率少写代码开发习惯劣势吃团队配置可读性打包体积三、HTML1、何时发生重排何时发生重绘重排所有对布局树的更改以及所有对布局树的读取都会引发重排重绘对所有非几何信息的读写所造成的可见样式的变化会引发重绘四、vue1、vue项目有哪些常见优化手段路由懒加载、图片懒加载Suspencev-if和v-show打包优化手段网络优化手段CDNhttp2图片格式优化gzip请求合并GraphQLkeycomputed保持对象地址稳定keep-alive延迟装载v-model.lazy延迟双向绑定冻结对象(只针对vue2)函数式组件(vue2)2、Vue3能否支持IE浏览器为什么vue3不再支持IE因为IE不支持proxyvite内置esbuildesbuild不支持ES6以下版本的浏览器vue-cli vue2打包的现代模式 --modern可以打包成两个模式一个是支持ES6版本的浏览器一个是不支持ES6版本的浏览器vue3取消了现代模式3、vue中的v-for和v-if哪个优先级高vue2和vue3分开介绍并说明会产生的后果。vue2v-for优先v-ifvue3v-if优先v-for会造成心智负担不要同时在一个元素上使用v-for和v-if4、vue2中有$forceUpdate()方法可以强制组件渲染那vue3该如何强制渲染组件优先修复响应式问题不要滥用强制刷新绝大多数场景不需要强制渲染是写法错误reactive 对象新增属性 → 使用 Object.assign 或者提前声明属性数组通过下标修改 → 使用 splice / push 等数组方法必须强制刷新时选择需要完整重置组件、清空内部状态 → v-key首选ref 对象内部修改响应失效只想局部更新 → triggerRef补充不要踩坑❌ reactive 不能用 triggerRef❌ 不要频繁调用强制刷新会带来性能开销5、vue2如何迁移到vue36、vuex和pinia的区别7、vue中watch和watcheffect的区别8、vue中watch和computed的区别是什么9、谈谈你对keep-alive的了解10、五、Typescript1、any和unknown的区别六、Git1、什么是 Git它与 SVN 等版本控制系统有何区别2、Git 工作区、暂存区、本地仓库、远程仓库的区别3、常用的 Git 命令有哪些分别用于什么场景4、什么是 Git 分支如何创建、切换、合并分支5、合并分支时发生冲突如何解决6、git rebase 和 git merge 有什么区别何时使用7、如何回退已提交的版本8、git fetch 和 git pull 的区别9、如何暂存当前工作区的修改切换到其他分支处理紧急问题10、如何删除远程分支11、什么是 Git 标签Tag如何创建和推送标签12、如何查看某次提交修改了哪些文件七、其他1、package.json中的版本号~1.2.3和^1.2.3有什么区别1.2.3相当于主版本.次版本.修订版本~锁定主版本.次版本^锁定主版本~1.2.3相当于1.2.3 1.3.0^1.2.3相当于1.2.3 2.0.01.2.31.2.3 1.5.61.2.3精确版本1.2.3 || 1.5.62、什么是AST它在前端有哪些应用场景抽象语法树Abstract Syntax Tree用于表达源码的树形结构。应用转换代码把一些源码转换成可被解析的抽象语法树在babellesssass构建工具压缩与混淆、自定义的转换方式过程中都会用到AST检查代码在ESLintPrettier自定义过程中会用到3、什么是BFF它有什么用BFFBackend For Frontend 后端为前端服务属于一个中间层用处适配器适配前端数据改变api外观修改接口聚合接口数据脱敏网关缓存安全认证黑名单4、用户登录前如何确定ta是谁?uuid全局唯一id简单不严格ip地址少用浏览器指纹 figerprint.js客户端生成相对唯一指纹浏览器破解5、有A、B、C三个作业同时到达执行时间分别为4、3、6且在系统以单道方式运行则可以获得最短的平均周转时间的执行顺序为BAC周转时间等待时间 执行时间 平均周转时间所有周转时间之和 / 任务数量 SJFShortest jog First 最短任务优先6、有哪些跨域方案真实项目中如何选择CORS代理jsonppostMessage重要的是生产环境要和开发环境保持一致如果生产环境静态资源在一个服务器数据资源在一个服务器浏览器会访问两种域名就只能用cors生产环境用cors开发环境也得用cors如果生成环境静态资源在一个文件夹里面数据资源在一个服务器里这两个资源通过一个nginx转发而浏览器只会跟nginx进行打交道有一种域名进行访问这时生产环境用nginx代理开发环境可以用dev-server作为开发服务器进行转发都可以配置以api开头的地址进行转发7、浏览器是如何知晓服务器传递是页面、js、css、图片等资源类型的看响应头的content-typetext/html HTML文本text/plain 纯文本image/png png图片8、同一个URL地址如何实现手机打开是移动端页面电脑打开是web页面流体布局100% 相对单位 rem flex grid 1fr媒介查询1css判断(media),js逻辑matchMedia2差异化越大开发维护成本越大3打包体积(pcmobile)4) 结论适合差异化较小的站点独立开发分开开发独立部署服务器判断请求头user-agent写两套代码根据user-agent重定向到指定代码一般状态码是302的都是重定向页面9、当QPS达到峰值时该如何处理QPSQuerier Per Second每秒访问量缓存本地缓存、服务器缓存、CDN预热…合并请求雪碧图…延迟请求懒加载…用户体验提示loading…后端扩容数据库优化:sql优化索引读写分离负载均衡监控报警10、CommonJS和ES Module的区别标准来源CMJnode社区标准 新增APIESM官方标准 新增语法时态CMJ运行态 运行时确定依赖关系ESM运行时(import()) 编译时(静态)11、文件指纹是什么它在前端工程化中作用是什么文件指纹用hash或校验和生成的文件唯一标识该标识对文件内容敏感。作用是为了实现文件缓存文件内容一变标识就会更改12、哪些数据在堆上哪些数据在栈上栈变量参数堆对象原始类型可能在栈上也可能在堆上13、在地址栏输入URL后按下回车会发生哪些事URL检测纠错、补全DNS解析TCP三次握手(SSL握手)准备请求请求头发送请求get等服务器处理请求服务器响应浏览器收到响应头处理响应头set-cookiecontent-type缓存状态码connectionkeep-alive收响应体渲染解析预处理线程资源加载资源描述符async defer prefetch repload生成DOM树 CSSOM树样式计算Layout布局layer分层paint绘制主线程结束继续后续任务合成线程开始tiles分块栅格化draw绘制根据keep-alive决定是否断开连接四次挥手14、http2有哪些升级二进制分帧多路复用优先级流式传输HTTP对头阻塞头部压缩服务器推15、什么时候用webworker大量的CPU密集型任务(大文件上传,图表计算)任务可被独立拆分16、如何清理源码里面没有被应用的代码主要是JS、TS、CSS代码ESLint.Terser:文件- AST- 分析 -…单文件Tree Shaking:树摇优化jS、ESM、CMJ?PurgeCSS( CSS 原子化)CSS自定义17、创建webworker时,如何指定特定的文件?constcodeconsole.log(worker);// 1. Object URLconstblobnewBlob([code]{type:application/javascript});consturlURL.createObjectURL(blob);console.log(url)constworkernewWorker(url)// 2. Data URLconstdataURLdata:application/javascript;utf8,${code};constworkernewWorker(dataURL)18、http2.0和http1.1的区别19、如何优化webpack的打包速度?ESLint(自动删除)多线程打包(webpack5自动包含webpack4使用thread-loader)缓存noParse 设置不解析exdermals CDN20、webpack和vite的区别21、hash和history有什么区别22、前端如何处理高并发23、rtsp和rtmp的区别24、如何在两个项目中相互通讯25、什么是SSESSE如何使用26、大屏数据如何实现实时更新八、笔试题 前端开发面试题及答案
目录一、JS1、JS的作用域有哪些2、死循环会导致什么后果无限递归会导致什么后果3、页面上有100万个任务需要执行如何保证页面不卡顿4、后端响应巨量数据如何避免其性能问题5、如何用JS判断多行文本溢出位置6、如何实现精准的setInterval7、如何判断一个属性是否存在有哪些方案8、获取元素尺寸有多少种方式它们的区别分别是什么9、什么是闭包闭包是否会造成内存泄漏10、如何实现一个只读属性?11、什么是Reflect?它有什么作用12、上传文件时如何展示上传速率?13、页面加载后发生大量的AJAX请求,如何优化?14、列表分页快速翻页下的竞态问题15、[各个数组循环的区别](https://blog.csdn.net/cuishizun/article/details/152514939?sharetypeblogdetailsharerId152514939sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)16、[map和weakMap的区别](https://blog.csdn.net/cuishizun/article/details/152515010?sharetypeblogdetailsharerId152515010sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)二、CSS1、发现样式不生效该如何调试确定问题2、什么是CSS原子化它的优劣势是什么三、HTML1、何时发生重排何时发生重绘四、vue1、vue项目有哪些常见优化手段2、Vue3能否支持IE浏览器为什么3、vue中的v-for和v-if哪个优先级高vue2和vue3分开介绍并说明会产生的后果。4、vue2中有$forceUpdate()方法可以强制组件渲染那vue3该如何强制渲染组件5、[vue2如何迁移到vue3](https://blog.csdn.net/cuishizun/article/details/152515155?sharetypeblogdetailsharerId152515155sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)6、[vuex和pinia的区别](https://blog.csdn.net/cuishizun/article/details/152515181?sharetypeblogdetailsharerId152515181sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)7、[vue中watch和watcheffect的区别](https://blog.csdn.net/cuishizun/article/details/152515211?sharetypeblogdetailsharerId152515211sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)8、[vue中watch和computed的区别是什么](https://blog.csdn.net/cuishizun/article/details/152515229?sharetypeblogdetailsharerId152515229sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)9、[谈谈你对keep-alive的了解](https://blog.csdn.net/cuishizun/article/details/152515253?sharetypeblogdetailsharerId152515253sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)10、五、Typescript1、[any和unknown的区别](https://blog.csdn.net/cuishizun/article/details/152515275?sharetypeblogdetailsharerId152515275sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)六、Git1、[什么是 Git它与 SVN 等版本控制系统有何区别](https://blog.csdn.net/cuishizun/article/details/152515304?sharetypeblogdetailsharerId152515304sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)2、[Git 工作区、暂存区、本地仓库、远程仓库的区别](https://blog.csdn.net/cuishizun/article/details/152515336?sharetypeblogdetailsharerId152515336sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)3、 [常用的 Git 命令有哪些分别用于什么场景](https://blog.csdn.net/cuishizun/article/details/152515354?sharetypeblogdetailsharerId152515354sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)4、[什么是 Git 分支如何创建、切换、合并分支](https://blog.csdn.net/cuishizun/article/details/152515379?sharetypeblogdetailsharerId152515379sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)5、[合并分支时发生冲突如何解决](https://blog.csdn.net/cuishizun/article/details/152515402?sharetypeblogdetailsharerId152515402sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)6、[git rebase 和 git merge 有什么区别何时使用](https://blog.csdn.net/cuishizun/article/details/152515543?sharetypeblogdetailsharerId152515543sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)7、[如何回退已提交的版本](https://blog.csdn.net/cuishizun/article/details/153123160?sharetypeblogdetailsharerId153123160sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)8、[git fetch 和 git pull 的区别](https://blog.csdn.net/cuishizun/article/details/153123263?sharetypeblogdetailsharerId153123263sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)9、 [如何暂存当前工作区的修改切换到其他分支处理紧急问题](https://blog.csdn.net/cuishizun/article/details/153123354?sharetypeblogdetailsharerId153123354sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)10、[如何删除远程分支](https://blog.csdn.net/cuishizun/article/details/153123406?sharetypeblogdetailsharerId153123406sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)11、 [什么是 Git 标签Tag如何创建和推送标签](https://blog.csdn.net/cuishizun/article/details/153123475?sharetypeblogdetailsharerId153123475sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)12、 [如何查看某次提交修改了哪些文件](https://blog.csdn.net/cuishizun/article/details/153123530?sharetypeblogdetailsharerId153123530sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)七、其他1、package.json中的版本号~1.2.3和^1.2.3有什么区别2、什么是AST它在前端有哪些应用场景3、什么是BFF它有什么用4、用户登录前如何确定ta是谁?5、有A、B、C三个作业同时到达执行时间分别为4、3、6且在系统以单道方式运行则可以获得最短的平均周转时间的执行顺序为BAC6、有哪些跨域方案真实项目中如何选择7、浏览器是如何知晓服务器传递是页面、js、css、图片等资源类型的8、同一个URL地址如何实现手机打开是移动端页面电脑打开是web页面9、当QPS达到峰值时该如何处理10、CommonJS和ES Module的区别11、文件指纹是什么它在前端工程化中作用是什么12、哪些数据在堆上哪些数据在栈上13、在地址栏输入URL后按下回车会发生哪些事14、http2有哪些升级15、什么时候用webworker16、如何清理源码里面没有被应用的代码主要是JS、TS、CSS代码17、创建webworker时,如何指定特定的文件?18、[http2.0和http1.1的区别](https://blog.csdn.net/cuishizun/article/details/153123725?sharetypeblogdetailsharerId153123725sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)19、如何优化webpack的打包速度?20、[webpack和vite的区别](https://blog.csdn.net/cuishizun/article/details/153123817?sharetypeblogdetailsharerId153123817sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)21、[hash和history有什么区别](https://blog.csdn.net/cuishizun/article/details/153123859?sharetypeblogdetailsharerId153123859sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)22、[前端如何处理高并发](https://blog.csdn.net/cuishizun/article/details/153123921?sharetypeblogdetailsharerId153123921sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)23、[rtsp和rtmp的区别](https://blog.csdn.net/cuishizun/article/details/153123955?sharetypeblogdetailsharerId153123955sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)24、[如何在两个项目中相互通讯](https://blog.csdn.net/cuishizun/article/details/153124024?sharetypeblogdetailsharerId153124024sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)25、[什么是SSESSE如何使用](https://blog.csdn.net/cuishizun/article/details/153124081?sharetypeblogdetailsharerId153124081sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)26、[大屏数据如何实现实时更新](https://blog.csdn.net/cuishizun/article/details/153124231?sharetypeblogdetailsharerId153124231sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)八、[笔试题](https://blog.csdn.net/cuishizun/article/details/89354590?sharetypeblogdetailsharerId89354590sharereferPCsharesourcecuishizunspm1011.2480.3001.8118)一、JS1、JS的作用域有哪些1)函数作用域 2)块级作用域 3)全局作用域 4)模块作用域 script标签里面写上type‘module’ 5)脚本作用域 在script元素里面定义的变量 6)catch作用域 7)eval作用域 8)with作用域2、死循环会导致什么后果无限递归会导致什么后果1)死循环无响应主线程忙不过来浏览器会一直转圈 不会导致内存溢出内存占用只有对象和变量对象在栈上变量在堆上死循环while(1){}// 不会导致内存溢出跟变量或对象无关死循环while(1){leta1;}// 不会导致内存溢出死循环里面的变量会在进入块级作用域时生成离开块级作用域时销毁死循环while(1){vara1;}相当于vara;while(1){a1;}// 不会导致内存溢出var定义的变量会提升从始至终就一个变量死循环functiondelay(duration1000){returnnewPromise(resolve{setTimeout(resolve,duration);});}while(1){awaitdelay(0);}// 不会卡死无响应加入异步代码浏览器会利用间隙去渲染死循环while(1){await1;相当于awaitPromise.resolve(1);}// 会卡死无响应微队列会优于渲染帧执行会一直执行微队列代码造成卡死2)无线递归栈溢出,忙一会就爆栈了无线递归functionm(){m();}m();// m()一直执行不完就会只进不出直到填满栈内存无线递归functiondelay(duration1000){returnnewPromise(resolve{setTimeout(resolve,duration);});}functionm(){awaitdelay(0);m();相当于returnnewPromise(resolve{delay(0).then((){m();resolve();});});}m();// 不会导致栈溢出也不会导致页面卡死异步等待的是宏任务(现在已经没有宏任务的说法了统一叫延迟队列)执行完就出栈了宏任务的优先级低于渲染帧浏览器可以见缝插针执行渲染无线递归functionm(){await1;相当于awaitPromise.resolve(1);m();}m();// 不会导致栈溢出但是页面会卡死3、页面上有100万个任务需要执行如何保证页面不卡顿requestIdleCallbackwebworker不能涉及对dom对象的改动和获取setTimeoutpostMessage4、后端响应巨量数据如何避免其性能问题网络性能1改接口规则2流式读取fetch streamconstrespawaitfetch(接口地址);// 等待响应头很快能完成constbodyawaitresp.json();// 等待响应体比较耗时sse(server sent event) 改服务器websocket改服务器渲染性能分页分片渲染(React Fiber)虚拟滚动canvas5、如何用JS判断多行文本溢出位置// options:包含字体大小类型行高等可能影响溢出位置的信息functionexceedIndex(str,options){constdivdocument.createElement(div);div.style.widthoptions.widthpx;div.style.heidhtoptions.heightpx;div.style.fontSizeoptions.fontSizepx;div.style.overflowhidden;div.style.positionfixed;div.style.outline1px solid;div.style.visibilityvisible;div.textContentstr;document.body.appendChild(div);}exceedIndex(一堆文字)6、如何实现精准的setInterval为什么不精准事件循环模型影响回调执行时机4ms最小时间(嵌套5层以上后) whatwg wpt.fyi cve-upadte失活页面间隔会被强制调整1s解决办法根据Performance.now通过时间调整间隔偏差requestAnimationFrame不受失活页面受很多其他因素影响webworker不受失活页面影响不受渲染帧影响7、如何判断一个属性是否存在有哪些方案布尔判定if(obj.a){}// a不能为0、false、undefined等undefinedif(obj.a!undefined){}// a不能为undefinedObject.keysObject.defineProperty(obj,a,{value:2,enumerable:false})// 上面这种情况无法用此法判断Object.prototype.hasOwnProperty或Reflect.hasOwnProperty不看原型链in 或Relect.has看原型链8、获取元素尺寸有多少种方式它们的区别分别是什么dom.style.width和dom.style.heightDOM树 CSSOM 不会导致回流getComputedStyle(dom)计算后的样式offsetWidthscrollWidthclientWidth布局树中的信息dom.getBoundingClinetRect视觉尺寸9、什么是闭包闭包是否会造成内存泄漏在一个函数的环境中闭包函数词法环境造成内存泄漏的条件持有本该销毁的函数造成其关联的词法环境无法销毁当有多个函数共享词法环境时可能导致词法环境膨胀从而发生无法访问但无法销毁的数据10、如何实现一个只读属性?object.definePropertyconstobj{};Object.defineProgerty(obj,name,{value:Kevin,writable:false,// configurable: false},);或者 Object.defineProgerty(obj,name,{get(){returnKevin;},// configurable: false});这两种方式可以被重新定义更改值除非加上configurable: false限制再次被更改Proxyconstobj{};consthandlernewProxy(obj{get(){returnKevin;}});Object.freeze11、什么是Reflect?它有什么作用可以完成对象的基本操作12、上传文件时如何展示上传速率?XMLHttpRequestxhr.upload.addEventListener(progress’, e{})fetch不行浏览器端:XHR Fetch13、页面加载后发生大量的AJAX请求,如何优化?BFF请求队列(优先级)缓存幕等性压缩(GZIP)CDN多域名并发HTTP2.014、列表分页快速翻页下的竞态问题取消上一次请求functionrequest(){//1.取消上一次请求xhr.abort();constcontrollernewAbortController();//2、发出这一次请求15、各个数组循环的区别16、map和weakMap的区别二、CSS1、发现样式不生效该如何调试确定问题在浏览器中computed选项卡中查看最终计算结果确定生命值层叠确定优先级确定特定性确定源次序继承使用默认值2、什么是CSS原子化它的优劣势是什么Atomic CSSCSS 原子化就是把一个类里面的属性全部打散成一个个的单独类线上有很多原子化库tailwind.css、unocss、windi.css等优点复用性开发效率少写代码开发习惯劣势吃团队配置可读性打包体积三、HTML1、何时发生重排何时发生重绘重排所有对布局树的更改以及所有对布局树的读取都会引发重排重绘对所有非几何信息的读写所造成的可见样式的变化会引发重绘四、vue1、vue项目有哪些常见优化手段路由懒加载、图片懒加载Suspencev-if和v-show打包优化手段网络优化手段CDNhttp2图片格式优化gzip请求合并GraphQLkeycomputed保持对象地址稳定keep-alive延迟装载v-model.lazy延迟双向绑定冻结对象(只针对vue2)函数式组件(vue2)2、Vue3能否支持IE浏览器为什么vue3不再支持IE因为IE不支持proxyvite内置esbuildesbuild不支持ES6以下版本的浏览器vue-cli vue2打包的现代模式 --modern可以打包成两个模式一个是支持ES6版本的浏览器一个是不支持ES6版本的浏览器vue3取消了现代模式3、vue中的v-for和v-if哪个优先级高vue2和vue3分开介绍并说明会产生的后果。vue2v-for优先v-ifvue3v-if优先v-for会造成心智负担不要同时在一个元素上使用v-for和v-if4、vue2中有$forceUpdate()方法可以强制组件渲染那vue3该如何强制渲染组件优先修复响应式问题不要滥用强制刷新绝大多数场景不需要强制渲染是写法错误reactive 对象新增属性 → 使用 Object.assign 或者提前声明属性数组通过下标修改 → 使用 splice / push 等数组方法必须强制刷新时选择需要完整重置组件、清空内部状态 → v-key首选ref 对象内部修改响应失效只想局部更新 → triggerRef补充不要踩坑❌ reactive 不能用 triggerRef❌ 不要频繁调用强制刷新会带来性能开销5、vue2如何迁移到vue36、vuex和pinia的区别7、vue中watch和watcheffect的区别8、vue中watch和computed的区别是什么9、谈谈你对keep-alive的了解10、五、Typescript1、any和unknown的区别六、Git1、什么是 Git它与 SVN 等版本控制系统有何区别2、Git 工作区、暂存区、本地仓库、远程仓库的区别3、常用的 Git 命令有哪些分别用于什么场景4、什么是 Git 分支如何创建、切换、合并分支5、合并分支时发生冲突如何解决6、git rebase 和 git merge 有什么区别何时使用7、如何回退已提交的版本8、git fetch 和 git pull 的区别9、如何暂存当前工作区的修改切换到其他分支处理紧急问题10、如何删除远程分支11、什么是 Git 标签Tag如何创建和推送标签12、如何查看某次提交修改了哪些文件七、其他1、package.json中的版本号~1.2.3和^1.2.3有什么区别1.2.3相当于主版本.次版本.修订版本~锁定主版本.次版本^锁定主版本~1.2.3相当于1.2.3 1.3.0^1.2.3相当于1.2.3 2.0.01.2.31.2.3 1.5.61.2.3精确版本1.2.3 || 1.5.62、什么是AST它在前端有哪些应用场景抽象语法树Abstract Syntax Tree用于表达源码的树形结构。应用转换代码把一些源码转换成可被解析的抽象语法树在babellesssass构建工具压缩与混淆、自定义的转换方式过程中都会用到AST检查代码在ESLintPrettier自定义过程中会用到3、什么是BFF它有什么用BFFBackend For Frontend 后端为前端服务属于一个中间层用处适配器适配前端数据改变api外观修改接口聚合接口数据脱敏网关缓存安全认证黑名单4、用户登录前如何确定ta是谁?uuid全局唯一id简单不严格ip地址少用浏览器指纹 figerprint.js客户端生成相对唯一指纹浏览器破解5、有A、B、C三个作业同时到达执行时间分别为4、3、6且在系统以单道方式运行则可以获得最短的平均周转时间的执行顺序为BAC周转时间等待时间 执行时间 平均周转时间所有周转时间之和 / 任务数量 SJFShortest jog First 最短任务优先6、有哪些跨域方案真实项目中如何选择CORS代理jsonppostMessage重要的是生产环境要和开发环境保持一致如果生产环境静态资源在一个服务器数据资源在一个服务器浏览器会访问两种域名就只能用cors生产环境用cors开发环境也得用cors如果生成环境静态资源在一个文件夹里面数据资源在一个服务器里这两个资源通过一个nginx转发而浏览器只会跟nginx进行打交道有一种域名进行访问这时生产环境用nginx代理开发环境可以用dev-server作为开发服务器进行转发都可以配置以api开头的地址进行转发7、浏览器是如何知晓服务器传递是页面、js、css、图片等资源类型的看响应头的content-typetext/html HTML文本text/plain 纯文本image/png png图片8、同一个URL地址如何实现手机打开是移动端页面电脑打开是web页面流体布局100% 相对单位 rem flex grid 1fr媒介查询1css判断(media),js逻辑matchMedia2差异化越大开发维护成本越大3打包体积(pcmobile)4) 结论适合差异化较小的站点独立开发分开开发独立部署服务器判断请求头user-agent写两套代码根据user-agent重定向到指定代码一般状态码是302的都是重定向页面9、当QPS达到峰值时该如何处理QPSQuerier Per Second每秒访问量缓存本地缓存、服务器缓存、CDN预热…合并请求雪碧图…延迟请求懒加载…用户体验提示loading…后端扩容数据库优化:sql优化索引读写分离负载均衡监控报警10、CommonJS和ES Module的区别标准来源CMJnode社区标准 新增APIESM官方标准 新增语法时态CMJ运行态 运行时确定依赖关系ESM运行时(import()) 编译时(静态)11、文件指纹是什么它在前端工程化中作用是什么文件指纹用hash或校验和生成的文件唯一标识该标识对文件内容敏感。作用是为了实现文件缓存文件内容一变标识就会更改12、哪些数据在堆上哪些数据在栈上栈变量参数堆对象原始类型可能在栈上也可能在堆上13、在地址栏输入URL后按下回车会发生哪些事URL检测纠错、补全DNS解析TCP三次握手(SSL握手)准备请求请求头发送请求get等服务器处理请求服务器响应浏览器收到响应头处理响应头set-cookiecontent-type缓存状态码connectionkeep-alive收响应体渲染解析预处理线程资源加载资源描述符async defer prefetch repload生成DOM树 CSSOM树样式计算Layout布局layer分层paint绘制主线程结束继续后续任务合成线程开始tiles分块栅格化draw绘制根据keep-alive决定是否断开连接四次挥手14、http2有哪些升级二进制分帧多路复用优先级流式传输HTTP对头阻塞头部压缩服务器推15、什么时候用webworker大量的CPU密集型任务(大文件上传,图表计算)任务可被独立拆分16、如何清理源码里面没有被应用的代码主要是JS、TS、CSS代码ESLint.Terser:文件- AST- 分析 -…单文件Tree Shaking:树摇优化jS、ESM、CMJ?PurgeCSS( CSS 原子化)CSS自定义17、创建webworker时,如何指定特定的文件?constcodeconsole.log(worker);// 1. Object URLconstblobnewBlob([code]{type:application/javascript});consturlURL.createObjectURL(blob);console.log(url)constworkernewWorker(url)// 2. Data URLconstdataURLdata:application/javascript;utf8,${code};constworkernewWorker(dataURL)18、http2.0和http1.1的区别19、如何优化webpack的打包速度?ESLint(自动删除)多线程打包(webpack5自动包含webpack4使用thread-loader)缓存noParse 设置不解析exdermals CDN20、webpack和vite的区别21、hash和history有什么区别22、前端如何处理高并发23、rtsp和rtmp的区别24、如何在两个项目中相互通讯25、什么是SSESSE如何使用26、大屏数据如何实现实时更新八、笔试题