我自己做的网站上有图片宣传食品天津网站搜索优化

我自己做的网站上有图片宣传食品,天津网站搜索优化,怎么在百度上推广自己的店铺,程序员是做什么的工作内容以下是20个涵盖不同难度和知识点的JavaScript大厂面试题#xff0c;包含核心概念、异步、框架、性能等方向#xff1a; 一、基础与核心概念 解释JavaScript中的事件循环#xff08;Event Loop#xff09;机制#xff0c;并说明宏任务与微任务的区别。什么是闭包#xff…以下是20个涵盖不同难度和知识点的JavaScript大厂面试题包含核心概念、异步、框架、性能等方向一、基础与核心概念解释JavaScript中的事件循环Event Loop机制并说明宏任务与微任务的区别。什么是闭包举例说明闭包的实用场景和可能的内存泄漏问题。解释this关键字的绑定规则并说明call、apply、bind的区别。如何实现JavaScript的深拷贝考虑循环引用和多种数据类型如Date、RegExp。ES6中let、const与var的区别以及暂时性死区TDZ是什么二、异步与性能实现一个支持并发数限制的异步任务调度器如最多同时执行3个任务。// 示例new Scheduler(3).addTask(1, 1)...如何实现Promise.all、Promise.race、Promise.allSettled的polyfill解释JavaScript内存管理什么是内存泄漏常见场景有哪些描述前端性能优化中与JavaScript相关的方案从加载、执行到垃圾回收。什么是防抖和节流手写实现并说明适用场景。三、框架与工程化React/Vue中的虚拟DOM是什么为什么能提升性能Diff算法大致原理React Hooks的原理是什么如何模拟componentDidMount和componentWillUnmountVue3的响应式系统原理Proxy vs Object.defineProperty并说明依赖收集与触发更新过程。Webpack的Tree Shaking是如何工作的ES Module和CommonJS模块对摇树的影响如何实现一个基于Proxy的简单数据双向绑定类似Vue3的reactive四、算法与设计手写实现一个函数将嵌套对象扁平化支持无限嵌套。// 输入{a: {b: {c: 1}}, d: 2}输出{a.b.c: 1, d: 2}实现一个LRU缓存类要求get和put操作时间复杂度为O(1)。如何判断两个对象是否“深度相等”包括嵌套对象、数组、特殊类型设计一个任务队列支持异步任务按顺序执行且可中途插入优先级任务。实现一个函数解析URL的查询参数考虑重复key、特殊字符、哈希部分。五、扩展与开放题备选如何监控前端的异常错误捕获方案SourceMap如何配合使用从输入URL到页面展示JavaScript在哪些阶段发挥作用描述前端微前端架构的实现思路及JS隔离方案。提示大厂面试常考察原理深度如手写源码、场景应用如性能优化、系统设计如调度器。准备时建议结合ES6、浏览器原理、框架源码如React Fiber、Vue3响应式深入理解。实际面试中可能要求在线编码或白板画图解释事件循环、Diff算法等。可以根据目标公司如阿里偏重Node/中台、腾讯重性能、字节考算法调整侧重点。我来为您提供这些面试题的详细答案和解析。由于篇幅限制我会给出关键要点和代码示例部分题目提供完整实现。一、基础与核心概念1.事件循环机制// 执行顺序示例console.log(1);// 同步setTimeout(()console.log(2),0);// 宏任务Promise.resolve().then((){console.log(3);// 微任务setTimeout(()console.log(4),0);// 宏任务});console.log(5);// 同步// 输出顺序1 5 3 2 4核心要点调用栈同步代码执行微任务队列Promise.then、MutationObserver、queueMicrotask宏任务队列setTimeout、setInterval、I/O、UI渲染执行顺序同步代码 → 微任务队列清空 → 宏任务一个 → 微任务…2.闭包// 实用场景1模块模式/私有变量functioncreateCounter(){letcount0;// 私有变量return{increment(){count;returncount;},decrement(){count--;returncount;},getCount(){returncount;}};}// 实用场景2防抖节流functiondebounce(fn,delay){lettimernull;// 闭包保存timerreturnfunction(...args){clearTimeout(timer);timersetTimeout(()fn.apply(this,args),delay);};}// 内存泄漏风险functionleak(){constbigDatanewArray(1000000).fill(*);returnfunction(){// 即使不再使用bigData仍被引用console.log(leak);};}// 解决合理使用后手动解除引用3.this绑定// 绑定规则优先级new 显式绑定 隐式绑定 默认绑定constobj{name:obj};functionshowName(){console.log(this.name);}// 1. 默认绑定非严格模式window严格模式undefinedshowName();// 2. 隐式绑定obj.showshowName;obj.show();// obj// 3. 显式绑定showName.call(obj);// 立即执行参数逐个传递showName.apply(obj,[]);// 立即执行参数数组传递constboundFnshowName.bind(obj);// 返回新函数boundFn();// 4. new绑定functionPerson(name){this.namename;}constpnewPerson(new);// this指向新创建的对象4.深拷贝实现functiondeepClone(obj,hashnewWeakMap()){// 基础类型和函数直接返回if(objnull||typeofobj!object)returnobj;// 循环引用检测if(hash.has(obj))returnhash.get(obj);// 特殊对象处理if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);if(objinstanceofMap)returnnewMap(Array.from(obj,([k,v])[deepClone(k),deepClone(v)]));if(objinstanceofSet)returnnewSet(Array.from(obj,vdeepClone(v)));// 获取原型constprotoObject.getPrototypeOf(obj);constclonedObjproto?Object.create(proto):{};// 缓存hash.set(obj,clonedObj);// 复制属性包括Symbol键constallKeys[...Object.getOwnPropertyNames(obj),...Object.getOwnPropertySymbols(obj)];for(constkeyofallKeys){constdescriptorObject.getOwnPropertyDescriptor(obj,key);if(descriptor){if(descriptor.valuetypeofdescriptor.valueobject){clonedObj[key]deepClone(descriptor.value,hash);}else{Object.defineProperty(clonedObj,key,descriptor);}}}returnclonedObj;}5.let/const/var区别// 1. 作用域{vara1;// 函数作用域letb2;// 块级作用域constc3;// 块级作用域}console.log(a);// 1console.log(b);// ReferenceErrorconsole.log(c);// ReferenceError// 2. 变量提升console.log(d);// undefined变量提升vard1;console.log(e);// ReferenceError暂时性死区lete2;// 3. 重复声明varf1;varf2;// ✅ 允许letg1;letg2;// ❌ SyntaxError// 4. const常量必须初始化不可重新赋值consth1;h2;// ❌ TypeError// const对象属性可修改constobj{x:1};obj.x2;// ✅obj{};// ❌二、异步与性能6.并发任务调度器classScheduler{constructor(maxCount){this.maxCountmaxCount;this.running0;this.queue[];}addTask(delay,value){returnnewPromise(resolve{consttask(){returnnewPromise(res{setTimeout((){console.log(value);res();},delay);}).then((){resolve(value);this.running--;this.runNext();});};this.queue.push(task);this.runNext();});}runNext(){if(this.runningthis.maxCountthis.queue.length){consttaskthis.queue.shift();this.running;task();}}}// 使用constschedulernewScheduler(2);scheduler.addTask(1000,1).then(()console.log(任务1完成));scheduler.addTask(500,2).then(()console.log(任务2完成));scheduler.addTask(300,3).then(()console.log(任务3完成));7.Promise方法实现// Promise.allPromise.myAllfunction(promises){returnnewPromise((resolve,reject){constresults[];letcount0;promises.forEach((promise,index){Promise.resolve(promise).then(value{results[index]value;count;if(countpromises.length){resolve(results);}}).catch(reject);});if(promises.length0)resolve([]);});};// Promise.racePromise.myRacefunction(promises){returnnewPromise((resolve,reject){promises.forEach(promise{Promise.resolve(promise).then(resolve).catch(reject);});});};// Promise.allSettledPromise.myAllSettledfunction(promises){returnPromise.all(promises.map(pPromise.resolve(p).then(value({status:fulfilled,value}),reason({status:rejected,reason}))));};8.内存泄漏场景// 1. 意外全局变量functionleak1(){leak全局变量;// 忘记var/let/constthis.leak2this指向window;}// 2. 定时器未清除functionleak2(){constdatanewArray(1000000);setInterval((){console.log(data.length);// data一直被引用},1000);}// 3. 闭包滥用functionleak3(){constdatadata;returnfunction(){console.log(data);// 闭包长期持有data};}// 4. DOM引用未释放letelements{button:document.getElementById(button)};// 即使button从DOM移除elements.button仍持有引用// 5. 事件监听未移除functionleak5(){constelementdocument.createElement(div);element.addEventListener(click,(){});element.remove();// 监听器仍在内存中}9.JavaScript性能优化// 1. 代码层面// 避免全局查找functionslow(){for(leti0;iarray.length;i){}// 每次读取length}functionfast(){constlenarray.length;for(leti0;ilen;i){}}// 2. 事件委托// ❌ 每个li绑定事件document.querySelectorAll(li).forEach(li{li.addEventListener(click,handler);});// ✅ 委托到父元素document.querySelector(ul).addEventListener(click,e{if(e.target.tagNameLI)handler(e);});// 3. 防抖节流functionthrottle(fn,delay){letlastTime0;returnfunction(...args){constnowDate.now();if(now-lastTimedelay){fn.apply(this,args);lastTimenow;}};}// 4. 虚拟列表// 只渲染可见区域的列表项classVirtualList{constructor(container,itemCount,itemHeight,renderItem){this.containercontainer;this.itemCountitemCount;this.itemHeightitemHeight;this.renderItemrenderItem;this.visibleCountMath.ceil(container.clientHeight/itemHeight);this.startIndex0;this.render();container.addEventListener(scroll,this.handleScroll.bind(this));}render(){// 只渲染可见项}}10.防抖与节流// 防抖频繁触发只执行最后一次functiondebounce(fn,delay,immediatefalse){lettimernull;letisInvokedfalse;returnfunction(...args){constcontextthis;if(immediate!isInvoked){fn.apply(context,args);isInvokedtrue;}clearTimeout(timer);timersetTimeout((){if(!immediate){fn.apply(context,args);}isInvokedfalse;},delay);};}// 节流频繁触发按固定频率执行functionthrottle(fn,delay,options{}){const{leadingtrue,trailingtrue}options;lettimernull;letlastTime0;returnfunction(...args){constcontextthis;constnowDate.now();if(!lastTime!leading)lastTimenow;constremainingdelay-(now-lastTime);if(remaining0||remainingdelay){if(timer){clearTimeout(timer);timernull;}fn.apply(context,args);lastTimenow;}elseif(!timertrailing){timersetTimeout((){fn.apply(context,args);lastTimeleading?Date.now():0;timernull;},remaining);}};}// 使用场景// 防抖搜索框输入、窗口resize// 节流滚动事件、按钮频繁点击三、框架与工程化11.虚拟DOM与Diff算法// 简化的Diff实现functiondiff(oldVNode,newVNode){// 1. 节点类型不同直接替换if(oldVNode.type!newVNode.type){return{type:REPLACE,newNode:newVNode};}// 2. 文本节点更新if(typeofoldVNodestringtypeofnewVNodestring){if(oldVNode!newVNode){return{type:TEXT,content:newVNode};}returnnull;}// 3. 属性更新constpropsPatchesdiffProps(oldVNode.props,newVNode.props);// 4. 子节点DiffKey优化constchildrenPatchesdiffChildren(oldVNode.children,newVNode.children);// 5. 列表Diff策略// - 相同位置节点比较// - Key相同的节点移动// - 新增/删除节点}// React的Fiber架构核心// 1. 将递归更新改为可中断的链表遍历// 2. 时间切片将任务分成小片段执行// 3. 双缓存current树和workInProgress树12.React Hooks原理// 简化的useState实现lethookIndex0;lethookState[];functionuseState(initialState){constcurrentIndexhookIndex;if(hookState[currentIndex]undefined){hookState[currentIndex]typeofinitialStatefunction?initialState():initialState;}constsetState(newState){hookState[currentIndex]typeofnewStatefunction?newState(hookState[currentIndex]):newState;// 触发重新渲染scheduleRerender();};hookIndex;return[hookState[currentIndex],setState];}// useEffect模拟生命周期functionuseEffect(effect,deps){constcurrentIndexhookIndex;constprevDepshookState[currentIndex];consthasChanged!prevDeps||deps.some((dep,i)!Object.is(dep,prevDeps[i]));if(hasChanged){// 清理上一次的effectif(prevDepsprevDeps.cleanup){prevDeps.cleanup();}// 执行新的effectconstcleanupeffect();hookState[currentIndex]deps;hookState[currentIndex].cleanupcleanup;}hookIndex;}// 模拟生命周期useEffect((){// componentDidMountconsole.log(组件挂载);return(){// componentWillUnmountconsole.log(组件卸载);};},[]);// 空依赖数组13.Vue3响应式原理// 简化的reactive实现functionreactive(target){returnnewProxy(target,{get(obj,key,receiver){// 依赖收集track(obj,key);constresReflect.get(obj,key,receiver);// 深层响应式if(restypeofresobject){returnreactive(res);}returnres;},set(obj,key,value,receiver){constoldValueobj[key];constresultReflect.set(obj,key,value,receiver);if(oldValue!value){// 触发更新trigger(obj,key);}returnresult;}});}// 依赖收集与触发consttargetMapnewWeakMap();letactiveEffectnull;functiontrack(target,key){if(!activeEffect)return;letdepsMaptargetMap.get(target);if(!depsMap){depsMapnewMap();targetMap.set(target,depsMap);}letdepdepsMap.get(key);if(!dep){depnewSet();depsMap.set(key,dep);}dep.add(activeEffect);}functiontrigger(target,key){constdepsMaptargetMap.get(target);if(!depsMap)return;constdepdepsMap.get(key);if(dep){dep.forEach(effecteffect());}}// 副作用函数functioneffect(fn){activeEffectfn;fn();activeEffectnull;}14.Webpack Tree Shaking// ES Module支持静态分析exportconsta1;exportconstb2;// 未使用时会被摇掉exportfunctionc(){};// CommonJS动态导出不支持Tree Shakingmodule.exports{a:1,b:2};// Webpack配置优化module.exports{mode:production,// 自动开启Tree Shakingoptimization:{usedExports:true,// 标记已使用导出sideEffects:true,// package.json中配置minimize:true// 删除未使用代码}};// package.json配置{sideEffects:[*.css,// 保留CSS文件*.scss,polyfill.js]}15.Proxy双向绑定functioncreateReactive(data,callback){returnnewProxy(data,{get(target,key){returntarget[key];},set(target,key,value){constoldValuetarget[key];target[key]value;// 触发更新callback(key,oldValue,value);returntrue;}});}// 实现双向绑定classMiniVue{constructor(options){this.$optionsoptions;this.$dataoptions.data();this.observe(this.$data);this.compile(options.el);}observe(data){this.$datacreateReactive(data,(key,oldVal,newVal){// 更新视图this.updateView(key);});}compile(el){constelementdocument.querySelector(el);constnodeselement.childNodes;nodes.forEach(node{if(node.nodeType1){// 元素节点constattrsnode.attributes;Array.from(attrs).forEach(attr{if(attr.name.startsWith(v-model)){constkeyattr.value;node.valuethis.$data[key];node.addEventListener(input,e{this.$data[key]e.target.value;});}});}if(node.nodeType3){// 文本节点consttextnode.textContent;constreg/\{\{(.?)\}\}/g;if(reg.test(text)){constkeyRegExp.$1.trim();node.textContentthis.$data[key];// 创建观察者this.updateView(changedKey){if(changedKeykey){node.textContentthis.$data[key];}};}}});}}四、算法与设计16.对象扁平化functionflattenObject(obj,prefix,res{}){if(objnull||typeofobj!object){res[prefix]obj;returnres;}if(Array.isArray(obj)){for(leti0;iobj.length;i){constkeyprefix?${prefix}[${i}]:[${i}];flattenObject(obj[i],key,res);}}else{for(constkeyinobj){if(obj.hasOwnProperty(key)){constnewKeyprefix?${prefix}.${key}:key;flattenObject(obj[key],newKey,res);}}}returnres;}// 示例constobj{a:{b:{c:1},d:[2,{e:3}]},f:4};console.log(flattenObject(obj));// 输出: { a.b.c: 1, a.d[0]: 2, a.d[1].e: 3, f: 4 }17.LRU缓存classLRUCache{constructor(capacity){this.capacitycapacity;this.cachenewMap();// 保持插入顺序}get(key){if(!this.cache.has(key))return-1;constvaluethis.cache.get(key);// 移动到最新位置this.cache.delete(key);this.cache.set(key,value);returnvalue;}put(key,value){if(this.cache.has(key)){this.cache.delete(key);}elseif(this.cache.sizethis.capacity){// 删除最久未使用的Map第一个constoldestKeythis.cache.keys().next().value;this.cache.delete(oldestKey);}this.cache.set(key,value);}// 进阶版双向链表 Map O(1)/* class Node { constructor(key, value) { this.key key; this.value value; this.prev null; this.next null; } } */}// 使用constlrunewLRUCache(2);lru.put(1,1);lru.put(2,2);console.log(lru.get(1));// 1lru.put(3,3);// 移除key 2console.log(lru.get(2));// -118.深度相等比较functiondeepEqual(a,b,mapnewWeakMap()){// 1. 同一引用if(ab)returntrue;// 2. 类型不同if(typeofa!typeofb)returnfalse;// 3. null检查if(anull||bnull)returnab;// 4. 循环引用检测if(map.has(a)map.get(a)b)returntrue;map.set(a,b);// 5. 数组比较if(Array.isArray(a)Array.isArray(b)){if(a.length!b.length)returnfalse;returna.every((item,i)deepEqual(item,b[i],map));}// 6. 对象比较if(typeofaobject){constkeysAObject.keys(a);constkeysBObject.keys(b);if(keysA.length!keysB.length)returnfalse;returnkeysA.every(key{if(!keysB.includes(key))returnfalse;returndeepEqual(a[key],b[key],map);});}// 7. 特殊类型if(ainstanceofDatebinstanceofDate){returna.getTime()b.getTime();}if(ainstanceofRegExpbinstanceofRegExp){returna.toString()b.toString();}// 8. 基本类型returnab;}19.任务队列设计classTaskQueue{constructor(){this.queue[];this.priorityQueue[];this.isProcessingfalse;}// 添加普通任务enqueue(task){returnnewPromise((resolve,reject){this.queue.push({task,resolve,reject});this.process();});}// 添加优先级任务enqueuePriority(task){returnnewPromise((resolve,reject){this.priorityQueue.push({task,resolve,reject});this.process();});}asyncprocess(){if(this.isProcessing)return;this.isProcessingtrue;while(this.priorityQueue.length0||this.queue.length0){// 优先执行优先级队列constqueueItemthis.priorityQueue.length0?this.priorityQueue.shift():this.queue.shift();try{constresultawaitqueueItem.task();queueItem.resolve(result);}catch(error){queueItem.reject(error);}}this.isProcessingfalse;}}// 使用consttaskQueuenewTaskQueue();// 添加普通任务taskQueue.enqueue(()fetch(/api/data1)).then(console.log);// 添加优先级任务插队taskQueue.enqueuePriority(()fetch(/api/important)).then(console.log);20.URL参数解析functionparseUrl(url){constresult{};// 提取查询字符串constqueryStrurl.split(?)[1];if(!queryStr)returnresult;// 移除哈希部分constcleanQueryStrqueryStr.split(#)[0];// 分割参数constpairscleanQueryStr.split();pairs.forEach(pair{const[key,value]pair.split();if(!key)return;constdecodedKeydecodeURIComponent(key);constdecodedValuevalue?decodeURIComponent(value):;// 处理重复keyif(result.hasOwnProperty(decodedKey)){if(Array.isArray(result[decodedKey])){result[decodedKey].push(decodedValue);}else{result[decodedKey][result[decodedKey],decodedValue];}}else{result[decodedKey]decodedValue;}});returnresult;}// 进阶版支持复杂场景functionparseUrlAdvanced(url){consturlObjnewURL(url,window.location.origin);constparamsnewURLSearchParams(urlObj.search);constresult{};for(const[key,value]ofparams){// 处理数组参数if(key.endsWith([])){constrealKeykey.slice(0,-2);if(!result[realKey])result[realKey][];result[realKey].push(value);}// 处理对象参数如obj[key]valueelseif(key.includes([)key.includes(])){const[mainKey,nestedKey]parseBracketKey(key);if(!result[mainKey])result[mainKey]{};result[mainKey][nestedKey]value;}else{result[key]value;}}returnresult;}五、扩展问题要点前端异常监控// 1. 全局错误捕获window.addEventListener(error,(event){const{message,filename,lineno,colno,error}event;// 上报错误reportError({type:JS_ERROR,message,stack:error?.stack,position:${filename}:${lineno}:${colno}});});// 2. Promise错误window.addEventListener(unhandledrejection,(event){reportError({type:PROMISE_ERROR,reason:event.reason});});// 3. 资源加载错误window.addEventListener(error,(event){consttargetevent.target;if(target.tagName){reportError({type:RESOURCE_ERROR,tagName:target.tagName,src:target.src||target.href});}},true);// 捕获阶段// 4. SourceMap解析// 生产环境上传SourceMap到监控系统// 错误发生时解析行列号还原源代码位置URL到页面展示流程DNS解析解析域名获取IPTCP连接三次握手建立连接HTTP请求发送请求报文服务器处理返回HTML、CSS、JS文件浏览器解析HTML解析构建DOM树CSS解析构建CSSOM树JavaScript执行阻塞DOM解析遇到script标签修改DOM/CSSOM构建渲染树DOM CSSOM布局与绘制计算布局栅格化合成图层JavaScript优化建议脚本放底部或使用async/defer减少DOM操作避免重排重绘使用requestAnimationFrame动画虚拟列表优化长列表这个答案集覆盖了每个问题的核心要点建议结合具体面试需求深入某个方向。实际面试中面试官可能会追问实现细节或要求现场优化代码。